首页修改

src/views/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container home">
-    <div v-if="sysType == 1 || sysType == 3">
+    <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">
@@ -288,7 +288,6 @@
         </div>
       </div>
     </div>
-
     <el-dialog
       v-if="sysType == 1 || sysType == 3"
       title="消息提示"
@@ -611,6 +610,167 @@
         </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"
+              :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 }}</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>
 
@@ -628,6 +788,12 @@ 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",
@@ -695,8 +861,64 @@ export default {
     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",
@@ -1378,6 +1600,10 @@ export default {
   text-overflow:ellipsis;
   }
 }
+.home_stock_table:hover{
+  color: #1c84c6;
+  cursor:pointer
+}
 .home_stock_table_right {
   display: flex;
   width: 20%;