From b6e8a59359ab0e43b208fcb7280c3bf5a515a0d1 Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Thu, 26 Jun 2025 17:51:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/config/mork01.js         | 141 +++++++++
 src/pages/modules/index2.vue | 567 ++++++++++-------------------------
 2 files changed, 301 insertions(+), 407 deletions(-)
 create mode 100644 src/config/mork01.js

diff --git a/src/config/mork01.js b/src/config/mork01.js
new file mode 100644
index 0000000..05518f9
--- /dev/null
+++ b/src/config/mork01.js
@@ -0,0 +1,141 @@
+/* eslint-disable */
+export const synthesizeInfo = () => {
+    let res = {
+        "inAndOutTrend": {
+            "in": [
+                {
+                    "date": "11-13",
+                    "qty": "400.000"
+                },
+                {
+                    "date": "11-12",
+                    "qty": "0"
+                },
+                {
+                    "date": "11-11",
+                    "qty": "220"
+                },
+                {
+                    "date": "11-10",
+                    "qty": "0"
+                },
+                {
+                    "date": "11-09",
+                    "qty": "0"
+                },
+                {
+                    "date": "11-08",
+                    "qty": "100"
+                },
+                {
+                    "date": "11-07",
+                    "qty": "0"
+                }
+            ],
+            "out": [
+                {
+                    "date": "11-13",
+                    "qty": "0"
+                },
+                {
+                    "date": "11-12",
+                    "qty": "0"
+                },
+                {
+                    "date": "11-11",
+                    "qty": "120"
+                },
+                {
+                    "date": "11-10",
+                    "qty": "0"
+                },
+                {
+                    "date": "11-09",
+                    "qty": "60"
+                },
+                {
+                    "date": "11-08",
+                    "qty": "80"
+                },
+                {
+                    "date": "11-07",
+                    "qty": "0"
+                }
+            ]
+        },
+        "pointUse": {
+            "total_qty": 960,
+            "use_qty": 5,
+            "emp_qty": 955,
+            "use_percentage": "0.52%"
+        },
+        "toDayInAndOut":{
+            "in": {
+                "total_qty": 4400,
+                "vehicle_qty": 1119
+            },
+            "out": {
+                "total_qty": 220,
+                "vehicle_qty": 20
+            }
+        },
+        "ivtAnalyse": {
+            "total_qty": 15800.000,
+            "data": [
+                {
+                    "ivt_qty": 12000.000,
+                    "material_name": "测试物料",
+                    "percentage": "75.95%"
+                },
+                {
+                    "ivt_qty": 2000.000,
+                    "material_name": "A345度等径承插口弯头45CCL1 1/8USNA0131010TH",
+                    "percentage": "12.66%"
+                },
+                {
+                    "ivt_qty": 1500.000,
+                    "material_name": "A345度等径承插口弯头45CCL1 5/8USNA0131014",
+                    "percentage": "9.49%"
+                },
+                {
+                    "ivt_qty": 300.000,
+                    "material_name": "A345度等径承插口弯头45CCL1 5/8USNA0131014TH",
+                    "percentage": "1.90%"
+                },
+                {
+                    "ivt_qty": 1500.000,
+                    "material_name": "A345度等径承插口弯头45CCL1 5/8USNA0131014",
+                    "percentage": "9.49%"
+                },
+                {
+                    "ivt_qty": 300.000,
+                    "material_name": "A345度等径承插口弯头45CCL1 5/8USNA0131014TH",
+                    "percentage": "1.90%"
+                }
+            ]
+        },
+        "realTask": [
+            {
+                "task_code": 'rw001',
+                "point_code1": "dw-1-1",
+                "point_code2": "dw-2-2",
+                "vehicle_code": "vc123123",
+                "task_status": "生成"
+            },
+        ],
+        "unIos": [
+            {
+                "bill_code": 'dj001',
+                "io_type": "入库",
+                "bill_type": "待定",
+                "biz_date": "2025-03-28",
+                "stor_name": "仓库1",
+                "total_qty": "100",
+                "detail_count": "60",
+                "source_id": "ydh0001",
+                "bill_status": "生成"
+            },
+        ]
+    }
+    return res
+}
diff --git a/src/pages/modules/index2.vue b/src/pages/modules/index2.vue
index 1e3537a..0b70f52 100644
--- a/src/pages/modules/index2.vue
+++ b/src/pages/modules/index2.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="box relative">
-    <t-header type="1" title1="仓储监控" title2="北安集团WMS仓储看板"></t-header>
+    <t-header type="1" title1="仓储监控" title2="北安WMS仓储看板"></t-header>
     <div class="box body_container">
       <div class="relative b_title">
         <span class="absolute sj_icon"></span>
