From 2b6847c199f69b94d6c49abc7ea05992b19fe337 Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Fri, 11 Jul 2025 15:40:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E4=BB=93=E5=BA=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header.vue     |  31 +-
 src/config/getData2.js        |   4 +-
 src/config/mork02.js          | 284 +++++++++++++++
 src/pages/Setup.vue           |  56 ++-
 src/pages/ccjk/screen01.vue   | 641 ++++++++++++++++++++++++++++++++++
 src/pages/ccjk/screen02.vue   | 240 +++++++++++++
 src/pages/ccjk/secOne.vue     | 601 +++++++++++++++++++++++++++++++
 src/pages/ccjk/secThree.vue   | 251 +++++++++++++
 src/pages/ccjk/secTwo.vue     | 261 ++++++++++++++
 src/pages/ccjk/style.stylus   | 275 +++++++++++++++
 src/pages/modules/index01.vue | 638 +++++++++++++++++++++++++++++++++
 src/pages/modules/index02.vue | 601 +++++++++++++++++++++++++++++++
 src/pages/modules/index2.vue  |  11 +-
 src/router/index.js           |  20 ++
 src/vuex/modules/com.js       |  12 +-
 15 files changed, 3893 insertions(+), 33 deletions(-)
 create mode 100644 src/config/mork02.js
 create mode 100644 src/pages/ccjk/screen01.vue
 create mode 100644 src/pages/ccjk/screen02.vue
 create mode 100644 src/pages/ccjk/secOne.vue
 create mode 100644 src/pages/ccjk/secThree.vue
 create mode 100644 src/pages/ccjk/secTwo.vue
 create mode 100644 src/pages/ccjk/style.stylus
 create mode 100644 src/pages/modules/index01.vue
 create mode 100644 src/pages/modules/index02.vue

diff --git a/src/components/header.vue b/src/components/header.vue
index 2975c30..a8a6a57 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -22,18 +22,27 @@ export default {
   },
   methods: {
     back () {
-      let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
-      if (flag) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen()
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen()
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen()
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen()
-        }
+      // let flag = !!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)
+      // if (flag) {
+      //   if (document.exitFullscreen) {
+      //     document.exitFullscreen()
+      //   } else if (document.webkitCancelFullScreen) {
+      //     document.webkitCancelFullScreen()
+      //   } else if (document.mozCancelFullScreen) {
+      //     document.mozCancelFullScreen()
+      //   } else if (document.msExitFullscreen) {
+      //     document.msExitFullscreen()
+      //   }
+      // }
+      let obj = {
+        baseUrl: this.$store.getters.baseUrl,
+        setTime: this.$store.getters.setTime,
+        setJxtTime: this.$store.getters.setJxtTime,
+        pageNo: this.$store.getters.pageNo,
+        iskb: '',
+        secCode: this.$store.getters.secCode
       }
+      this.$store.dispatch('setConfig', obj)
       this.$router.push('/setup')
     }
   }
diff --git a/src/config/getData2.js b/src/config/getData2.js
index 6649d7f..3b8624a 100644
--- a/src/config/getData2.js
+++ b/src/config/getData2.js
@@ -6,7 +6,9 @@ export const pickingInfo = (code) => post('api/board/pickingInfo', {
   code: code
 })
 // 仓储看板
-export const synthesizeInfo = () => post('api/bigScreen/getData', {})
+export const synthesizeInfo = (stors) => post('api/bigScreen/getData', {
+  stors: stors
+})
 // 修改重量
 export const updateMaterialInfo = (code, w) => post('api/bmMaterial/updateMaterialInfo', {
   material_id: code,
diff --git a/src/config/mork02.js b/src/config/mork02.js
new file mode 100644
index 0000000..11e6765
--- /dev/null
+++ b/src/config/mork02.js
@@ -0,0 +1,284 @@
+/* eslint-disable */
+export const synthesizeInfo = () => {
+    let res = {
+        "data": [
+            {
+                "storsName": "料箱库",
+                "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": 2300,
+                        "vehicle_qty": 1000
+                    },
+                    "out": {
+                        "total_qty": 300,
+                        "vehicle_qty": 150
+                    }
+                },
+                "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": "生成"
+                    },
+                ]
+            },
+            {
+                "storsName": "托盘库",
+                "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": 500,
+                    "use_qty": 400,
+                    "emp_qty": 100,
+                    "use_percentage": "0.8%"
+                },
+                "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/Setup.vue b/src/pages/Setup.vue
index 21d0f1c..735a5e3 100644
--- a/src/pages/Setup.vue
+++ b/src/pages/Setup.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="body-container">
-    <h1>车间物流监控</h1>
+    <h1>仓储监控</h1>
     <div class="login_wrap">
       <div class="login_cnt">
         <div class="title-name">系统配置</div>
@@ -29,6 +29,10 @@
               <label>刷新时间（秒）</label>
               <input type="number" class="inputStyle" v-model="setTime">
             </div>
+            <div class="inputOuter">
+              <label>仓库编码</label>
+              <input type="text" class="inputStyle" v-model="secCode">
+            </div>
           </div>
           <button class="btn" @click="_config">配置</button>
         </div>
@@ -47,10 +51,24 @@ export default {
       setJxtTime: this.$store.getters.setJxtTime / 1000,
       setTime: this.$store.getters.setTime / 1000,
       // options: [{value: '1', label: '拣选台'}, {value: '2', label: '仓储监控'}],
-      options: [{value: '2', label: '仓储监控'}],
-      value: this.$store.getters.pageNo
+      options: [{value: '01', label: '仓储监控1'}, {value: '02', label: '仓储监控2'}],
+      value: this.$store.getters.pageNo,
+      secCode: this.$store.getters.secCode || ''
     }
   },
+  created () {
+    if (this.$store.getters.iskb === '02') {
+      console.log(this.$store.getters.iskb, 1)
+      if (this.value === '01' || !this.secCode) {
+        this.$router.push('/screen01')
+      } else {
+        this.$router.push('/screen02')
+      }
+    } else {
+      console.log(this.$store.getters.iskb, 2)
+    }
+    // this._config()
+  },
   methods: {
     _config () {
       if (this.setTime < 1 || this.setJxtTime < 1) {
@@ -71,23 +89,25 @@ export default {
         baseUrl: this.baseUrl,
         setTime: this.setTime * 1000,
         setJxtTime: this.setJxtTime * 1000,
-        pageNo: this.value
+        pageNo: this.value,
+        iskb: '1',
+        secCode: this.$store.getters.secCode
       }
       this.$store.dispatch('setConfig', obj)
-      this.$router.push('/index' + this.value)
-      let element = document.documentElement
-      if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
-        if (element.requestFullscreen) {
-          element.requestFullscreen()
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen()
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen()
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen()
-        }
-      }
+      this.$router.push('/screen' + this.value)
+      // let element = document.documentElement
+      // if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
+      //   if (element.requestFullscreen) {
+      //     element.requestFullscreen()
+      //   } else if (element.webkitRequestFullScreen) {
+      //     element.webkitRequestFullScreen()
+      //   } else if (element.mozRequestFullScreen) {
+      //     element.mozRequestFullScreen()
+      //   } else if (element.msRequestFullscreen) {
+      //     // IE11
+      //     element.msRequestFullscreen()
+      //   }
+      // }
     }
   }
 }
