Warehouse_management_lc_ui/src/views/index.vue

<template>
  <div class="app-container home">
    <div v-if="sysType == 1">
      <div style="display: flex; margin-bottom: 40px">
        <div style="width: 70%">
          <ul class="block" v-if="sysType == 1 || sysType == 3">
            <li @click="jump('/business/inStock')">
              <div>
                <i
                  class="el-icon-download"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>常规入库</p>
            </li>
            <li @click="jump('/business/outStock')">
              <div>
                <i
                  class="el-icon-upload2"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>常规出库</p>
            </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/goodsTransfer')">
              <div>
                <i
                  class="el-icon-takeaway-box"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>货权转移</p>
            </li>
            <li @click="jump('/business/stockTransfer')">
              <div>
                <i
                  class="el-icon-connection"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>库间调拨</p>
            </li>
            <li @click="smartScreen()" v-if="showDataCenter == 0">
              <div>
                <i
                  class="el-icon-s-order"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>数据中心</p>
            </li>
            <li @click="jump('/finance/charge')">
              <div>
                <i
                  class="el-icon-wallet"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>收款</p>
            </li>
            <li @click="jump('/finance/payment')">
              <div>
                <i
                  class="el-icon-money"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>付款</p>
            </li>
            <li @click="jump('/finance/contrast')">
              <div>
                <i
                  class="el-icon-s-management"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>对账</p>
            </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>-->
            <li @click="openDialog('inStock')">
              <div>
                <i
                  class="el-icon-s-unfold"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>快速入库</p>
            </li>
            <li @click="openDialog('outStock')">
              <div>
                <i
                  class="el-icon-s-fold"
                  style="font-size: 25px; text-align: center"
                ></i>
              </div>
              <p>快速出库</p>
            </li>
          </ul>
          <el-table
            ref="remind"
            :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
            :cell-style="cellStyle"
            :data="remindList"
            height="280"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              label="协议到期 客户"
              prop="fCorpid"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="开始日期"
              prop="fBegindate"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="结束日期"
              prop="fEnddate"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              label="类型"
              prop="fFeetypeid"
            >
              <template slot-scope="scope">
                {{ scope.row.fFeetypeid == 0 ? "仓储费协议" : "作业费协议" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 30%">
          <div style="width: 100%">
            <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>
      </div>
      <div style="display: flex; margin-bottom: 40px">
        <div style="width: 70%">
          <div>
            <div
              style="
                display: flex;
                color: #515a6e;
                font-weight: 600;
                background-color: #f8f8f9;
                height: 42.6px;
                font-size: 13px;
                justify-content: space-between;
                border-bottom: 1px dashed #dfe6ec;
              "
            >
              <div class="home_stock_table">客户</div>
              <div class="home_stock_table">日期</div>
              <div class="home_stock_table">提单号</div>
              <div class="home_stock_table">业务类型</div>
              <div class="home_stock_table_right">
                <div>操作</div>
                <el-link type="primary" @click="jump('/morePage/stock')"
                  >更多></el-link
                >
              </div>
            </div>
            <div v-if="tableData.length > 0">
              <div
                style="
                  display: flex;
                  height: 42.6px;
                  border-bottom: 1px dashed #dfe6ec;
                "
                v-for="(item, index) in tableData"
                :key="index"
                v-if="index < 5"
              >
                <div class="home_stock_table">
                  <p>{{ item.refno1 }}</p>
                </div>
                <div class="home_stock_table">
                  {{
                    item.sendTime ? item.sendTime.slice(0, 10) : item.sendTime
                  }}
                </div>
                <div class="home_stock_table" @click="approval(item)">
                  <p style="text-align: center">{{ item.refno3 }}</p>
                </div>
                <div class="home_stock_table">
                  <span v-if="item.refno2 === 'SJRK'">入库</span>
                  <span v-else-if="item.actId === 1000">费用修改</span>
                  <span v-else-if="item.refno2 === 'CDZZ'">场地直装</span>
                  <span v-else-if="item.refno2 === 'SJCK'">出库</span>
                  <span v-else-if="item.refno2 === 'HQZY'">货转</span>
                  <span v-else-if="item.refno2 === 'CKDB'">调拨</span>
                  <span v-else-if="item.refno2 === 'CCF'">仓储费</span>
                  <span v-else-if="item.refno2 === 'HWTG'">货物通关</span>
                  <span v-else-if="item.refno2 === 'ZYF'">作业费</span>
                  <span v-else-if="item.refno2 === 'SF'">收费</span>
                  <span v-else-if="item.refno2 === 'DZ'">对账</span>
                  <span v-else-if="item.refno2 === 'FF'">付费</span>
                  <span v-else-if="item.refno2 === 'JSCCF'">计算仓储费</span>
                  <span v-else-if="item.refno2 === 'KHDZ'">凯和对账</span>
                  <span v-else-if="item.refno2 === 'KHSF'">凯和收费</span>
                  <span v-else-if="item.refno2 === 'KHFF'">凯和付费</span>
                  <span v-else-if="item.refno2 === 'ApplyFP'"
                    >凯和开票申请</span
                  >
                  <span v-else-if="item.refno2 === 'KHDD'">凯和订单</span>
                  <span v-else-if="item.refno2 === 'SE'">下单配船</span>
                  <span v-else-if="item.refno2 === 'SJRKITEM'"
                    >入库明细审批</span
                  >
                  <span v-else-if="item.refno2 === 'SJCKITEM'"
                    >出库明细审批</span
                  >
                  <span v-else-if="item.refno2 === 'XGDD'">申请变更</span>
                  <span v-else-if="item.refno2 === 'XGTJ'">提交变更</span>
                  <span v-else-if="item.refno2 === 'DDSC'">申请删单</span>
                </div>
                <div class="home_stock_table" @click="approval(item)">
                  查看详情
                </div>
              </div>
            </div>
            <div
              v-else
              style="
                display: flex;
                justify-content: center;
                height: 213px;
                border-bottom: 1px solid #dfe6ec;
              "
            >
              <div style="align-self: center; color: #909399; font-size: 14px">
                暂无数据
              </div>
            </div>
          </div>
          <!-- <el-table
            :data="tableData"
            :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
            :cell-style="cellStyle"
          >
            <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 === 'HWTG'">货物通关</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> -->
        </div>
        <div style="width: 30%">
          <el-table
            :data="tableDataTwo"
            :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
            :cell-style="cellStyle"
            style="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>
      <div style="display: flex">
        <div style="width: 70%">
          <div
            id="commoDity"
            style="width: 100%; height: 350px; margin-left: 40px"
          ></div>
        </div>
        <div style="width: 30%">
          <div id="cargoOwner" style="width: 100%; height: 350px"></div>
        </div>
      </div>
    </div>
    <el-dialog
      v-if="sysType == 1 || sysType == 3"
      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 class="home-fleet" v-if="sysType == 2">
      <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: center; margin-left: 5px"
                >
                  <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;
                    color: #014da1;
                  "
                >
                  {{ upperLeftCntrs.planQuantity }}
                </div>
              </div>
              <div class="content-top-right">
                <div
                  style="
                    display: flex;
                    align-self: center;
                    min-width: 120px;
                    margin-left: 5px;
                  "
                >
                  <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;
                    color: #014da1;
                  "
                >
                  {{ upperLeftCntrs.surplusQuantity }}
                </div>
              </div>
            </div>
            <div class="content-bottom">
              <div style="display: flex; align-self: center; margin-left: 5px">
                <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;
                    width: 110px;
                  "
                >
                  今日派车数
                </div>
              </div>
              <div
                style="
                  font-size: 36px;
                  align-self: center;
                  font-weight: 600;
                  color: #014da1;
                "
              >
                {{ fleetData.upperLeftCarQuantity }}
              </div>
              <div style="align-self: center; color: #409eff">派车详情></div>
            </div>
            <div class="content-bottom">
              <div
                style="
                  display: flex;
                  align-self: center;
                  min-width: 120px;
                  margin-left: 5px;
                "
              >
                <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;
                    width: 110px;
                  "
                >
                  可用车辆数
                </div>
              </div>
              <div
                style="
                  font-size: 36px;
                  align-self: center;
                  font-weight: 600;
                  color: #014da1;
                "
              >
                {{ fleetData.upperLeftOldCarQuantity }}
              </div>
              <div style="align-self: center; color: #409eff">派车详情></div>
            </div>
          </div>
        </chi-card>
        <chi-card
          title="新闻公告"
          iconName="el-icon-s-cooperation"
          :More="true"
          @seeMore="jumpMoreNews"
        >
          <div slot="content" style="height: 260px" class="jingrun-news">
            <div
              style="padding: 4px 15px; font-size: 14px"
              v-for="(item, index) in tableDataTwo"
              :key="index"
              :style="{
                backgroundColor: index % 2 == 0 ? '#fafbfd' : '#FFFFFF',
              }"
              @click="openNewsDetails(item.noticeId)"
            >
              <span style="cursor: pointer">{{ item.noticeTitle }}</span>
            </div>
          </div>
        </chi-card>
      </div>
      <el-dialog
        title="新闻公告"
        :visible.sync="newsVisible"
        width="700px"
        v-dialogDrag
        :close-on-click-modal="false"
      >
        <h3>{{ newsDetails.noticeTitle }}</h3>
        <p class="html-box" v-html="newsDetails.noticeContent"></p>
        <span slot="footer">
          <el-button @click="newsVisible = false">关闭</el-button>
        </span>
      </el-dialog>
      <div class="home-right">
        <chi-card title="运行车辆" iconName="el-icon-s-order" :More="true">
          <div slot="content" class="upper-right">
            <div
              style="display: flex; padding: 4px 15px; font-size: 14px"
              v-for="(item, index) in upperRights"
              :key="index"
              :style="{
                backgroundColor: index % 2 == 0 ? '#fafbfd' : '#FFFFFF',
              }"
            >
              <div style="width: 30%" @click="goPage(item.id)">
                <el-link type="primary" :underline="false">{{
                  item.mblno
                }}</el-link>
              </div>
              <div style="width: 20%">{{ item.carregNo }}</div>
              <div style="width: 15%; color: #67c23a">
                {{ item.orderStatus | statusType }}
              </div>
              <div
                style="
                  width: 35%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                {{ item.corpName }}
              </div>
            </div>
          </div>
        </chi-card>
        <chi-card title="业务待办" iconName="el-icon-s-order" :More="true">
          <div slot="content" class="upper-right2">
            <div
              style="
                font-size: 14px;
                display: flex;
                margin: 4px 15px;
                border-bottom: 1px dashed #e6ebf5;
              "
            >
              <div style="width: 30%" class="single_line">FK221516485645</div>
              <div style="width: 20%" class="single_line">运费运费运费</div>
              <div style="width: 15%" class="single_line">李刚</div>
              <div style="width: 15%; color: #67c23a" class="single_line">
                待审批
              </div>
              <div style="width: 20%" class="single_line">2020/10/10</div>
            </div>
            <div style="font-size: 14px; display: flex; margin: 4px 15px">
              <div style="width: 30%" class="single_line">FK221516485645</div>
              <div style="width: 20%" class="single_line">运费运费运费</div>
              <div style="width: 15%" class="single_line">李刚</div>
              <div style="width: 15%; color: #67c23a" class="single_line">
                待审批
              </div>
              <div style="width: 20%" class="single_line">2020/10/10</div>
            </div>
          </div>
        </chi-card>
        <!--        <chi-card title="审核列表" iconName="el-icon-s-order" :More="true">-->
        <!--          <div slot="content" class="upper-right2">-->
        <!--            <div-->
        <!--              style="-->
        <!--                font-size: 14px;-->
        <!--                display: flex;-->
        <!--                margin: 4px 15px;-->
        <!--                border-bottom: 1px dashed #e6ebf5;-->
        <!--              "-->
        <!--            >-->
        <!--              <div style="width: 30%" class="single_line">FK221516485645</div>-->
        <!--              <div style="width: 20%" class="single_line">运费运费运费</div>-->
        <!--              <div style="width: 15%" class="single_line">李刚</div>-->
        <!--              <div style="width: 15%; color: #67c23a">待审批</div>-->
        <!--              <div style="width: 20%" class="single_line">2020/10/10</div>-->
        <!--            </div>-->
        <!--            <div style="font-size: 14px; display: flex; margin: 4px 15px">-->
        <!--              <div style="width: 30%" class="single_line">FK221516485645</div>-->
        <!--              <div style="width: 20%" class="single_line">运费运费运费</div>-->
        <!--              <div style="width: 15%" class="single_line">李刚</div>-->
        <!--              <div style="width: 15%; color: #67c23a" class="single_line">-->
        <!--                待审批-->
        <!--              </div>-->
        <!--              <div style="width: 20%" class="single_line">2020/10/10</div>-->
        <!--            </div>-->
        <!--          </div>-->
        <!--        </chi-card>-->
      </div>
    </div>
    <div v-if="sysType == 3">
      <div style="width: 100%">
        <div id="distribution" style="width: 100%; height: 300px"></div>
      </div>
      <div style="width: 100%; margin: 20px auto; float: left">
        <el-table :data="bookingData">
          <el-table-column prop="fName" align="center" label="船名" />
          <el-table-column prop="fNo" align="center" label="航次" />
          <el-table-column
            prop="portofloadName"
            align="center"
            label="起运港"
          />
          <el-table-column
            prop="distinationName"
            align="center"
            label="目的港"
          />
          <el-table-column prop="fWeight" align="center" label="容量TEU" />
          <el-table-column prop="boxNumber" align="center" label="实装TEU" />
          <el-table-column prop="fETD" align="center" label="预计开船">
            <template slot-scope="scope">
              <span>{{
                scope.row.fETD ? scope.row.fETD.slice(0, 10) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fETA" align="center" label="预计到港">
            <template slot-scope="scope">
              <span>{{
                scope.row.fETA ? scope.row.fETA.slice(0, 10) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fATD" align="center" label="实际开船">
            <template slot-scope="scope">
              <span>{{
                scope.row.fATD ? scope.row.fATD.slice(0, 10) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fATA" align="center" label="实际到港">
            <template slot-scope="scope">
              <span>{{
                scope.row.fATA ? scope.row.fATA.slice(0, 10) : ""
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="fDays" align="center" label="航程" />
        </el-table>
      </div>
      <div style="width: 100%">
        <div style="width: 49%; float: left">
          <div
            style="
              display: flex;
              color: #515a6e;
              font-weight: 600;
              background-color: #f8f8f9;
              height: 42.6px;
              font-size: 13px;
              justify-content: space-between;
              border-bottom: 1px dashed #dfe6ec;
            "
          >
            <div class="home_stock_table">委托方</div>
            <div class="home_stock_table">日期</div>
            <div class="home_stock_table">提单号</div>
            <div class="home_stock_table">业务类型</div>
            <div class="home_stock_table">金额</div>
            <div class="home_stock_table_right">
              <div>操作</div>
              <el-link type="primary" @click="jump('/morePage/stock')"
                >更多></el-link
              >
            </div>
          </div>
          <div v-if="tableData.length > 0">
            <div
              style="
                display: flex;
                height: 42.6px;
                border-bottom: 1px dashed #dfe6ec;
              "
              v-for="(item, index) in tableData"
              :key="index"
              v-if="index < 5"
            >
              <div class="home_stock_table">
                <p>{{ item.refno1 }}</p>
              </div>
              <div class="home_stock_table">
                {{ item.sendTime ? item.sendTime.slice(0, 10) : "" }}
              </div>
              <div class="home_stock_table" @click="approval(item)">
                <p>{{ item.refno3 }}</p>
              </div>
              <div class="home_stock_table">
                <span v-if="item.refno2 === 'SJRK'">入库</span>
                <span v-else-if="item.refno2 === 'SJCK'">出库</span>
                <span v-else-if="item.refno2 === 'HQZY'">货转</span>
                <span v-else-if="item.refno2 === 'CKDB'">调拨</span>
                <span v-else-if="item.refno2 === 'CCF'">仓储费</span>
                <span v-else-if="item.refno2 === 'HWTG'">货物通关</span>
                <span v-else-if="item.refno2 === 'ZYF'">作业费</span>
                <span v-else-if="item.refno2 === 'SF'">收费</span>
                <span v-else-if="item.refno2 === 'DZ'">对账</span>
                <span v-else-if="item.refno2 === 'FF'">付费</span>
                <span v-else-if="item.refno2 === 'JSCCF'">计算仓储费</span>
                <span v-else-if="item.refno2 === 'KHDZ'">凯和对账</span>
                <span v-else-if="item.refno2 === 'KHSF'">凯和收费</span>
                <span v-else-if="item.refno2 === 'KHFF'">凯和付费</span>
                <span v-else-if="item.refno2 === 'ApplyFP'">凯和开票申请</span>
                <span v-else-if="item.refno2 === 'KHDD'">凯和订单</span>
                <span v-else-if="item.refno2 === 'SE'">下单配船</span>
                <span v-else-if="item.refno2 === 'SJRKITEM'">入库明细审批</span>
                <span v-else-if="item.refno2 === 'SJCKITEM'">出库明细审批</span>
                <span v-else-if="item.refno2 === 'XGDD'">申请变更</span>
                <span v-else-if="item.refno2 === 'XGTJ'">提交变更</span>
                <span v-else-if="item.refno2 === 'DDSC'">申请删单</span>
                <span v-else-if="item.refno2 === 'FYBG'">费用变更</span>
              </div>
              <div class="home_stock_table">
                {{ item.amount }}
              </div>
              <div class="home_stock_table" @click="approval(item)">
                立即审批
              </div>
            </div>
          </div>
          <div
            v-else
            style="
              display: flex;
              justify-content: center;
              height: 213px;
              border-bottom: 1px solid #dfe6ec;
            "
          >
            <div style="align-self: center; color: #909399; font-size: 14px">
              暂无数据
            </div>
          </div>
        </div>
        <div style="width: 49%; float: right">
          <el-table
            :data="tableDataTwo"
            :header-cell-style="{ borderBottom: '1px dashed #dfe6ec' }"
            :cell-style="cellStyle"
            style="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>
      <div style="width: 100%; margin: 10px auto; float: left">
        <div id="bookingRanking" style="width: 100%; height: 300px"></div>
      </div>
      <div style="width: 100%; margin: 10px auto; float: left">
        <div id="bookingRankingTwo" style="width: 100%; height: 300px"></div>
      </div>
      <!--      船名航次-->
      <div style="width: 100%; margin: 10px auto; float: left">
        <div id="voyage" style="width: 100%; height: 350px"></div>
      </div>
    </div>
    <div style="width: 100%; float: left" v-if="wealthChart">
      <div id="finance" style="width: 100%; height: 600px"></div>
    </div>
    <div style="width: 100%; float: left" v-if="wealthChart">
      <div id="arrears" style="width: 100%; height: 600px"></div>
    </div>
    <!--快捷入库-->
    <fast-in-stock
      ref="fastInStock"
      v-if="fastInStockVisble"
      @closeDialog="closeInStock"
    ></fast-in-stock>
    <!--快速出库-->
    <fast-out-stock
      ref="fastOutStock"
      v-if="fastOutStockVisble"
      @closeDialog="closeOutStock"
    ></fast-out-stock>
  </div>
</template>

<script>
import { queryHomeInfo } from "@/api/fleet/home";
import chiCard from "./chiCard.vue";
import {
  listCorps,
  information,
  warehouse,
  inquiry,
  boxDistribution,
  shipDynamics,
  bookingSpace,
  locationRanking,
  getProfitData,
  remindExpirationData,
  getFeeStatistics,
  getArrearsStatistics,
} from "../../src/api/index";
import Cookies from "js-cookie";
import fastInStock from "../../src/components/fastStorage/fastInStock/index";
import fastOutStock from "../../src/components/fastStorage/fastOutStock/index";
import { getToken } from "@/utils/auth";
import { currentLogin } from "@/api/warehouseCheck";
import { getUserProfile } from "@/api/system/user";

export default {
  name: "index",
  data() {
    return {
      fastInStockVisble: false,
      fastOutStockVisble: false,
      wealthChart: false,
      bookingData: [],
      editModel: {},
      // 版本号
      version: "3.2.1",
      select: "",
      text: "",
      dialogVisible: false,
      tableData: [],
      dataList: {
        addressName: [],
        boxNumber: [],
        bookingRanking: {
          text: [],
          textTwo: [],
          data: [],
          dataTwo: [],
        },
      },
      boxCMCC: [],
      // 利润统计数据获得
      profitData: {
        xData: [],
        seriesData: [],
      },
      chart: [],
      warehouse: [],
      master: [],
      commodity: [],
      commoditytwo: [],
      name: [],
      tableDataTwo: [],
      fleetData: "",
      upperLeftCntrs: {},
      sysType: "",
      upperRights: [],
      // 新闻公告详情弹窗
      newsVisible: false,
      // 新闻公告内容
      newsDetails: {
        noticeTitle: "",
        noticeContent: "",
      },
      remindList: [],
      showDataCenter: "0",
    };
  },
  filters: {
    statusType(val) {
      switch (val) {
        case 10:
          return "车队安排";
          break;
        case 20:
          return "司机受理";
          break;
        case 30:
          return "司机出车";
          break;
        case 40:
          return "提箱";
          break;
        case 50:
          return "装卸货";
          break;
        case 60:
          return "还卸柜";
          break;
        case 70:
          return "费用确认";
          break;
        default:
          return "回单";
      }
    },
  },
  components: {
    chiCard,
    fastInStock,
    fastOutStock,
  },
  created() {
    this.getConfigKey("data_print_title").then((response) => {
      Cookies.set("companyName", response.msg);
    });
    this.getConfigKey("show.data_center").then((response) => {
      this.showDataCenter = response.msg;
    });
    this.sysType = Cookies.get("sysType");
    if (this.sysType == 2) {
      queryHomeInfo().then((response) => {
        this.fleetData = response.data;
        if (response.data.upperRight.length > 0) {
          this.upperRights = response.data.upperRight.slice(0, 10);
        }
        this.upperLeftCntrs = response.data.upperLeftCntrs;
      });
    }
    // console.log(this.sysType);
  },
  activated() {
    this.getList();
    this.warehouses();
    this.inquiry();
    if (this.sysType == 1) {
      remindExpirationData().then((res) => {
        this.remindList = res.rows;
      });
    }
    this.dataList.addressName = [];
    this.dataList.boxNumber = [];
    this.dataList.bookingRanking.text = [];
    this.dataList.bookingRanking.textTwo = [];
    this.dataList.bookingRanking.data = [];
    this.dataList.bookingRanking.dataTwo = [];
    if (Number(this.sysType) === 3) {
      let arr = [];
      boxDistribution().then((res) => {
        res.data.forEach((item) => {
          this.dataList.addressName.push(item.addressName);
          this.dataList.boxNumber.push(item.boxNumber);
          if (item.details) {
            this.boxCMCC = item.details;
          }
        });
        this.boxDistribution();
      });
      let l = 0;
      bookingSpace().then((res) => {
        res.data.forEach((item) => {
          this.dataList.bookingRanking.text.push(item.corpName);
          this.dataList.bookingRanking.data.push({
            name: item.corpName,
            type: "line",
            stack: l,
            data: [
              item.January,
              item.February,
              item.March,
              item.April,
              item.May,
              item.June,
              item.July,
              item.August,
              item.September,
              item.October,
              item.November,
              item.December,
            ],
          });
        });
        l++;
        this.ranking();
      });
      locationRanking().then((res) => {
        let i = 0;
        res.data.forEach((item) => {
          this.dataList.bookingRanking.textTwo.push(item.corpName);
          this.dataList.bookingRanking.dataTwo.push({
            name: item.corpName,
            type: "line",
            stack: i,
            data: [
              item.January,
              item.February,
              item.March,
              item.April,
              item.May,
              item.June,
              item.July,
              item.August,
              item.September,
              item.October,
              item.November,
              item.December,
            ],
          });
          i++;
        });
        this.rankingTwo();
      });
      shipDynamics().then((res) => {
        console.log(res);
        this.bookingData = res.data;
      });
      this.profitData.xData = [];
      this.profitData.seriesData = [];
      getProfitData({ pageSize: 24, pageNum: 1 }).then((res) => {
        res.rows.forEach((item) => {
          if (!item.shipsName) {
            item.shipsName = "";
          }
          if (!item.voyage) {
            item.voyage = "";
          }
          let name = item.shipsName + "-" + item.voyage;
          this.profitData.xData.push(name);
          this.profitData.seriesData.push(
            (Number(item.profit) / 10000).toFixed(2)
          );
          // this.profitData.seriesData.push(item.profit)
        });
        this.oceanVessel();
      });
    }
    getUserProfile().then((res) => {
      for (let item in res.data.roles) {
        if (
          res.data.roles[item].roleKey == "wealthStatistics" ||
          res.data.roles[item].roleKey == "admin"
        ) {
          getFeeStatistics().then((res) => {
            this.financeLine(res.data);
          });
          getArrearsStatistics().then((res) => {
            this.customerArrears(res.data);
          });
          this.wealthChart = true;
        }
      }
    });
  },
  methods: {
    // 船名航次
    oceanVessel() {
      let myChart = this.$echarts.init(document.getElementById("voyage"));
      const color = ["#EE6666", "#7DD2F3"];
      myChart.setOption({
        title: {
          text: "利润统计(前二十四)",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          orient: "vertical",
          left: "right",
          data: [],
        },
        grid: {
          // left: '10%',
          bottom: "30%",
        },
        xAxis: {
          axisLabel: {
            rotate: 40,
          },
          type: "category",
          boundaryGap: false,
          data: this.profitData.xData,
          // data: ['凯和志诚-02W1', '凯和志诚-02W2', '凯和志诚-03W3', '凯和志诚2111', '凯和志诚2110', '凯和志诚2110-4', '凯和志诚2114', '凯和志诚2116', '凯和志诚2118', '凯和志诚2118A', '凯和志诚2119N', '凯和志诚2120', '凯和志诚2122', '凯和志诚2123', '凯和志诚2124', '凯和志诚2125', '凯和志诚2127', '凯和志诚2126', '凯和志诚2128', '凯和志诚ABC', '凯和志诚2129', '凯和志诚K8101', '凯和志诚K8102', '凯和志诚K8102E',]
        },
        yAxis: {
          type: "value",
          name: "万元",
        },
        series: [
          {
            type: "line",
            smooth: false,
            data: this.profitData.seriesData,
            // data:[1000,2112,333,4444,6323,11,234]
          },
        ],
      });
    },
    //箱分布图表
    ranking() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(
        document.getElementById("bookingRanking")
      );
      // 绘制图表
      myChart.setOption({
        title: {
          text: "订舱排名(前十)",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          orient: "vertical",
          left: "right",
          data: this.dataList.bookingRanking.text,
        },
        grid: {
          left: "3%",
          right: "20%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: this.dataList.bookingRanking.data,
      });
    },
    //箱分布图表
    rankingTwo() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(
        document.getElementById("bookingRankingTwo")
      );
      // 绘制图表
      myChart.setOption({
        title: {
          text: "应收款排名(前十)",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          orient: "vertical",
          left: "right",
          data: this.dataList.bookingRanking.textTwo,
        },
        grid: {
          left: "3%",
          right: "20%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: this.dataList.bookingRanking.dataTwo,
      });
    },
    //箱分布图表
    boxDistribution() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("distribution"));
      // 绘制图表
      let _this = this;
      myChart.setOption({
        title: {
          text: "箱分布",
          left: "center",
        },
        xAxis: {
          type: "category",
          data: this.dataList.addressName,
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let res = "";
            params.forEach((item) => {
              if (item.name == "在船") {
                params.forEach((item) => {
                  let data = "";
                  if (_this.boxCMCC.length > 0) {
                    _this.boxCMCC.forEach((e) => {
                      data += e.f_vsl + ":" + e.f_voy + "</br>";
                    });
                  } else {
                    data = "-" + "</br>";
                  }
                  res =
                    item.axisValueLabel +
                    "</br>" +
                    data +
                    item.marker +
                    item.data;
                });
              } else {
                params.forEach((item) => {
                  res = item.axisValueLabel + "</br>" + item.marker + item.data;
                });
              }
            });
            return res;
          },
        },
        yAxis: {
          type: "value",
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        series: [
          {
            data: this.dataList.boxNumber,
            type: "line",
          },
        ],
      });
    },
    goPage(id) {
      this.$router.push({
        path: "/track/cabinet",
        query: { id: id },
      });
    },
    //跳转审批页面
    approval(row) {
      console.log(row);
      switch (row.refno2) {
        case "CDZZ": {
          this.$router.push({
            path: "/business/inAndOutStock",
            query: { id: row.billId },
          });
          break;
        }
        case "FYBG": {
          if (this.sysType == 1) {
            this.$router.push({
              path: "/business/costModify",
              query: { id: row.billId },
            });
          } else if (this.sysType == 3) {
            this.$router.push({
              path: "/domesticTrade/costModify",
              query: { id: row.billId },
            });
          }
          break;
        }
        case "SJRK": {
          this.$router.push({
            path: "/business/inStock",
            query: { id: row.billId },
          });
          break;
        }
        case "SJCK": {
          this.$router.push({
            path: "/business/outStock",
            query: { id: row.billId },
          });
          break;
        }
        case "HQZY": {
          this.$router.push({
            path: "/business/goodsTransfer",
            query: { id: row.billId },
          });
          break;
        }
        case "CKDB": {
          this.$router.push({
            path: "/business/stockTransfer",
            query: { id: row.billId },
          });
          break;
        }
        case "HWTG": {
          this.$router.push({
            path: "/business/cargoClearance",
            query: { id: row.billId },
          });
          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;
        }
        case "ApplyFP": {
          this.$router.push({
            path: "/finance/chargeInvoice",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "KHDZ": {
          this.$router.push({
            path: "/finance/contrast",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "KHSF": {
          this.$router.push({
            path: "/finance/charge",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "KHFF": {
          this.$router.push({
            path: "/finance/payment",
            query: { data: JSON.stringify(row) },
          });
          break;
        }
        case "KHDD": {
          this.$router.push({
            path: "/domesticTrade/orderInformation",
            query: { list: JSON.stringify(row) },
          });
          break;
        }
        case "SJRKITEM": {
          this.$router.push({
            path: "/business/inStock",
            query: { id: row.billId },
          });
          break;
        }
        case "SJCKITEM": {
          this.$router.push({
            path: "/business/outStock",
            query: { id: row.billId },
          });
          break;
        }

        case "XGDD": {
          this.$router.push({
            path: "/domesticTrade/orderInformation",
            query: { testing: JSON.stringify(row) },
          });
          break;
        }
        case "XGTJ": {
          this.$router.push({
            path: "/domesticTrade/orderInformation",
            query: { testing: JSON.stringify(row) },
          });
          break;
        }
        case "DDSC": {
          this.$router.push({
            path: "/domesticTrade/orderInformation",
            query: { testing: JSON.stringify(row) },
          });
          break;
        }
        default: {
          return this.$message.error("未知错误，无状态");
        }
      }
    },
    inquiry() {
      let data = {
        actId: "",
        auditStatus: "S",
      };
      inquiry(data).then((res) => {
        res.data.map((e) => {
          if (e.auditItem) {
            e.auditItem = e.auditItem.slice(0, 10);
          }
        });
        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) => {
        if (response.rows.length > 0) {
          // this.tableDataTwo = response.rows.slice(0, 10);
          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");
    },
    //财务图表
    financeLine(data) {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("finance"));
      // 绘制图表
      myChart.setOption({
        legend: {
          left: "10%",
          top: "4%",
        },
        title: {
          text: "利润分析",
          left: "center",
          subtext: "实时数据",
        },
        tooltip: {},
        color: ["#5470c6", "#92cc75", "#fac858"],
        dataset: data,
        xAxis: { type: "category" },
        yAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              formatter: "{value} 万元",
            },
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
            },
          },
          {
            type: "bar",
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
            },
          },
          {
            type: "bar",
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
            },
          },
        ],
      });
    },
    customerArrears(data) {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("arrears"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: "欠款排行",
          left: "center",
          subtext: "实时数据",
        },
        color: ["#3298db"],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: data.key,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            axisLabel: {
              formatter: "{value} 万元",
            },
          },
        ],
        series: [
          {
            name: "欠款",
            type: "bar",
            barWidth: "60%",
            data: data.value,
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
            },
          },
        ],
      });
    },
    //仓库图表
    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,
          },
        ],
      });
    },
    smartScreen() {
      currentLogin().then((res) => {
        const role = res.data.roles.some(
          (item) => item.roleKey == "admin" || item.roleKey == "IDC"
        );
        if (role) {
          this.getConfigKey("large.screen").then((response) => {
            if (response.msg) {
              window.open(
                "http://119.3.74.195:9527/view/" +
                  response.msg +
                  "?Authorization=" +
                  getToken()
              );
            } else {
              return this.$message.warning("模板开发中");
            }
          });
        } else {
          this.$message.warning("您无此权限查看面板");
        }
      });
    },
    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,
            label: {
              show: true,
              position: "top",
              valueAnimation: true,
            },
          },
        ],
      });
    },
    openNewsDetails(id) {
      this.tableDataTwo.forEach((item) => {
        if (item.noticeId === id) {
          this.newsDetails.noticeTitle = item.noticeTitle;
          this.newsDetails.noticeContent = item.noticeContent;
        }
      });
      this.newsVisible = true;
    },
    // 跳转到更多公告页面
    jumpMoreNews() {
      this.$router.push({
        path: "/notice/seeMore",
      });
    },
    // 弹窗
    openDialog(name) {
      if (name == "inStock") {
        this.fastInStockVisble = true;
        this.$nextTick(() => {
          this.$refs.fastInStock.init();
        });
      }
      if (name === "outStock") {
        // this.$message.warning('模块开发中')
        this.fastOutStockVisble = true;
        this.$nextTick(() => {
          this.$refs.fastOutStock.init();
        });
      }
    },
    // 关闭
    closeInStock() {
      this.fastInStockVisble = false;
    },
    closeOutStock() {
      this.fastOutStockVisble = false;
    },
  },
};
</script>