@@ -16,20 +16,20 @@
             <p class="title">货位使用</p>
             <div class="zd-row wraper_4">
               <div class="box percent_item">
-                <p>{{ lx_used.percent }}</p>
+                <p>{{ pointUse.use_percentage }}</p>
               </div>
               <div class="box zd-col-16 zd-row flexcol jccenter">
                 <div class="zd-row mgb8">
                   <p class="zd-col-8 item_label">总货位数</p>
-                  <p class="zd-col-16 item_value">{{ lx_used.total }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-16 item_value">{{ pointUse.total_qty }}<span class="item_unit">个</span></p>
                 </div>
                 <div class="zd-row mgb8">
                   <p class="zd-col-8 item_label">已用货位</p>
-                  <p class="zd-col-16 item_value">{{ lx_used.used }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-16 item_value">{{ pointUse.use_qty }}<span class="item_unit">个</span></p>
                 </div>
                 <div class="zd-row">
                   <p class="zd-col-8 item_label">空余货位</p>
-                  <p class="zd-col-16 item_value">{{ lx_used.free }}<span class="item_unit">个</span></p>
+                  <p class="zd-col-16 item_value">{{ pointUse.emp_qty }}<span class="item_unit">个</span></p>
                 </div>
               </div>
             </div>
@@ -40,17 +40,16 @@
             <div class="absolute bg_j bg_j_3"></div>
             <div class="absolute bg_j bg_j_4"></div>
             <p class="title">今日出入库</p>
-            <div v-if="lx_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
+            <div class="wraper_4 zd-row flexcol jccenter">
               <div class="zd-row flexstart mgb8">
                 <div class="zd-col-3 item_label">入库</div>
                 <div class="zd-col-21">
                   <div class="percent_line">
-                    <div class="percent_i" :style="{'width': getPercentage(lx_task[0].box, lx_task[0].total)}"></div>
+                    <div class="percent_i" :style="{'width': inw}"></div>
                   </div>
                   <div class="zd-row">
-                    <p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[0].total }}</span></p>
-                    <p class="item_label font_2">箱数:<span class="c_y">{{ lx_task[0].box }}</span>箱</p>
-                    <p class="item_label font_2">时间评估:<span class="c_y">{{ lx_task[0].time }}</span></p>
+                    <p class="item_label font_2">总数量:<span class="c_y">{{ inqty1 }}</span></p>
+                    <p class="item_label font_2">箱数:<span class="c_y">{{ inqty2 }}</span>箱</p>
                   </div>
                 </div>
               </div>
@@ -58,12 +57,11 @@
                 <div class="zd-col-3 item_label">出库</div>
                 <div class="zd-col-21">
                   <div class="percent_line percent_line_c">
-                    <div class="percent_i percent_i_c" :style="{'width': getPercentage(lx_task[1].box, lx_task[1].total)}"></div>
+                    <div class="percent_i percent_i_c" :style="{'width': outw}"></div>
                   </div>
                   <div class="zd-row">
-                    <p class="item_label font_2">总数量:<span class="c_y">{{ lx_task[1].total }}</span></p>
-                    <p class="item_label font_2">箱数:<span class="c_y">{{ lx_task[1].box }}</span>箱</p>
-                    <p class="item_label font_2">时间评估:<span class="c_y">{{ lx_task[1].time }}</span></p>
+                    <p class="item_label font_2">总数量:<span class="c_y">{{ outqty1 }}</span></p>
+                    <p class="item_label font_2">箱数:<span class="c_y">{{ outqty2 }}</span>箱</p>
                   </div>
                 </div>
               </div>