diff --git a/src/pages/ccjk/screen01.vue b/src/pages/ccjk/screen01.vue
new file mode 100644
index 0000000..6f3680d
--- /dev/null
+++ b/src/pages/ccjk/screen01.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="box relative">
+    <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>
+        <!-- <p>仓储使用情况</p> -->
+        <p>{{ e.storsName }}</p>
+      </div>
+      <div class="zd-row wraper_1 mgb8">
+        <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>{{ 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">{{ 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">{{ 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">{{ pointUse.emp_qty }}<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 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': inw}"></div>
+                  </div>
+                  <div class="zd-row">
+                    <p class="item_label font_2">总数量 : <span class="c_y">{{ inqty1 }}</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': outw}"></div>
+                  </div>
+                  <div class="zd-row">
+                    <p class="item_label font_2">总数量 : <span class="c_y">{{ outqty1 }}</span></p>
+                  </div>
+                </div>
+              </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="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.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.material_name }}</p>
+                    <div class="zd-row jcflexstart">
+                      <p class="pie_legend_txt_2">{{ e.ivt_qty }}</p>
+                      <p class="pie_legend_txt_3">{{ e.percentage }}</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="echartsRef2" style="width: 100%; height: 100%;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="relative b_title">
+        <span class="absolute sj_icon"></span>
+        <p>任务单据监控</p>
+      </div>
+      <div class="zd-row wraper_1">
+        <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="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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+// import { synthesizeInfo } from '@js/getData2.js'
+import { synthesizeInfo } from '@js/mork02.js'
+export default {
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      intervalId: null,
+      materList: [],
+      historyList: [],
+      myChart1: null,
+      myChart2: null,
+      myChart4: null,
+      taskList: [],
+      billList: [],
+      lx_in_week: [], // 料箱库入库趋势
+      lx_out_week: [], // 料箱库出库趋势
+      lx_inventory: [], // 料箱实时库存
+      pointUse: {}, // 料箱货位使用
+      toDayInAndOut: {}, // 料箱今日出入库
+      inw: '0',
+      inqty1: '0',
+      outw: '0',
+      outqty1: '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 () {
+    let obj = {
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime,
+      setJxtTime: this.$store.getters.setJxtTime,
+      pageNo: this.$store.getters.pageNo,
+      iskb: '02',
+      secCode: this.$store.getters.secCode
+    }
+    this.$store.dispatch('setConfig', obj)
+    console.log(1111)
+    this._synthesizeInfo()
+    this.timerFun(this._synthesizeInfo, this.interTime)()
+  },
+  mounted () {
+    this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
+    this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
+  },
+  destroyed () {
+    if (this.intervalId !== null) {
+      clearTimeout(this.intervalId)
+      this.intervalId = null
+    }
+    if (this.myChart1 !== null) {
+      this.myChart1.dispose()
+      this.myChart1 = null
+    }
+    if (this.myChart2 !== null) {
+      this.myChart2.dispose()
+      this.myChart2 = null
+    }
+  },
+  methods: {
+    getPercentage (part, whole) {
+      if (Number(whole) === 0) {
+        return 0
+      }
+      const percentage = (part / whole * 100).toFixed(2)
+      return `${percentage}%`
+    },
+    timerFun (f, time) {
+      let _this = this
+      return function backFun () {
+        clearTimeout(_this.intervalId)
+        _this.intervalId = setTimeout(function () {
+          f()
+          backFun()
+        }, time)
+      }
+    },
+    async _synthesizeInfo () {
+      let res = await synthesizeInfo(this.$store.getters.secCode)
+      res.data = res.data[0]
+      this.pointUse = res.data.pointUse
+      this.toDayInAndOut = res.data.toDayInAndOut
+      this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
+      this.inqty1 = this.toDayInAndOut.in.total_qty
+      this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
+      this.outqty1 = this.toDayInAndOut.out.total_qty
+      this.lx_in_week = [...res.data.inAndOutTrend.in]
+      this.lx_out_week = [...res.data.inAndOutTrend.out]
+      this.lx_inventory = res.data.ivtAnalyse
+      this.taskList = [...res.data.realTask]
+      this.billList = [...res.data.unIos]
+      this.setEchart1()
+      this.setEchart2()
+      // 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.data
+      seriesData.map(el => {
+        el.value = el.ivt_qty
+        el.name = el.material_name
+      })
+      let total = this.lx_inventory.total_qty
+      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.myChart1.setOption(option, true)
+    },
+    setEchart2 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      this.lx_in_week.map(el => {
+        barData1.push(el.qty)
+      })
+      this.lx_out_week.map(el => {
+        barName.push(el.date)
+        barData2.push(el.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'
+            }
+          }
+          // max: total
+        },
+        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.myChart2.setOption(option, true)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import './style.stylus'
+.body_container
+  padding-top 38px
+.mgr8
+  margin-right 8px
+.mgb8
+  margin-bottom 8px
+.wraper_1
+  width 100%
+  height calc(50% - 28px)
+.wraper_2
+  height calc(50% - 4px)
+  padding 4px 10px
+  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)
+.percent_item
+  width 76px
+  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
+  p
+    font-size 15px
+    line-height 76px
+    color #fff
+    text-align center
+.font_1
+  font-size 13px
+.font_2
+  font-size 12px
+  text-align left
+  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>
diff --git a/src/pages/ccjk/screen02.vue b/src/pages/ccjk/screen02.vue
new file mode 100644
index 0000000..02f00e5
--- /dev/null
+++ b/src/pages/ccjk/screen02.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="box relative">
+    <t-header type="1" title1="仓储监控" title2="WMS仓储看板"></t-header>
+    <div class="box body_container">
+      <div class="acon" v-for="(e, i) in resDataArr" :key="i">
+        <div class="relative b_title">
+          <span class="absolute sj_icon"></span>
+          <p>{{ e.storsName }}</p>
+        </div>
+        <div class="zd-row wraper_1 mgb8">
+          <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>{{ e.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">{{ e.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">{{ e.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">{{ e.pointUse.emp_qty }}<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 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': inw}"></div> -->
+                      <div class="percent_i" :style="{'width': getPercentage(e.toDayInAndOut.in.vehicle_qty, e.toDayInAndOut.in.total_qty)}"></div>
+                    </div>
+                    <div class="zd-row">
+                      <!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ inqty1 }}</span></p> -->
+                      <p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.in.total_qty }}</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': outw}"></div> -->
+                      <div class="percent_i percent_i_c" :style="{'width': getPercentage(e.toDayInAndOut.out.vehicle_qty, e.toDayInAndOut.out.total_qty)}"></div>
+                    </div>
+                    <div class="zd-row">
+                      <!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ outqty1 }}</span></p> -->
+                      <p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.out.total_qty }}</span></p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <sec-two :weobj="e"></sec-two>
+          <sec-three :weobj="e"></sec-three>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+import SecTwo from './secTwo.vue'
+import SecThree from './secThree.vue'
+// import { synthesizeInfo } from '@js/getData2.js'
+import { synthesizeInfo } from '@js/mork02.js'
+export default {
+  components: {
+    THeader,
+    SecTwo,
+    SecThree
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      intervalId: null,
+      materList: [],
+      historyList: [],
+      pointUse: {}, // 料箱货位使用
+      toDayInAndOut: {}, // 料箱今日出入库
+      inw: '0',
+      inqty1: '0',
+      outw: '0',
+      outqty1: '0',
+      resDataArr: []
+    }
+  },
+  created () {
+    let obj = {
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime,
+      setJxtTime: this.$store.getters.setJxtTime,
+      pageNo: this.$store.getters.pageNo,
+      iskb: '02',
+      secCode: this.$store.getters.secCode
+    }
+    this.$store.dispatch('setConfig', obj)
+    this._synthesizeInfo()
+    this.timerFun(this._synthesizeInfo, this.interTime)()
+  },
+  mounted () {
+  },
+  destroyed () {
+    // if (this.intervalId !== null) {
+    //   clearTimeout(this.intervalId)
+    //   this.intervalId = null
+    // }
+  },
+  methods: {
+    getPercentage (part, whole) {
+      if (Number(whole) === 0) {
+        return 0
+      }
+      const percentage = (part / whole * 100).toFixed(2)
+      return `${percentage}%`
+    },
+    timerFun (f, time) {
+      let _this = this
+      return function backFun () {
+        clearTimeout(_this.intervalId)
+        _this.intervalId = setTimeout(function () {
+          f()
+          backFun()
+        }, time)
+      }
+    },
+    async _synthesizeInfo () {
+      let res = await synthesizeInfo(this.$store.getters.secCode)
+      this.resDataArr = res.data
+      this.pointUse = res.data[0].pointUse
+      this.toDayInAndOut = res.data[0].toDayInAndOut
+      this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
+      this.inqty1 = this.toDayInAndOut.in.total_qty
+      this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
+      this.outqty1 = this.toDayInAndOut.out.total_qty
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import './style.stylus'
+.acon
+  height 40%
+.body_container
+  padding-top 38px
+.mgr8
+  margin-right 8px
+.mgb8
+  margin-bottom 8px
+.wraper_1
+  width 100%
+  // height calc(50% - 28px)
+  height calc(100% - 28px)
+.wraper_2
+  height calc(50% - 4px)
+  padding 4px 10px
+  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)
+.percent_item
+  width 76px
+  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
+  p
+    font-size 15px
+    line-height 76px
+    color #fff
+    text-align center
+.font_1
+  font-size 13px
+.font_2
+  font-size 12px
+  text-align left
+  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>
diff --git a/src/pages/ccjk/secOne.vue b/src/pages/ccjk/secOne.vue
new file mode 100644
index 0000000..46c0486
--- /dev/null
+++ b/src/pages/ccjk/secOne.vue
@@ -0,0 +1,601 @@
+<template>
+  <div class="box relative">
+    <t-header type="1" title1="仓储监控" title2="WMS仓储看板"></t-header>
+    <div class="box body_container">
+      <div class="acon" v-for="(e, i) in resDataArr" :key="i">
+        <div class="relative b_title">
+          <span class="absolute sj_icon"></span>
+          <p>仓储使用情况</p>
+        </div>
+        <div class="zd-row wraper_1 mgb8">
+          <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>{{ e.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">{{ e.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">{{ e.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">{{ e.pointUse.emp_qty }}<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 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': inw}"></div> -->
+                      <div class="percent_i" :style="{'width': getPercentage(e.toDayInAndOut.in.vehicle_qty, e.toDayInAndOut.in.total_qty)}"></div>
+                    </div>
+                    <div class="zd-row">
+                      <!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ inqty1 }}</span></p> -->
+                      <p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.in.total_qty }}</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': outw}"></div> -->
+                      <div class="percent_i percent_i_c" :style="{'width': getPercentage(e.toDayInAndOut.out.vehicle_qty, e.toDayInAndOut.out.total_qty)}"></div>
+                    </div>
+                    <div class="zd-row">
+                      <!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ outqty1 }}</span></p> -->
+                      <p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.out.total_qty }}</span></p>
+                    </div>
+                  </div>
+                </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="echartsRef1" style="width: 100%; height: 100%;"></div> -->
+                  <div :ref="'echartsRef1'+(i+1)" 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="(el, index) in e.ivtAnalyse.data" :key="index">
+                    <div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][index]}"></div>
+                    <div class="zd-col-21">
+                      <p class="pie_legend_txt_1">{{ el.material_name }}</p>
+                      <div class="zd-row jcflexstart">
+                        <p class="pie_legend_txt_2">{{ el.ivt_qty }}</p>
+                        <p class="pie_legend_txt_3">{{ el.percentage }}</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="echartsRef2" style="width: 100%; height: 100%;"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+// import { synthesizeInfo } from '@js/getData2.js'
+import { synthesizeInfo } from '@js/mork02.js'
+export default {
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      intervalId: null,
+      materList: [],
+      historyList: [],
+      myChart10: null,
+      myChart11: null,
+      myChart12: null,
+      myChart13: null,
+      myChart14: null,
+      myChart2: null,
+      myChart4: null,
+      lx_in_week: [], // 料箱库入库趋势
+      lx_out_week: [], // 料箱库出库趋势
+      lx_inventory: [], // 料箱实时库存
+      pointUse: {}, // 料箱货位使用
+      toDayInAndOut: {}, // 料箱今日出入库
+      inw: '0',
+      inqty1: '0',
+      outw: '0',
+      outqty1: '0',
+      resDataArr: []
+    }
+  },
+  created () {
+    let obj = {
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime,
+      setJxtTime: this.$store.getters.setJxtTime,
+      pageNo: this.$store.getters.pageNo,
+      iskb: '02'
+    }
+    this.$store.dispatch('setConfig', obj)
+    this._synthesizeInfo()
+    this.timerFun(this._synthesizeInfo, this.interTime)()
+  },
+  mounted () {
+    // this.myChart10 = this.$echarts.init(this.$refs.echartsRef10)
+    // this.myChart11 = this.$echarts.init(this.$refs.echartsRef11)
+    // this.myChart12 = this.$echarts.init(this.$refs.echartsRef12)
+    // this.myChart13 = this.$echarts.init(this.$refs.echartsRef13)
+    // this.myChart14 = this.$echarts.init(this.$refs.echartsRef14)
+    // this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
+  },
+  destroyed () {
+    // if (this.intervalId !== null) {
+    //   clearTimeout(this.intervalId)
+    //   this.intervalId = null
+    // }
+    // if (this.myChart10 !== null) {
+    //   this.myChart10.dispose()
+    //   this.myChart10 = null
+    // }
+    // if (this.myChart11 !== null) {
+    //   this.myChart11.dispose()
+    //   this.myChart11 = null
+    // }
+    // if (this.myChart12 !== null) {
+    //   this.myChart12.dispose()
+    //   this.myChart12 = null
+    // }
+    // if (this.myChart13 !== null) {
+    //   this.myChart13.dispose()
+    //   this.myChart13 = null
+    // }
+    // if (this.myChart14 !== null) {
+    //   this.myChart14.dispose()
+    //   this.myChart14 = null
+    // }
+    // if (this.myChart2 !== null) {
+    //   this.myChart2.dispose()
+    //   this.myChart2 = null
+    // }
+  },
+  methods: {
+    getPercentage (part, whole) {
+      if (Number(whole) === 0) {
+        return 0
+      }
+      const percentage = (part / whole * 100).toFixed(2)
+      return `${percentage}%`
+    },
+    timerFun (f, time) {
+      let _this = this
+      return function backFun () {
+        clearTimeout(_this.intervalId)
+        _this.intervalId = setTimeout(function () {
+          f()
+          backFun()
+        }, time)
+      }
+    },
+    async _synthesizeInfo () {
+      let res = await synthesizeInfo(this.$store.getters.secCode)
+      this.resDataArr = res.data
+      this.resDataArr.forEach((item, index) => {
+        // el.value = el.ivt_qty
+        // el.name = el.material_name
+        console.log(item, index, 666)
+        this.setEchart1(item, index)
+      })
+      this.pointUse = res.data[0].pointUse
+      this.toDayInAndOut = res.data[0].toDayInAndOut
+      this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
+      this.inqty1 = this.toDayInAndOut.in.total_qty
+      this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
+      this.outqty1 = this.toDayInAndOut.out.total_qty
+      this.lx_in_week = [...res.data[0].inAndOutTrend.in]
+      this.lx_out_week = [...res.data[0].inAndOutTrend.out]
+      this.lx_inventory = res.data[0].ivtAnalyse
+      // this.setEchart1()
+      // this.setEchart2()
+    },
+    setEchart1 (item, index) {
+      console.log(item, index, 777)
+      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 = item.ivtAnalyse.data
+      seriesData.map(el => {
+        el.value = el.ivt_qty
+        el.name = el.material_name
+      })
+      let total = item.ivtAnalyse.total_qty
+      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
+          }
+        ]
+      }
+      if (index == 0) {
+        console.log(22222)
+        this.$echarts.init(this.$refs.echartsRef10).setOption(option, true)
+        console.log(33)
+      }
+      if (index == 1) {
+        this.$echarts.init(this.$refs.echartsRef11).setOption(option, true)
+      }
+      // if (index === 2) {
+      //   this.myChart12.setOption(option, true)
+      // }
+      // if (index === 3) {
+      //   this.myChart13.setOption(option, true)
+      // }
+      // if (index === 4) {
+      //   this.myChart14.setOption(option, true)
+      // }
+      // this.myChart1.setOption(option, true)
+    },
+    setEchart2 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      this.lx_in_week.map(el => {
+        barData1.push(el.qty)
+      })
+      this.lx_out_week.map(el => {
+        barName.push(el.date)
+        barData2.push(el.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'
+            }
+          }
+          // max: total
+        },
+        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.myChart2.setOption(option, true)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import './style.stylus'
+.acon
+  height 40%
+.body_container
+  padding-top 38px
+.mgr8
+  margin-right 8px
+.mgb8
+  margin-bottom 8px
+.wraper_1
+  width 100%
+  // height calc(50% - 28px)
+  height calc(100% - 28px)
+.wraper_2
+  height calc(50% - 4px)
+  padding 4px 10px
+  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)
+.percent_item
+  width 76px
+  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
+  p
+    font-size 15px
+    line-height 76px
+    color #fff
+    text-align center
+.font_1
+  font-size 13px
+.font_2
+  font-size 12px
+  text-align left
+  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>
diff --git a/src/pages/ccjk/secThree.vue b/src/pages/ccjk/secThree.vue
new file mode 100644
index 0000000..b05e425
--- /dev/null
+++ b/src/pages/ccjk/secThree.vue
@@ -0,0 +1,251 @@
+<template>
+  <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="echartsRef2" style="width: 100%; height: 100%;"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SecThree',
+  data () {
+    return {
+      myChart2: null
+    }
+  },
+  props: {
+    weobj: {}
+  },
+  mounted () {
+    this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
+    this.setEchart2(this.weobj)
+  },
+  destroyed () {
+    if (this.myChart2 !== null) {
+      this.myChart2.dispose()
+      this.myChart2 = null
+    }
+  },
+  methods: {
+    setEchart2 (item) {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      item.inAndOutTrend.in.map(el => {
+        barData1.push(el.qty)
+      })
+      item.inAndOutTrend.out.map(el => {
+        barName.push(el.date)
+        barData2.push(el.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'
+            }
+          }
+          // max: total
+        },
+        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.myChart2.setOption(option, true)
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+@import './style.stylus'
+.acon
+  height 40%
+.body_container
+  padding-top 38px
+.mgr8
+  margin-right 8px
+.mgb8
+  margin-bottom 8px
+.wraper_1
+  width 100%
+  // height calc(50% - 28px)
+  height calc(100% - 28px)
+.wraper_2
+  height calc(50% - 4px)
+  padding 4px 10px
+  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)
+.percent_item
+  width 76px
+  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
+  p
+    font-size 15px
+    line-height 76px
+    color #fff
+    text-align center
+.font_1
+  font-size 13px
+.font_2
+  font-size 12px
+  text-align left
+  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>
diff --git a/src/pages/ccjk/secTwo.vue b/src/pages/ccjk/secTwo.vue
new file mode 100644
index 0000000..ba4b6dc
--- /dev/null
+++ b/src/pages/ccjk/secTwo.vue
@@ -0,0 +1,261 @@
+<template>
+  <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="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="(el, index) in weobj.ivtAnalyse.data" :key="index">
+            <div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][index]}"></div>
+            <div class="zd-col-21">
+              <p class="pie_legend_txt_1">{{ el.material_name }}</p>
+              <div class="zd-row jcflexstart">
+                <p class="pie_legend_txt_2">{{ el.ivt_qty }}</p>
+                <p class="pie_legend_txt_3">{{ el.percentage }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SecTwo',
+  data () {
+    return {
+      myChart1: null
+    }
+  },
+  props: {
+    weobj: {}
+  },
+  mounted () {
+    this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
+    this.setEchart1(this.weobj)
+  },
+  destroyed () {
+    if (this.myChart1 !== null) {
+      this.myChart1.dispose()
+      this.myChart1 = null
+    }
+  },
+  methods: {
+    setEchart1 (item) {
+      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 = item.ivtAnalyse.data
+      seriesData.map(el => {
+        el.value = el.ivt_qty
+        el.name = el.material_name
+      })
+      let total = item.ivtAnalyse.total_qty
+      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.myChart1.setOption(option, true)
+    }
+  }
+}
+</script>
+<style lang="stylus" scoped>
+@import './style.stylus'
+.acon
+  height 40%
+.body_container
+  padding-top 38px
+.mgr8
+  margin-right 8px
+.mgb8
+  margin-bottom 8px
+.wraper_1
+  width 100%
+  // height calc(50% - 28px)
+  height calc(100% - 28px)
+.wraper_2
+  height calc(50% - 4px)
+  padding 4px 10px
+  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)
+.percent_item
+  width 76px
+  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
+  p
+    font-size 15px
+    line-height 76px
+    color #fff
+    text-align center
+.font_1
+  font-size 13px
+.font_2
+  font-size 12px
+  text-align left
+  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>
diff --git a/src/pages/ccjk/style.stylus b/src/pages/ccjk/style.stylus
new file mode 100644
index 0000000..47fb1da
--- /dev/null
+++ b/src/pages/ccjk/style.stylus
@@ -0,0 +1,275 @@
+.body_container
+  padding 56px 10px 10px 10px
+  overflow hidden
+.n_wraper
+  width 100%
+  border 1px solid #0c99ac
+  &:nth-child(1)
+    height calc(58% - 10px)
+    margin-bottom 10px
+  &:nth-child(2)
+    height 42%
+.title_wraper
+  height 26px
+  text-align center
+  background linear-gradient(to right, transparent,rgba(88, 190, 237, 90%), transparent)
+.title_h1
+  display inline-block
+  font-size 16px
+  color #fff
+  line-height 29px
+  letter-spacing 2px
+  &::after
+    position absolute
+    left 0
+    content ''
+    width 100%
+    height 3px
+    background-color #10F7FC
+    border-radius 3px
+.title_h2
+  font-size 14px
+  color #fff
+  line-height 26px
+  top 0
+  left 2%
+.content_wraper
+  height calc(100% - 26px)
+  padding 13px 2%
+.item_wraper
+  padding-right 3%
+.info_item
+  width 32%
+  height 50px
+  // padding 3px
+  border-left 2px solid #00fcff
+  // border-radius 4px
+  &:nth-child(3n+2)
+    margin-left 2%
+    margin-right 2%
+  &:nth-child(4), &:nth-child(5), &:nth-child(6), &:nth-child(7), &:nth-child(8), &:nth-child(9)
+    margin-top 12px
+.info_item_i
+  // border-radius 2px
+  box-shadow inset 3px 0px 3px 0px rgba(17, 152, 191, 70%)
+  padding 5px 10px
+  background linear-gradient(45deg, rgba(22, 138, 189, 1), transparent)
+.info_item_1
+  width 48.5%
+  height 84px
+  // padding 3px
+  border 1px solid #168abd
+  // border-radius 4px
+  margin-top 14px
+.info_item_1_i
+  height 100%
+  box-shadow inset 0px 0px 1px 1px rgba(17, 152, 191, 70%)
+  padding 0 16px
+  background linear-gradient(to top, rgba(22, 138, 189, 1), transparent)
+.item_label_1
+  height 28px
+  font-size 18px
+  line-height 28px
+  color #f2a045
+  font-style italic
+  // text-shadow: 0 0 1px #f6ba77,
+  //              0 0 1px #f6ba77,
+  //              0 0 1px #f6ba77,
+  //              0 0 1px #f6ba77;
+.item_value_1
+  display flex
+  align-items center
+  height calc(100% - 24px)
+  font-size 34px
+  line-height 32px
+  color #fefb2d
+  font-weight 700
+  .item_unit
+    font-size 16px
+.item_label
+  width 85px
+  font-size 13px
+  line-height 13px
+  color #d2eff8
+  text-align left
+  text-shadow: 0 0 1px #5bd0f5,
+               0 0 1px #5bd0f5,
+               0 0 1px #5bd0f5,
+               0 0 1px #5bd0f5;
+.item_value
+  width calc(100% - 85px)
+  font-size 15px
+  line-height 15px
+  color #fff
+  font-weight 700
+  text-align center
+.item_unit
+  font-size 12px
+  color #fff
+  font-weight 400
+  padding-left 5px
+.item_value_input
+  width calc(100% - 85px)
+  font-size 14px
+  line-height 30px
+  color #fff
+  font-weight 700
+  background-color transparent
+  border-bottom 1px solid #fff
+  text-align center
+.info_icon
+  width 70px
+  height 70px
+  background center / 100% auto url('../../images/icon_1.png') no-repeat
+.info_icon_2
+  background-image url('../../images/icon_2.png')
+.info_item_2
+  width 100%
+.tip_wraper
+  height calc(100% - 50px)
+  padding-top 16px
+.tip_wraper_bg1
+  background center bottom / auto 76% url('../../images/bg_tip.png') no-repeat
+  .tip_txt
+    color #00c8ed
+.tip_wraper_bg2
+  background center bottom / auto 76% url('../../images/bg_tip_1.png') no-repeat
+  .tip_txt
+    color #9d5a00
+.tip_txt
+  font-size 20px
+  font-weight bold
+  text-align center
+.b_title
+  height 20px
+  padding-left 20px
+  border-bottom 1px solid #0c99ac
+  margin-bottom 4px
+  p
+    font-size 14px
+    color #caffff
+    line-height 20px
+.sj_icon
+  top 8px
+  left 0
+  width 0
+  height 0
+  border-top 4px solid transparent
+  border-left 4px solid transparent
+  border-right 4px solid #00d6ff
+  border-bottom 4px solid #00d6ff
+.pie_item_wrap
+  &:nth-child(n+3)
+    margin-top 10px
+.pie_legend_icon
+  width 8px
+  height 8px
+  margin 0 auto
+  border-radius 2px
+.pie_legend_txt_1
+  font-size: 12px;
+  line-height: 12px
+  color: #9BB9DD;
+  margin-bottom 4px
+.pie_legend_txt_2
+  font-size 12px
+  line-height: 14px
+  color: #fff
+  margin-right 4px
+.pie_legend_txt_3
+  font-size: 12px;
+  line-height: 12px
+  color: #9BB9DD;
+  opacity: 0.5;
+.bg_j
+  width 8px
+  height 8px
+.bg_j_1
+  border-left: 2px solid #00e6f6;
+  border-top: 2px solid #00e6f6;
+  top: -1px;
+  left: -1px;
+.bg_j_2
+  border-right: 2px solid #00e6f6;
+  border-top: 2px solid #00e6f6;
+  top: -1px;
+  right: -1px;
+.bg_j_3
+  border-left: 2px solid #00e6f6;
+  border-bottom: 2px solid #00e6f6;
+  bottom: -1px;
+  left: -1px;
+.bg_j_4
+  border-right: 2px solid #00e6f6;
+  border-bottom: 2px solid #00e6f6;
+  bottom: -1px;
+  right: -1px;
+.scroll_wrap
+  padding-top 5px
+.scroll_tab_1
+  width 100%
+  height 20px
+  background center / 100% 100% url('../../images/table-bg_1.png') no-repeat
+  li
+    float left
+    width 9%
+    font-size 8px;
+    line-height 20px
+    color #AFBED8
+    text-align center
+    font-weight: bold;
+    font-style: italic;
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 2px
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(1)
+      width 10%
+.scroll_container_1
+  width 100%
+  height calc(100% - 20px)
+  overflow hidden
+.scroll-ul_1
+  li
+    width 100%
+    height 20px
+    border-bottom 1px solid rgba(122,159,224,0.17)
+    &:nth-child(even)
+      background rgba(31,46,73,0.7)
+    &:nth-child(odd)
+      background rgba(31,46,73,0.55)
+    .scroll-ul_1_div
+      float left
+      width 9%
+      height 20px
+      display flex
+      flex-direction row
+      justify-content center
+      align-items center
+      flex-wrap nowrap
+      font-size 8px
+      line-height 8px
+      color #B2BBD7
+      text-align center
+      // word-wrap break-word
+      // word-break break-all
+      white-space nowrap
+      padding 0 1px
+      overflow hidden
+      &:nth-child(1)
+        width 10%
+.percent_line
+  height 8px
+  background-color rgba(35, 221, 103, .3)
+  border-radius 10px
+  margin-bottom 6px
+.percent_i
+  height 100%
+  background-color #23dd67
+  border-radius 10px
+.percent_line_c
+  background-color rgba(0 118 242, .3)
+.percent_i_c
+  background-color #0076f2
\ No newline at end of file
diff --git a/src/pages/modules/index01.vue b/src/pages/modules/index01.vue
new file mode 100644
index 0000000..6033107
--- /dev/null
+++ b/src/pages/modules/index01.vue
@@ -0,0 +1,638 @@
+<template>
+  <div class="box relative">
+    <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>
+        <p>仓储使用情况</p>
+      </div>
+      <div class="zd-row wraper_1 mgb8">
+        <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>{{ 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">{{ 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">{{ 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">{{ pointUse.emp_qty }}<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 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': inw}"></div>
+                  </div>
+                  <div class="zd-row">
+                    <p class="item_label font_2">总数量 : <span class="c_y">{{ inqty1 }}</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': outw}"></div>
+                  </div>
+                  <div class="zd-row">
+                    <p class="item_label font_2">总数量 : <span class="c_y">{{ outqty1 }}</span></p>
+                  </div>
+                </div>
+              </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="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.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.material_name }}</p>
+                    <div class="zd-row jcflexstart">
+                      <p class="pie_legend_txt_2">{{ e.ivt_qty }}</p>
+                      <p class="pie_legend_txt_3">{{ e.percentage }}</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="echartsRef2" style="width: 100%; height: 100%;"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="relative b_title">
+        <span class="absolute sj_icon"></span>
+        <p>任务单据监控</p>
+      </div>
+      <div class="zd-row wraper_1">
+        <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="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>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+import { synthesizeInfo } from '@js/getData2.js'
+// import { synthesizeInfo } from '@js/mork01.js'
+export default {
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      intervalId: null,
+      materList: [],
+      historyList: [],
+      myChart1: null,
+      myChart2: null,
+      myChart4: null,
+      taskList: [],
+      billList: [],
+      lx_in_week: [], // 料箱库入库趋势
+      lx_out_week: [], // 料箱库出库趋势
+      lx_inventory: [], // 料箱实时库存
+      pointUse: {}, // 料箱货位使用
+      toDayInAndOut: {}, // 料箱今日出入库
+      inw: '0',
+      inqty1: '0',
+      outw: '0',
+      outqty1: '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 () {
+    let obj = {
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime,
+      setJxtTime: this.$store.getters.setJxtTime,
+      pageNo: this.$store.getters.pageNo,
+      iskb: '02'
+    }
+    this.$store.dispatch('setConfig', obj)
+    console.log(1111)
+    this._synthesizeInfo()
+    this.timerFun(this._synthesizeInfo, this.interTime)()
+  },
+  mounted () {
+    this.myChart1 = this.$echarts.init(this.$refs.echartsRef1)
+    this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
+  },
+  destroyed () {
+    if (this.intervalId !== null) {
+      clearTimeout(this.intervalId)
+      this.intervalId = null
+    }
+    if (this.myChart1 !== null) {
+      this.myChart1.dispose()
+      this.myChart1 = null
+    }
+    if (this.myChart2 !== null) {
+      this.myChart2.dispose()
+      this.myChart2 = null
+    }
+  },
+  methods: {
+    getPercentage (part, whole) {
+      if (Number(whole) === 0) {
+        return 0
+      }
+      const percentage = (part / whole * 100).toFixed(2)
+      return `${percentage}%`
+    },
+    timerFun (f, time) {
+      let _this = this
+      return function backFun () {
+        clearTimeout(_this.intervalId)
+        _this.intervalId = setTimeout(function () {
+          f()
+          backFun()
+        }, time)
+      }
+    },
+    async _synthesizeInfo () {
+      let res = await synthesizeInfo(this.$store.getters.secCode)
+      this.pointUse = res.data.pointUse
+      this.toDayInAndOut = res.data.toDayInAndOut
+      this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
+      this.inqty1 = this.toDayInAndOut.in.total_qty
+      this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
+      this.outqty1 = this.toDayInAndOut.out.total_qty
+      this.lx_in_week = [...res.data.inAndOutTrend.in]
+      this.lx_out_week = [...res.data.inAndOutTrend.out]
+      this.lx_inventory = res.data.ivtAnalyse
+      this.taskList = [...res.data.realTask]
+      this.billList = [...res.data.unIos]
+      this.setEchart1()
+      this.setEchart2()
+      // 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.data
+      seriesData.map(el => {
+        el.value = el.ivt_qty
+        el.name = el.material_name
+      })
+      let total = this.lx_inventory.total_qty
+      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.myChart1.setOption(option, true)
+    },
+    setEchart2 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      this.lx_in_week.map(el => {
+        barData1.push(el.qty)
+      })
+      this.lx_out_week.map(el => {
+        barName.push(el.date)
+        barData2.push(el.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'
+            }
+          }
+          // max: total
+        },
+        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.myChart2.setOption(option, true)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import './style.stylus'
+.body_container
+  padding-top 38px
+.mgr8
+  margin-right 8px
+.mgb8
+  margin-bottom 8px
+.wraper_1
+  width 100%
+  height calc(50% - 28px)
+.wraper_2
+  height calc(50% - 4px)
+  padding 4px 10px
+  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)
+.percent_item
+  width 76px
+  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
+  p
+    font-size 15px
+    line-height 76px
+    color #fff
+    text-align center
+.font_1
+  font-size 13px
+.font_2
+  font-size 12px
+  text-align left
+  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>
diff --git a/src/pages/modules/index02.vue b/src/pages/modules/index02.vue
new file mode 100644
index 0000000..930c688
--- /dev/null
+++ b/src/pages/modules/index02.vue
@@ -0,0 +1,601 @@
+<template>
+  <div class="box relative">
+    <t-header type="1" title1="仓储监控" title2="WMS仓储看板"></t-header>
+    <div class="box body_container">
+      <div class="acon" v-for="(e, i) in resDataArr" :key="i">
+        <div class="relative b_title">
+          <span class="absolute sj_icon"></span>
+          <p>仓储使用情况</p>
+        </div>
+        <div class="zd-row wraper_1 mgb8">
+          <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>{{ e.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">{{ e.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">{{ e.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">{{ e.pointUse.emp_qty }}<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 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': inw}"></div> -->
+                      <div class="percent_i" :style="{'width': getPercentage(e.toDayInAndOut.in.vehicle_qty, e.toDayInAndOut.in.total_qty)}"></div>
+                    </div>
+                    <div class="zd-row">
+                      <!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ inqty1 }}</span></p> -->
+                      <p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.in.total_qty }}</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': outw}"></div> -->
+                      <div class="percent_i percent_i_c" :style="{'width': getPercentage(e.toDayInAndOut.out.vehicle_qty, e.toDayInAndOut.out.total_qty)}"></div>
+                    </div>
+                    <div class="zd-row">
+                      <!-- <p class="item_label font_2">总数量 : <span class="c_y">{{ outqty1 }}</span></p> -->
+                      <p class="item_label font_2">总数量 : <span class="c_y">{{ e.toDayInAndOut.out.total_qty }}</span></p>
+                    </div>
+                  </div>
+                </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="echartsRef1" style="width: 100%; height: 100%;"></div> -->
+                  <div :ref="'echartsRef1'+(i+1)" 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="(el, index) in e.ivtAnalyse.data" :key="index">
+                    <div class="zd-col-3 pie_legend_icon" :style="{'backgroundColor': ['#1980EA', '#67D470', '#B4C9EF', '#BCBF5C', '#EF5252', '#6d5edd', '#bf41bb', '#f65621', '#21f6eb', '#64b0ad'][index]}"></div>
+                    <div class="zd-col-21">
+                      <p class="pie_legend_txt_1">{{ el.material_name }}</p>
+                      <div class="zd-row jcflexstart">
+                        <p class="pie_legend_txt_2">{{ el.ivt_qty }}</p>
+                        <p class="pie_legend_txt_3">{{ el.percentage }}</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="echartsRef2" style="width: 100%; height: 100%;"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import THeader from '@components/header.vue'
+// import { synthesizeInfo } from '@js/getData2.js'
+import { synthesizeInfo } from '@js/mork02.js'
+export default {
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      intervalId: null,
+      materList: [],
+      historyList: [],
+      myChart10: null,
+      myChart11: null,
+      myChart12: null,
+      myChart13: null,
+      myChart14: null,
+      myChart2: null,
+      myChart4: null,
+      lx_in_week: [], // 料箱库入库趋势
+      lx_out_week: [], // 料箱库出库趋势
+      lx_inventory: [], // 料箱实时库存
+      pointUse: {}, // 料箱货位使用
+      toDayInAndOut: {}, // 料箱今日出入库
+      inw: '0',
+      inqty1: '0',
+      outw: '0',
+      outqty1: '0',
+      resDataArr: []
+    }
+  },
+  created () {
+    let obj = {
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime,
+      setJxtTime: this.$store.getters.setJxtTime,
+      pageNo: this.$store.getters.pageNo,
+      iskb: '02'
+    }
+    this.$store.dispatch('setConfig', obj)
+    this._synthesizeInfo()
+    this.timerFun(this._synthesizeInfo, this.interTime)()
+  },
+  mounted () {
+    // this.myChart10 = this.$echarts.init(this.$refs.echartsRef10)
+    // this.myChart11 = this.$echarts.init(this.$refs.echartsRef11)
+    // this.myChart12 = this.$echarts.init(this.$refs.echartsRef12)
+    // this.myChart13 = this.$echarts.init(this.$refs.echartsRef13)
+    // this.myChart14 = this.$echarts.init(this.$refs.echartsRef14)
+    // this.myChart2 = this.$echarts.init(this.$refs.echartsRef2)
+  },
+  destroyed () {
+    // if (this.intervalId !== null) {
+    //   clearTimeout(this.intervalId)
+    //   this.intervalId = null
+    // }
+    // if (this.myChart10 !== null) {
+    //   this.myChart10.dispose()
+    //   this.myChart10 = null
+    // }
+    // if (this.myChart11 !== null) {
+    //   this.myChart11.dispose()
+    //   this.myChart11 = null
+    // }
+    // if (this.myChart12 !== null) {
+    //   this.myChart12.dispose()
+    //   this.myChart12 = null
+    // }
+    // if (this.myChart13 !== null) {
+    //   this.myChart13.dispose()
+    //   this.myChart13 = null
+    // }
+    // if (this.myChart14 !== null) {
+    //   this.myChart14.dispose()
+    //   this.myChart14 = null
+    // }
+    // if (this.myChart2 !== null) {
+    //   this.myChart2.dispose()
+    //   this.myChart2 = null
+    // }
+  },
+  methods: {
+    getPercentage (part, whole) {
+      if (Number(whole) === 0) {
+        return 0
+      }
+      const percentage = (part / whole * 100).toFixed(2)
+      return `${percentage}%`
+    },
+    timerFun (f, time) {
+      let _this = this
+      return function backFun () {
+        clearTimeout(_this.intervalId)
+        _this.intervalId = setTimeout(function () {
+          f()
+          backFun()
+        }, time)
+      }
+    },
+    async _synthesizeInfo () {
+      let res = await synthesizeInfo(this.$store.getters.secCode)
+      this.resDataArr = res.data
+      this.resDataArr.forEach((item, index) => {
+        // el.value = el.ivt_qty
+        // el.name = el.material_name
+        console.log(item, index, 666)
+        this.setEchart1(item, index)
+      })
+      this.pointUse = res.data[0].pointUse
+      this.toDayInAndOut = res.data[0].toDayInAndOut
+      this.inw = this.getPercentage(this.toDayInAndOut.in.vehicle_qty, this.toDayInAndOut.in.total_qty)
+      this.inqty1 = this.toDayInAndOut.in.total_qty
+      this.outw = this.getPercentage(this.toDayInAndOut.out.vehicle_qty, this.toDayInAndOut.out.total_qty)
+      this.outqty1 = this.toDayInAndOut.out.total_qty
+      this.lx_in_week = [...res.data[0].inAndOutTrend.in]
+      this.lx_out_week = [...res.data[0].inAndOutTrend.out]
+      this.lx_inventory = res.data[0].ivtAnalyse
+      // this.setEchart1()
+      // this.setEchart2()
+    },
+    setEchart1 (item, index) {
+      console.log(item, index, 777)
+      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 = item.ivtAnalyse.data
+      seriesData.map(el => {
+        el.value = el.ivt_qty
+        el.name = el.material_name
+      })
+      let total = item.ivtAnalyse.total_qty
+      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
+          }
+        ]
+      }
+      if (index === 0) {
+        console.log(22222)
+        this.$echarts.init(this.$refs.echartsRef10).setOption(option, true)
+        console.log(33)
+      }
+      if (index === 1) {
+        this.$echarts.init(this.$refs.echartsRef11).setOption(option, true)
+      }
+      // if (index === 2) {
+      //   this.myChart12.setOption(option, true)
+      // }
+      // if (index === 3) {
+      //   this.myChart13.setOption(option, true)
+      // }
+      // if (index === 4) {
+      //   this.myChart14.setOption(option, true)
+      // }
+      // this.myChart1.setOption(option, true)
+    },
+    setEchart2 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      this.lx_in_week.map(el => {
+        barData1.push(el.qty)
+      })
+      this.lx_out_week.map(el => {
+        barName.push(el.date)
+        barData2.push(el.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'
+            }
+          }
+          // max: total
+        },
+        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.myChart2.setOption(option, true)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import './style.stylus'
+.acon
+  height 40%
+.body_container
+  padding-top 38px
+.mgr8
+  margin-right 8px
+.mgb8
+  margin-bottom 8px
+.wraper_1
+  width 100%
+  // height calc(50% - 28px)
+  height calc(100% - 28px)
+.wraper_2
+  height calc(50% - 4px)
+  padding 4px 10px
+  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)
+.percent_item
+  width 76px
+  background center / 100% auto url('../../images/pie-bg_2_s.png') no-repeat
+  p
+    font-size 15px
+    line-height 76px
+    color #fff
+    text-align center
+.font_1
+  font-size 13px
+.font_2
+  font-size 12px
+  text-align left
+  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>
diff --git a/src/pages/modules/index2.vue b/src/pages/modules/index2.vue
index 7e8f06d..4f0cef0 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>
@@ -230,6 +230,15 @@ export default {
     }
   },
   created () {
+    let obj = {
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime,
+      setJxtTime: this.$store.getters.setJxtTime,
+      pageNo: this.$store.getters.pageNo,
+      iskb: '02'
+    }
+    this.$store.dispatch('setConfig', obj)
+    console.log(1111)
     this._synthesizeInfo()
     this.timerFun(this._synthesizeInfo, this.interTime)()
   },