<style scoped lang="scss">
.block {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  li div:hover {
    background-color: #025184;
  }

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

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

  li {
    width: 8%;
    margin-left: 10px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 15px;
    div {
      //margin-top: 18px;
      background-color: #1c84c6;
      color: #ffffff;
      border-radius: 10px;
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    p {
      font-size: 10px;
    }
  }
}

.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: 81px;
    border-bottom: 1px solid #e6ebf5;
    padding: 10px;
    justify-content: space-between;
  }
  .content-bottom:last-child {
    border-bottom: 0px;
  }
  .upper-right {
    padding: 10px 0;
    //height: 260px;
    height: 417px;
  }
  .upper-right2 {
    padding: 10px 0;
    height: 104px;
  }
}
.single_line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (max-width: 920px) {
  .home-fleet {
    display: flex;
    flex-direction: column;
    .home-left {
      width: 100%;
    }
    .home-right {
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.text img {
  max-width: 100%;
  height: auto;
}
.home_stock_table {
  display: flex;
  width: 20%;
  justify-content: center;
  align-self: center;
  p {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.home_stock_table:hover {
  color: #1c84c6;
  cursor: pointer;
}
.home_stock_table_right {
  display: flex;
  width: 20%;
  justify-content: space-around;
  align-self: center;
}
.jingrun-news {
  overflow: auto;
}
.html-box p {
  width: 100%;
}
.html-box p img {
  display: block;
  margin: 0 auto;
  max-width: 100% !important;
}
</style>