@@ -82,13 +80,13 @@
                 <div ref="echartsRef1" style="width: 100%; height: 100%;"></div>
               </div>
               <div class="box zd-col-16 zd-row flexwrap jcflexstart aligncenter flexstart">
-                <div class="zd-col-12 zd-row flexstart pie_item_wrap" v-for="(e, i) in lx_inventory.slice(1)" :key="i">
+                <div class="zd-col-12 zd-row flexstart pie_item_wrap" v-for="(e, i) in lx_inventory.data" :key="i">
                   <div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
                   <div class="zd-col-21">
-                    <p class="pie_legend_txt_1">{{ e.name }}</p>
+                    <p class="pie_legend_txt_1">{{ e.material_name }}</p>
                     <div class="zd-row jcflexstart">
-                      <p class="pie_legend_txt_2">{{ e.qty }}</p>
-                      <p class="pie_legend_txt_3">{{ e.percent }}</p>
+                      <p class="pie_legend_txt_2">{{ e.ivt_qty }}</p>
+                      <p class="pie_legend_txt_3">{{ e.percentage }}</p>
                     </div>
                   </div>
                 </div>
@@ -114,104 +112,73 @@
         <p>托盘库监控</p>
       </div>
       <div class="zd-row wraper_1">
-        <div class="box zd-col-7 mgr8">
-          <div class="relative wraper_2 mgb8">
-            <div class="absolute bg_j bg_j_1"></div>
-            <div class="absolute bg_j bg_j_2"></div>
-            <div class="absolute bg_j bg_j_3"></div>
-            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">货位使用</p>
-            <div class="zd-row wraper_4">
-              <div class="box percent_item">
-                <p>{{ tp_used.percent }}</p>
-              </div>
-              <div class="box zd-col-16 zd-row flexcol jccenter">
-                <div class="zd-row mgb8">
-                  <p class="zd-col-8 item_label">总货位数</p>
-                  <p class="zd-col-16 item_value">{{ tp_used.total }}<span class="item_unit">个</span></p>
-                </div>
-                <div class="zd-row mgb8">
-                  <p class="zd-col-8 item_label">已用货位</p>
-                  <p class="zd-col-16 item_value">{{ tp_used.used }}<span class="item_unit">个</span></p>
-                </div>
-                <div class="zd-row">
-                  <p class="zd-col-8 item_label">空余货位</p>
-                  <p class="zd-col-16 item_value">{{ tp_used.free }}<span class="item_unit">个</span></p>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="relative wraper_2">
-            <div class="absolute bg_j bg_j_1"></div>
-            <div class="absolute bg_j bg_j_2"></div>
-            <div class="absolute bg_j bg_j_3"></div>
-            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">今日出入库</p>
-            <div v-if="tp_task.length > 1" class="wraper_4 zd-row flexcol jccenter">
-              <div class="zd-row flexstart mgb8">
-                <div class="zd-col-3 item_label">入库</div>
-                <div class="zd-col-21">
-                  <div class="percent_line">
-                    <div class="percent_i" :style="{'width': getPercentage(tp_task[0].box, tp_task[0].total)}"></div>
-                  </div>
-                  <div class="zd-row">
-                    <p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[0].total }}</span></p>
-                    <p class="item_label font_2">箱数:<span class="c_y">{{ tp_task[0].box }}</span>箱</p>
-                    <p class="item_label font_2">时间评估:<span class="c_y">{{ tp_task[0].time }}</span></p>
-                  </div>
-                </div>
-              </div>
-              <div class="zd-row flexstart">
-                <div class="zd-col-3 item_label">出库</div>
-                <div class="zd-col-21">
-                  <div class="percent_line percent_line_c">
-                    <div class="percent_i percent_i_c" :style="{'width': getPercentage(tp_task[1].box, tp_task[1].total)}"></div>
-                  </div>
-                  <div class="zd-row">
-                    <p class="item_label font_2">总数量:<span class="c_y">{{ tp_task[1].total }}</span></p>
-                    <p class="item_label font_2">箱数:<span class="c_y">{{ tp_task[1].box }}</span>箱</p>
-                    <p class="item_label font_2">时间评估:<span class="c_y">{{ tp_task[1].time }}</span></p>
-                  </div>
-                </div>
+        <div class="relative wraper_1 wraper_3 wraper_5 mgr8">
+          <div class="absolute bg_j bg_j_1"></div>
+          <div class="absolute bg_j bg_j_2"></div>
+          <div class="absolute bg_j bg_j_3"></div>
+          <div class="absolute bg_j bg_j_4"></div>
+          <p class="title">实时任务</p>
+          <div class="zd-row wraper_6">
+            <div class="box scroll_wrap">
+              <ul class="scroll_tab_1 scroll_tab_2">
+                <li>任务编码</li>
+                <li>任务起点</li>
+                <li>任务终点</li>
+                <li>载具编码</li>
+                <li>任务状态</li>
+              </ul>
+              <div class="scroll_container_0">
+                <vue-seamless-scroll :data="taskList" :class-option="defaultOption1">
+                  <ul class="scroll-ul_1">
+                    <li v-for="(e, i) in taskList" :key="i">
+                      <div class="scroll-ul_1_div">{{e.task_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.point_code1}}</div>
+                      <div class="scroll-ul_1_div">{{e.point_code2}}</div>
+                      <div class="scroll-ul_1_div">{{e.vehicle_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.task_status}}</div>
+                    </li>
+                  </ul>
+                </vue-seamless-scroll>
               </div>
             </div>
           </div>
         </div>