diff --git a/src/router/index.js b/src/router/index.js
index e185a0a..c5021fe 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,10 @@ const Setup = r => require.ensure([], () => r(require('../pages/Setup')), 'Setup
 const index1 = r => require.ensure([], () => r(require('../pages/modules/index1')), 'index')
 const index2 = r => require.ensure([], () => r(require('../pages/modules/index2')), 'index')
 const index3 = r => require.ensure([], () => r(require('../pages/modules/index3')), 'index')
+const index01 = r => require.ensure([], () => r(require('../pages/modules/index01')), 'index')
+const index02 = r => require.ensure([], () => r(require('../pages/modules/index02')), 'index')
+const screen01 = r => require.ensure([], () => r(require('../pages/ccjk/screen01')), 'screen01')
+const screen02 = r => require.ensure([], () => r(require('../pages/ccjk/screen02')), 'screen02')
 
 Vue.use(Router)
 
@@ -30,6 +34,22 @@ export default new Router({
     {
       path: '/index3',
       component: index3
+    },
+    {
+      path: '/index01',
+      component: index01
+    },
+    {
+      path: '/index02',
+      component: index02
+    },
+    {
+      path: '/screen01',
+      component: screen01
+    },
+    {
+      path: '/screen02',
+      component: screen02
     }
   ]
 })
