lemonBeans_ui/src/views/index.vue

<template>
  <div class="app-container home" v-if="sysType==1">
    <div class="home-fleet">
      <div class="home-left">
        <chi-card title="业务看板" iconName="el-icon-s-cooperation">
          <div slot="content">
            <div class="content-top">
              <div class="content-top-left">
                <div style="display: flex; align-self: flex-start">
                  <div style="align-self: center">
                    <svg
                      t="1616396514864"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="9805"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M314.324 292.999c24.207 0.095 44.072-19.16 44.72-43.36L359.044 52.6c-0.647-24.2-20.512-43.455-44.72-43.36-23.945 0-43.36 19.415-43.36 43.36l0 197.04C271.012 273.567 290.397 292.952 314.324 292.999L314.324 292.999zM707.923 292.999c24.21 0.095 44.07-19.16 44.72-43.36L752.643 52.6c-0.65-24.2-20.51-43.455-44.72-43.36-23.945 0-43.36 19.415-43.36 43.36l0 197.04C664.563 273.584 683.978 292.999 707.923 292.999L707.923 292.999zM402.084 118.36l219.279 0 0 65.6L402.084 183.96 402.084 118.36 402.084 118.36zM878.003 118.36l-81.52 0 0 65.2 84.64 0c25.2 0.345 45.535 20.72 45.84 45.92l0 152L96.085 381.48 96.085 229.56c0.48-25.232 21-45.472 46.24-45.6l85.2 0 0-65.6-81.36 0c-63.345 0.265-114.592 51.615-114.72 114.96l0 666.558c-0.752 62.69 49.455 114.12 112.152 114.87 0.16 0 0.328 0 0.488 0.01l733.758 0c63.31-0.265 114.545-51.57 114.72-114.88L992.563 233.32C992.432 170.04 941.282 118.712 878.003 118.36L878.003 118.36zM497.929 810.758c-74.175 0.185-134.465-59.815-134.645-133.995-0.177-74.175 59.815-134.465 133.995-134.645 74.175-0.18 134.46 59.815 134.645 133.995 0 0.11 0 0.215 0 0.325C632.023 750.533 572.023 810.658 497.929 810.758L497.929 810.758 497.929 810.758z"
                        p-id="9806"
                        fill="#000000"
                      ></path>
                    </svg>
                  </div>
                  <div
                    style="
                      align-self: center;
                      font-size: 16px;
                      margin: 2px 0 0 5px;
                    "
                  >
                    新增柜数
                  </div>
                </div>
                <div
                  style="font-size: 36px; align-self: center; font-weight: 600"
                >
                  {{ upperLeftCntrs.planQuantity }}
                </div>
              </div>
              <div class="content-top-right">
                <div
                  style="
                    display: flex;
                    align-self: flex-start;
                    min-width: 120px;
                  "
                >
                  <div style="align-self: center">
                    <svg
                      t="1616400289333"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="22417"
                      width="20"
                      height="20"
                    >
                      <path
                        d="M864.425973 1023.936004 228.305731 1023.936004c-114.296856 0-130.871821-105.529404-133.111681-128.439973l-0.383976-0.575964 0.31998 0c-0.255984-2.367852-0.31998-4.031748-0.31998-4.031748l0-12.351228c-60.604212-36.093744-64.059996-115.320792-64.059996-115.320792L30.750078 126.328104C30.814074 3.967752 158.934067 0 158.934067 0l643.415787 0c64.63596 0 96.441972 38.269608 112.120992 72.63546 71.931504 28.47822 78.779076 117.496656 78.779076 117.496656l0 700.756203C993.249922 890.952315 974.56309 1023.936004 864.425973 1023.936004L864.425973 1023.936004 864.425973 1023.936004zM479.298044 256.687957l0 191.476033L222.994063 448.16399 222.994063 511.968002l256.303981 0 0 191.476033 256.303981-223.410037L479.298044 256.687957 479.298044 256.687957 479.298044 256.687957zM927.782014 129.015937l-64.059996 0 0 748.433223 0 17.470908-46.07712 0L158.934067 894.920067 158.934067 895.944003l0 62.844072 704.787951 0 64.059996 0L927.782014 129.015937 927.782014 129.015937zM927.782014 129.015937"
                        p-id="22418"
                      ></path>
                    </svg>
                  </div>
                  <div
                    style="
                      align-self: center;
                      font-size: 16px;
                      margin: 2px 0 0 5px;
                    "
                  >
                    未安排柜数
                  </div>
                </div>
                <div
                  style="font-size: 36px; align-self: center; font-weight: 600"
                >
                  {{ upperLeftCntrs.surplusQuantity }}
                </div>
              </div>
            </div>
            <div class="content-bottom">
              <div style="display: flex; align-self: flex-start">
                <div style="align-self: center">
                  <svg
                    t="1616402886142"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="31596"
                    width="24"
                    height="24"
                  >
                    <path
                      d="M55.3 594.7V851c0 11 9 20 20 20h3.1c10 0 18.3-7.4 19.8-17.2 8.3-55.3 56.1-97.8 113.7-97.8s105.4 42.4 113.7 97.8c1.5 9.9 9.8 17.2 19.8 17.2H386c11 0 20-9 20-20V407c0-11-9-20-20-20H280c-33.1 0-64.8 13.7-87.5 37.9L71.6 553.7c-10.5 11.1-16.3 25.8-16.3 41zM336 478v144c0 11-9 20-20 20H145.3c-11 0-20-9-20-20v-13.6c0-10.5 4.2-20.7 11.6-28.1l85.9-86.7c22.5-22.8 53.2-35.6 85.3-35.6h7.9c11 0 20 8.9 20 20zM467.3 257v574c0 22.1 17.9 40 40 40h175.1c10 0 18.3-7.4 19.8-17.2 8.3-55.3 56.1-97.8 113.7-97.8 63.5 0 115 51.5 115 115 20.4 0 37-16.6 37-37V257c0-22.1-17.9-40-40-40H507.3c-22.1 0-40 17.9-40 40z"
                      p-id="31597"
                    ></path>
                    <path
                      d="M213.5 797c-45.4-0.8-82.3 36.1-81.5 81.5 0.8 42.8 35.7 77.7 78.5 78.5 45.4 0.8 82.3-36.1 81.5-81.5-0.8-42.8-35.7-77.7-78.5-78.5zM817.5 797c-45.4-0.8-82.3 36.1-81.5 81.5 0.8 42.8 35.7 77.7 78.5 78.5 45.4 0.8 82.3-36.1 81.5-81.5-0.8-42.8-35.7-77.7-78.5-78.5z"
                      p-id="31598"
                    ></path>
                  </svg>
                </div>
                <div
                  style="
                    align-self: center;
                    font-size: 16px;
                    margin: 2px 0 0 5px;
                  "
                >
                  今日派车数
                </div>
              </div>
              <div
                style="font-size: 36px; align-self: center; font-weight: 600"
              >
                {{ fleetData.upperLeftCarQuantity }}
              </div>
              <div style="align-self: center; color: #409eff">派车详情></div>
            </div>
            <div class="content-bottom">
              <div
                style="display: flex; align-self: flex-start; min-width: 120px"
              >
                <div style="align-self: center">
                  <svg
                    t="1616402771353"
                    class="icon"
                    viewBox="0 0 1048 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="29149"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M880.931574 1.385265c-82.95439-11.745754-55.058223 55.058223-55.058224 55.058223l60.931101 83.6885c88.093157 106.445898-33.034934 81.486171-33.034934 81.48617-77.081513 36.705482 0 82.95439 0 82.95439h110.116447v496.99223c-49.185346 69.740416-82.95439 0-82.95439 0V470.481328a106.445898 106.445898 0 0 0-82.95439-110.116447H715.022794a34.503153 34.503153 0 0 1-27.896167-27.896166V84.339655c0-41.11014-18.352741-51.387675-54.324113-53.590004S198.209604 30.749651 135.810284 30.749651a55.058223 55.058223 0 0 0-54.324113 55.058223v828.075679c-163.706451 56.526443-27.896166 110.116447-27.896167 110.116447h690.063066c107.914118-73.410964-55.058223-110.116447-55.058223-110.116447v-440.465787l4.404658-4.404657a73.410964 73.410964 0 0 1 105.711788 4.404657v357.511397a122.596311 122.596311 0 0 0 55.058224 82.95439h110.116447a198.209604 198.209604 0 0 0 82.954389-82.95439v-660.69868zM610.045115 345.682688a34.503153 34.503153 0 0 1-34.503154 34.503154H191.602617a34.503153 34.503153 0 0 1-34.503153-34.503154V148.207194a34.503153 34.503153 0 0 1 34.503153-34.503153h383.939344a34.503153 34.503153 0 0 1 34.503154 34.503153z"
                      p-id="29150"
                    ></path>
                  </svg>
                </div>
                <div
                  style="
                    align-self: center;
                    font-size: 16px;
                    margin: 2px 0 0 5px;
                  "
                >
                  可用车辆数
                </div>
              </div>
              <div
                style="font-size: 36px; align-self: center; font-weight: 600"
              >
                {{ fleetData.upperLeftOldCarQuantity }}
              </div>
              <div style="align-self: center; color: #409eff">派车详情></div>
            </div>
          </div>
        </chi-card>
        <chi-card title="新闻公告" iconName="el-icon-s-cooperation">
          <div slot="content" style="min-height: 280px">
            <div style="padding: 5px 5px 0 5px; font-size: 16px">
              【新闻】新闻
            </div>
          </div>
        </chi-card>
      </div>
      <div class="home-right">
        <chi-card title="运输中业务" iconName="el-icon-s-order">
          <div slot="content" class="upper-right">
            <div
              style="display: flex; padding: 2px; font-size: 16px"
              v-for="(item, index) in fleetData.upperRight"
              :key="index"
            >
              <div style="width: 25%">{{ item.mblno }}</div>
              <div style="width: 20%">{{ item.carregNo }}</div>
              <div style="width: 15%">{{ item.orderStatus }}</div>
              <div
                style="
                  width: 40%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ item.corpName }}
              </div>
            </div>
          </div>
        </chi-card>
        <chi-card title="业务代办" iconName="el-icon-s-order">
          <div slot="content" class="upper-right">
            <div
              style="
                font-size: 16px;
                display: flex;
                justify-content: space-between;
              "
            >
              <div>FK221516485645</div>
              <div>运费运费运费</div>
              <div>李刚</div>
              <div>待审批</div>
              <div>2020/10/10</div>
            </div>
          </div>
        </chi-card>
        <chi-card title="审核列表" iconName="el-icon-s-order">
          <div slot="content" class="upper-right">
            <div
              style="
                font-size: 16px;
                display: flex;
                justify-content: space-between;
              "
            >
              <div>FK221516485645</div>
              <div>运费运费运费</div>
              <div>李刚</div>
              <div>待审批</div>
              <div>2020/10/10</div>
            </div>
          </div>
        </chi-card>
      </div>
    </div>
  </div>
  <div class="app-container home" v-else>
    <ul class="block">
      <li @click="jump('/business/inStock')">
        <div>
          <i
            class="el-icon-download"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>入库</p>
        </div>
      </li>
      <li @click="jump('/business/outStock')">
        <div>
          <i
            class="el-icon-upload2"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>出库</p>
        </div>
      </li>
      <li @click="jump('/basicdata/corps')">
        <div>
          <i
            class="el-icon-s-custom"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>新增用户</p>
        </div>
      </li>
      <li @click="jump('/basicdata/goods')">
        <div>
          <i
            class="el-icon-s-cooperation"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>新增商品</p>
        </div>
      </li>
      <li @click="jump('/business/stockTransfer')">
        <div>
          <i
            class="el-icon-connection"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>调拨</p>
        </div>
      </li>
      <li @click="jump('/finance/charge')">
        <div>
          <i
            class="el-icon-wallet"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>收款</p>
        </div>
      </li>
      <li @click="jump('/finance/payment')">
        <div>
          <i
            class="el-icon-money"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>付款</p>
        </div>
      </li>
      <li @click="jump('/finance/contrast')">
        <div>
          <i
            class="el-icon-s-management"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>对账</p>
        </div>
      </li>
      <li @click="jump('/business/goodsTransfer')">
        <div>
          <i
            class="el-icon-takeaway-box"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>货转</p>
        </div>
      </li>
      <li @click="jump('/agreement/agreementStorage')">
        <div>
          <i
            class="el-icon-s-order"
            style="font-size: 50px; text-align: center"
          ></i>
          <p>协议</p>
        </div>
      </li>
    </ul>
    <div style="width: 30%; float: right">
      <div style="display: flex">
        <div id="box" style="width: 100%; height: 350px"></div>

        <el-select
          v-model="select"
          slot="prepend"
          size="mini"
          :select="query()"
          placeholder="点击切换仓库"
          style="position: absolute; width: 8%; right: 1%"
        >
          <div v-for="(item, index) in warehouse" :key="index">
            <el-option
              :label="item.fName"
              :value="item.fWarehouseid"
            ></el-option>
          </div>
        </el-select>
      </div>
    </div>
    <div style="width: 100%; margin-bottom: 50px">
      <el-table
        :data="tableData"
        :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
        :cell-style="cellStyle"
        style="width: 67.5%; float: left"
      >
        <el-table-column
          prop="refno1"
          :show-overflow-tooltip="true"
          label="委托方"
        ></el-table-column>
        <el-table-column
          prop="auditItem"
          :show-overflow-tooltip="true"
          label="日期"
        >
          <template slot-scope="scope">
            <span v-if="!scope.row.auditItem">无时间</span>
            <span v-else>{{ scope.row.auditItem.slice(0, 10) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="refno3"
          :show-overflow-tooltip="true"
          label="提单号"
        ></el-table-column>
        <el-table-column
          prop="refno2"
          :show-overflow-tooltip="true"
          label="业务类型"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.refno2 === 'SJRK'">入库</span>
            <span v-else-if="scope.row.refno2 === 'SJCK'">出库</span>
            <span v-else-if="scope.row.refno2 === 'HQZY'">货转</span>
            <span v-else-if="scope.row.refno2 === 'CKDB'">调拨</span>
            <span v-else-if="scope.row.refno2 === 'CCF'">仓储费</span>
            <span v-else-if="scope.row.refno2 === 'ZYF'">作业费</span>
            <span v-else-if="scope.row.refno2 === 'SF'">收费</span>
            <span v-else-if="scope.row.refno2 === 'DZ'">对账</span>
            <span v-else-if="scope.row.refno2 === 'FF'">付费</span>
            <span v-else-if="scope.row.refno2 === 'JSCCF'">计算仓储费</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="80">
          <template slot-scope="scope">
            <span style="cursor: pointer" @click="approval(scope.row)"
              >查看详情</span
            >
          </template>
        </el-table-column>
      </el-table>
      <el-table
        :data="tableDataTwo"
        :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
        :cell-style="cellStyle"
        style="width: 30%; float: right; margin-left: 20px"
      >
        <el-table-column
          prop="noticeTitle"
          :show-overflow-tooltip="true"
          label="消息中心"
        />
        <el-table-column prop="address" label="操作" width="80">
          <template slot-scope="scope">
            <span
              @click="querytoDo(scope.row.noticeContent)"
              style="cursor: pointer"
              >查看详情</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="width: 100%; float: left; margin-top: 20px">
      <div style="display: flex">
        <div
          id="commoDity"
          style="width: 68%; height: 350px; margin-left: 40px"
        ></div>
        <div id="cargoOwner" style="width: 30%; height: 350px"></div>
      </div>
    </div>
    <el-dialog
      title="消息提示"
      :visible.sync="dialogVisible"
      width="80%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <span
        v-html="text"
        class="text"
        style="max-width: 100%; height: auto"
      ></span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { queryHomeInfo } from "@/api/fleet/home";
import chiCard from "./chiCard.vue";
import {
  listCorps,
  information,
  warehouse,
  inquiry,
} from "../../src/api/index";
export default {
  name: "index",
  data() {
    return {
      editModel: {},
      // 版本号
      version: "3.2.1",
      select: "",
      text: "",
      dialogVisible: false,
      tableData: [],
      chart: [],
      warehouse: [],
      master: [],
      commodity: [],
      commoditytwo: [],
      name: [],
      tableDataTwo: [],
      fleetData: "",
      upperLeftCntrs: {},
      sysType: "",
    };
  },
  components: {
    chiCard,
  },
  created() {
    queryHomeInfo().then((response) => {
      this.fleetData = response.data;
      this.upperLeftCntrs = response.data.upperLeftCntrs;
    });
    this.getConfigKey("sys.index.systype").then((response) => {
      this.sysType = response.msg;
    });
  },
  activated() {
    this.getList();
    this.warehouses();
    this.inquiry();
  },
  methods: {
    //跳转审批页面
    approval(row) {
      switch (row.refno2) {
        case "SJRK": {
          this.$router.push({
            path: "/business/inStock",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "SJCK": {
          this.$router.push({
            path: "/business/outStock",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "HQZY": {
          this.$router.push({
            path: "/business/goodsTransfer",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "CKDB": {
          this.$router.push({
            path: "/business/stockTransfer",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "JSCCF": {
          this.$router.push({
            path: "/business/agreement",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "CCF": {
          this.$router.push({
            path: "/agreement/agreementStorage",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "ZYF": {
          this.$router.push({
            path: "/agreement/agreementTask",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "SF": {
          this.$router.push({
            path: "/finance/charge",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "DZ": {
          this.$router.push({
            path: "/finance/contrast",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "FF": {
          this.$router.push({
            path: "/finance/payment",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        default: {
          return this.$message.error("未知错误，无状态");
        }
      }
    },
    inquiry() {
      let data = {
        actId: "",
      };
      inquiry(data).then((res) => {
        this.tableData = res.data;
      });
    },
    querytoDo(res) {
      this.dialogVisible = true;
      this.text = res;
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    firstinventory(fId) {
      console.log(this.warehouse);
      information(fId).then((response) => {
        this.chart = response.data;
        if (this.chart.whouseList.length !== 0) {
          for (let index of this.chart.corpsListWhouse) {
            this.master.push({
              name: index.fName,
              value: index.fGrossweightD,
            });
            this.name.push(index.fName);
          }
          for (let index of this.chart.goodslistWhouse) {
            this.commodity.push(index.fName);
            this.commoditytwo.push(index.fGrossweightD);
          }
          this.drawLine();
          this.drawLinetwo();
          this.commoDity();
        } else {
          this.chart = {
            corpsListWhouse: [
              {
                balance: 0,
                fCorpid: 58,
                fGrossweightD: 0,
                fName: "展示数据",
                fTotalgross: 10000,
                fWarehouseName: "展示数据",
              },
            ],
            goodslistWhouse: [
              {
                balance: 0,
                fGoodsid: 13,
                fGrossweightD: 0,
                fName: "展示商品",
                fTotalgross: 10000,
                fWarehouseName: "展示数据",
              },
            ],
            whouseList: [
              {
                fGrossweightD: 0,
                fName: "展示数据",
                fTotalgross: 10000,
                fWarehouseid: 36,
              },
            ],
          };
          for (let index of this.chart.corpsListWhouse) {
            this.master.push({
              name: index.fName,
              value: index.fGrossweightD,
            });
            this.name.push(index.fName);
          }
          for (let index of this.chart.goodslistWhouse) {
            this.commodity.push(index.fName);
            this.commoditytwo.push(index.fGrossweightD);
          }

          this.drawLine();
          this.drawLinetwo();
          this.commoDity();
        }
      });
    },
    query() {
      this.master = [];
      this.commodity = [];
      this.commoditytwo = [];
      this.name = [];
      if (this.select === "") {
        return this.select;
      } else {
        information(this.select).then((response) => {
          this.chart = response.data;
          for (let index of this.chart.corpsListWhouse) {
            this.master.push({
              name: index.fName,
              value: index.fGrossweightD,
            });
            this.name.push(index.fName);
          }
          for (let index of this.chart.goodslistWhouse) {
            this.commodity.push(index.fName);
            this.commoditytwo.push(index.fGrossweightD);
          }
          this.drawLine();
          this.drawLinetwo();
          this.commoDity();
        });
      }
    },
    jump(res) {
      this.$router.push({ path: res });
    },
    //设置单元格边框
    cellStyle({ row, column, rowIndex, columnIndex }) {
      return "border-bottom: 1px dashed rgb(223, 230, 236)";
    },
    //查询消息中心
    getList() {
      this.loading = true;
      listCorps(this.queryParams).then((response) => {
        this.tableDataTwo = response.rows;
      });
    },
    //查询仓库
    warehouses() {
      warehouse().then((response) => {
        this.warehouse = [];
        for (let index of response.rows) {
          this.warehouse.push({
            fName: index.fName,
            fWarehouseid: index.fWarehouseid,
          });
        }
        console.log(this.warehouse);
        this.firstinventory(this.warehouse[0].fWarehouseid);
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    //仓库图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("box"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.chart.whouseList[0].fName + "统计",
          subtext: "实时数据",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          bottom: 10,
          left: "center",
          data: ["空闲库容", "占用库容"],
        },
        series: [
          {
            type: "pie",
            name: "实时数据",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                label: {
                  backgroundColor: "#eee",
                  borderColor: "#777",
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: "#eee",
                      align: "center",
                    },
                    abg: {
                      backgroundColor: "#333",
                      width: "100%",
                      align: "right",
                      height: 25,
                      borderRadius: [4, 4, 0, 0],
                    },
                    Sunny: {
                      height: 30,
                      align: "left",
                    },
                    Cloudy: {
                      height: 30,
                      align: "left",
                    },
                    Showers: {
                      height: 30,
                      align: "left",
                    },
                    weatherHead: {
                      color: "#333",
                      height: 24,
                      align: "left",
                    },
                    hr: {
                      borderColor: "#777",
                      width: "100%",
                      borderWidth: 0.5,
                      height: 0,
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "left",
                    },
                    valueHead: {
                      color: "#333",
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "center",
                    },
                    rate: {
                      width: 40,
                      align: "right",
                      padding: [0, 10, 0, 0],
                    },
                    rateHead: {
                      color: "#333",
                      width: 40,
                      align: "center",
                      padding: [0, 10, 0, 0],
                    },
                  },
                },
              },
              {
                value: this.chart.whouseList[0].fGrossweightD,
                name: "占用库容",
              },
              {
                value: parseFloat(
                  this.chart.whouseList[0].fTotalgross -
                    this.chart.whouseList[0].fGrossweightD
                ).toFixed(1),
                name: "空闲库容",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    drawLinetwo() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("cargoOwner"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.chart.whouseList[0].fName + "货权方统计",
          subtext: "实时数据",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          bottom: 10,
          left: "center",
          data: this.name,
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                // show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.master,
          },
        ],
      });
    },
    commoDity() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("commoDity"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: this.chart.whouseList[0].fName + "商品统计",
          subtext: "实时数据",
          left: "center",
        },
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.commodity,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "实时状态",
            type: "bar",
            barWidth: "60%",
            data: this.commoditytwo,
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="scss">
.block {
  width: 68%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 350px;

  li:hover {
    background-color: #025184;
  }

  li:nth-child(6),
  li:nth-child(7),
  li:nth-child(8),
  li:nth-child(9),
  li:nth-child(10) {
    background-color: #2f4554;
  }

  li:nth-child(6):hover,
  li:nth-child(7):hover,
  li:nth-child(8):hover,
  li:nth-child(9):hover,
  li:nth-child(10):hover {
    background-color: #2f4454d1;
  }

  li {
    width: 18%;
    height: 150px;
    background-color: #1c84c6;
    margin-left: 10px;
    text-align: center;
    color: #ffffff;
    border-radius: 10px;
    cursor: pointer;

    div {
      margin-top: 40px;

      p {
        font-size: 20px;
      }
    }
  }
}

.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
.home-fleet {
  display: flex;
  .home-left {
    width: 40%;
    padding: 0 10px;
  }
  .home-right {
    width: 60%;
    padding: 0 10px;
  }
  .content-top {
    display: flex;
    .content-top-left {
      display: flex;
      width: 50%;
      height: 100px;
      border-bottom: 1px solid #e6ebf5;
      border-right: 1px solid #e6ebf5;
      padding: 10px;
      justify-content: space-between;
    }
    .content-top-right {
      display: flex;
      width: 50%;
      height: 100px;
      border-bottom: 1px solid #e6ebf5;
      padding: 10px;
      justify-content: space-between;
    }
  }
  .content-bottom {
    display: flex;
    height: 70px;
    border-bottom: 1px solid #e6ebf5;
    padding: 10px;
    justify-content: space-between;
  }
  .upper-right {
    padding: 10px;
    min-height: 144px;
  }
}

@media screen and (max-width: 920px) {
  .home-fleet {
    display: flex;
    flex-direction: column;
    .home-left {
      width: 100%;
    }
    .home-right {
      width: 100%;
    }
  }
}
</style>
<style>
.text img {
  max-width: 100%;
  height: auto;
}
</style>