-        <div class="box zd-col-10 mgr8">
-          <div class="relative wraper_2 wraper_3">
-            <div class="absolute bg_j bg_j_1"></div>
-            <div class="absolute bg_j bg_j_2"></div>
-            <div class="absolute bg_j bg_j_3"></div>
-            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">实时库存分析</p>
-            <div class="zd-row wraper_4">
-              <div class="box zd-col-8 mgr8">
-                <div ref="echartsRef3" style="width: 100%; height: 100%;"></div>
+        <div class="relative wraper_1 wraper_3 wraper_5">
+          <div class="absolute bg_j bg_j_1"></div>
+          <div class="absolute bg_j bg_j_2"></div>
+          <div class="absolute bg_j bg_j_3"></div>
+          <div class="absolute bg_j bg_j_4"></div>
+          <p class="title">未完成单据</p>
+          <div class="zd-row wraper_6">
+            <div class="box scroll_wrap">
+              <ul class="scroll_tab_1 scroll_tab_3">
+                <li>单据编码</li>
+                <li>出入类型</li>
+                <li>单据类型</li>
+                <li>业务日期</li>
+                <li>仓库</li>
+                <li>总数量</li>
+                <li>明细数</li>
+                <li>源单号</li>
+                <li>单据状态</li>
+              </ul>
+              <div class="scroll_container_0">
+                <vue-seamless-scroll :data="billList" :class-option="defaultOption1">
+                  <ul class="scroll-ul_1 scroll-ul_2">
+                    <li v-for="(e, i) in billList" :key="i">
+                      <div class="scroll-ul_1_div">{{e.bill_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.io_type}}</div>
+                      <div class="scroll-ul_1_div">{{e.bill_type}}</div>
+                      <div class="scroll-ul_1_div">{{e.biz_date}}</div>
+                      <div class="scroll-ul_1_div">{{e.stor_name}}</div>
+                      <div class="scroll-ul_1_div">{{e.total_qty}}</div>
+                      <div class="scroll-ul_1_div">{{e.detail_count}}</div>
+                      <div class="scroll-ul_1_div">{{e.source_id}}</div>
+                      <div class="scroll-ul_1_div">{{e.bill_status}}</div>
+                    </li>
+                  </ul>
+                </vue-seamless-scroll>
               </div>