diff --git a/src/vuex/modules/com.js b/src/vuex/modules/com.js
index 46a3f32..37f6114 100644
--- a/src/vuex/modules/com.js
+++ b/src/vuex/modules/com.js
@@ -9,7 +9,9 @@ const state = {
   baseUrl: getStore('baseUrl') || baseUrl,
   setTime: getStore('setTime') || 15000,
   setJxtTime: getStore('setJxtTime') || 3000,
-  pageNo: getStore('pageNo') || '1'
+  pageNo: getStore('pageNo') || '01',
+  iskb: getStore('iskb') || '',
+  secCode: getStore('secCode') || ''
 }
 
 const actions = {
@@ -18,6 +20,8 @@ const actions = {
     setStore('setTime', res.setTime)
     setStore('setJxtTime', res.setJxtTime)
     setStore('pageNo', res.pageNo)
+    setStore('iskb', res.iskb)
+    setStore('secCode', res.secCode)
     commit(types.COM_CONFIG, res)
   }
 }
@@ -26,7 +30,9 @@ const getters = {
   baseUrl: state => state.baseUrl,
   setTime: state => state.setTime,
   setJxtTime: state => state.setJxtTime,
-  pageNo: state => state.pageNo
+  pageNo: state => state.pageNo,
+  iskb: state => state.iskb,
+  secCode: state => state.secCode
 }
 
 const mutations = {
@@ -35,6 +41,8 @@ const mutations = {
     state.setTime = res.setTime
     state.setJxtTime = res.setJxtTime
     state.pageNo = res.pageNo
+    state.iskb = res.iskb
+    state.secCode = res.secCode
   }
 }