Warehouse_management_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: 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>
        <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"
              >
                <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"><p>{{ item.refno1 }}</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>
                </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"
        >
          <div slot="content" style="height: 260px">
            <div
              style="padding: 4px 15px; font-size: 14px"
              v-for="(item, index) in tableDataTwo"
              :key="index"
              :style="{
                backgroundColor: index % 2 == 0 ? '#fafbfd' : '#FFFFFF',
              }"
            >
              {{ item.noticeTitle }}
            </div>
          </div>
        </chi-card>
      </div>
      <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">
        <div style="width: 49%;float: left">
          <el-table
            :data="bookingData"
            style="width: 100%">
            <el-table-column
              prop="acc"
              align="center"
              label="船名航次">
            </el-table-column>
            <el-table-column
              prop="bcc"
              align="center"
              label="开船日期">
            </el-table-column>
            <el-table-column
              prop="caa"
              align="center"
              label="预装TEU">
            </el-table-column>
            <el-table-column
              prop="baa"
              align="center"
              label="装载TEU">
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 47%;float: right">
          <el-table
            :data="bookingData"
            style="width: 100%">
            <el-table-column
              prop="acc"
              align="center"
              label="船名航次">
            </el-table-column>
            <el-table-column
              prop="bcc"
              align="center"
              label="开船日期">
            </el-table-column>
            <el-table-column
              prop="bcc"
              align="center"
              label="到港日期">
            </el-table-column>
          </el-table>
        </div>
      </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_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"
              v-if="index < 5"
              :key="index"
            >
              <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"><p>{{ item.refno3 ? item.refno3 : item.billNo }}</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>
              </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%;height: 200px;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>
  </div>
</template>

<script>
import { queryHomeInfo } from "@/api/fleet/home";
import chiCard from "./chiCard.vue";
import {
  listCorps,
  information,
  warehouse,
  inquiry,
} from "../../src/api/index";
import Cookies from "js-cookie";
export default {
  name: "index",
  data() {
    return {
      bookingData:[
        {acc:'T00345',bcc:'2020-5-12',caa:'BUGASD',baa:'ECCC-099897'},
        {acc:'T00345',bcc:'2020-5-02',caa:'BUGASD',baa:'ECCC-099897'},
        {acc:'T00345',bcc:'2020-5-05',caa:'BUGASD',baa:'ECCC-099897'},
        {acc:'T00345',bcc:'2020-5-09',caa:'BUGASD',baa:'ECCC-099897'}
      ],
      editModel: {},
      // 版本号
      version: "3.2.1",
      select: "",
      text: "",
      dialogVisible: false,
      tableData: [],
      chart: [],
      warehouse: [],
      master: [],
      commodity: [],
      commoditytwo: [],
      name: [],
      tableDataTwo: [],
      fleetData: "",
      upperLeftCntrs: {},
      sysType: "",
      upperRights: [],
    };
  },
  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,
  },
  created() {
    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;
    });
    this.sysType = Cookies.get("sysType");
    console.log(this.sysType);
  },
  activated() {
    this.getList();
    this.warehouses();
    this.inquiry();
    this.boxDistribution()
    this.ranking()
  },
  methods: {
    //箱分布图表
    ranking() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("bookingRanking"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "订舱排名",
          left: "center",
        },
        xAxis: {
          type: 'category',
          data: ['中国国贸集团', '赛轮集团', '金宇集团', '利群集团', '中华集团', '腾讯集团', '网易公司']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      });
    },
    //箱分布图表
    boxDistribution() {
      // 基于准备好的dom，初始化echarts实例，所以只能在mounted中调用
      let myChart = this.$echarts.init(document.getElementById("distribution"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "箱分布",
          left: "center",
        },
        xAxis: {
          type: 'category',
          data: ['北京', '上海', '天津', '青岛', '深圳', '西安', '甘肃']
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: 'value'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [{
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }]
      });
    },
    goPage(id) {
      this.$router.push({
        path: "/track/cabinet",
        query: { id: id },
      });
    },
    //跳转审批页面
    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 "HWTG": {
          this.$router.push({
            path: "/business/cargoClearance",
            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;
        }
        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;
        }
        default: {
          return this.$message.error("未知错误，无状态");
        }
      }
    },
    inquiry() {
      let data = {
        actId: "",
      };
      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);
        }
      });
    },
    //查询仓库
    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: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  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;
    margin-bottom: 15px;
    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: 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;
  }
  .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;
}
</style>