-              <div class="box zd-col-16 zd-row flexwrap jcflexstart aligncenter flexstart">
-                <div class="zd-col-11 zd-row flexstart" v-for="(e, i) in tp_inventory.slice(1)" :key="i">
-                  <div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][i]}"></div>
-                  <div class="zd-col-21">
-                    <p class="pie_legend_txt_1">{{ e.name }}</p>
-                    <div class="zd-row jcflexstart">
-                      <p class="pie_legend_txt_2">{{ e.qty }}</p>
-                      <p class="pie_legend_txt_3">{{ e.percent }}</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div class="box zd-col-7">
-          <div class="relative wraper_2 wraper_3">
-            <div class="absolute bg_j bg_j_1"></div>
-            <div class="absolute bg_j bg_j_2"></div>
-            <div class="absolute bg_j bg_j_3"></div>
-            <div class="absolute bg_j bg_j_4"></div>
-            <p class="title">出入库趋势</p>
-            <div class="zd-row wraper_4">
-              <div ref="echartsRef4" style="width: 100%; height: 100%;"></div>
             </div>
           </div>
         </div>
@@ -222,7 +189,8 @@
 
 <script>
 import THeader from '@components/header.vue'
-import { synthesizeInfo } from '@js/getData2.js'
+// import { synthesizeInfo } from '@js/getData2.js'
+import { synthesizeInfo } from '@js/mork01.js'
 export default {
   components: {
     THeader
@@ -235,18 +203,34 @@ export default {
       historyList: [],
       myChart1: null,
       myChart2: null,
-      myChart3: null,
       myChart4: null,
+      taskList: [],
+      billList: [],
       lx_in_week: [], // 料箱库入库趋势
       lx_out_week: [], // 料箱库出库趋势
-      tp_in_week: [], // 托盘库入库趋势
-      tp_out_week: [], // 托盘库出库趋势
       lx_inventory: [], // 料箱实时库存
-      tp_inventory: [], // 托盘实时库存
-      lx_used: {}, // 料箱货位使用
-      tp_used: {}, // 托盘库货位使用
-      lx_task: [], // 料箱今日出入库
-      tp_task: [] // 托盘库今日出入库
+      pointUse: {}, // 料箱货位使用
+      toDayInAndOut: {}, // 料箱今日出入库
+      inw: '0',
+      inqty1: '0',
+      inqty2: '0',
+      outw: '0',
+      outqty1: '0',
+      outqty2: '0'
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.3, // 数值越大速度滚动越快
+        limitMoveNum: 55, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 5000 // 单步运动停止的时间(默认值1000ms)
+      }
     }
   },
   created () {
@@ -256,8 +240,6 @@ export default {
   mounted () {
     this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
     this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
-    this.myChart3 = this.$echarts.init(this.$refs.echartsRef3)
-    this.myChart4 = this.$echarts.init(this.$refs.echartsRef4)
   },
   destroyed () {
     if (this.intervalId !== null) {
@@ -272,14 +254,6 @@ export default {
       this.myChart2.dispose()
       this.myChart2 = null
     }
-    if (this.myChart3 !== null) {
-      this.myChart3.dispose()
-      this.myChart3 = null
-    }
-    if (this.myChart4 !== null) {
-      this.myChart4.dispose()
-      this.myChart4 = null
-    }
   },
   methods: {
     getPercentage (part, whole) {
@@ -301,31 +275,34 @@ export default {
     },
     async _synthesizeInfo () {
       let res = await synthesizeInfo()
-      this.lx_used = res.lx_used
-      this.tp_used = res.tp_used
-      this.lx_in_week = [...res.lx_in_week]
-      this.lx_out_week = [...res.lx_out_week]
-      this.lx_task = [...res.lx_task]
-      this.tp_task = [...res.tp_task]
-      this.tp_in_week = [...res.tp_in_week]
-      this.tp_out_week = [...res.tp_out_week]
-      this.lx_inventory = [...res.lx_inventory]
-      this.tp_inventory = [...res.tp_inventory]
+      this.pointUse = res.pointUse
+      this.toDayInAndOut = res.toDayInAndOut
+      this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
+      this.inqty1 = this.toDayInAndOut.in.total_qty
+      this.inqty2 = this.toDayInAndOut.in.vehicle_qty
+      this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
+      this.outqty1 = this.toDayInAndOut.out.total_qty
+      this.outqty2 = this.toDayInAndOut.out.vehicle_qty
+      this.lx_in_week = [...res.inAndOutTrend.in]
+      this.lx_out_week = [...res.inAndOutTrend.out]
+      this.lx_inventory = res.ivtAnalyse
+      this.taskList = [...res.realTask]
+      this.billList = [...res.unIos]
       this.setEchart1()
       this.setEchart2()
-      this.setEchart3()
-      this.setEchart4()
+      // this.setEchart3()
+      // this.setEchart4()
     },
     setEchart1 () {
       let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
       let colorListIn = ['rgba(15, 45, 115,  .1)', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
       let colorListOut = ['#1980EA', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)']
-      let seriesData = this.lx_inventory.slice(1)
+      let seriesData = this.lx_inventory.data
       seriesData.map(el => {
-        el.value = el.qty
-        el.name = el.name
+        el.value = el.ivt_qty
+        el.name = el.material_name
       })
-      let total = this.lx_inventory[0].total
+      let total = this.lx_inventory.total_qty
       let option = {
         color: colors,
         grid: {
@@ -449,11 +426,11 @@ export default {
       let barData1 = []
       let barData2 = []
       this.lx_in_week.map(el => {
-        barData1.push(el.total_qty)
+        barData1.push(el.qty)
       })
       this.lx_out_week.map(el => {
         barName.push(el.date)
-        barData2.push(el.total_qty)
+        barData2.push(el.qty)
       })
       let option = {
         grid: {
@@ -575,265 +552,6 @@ export default {
         ]
       }
       this.myChart2.setOption(option, true)
-    },
-    setEchart3 () {
-      let colors = ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
-      let colorListIn = ['rgba(15, 45, 115,  .1)', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad']
-      let colorListOut = ['#1980EA', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)', 'rgba(15, 45, 115,  .1)']
-      let seriesData = this.tp_inventory.slice(1)
-      seriesData.map(el => {
-        el.value = el.qty
-        el.name = el.name
-      })
-      let total = this.tp_inventory[0].total
-      let option = {
-        color: colors,
-        grid: {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          containLabel: true
-        },
-        title: {
-          left: '50%',
-          top: '50%',
-          text: `{a|总数}\n{b|${total}}`,
-          textAlign: 'center',
-          textVerticalAlign: 'middle',
-          padding: 0,
-          textStyle: {
-            rich: {
-              a: {
-                fontSize: 12,
-                lineHeight: 18,
-                color: '#A8C3E6'
-              },
-              b: {
-                fontSize: 17,
-                lineHeight: 17,
-                fontWeight: 'bold',
-                color: '#DBE7F6'
-              }
-            }
-          }
-        },
-        series: [
-          {
-            name: '内层实心圆',
-            type: 'pie',
-            hoverOffset: 0,
-            radius: '58%',
-            center: ['50%', '50%'],
-            startAngle: 270,
-            label: {
-              show: false
-            },
-            itemStyle: {
-              borderColor: '#2C4E6E',
-              borderWidth: 6,
-              color: '#132942'
-            },
-            data: [{ value: 0 }]
-          },
-          {
-            name: '外层空心圆',
-            type: 'pie',
-            hoverOffset: 0,
-            radius: ['97%', '97%'],
-            center: ['50%', '50%'],
-            startAngle: 270,
-            label: {
-              show: false
-            },
-            itemStyle: {
-              borderColor: '#4677B8',
-              borderWidth: 1
-            },
-            data: [{ value: 0 }]
-          },
-          {
-            name: '设备运行统计内圈',
-            type: 'pie',
-            radius: ['70%', '80%'],
-            center: ['50%', '50%'],
-            startAngle: 270,
-            labelLine: {
-              show: false
-            },
-            tooltip: {
-              show: false
-            },
-            itemStyle: {
-              borderColor: 'rgba(15, 45, 115,  .1)',
-              borderWidth: 1,
-              color: (params) => {
-                return colorListIn[params.dataIndex]
-              }
-            },
-            label: {
-              show: false
-            },
-            data: seriesData
-          },
-          {
-            name: '设备运行统计外圈',
-            type: 'pie',
-            radius: ['80%', '90%'],
-            center: ['50%', '50%'],
-            startAngle: 270,
-            labelLine: {
-              show: false
-            },
-            tooltip: {
-              show: false
-            },
-            itemStyle: {
-              borderColor: 'rgba(15, 45, 115,  .1)',
-              borderWidth: 1,
-              color: (params) => {
-                return colorListOut[params.dataIndex]
-              }
-            },
-            label: {
-              show: false
-            },
-            data: seriesData
-          }
-        ]
-      }
-      this.myChart3.setOption(option, true)
-    },
-    setEchart4 () {
-      let barName = []
-      let barData1 = []
-      let barData2 = []
-      this.tp_in_week.map(el => {
-        barName.push(el.date)
-        barData1.push(el.total_qty)
-      })
-      this.tp_out_week.map(el => {
-        barData2.push(el.total_qty)
-      })
-      let option = {
-        grid: {
-          top: 30,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          containLabel: true
-        },
-        legend: {
-          icon: 'rect',
-          top: '0',
-          right: '0',
-          textStyle: {
-            color: '#9BB9DD',
-            fontSize: 12,
-            lineHeight: 16
-          },
-          itemGap: 16,
-          itemWidth: 8,
-          itemHeight: 8,
-          data: [{name: '入库', itemStyle: {color: '#67D470'}}, {name: '出库', itemStyle: {color: '#1980EA'}}]
-        },
-        xAxis: {
-          type: 'category',
-          axisTick: {
-            show: false
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              width: 1,
-              color: '#3C5787'
-            }
-          },
-          axisLabel: {
-            interval: 0,
-            rotate: 45,
-            color: '#7591B2',
-            fontSize: 12,
-            lineHeight: 12
-          },
-          data: barName
-        },
-        yAxis: {
-          type: 'value',
-          // name: '单位：块',
-          axisLine: {
-            show: false
-          },
-          splitNumber: 4,
-          axisTick: {
-            show: false
-          },
-          axisLabel: {
-            color: '#B5C5D4',
-            fontSize: 12
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: [2, 1],
-              color: '#455C86'
-            }
-          }
-        },
-        series: [
-          {
-            name: '入库',
-            type: 'line',
-            showSymbol: false,
-            itemStyle: {
-              color: '#67D470',
-              lineStyle: {
-                color: '#67D470',
-                width: 1
-              }
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                {
-                  offset: 0,
-                  color: 'rgba(103,212,112,0.1)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(103,212,112,0.74)'
-                }
-              ])
-            },
-            data: barData1
-          },
-          {
-            name: '出库',
-            type: 'line',
-            showSymbol: false,
-            itemStyle: {
-              color: '#58A2E3',
-              lineStyle: {
-                color: '#58A2E3',
-                width: 1
-              }
-            },
-            areaStyle: {
-              color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
-                {
-                  offset: 0,
-                  color: 'rgba(45,144,255,0)'
-                },
-                {
-                  offset: 1,
-                  color: 'rgba(45,144,255,0.85)'
-                }
-              ])
-            },
-            data: barData2
-          }
-        ]
-      }
-      this.myChart4.setOption(option, true)
     }
   }
 }
@@ -856,10 +574,18 @@ export default {
   background-color rgba(15, 45, 115, 60%)
 .wraper_3
   height 100%
+.wraper_5
+  height calc(100% - 4px)
+  padding 4px 10px
+  background-color rgba(15, 45, 115, 60%)
+.wraper_6
+  height calc(100% - 4px)
+  background-color rgba(15, 45, 115, 60%)
 .title
   font-size 14px
   line-height 16px
   color #fff
+  // margin-left 14px
 .wraper_4
   width 100%
   height calc(100% - 16px)
@@ -879,4 +605,31 @@ export default {
   white-space nowrap
 .c_y
   color #f4ab00
+.mgl8
+  margin-left 8px
+.scroll_tab_2 li
+  width 20%
+  &:nth-child(1)
+      width 20%
+.scroll_tab_3 li
+  width 11%
+  &:nth-child(1)
+      width 11%
+.scroll-ul_1_div
+  width 20% !important
+  height 30px !important
+.scroll-ul_2 .scroll-ul_1_div
+  width 11% !important
+  height 30px !important
+  &:nth-child(1)
+      width 11%
+.scroll_container_0
+  width: 100%;
+  height: calc(100% - 20px);
+.scroll-ul_1 li
+  height 30px !important
+  // line-height 30px !important
+.scroll-ul_2 li
+  height 30px !important
+  // line-height 30px !important
 </style>