diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index a84ff34..0aac29b 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -19,6 +19,7 @@ time, mark, audio, video, input {
     color: #ffffff;
     font-weight: normal;
     vertical-align: baseline;
+    font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
 }
  
 /* HTML5 display-role reset for older browsers */
@@ -89,8 +90,8 @@ html, body {
  
 body {
      -webkit-text-size-adjust: none;
-     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-     background: #05032a center center / 100% 100% url(../../assets/images/bg.png) no-repeat;
+     /* -webkit-tap-highlight-color: rgba(0, 0, 0, 0); */
+     /* background: #05032a center center / 100% 100% url(../../assets/images/bg.png) no-repeat; */
 }
 
 div, p {
diff --git a/src/assets/js/getData2.js b/src/assets/js/getData2.js
index cafbb57..703be7c 100644
--- a/src/assets/js/getData2.js
+++ b/src/assets/js/getData2.js
@@ -3,22 +3,26 @@ import {post, post1} from '@js/http.js'
 /** 1.1配粉设备下拉框 */
 export const queryDevice = (url) => post1(url + '/api/screen/pdm/queryDevice', {})
 
-/** 1.2大屏左一 */
-export const queryInfo1 = (id) => post('api/screen/pdm/queryInfo1', {
-  device_id: id
-})
+/** 1.1大屏左一 */
+export const planReached = (id) => post('api/bigscreen/product/planReached', {})
 
-/** 1.3大屏左二 */
-export const queryInfo2 = (id) => post('api/screen/pdm/queryInfo2', {
-  device_id: id
-})
+/** 1.2大屏左二 */
+export const worksectionHarvest = (id) => post('api/bigscreen/product/worksectionHarvest', {})
+
+/** 1.3大屏左三 */
+export const monthHarvest = (id) => post('api/bigscreen/product/monthHarvest', {})
 
 /** 1.4大屏右一 */
-export const queryInfo3 = (id) => post('api/screen/pdm/queryInfo3', {
-  device_id: id
-})
+export const output = (id) => post('api/bigscreen/product/output', {})
 
 /** 1.5大屏右二 */
-export const queryInfo4 = (id) => post('api/screen/pdm/queryInfo4', {
-  device_id: id
-})
+export const topHarvest = (id) => post('api/bigscreen/product/topHarvest', {})
+
+/** 1.6大屏右三 */
+export const monthOrder = (id) => post('api/bigscreen/product/monthOrder', {})
+
+/** 1.7大屏中一 */
+export const productSchedule = (id) => post('api/bigscreen/product/productSchedule', {})
+
+/** 1.8大屏中二 */
+export const unfinishOrder = (id) => post('api/bigscreen/product/unfinishOrder', {})
diff --git a/src/pages/MonitoringScreen1.vue b/src/pages/MonitoringScreen1.vue
new file mode 100644
index 0000000..a40daab
--- /dev/null
+++ b/src/pages/MonitoringScreen1.vue
@@ -0,0 +1,1214 @@
+<template>
+  <section class="bg">
+    <header>
+      <p>海亮铜管智能车间生产监控中心</p>
+      <div class="data_box clearfix">
+        <div class="date_item date">{{date}}</div>
+        <div class="date_item week">{{week}}</div>
+        <div class="date_item time clearfix">
+          <div class="tiem_item hours">{{hours}}</div>
+          <div class="colon">:</div>
+          <div class="tiem_item minutes">{{minutes}}</div>
+          <div class="colon">:</div>
+          <div class="tiem_item seconds">{{seconds}}</div>
+        </div>
+      </div>
+    </header>
+    <div class="container">
+      <div class="left_wrap">
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">计划达成</div>
+            <div class="item_tip_right">
+              <span>日计划达成</span><span class="span1">/月计划达成</span>
+            </div>
+          </div>
+          <div class="item_content_1">
+            <div class="item_content_1_inner">
+              <div class="item_content_1_inner_1">弯头工段</div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+              <div class="item_content_1_inner_2">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+            </div>
+            <div class="item_content_1_inner">
+              <div class="item_content_1_inner_1">弯头工段</div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+              <div class="item_content_1_inner_2">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+            </div>
+            <div class="item_content_1_inner">
+              <div class="item_content_1_inner_1">弯头工段</div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+              <div class="item_content_1_inner_2 item_content_1_inner_2_bg">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+              <div class="item_content_1_inner_2">
+                <p class="item_content_1_inner_2_p1">220000</p>
+                <p class="item_content_1_inner_2_p2">日计划量</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">近一周工段产量</div>
+          </div>
+          <div class="item_content_1">
+            <div id="echart_d1" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">近30天产量走势</div>
+          </div>
+          <div class="item_content_1">
+            <div id="echart_d2" style="width: 100%; height: 100%"></div>
+          </div>
+        </div>
+      </div>
+      <div class="center_wrap">
+        <div class="item_wrap_2">
+          <div class="item_tip item_tip_2">
+            <div class="item_tip_left">近30天产量走势</div>
+          </div>
+          <div class="item_content_2">
+            <div class="scroll_wrap">
+              <ul class="scroll_tab_1">
+                <li>订单号</li>
+                <li>工单号</li>
+                <li>计划完成</li>
+                <li>实际完成</li>
+                <li>差距</li>
+                <li>完成率</li>
+                <li>进度</li>
+              </ul>
+              <div class="scroll_container_1">
+                <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
+                  <ul class="scroll-ul_1">
+                    <li v-for="(e, i) in array1" :key="i">
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">
+                        <div class="progress_line_wrap">
+                          <div class="progress_dot"></div>
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+              </vue-seamless-scroll>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item_wrap_2 item_wrap_3">
+          <div class="item_tip item_tip_2">
+            <div class="item_tip_left">今日未完成的订单</div>
+          </div>
+          <div class="item_content_2">
+            <div class="scroll_wrap">
+              <ul class="scroll_tab_1">
+                <li>订单号</li>
+                <li>产品编号</li>
+                <li>产品规格</li>
+                <li>订单数量</li>
+                <li>实际完成</li>
+                <li>差距</li>
+                <li>计划完成日期</li>
+              </ul>
+              <div class="scroll_container_1">
+                <vue-seamless-scroll :data="array1" :class-option="defaultOption1">
+                  <ul class="scroll-ul_1">
+                    <li v-for="(e, i) in array1" :key="i">
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                      <div class="scroll-ul_1_div">{{e.material_code}}</div>
+                    </li>
+                  </ul>
+              </vue-seamless-scroll>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right_wrap">
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">今日产量</div>
+          </div>
+          <div class="item_content_3">
+            <div class="right_1_up">
+              <div class="right_1_up_left">
+                <div class="echart_d3_wrap">
+                  <div id="echart_d3" style="width: 100%; height: 100%"></div>
+                </div>
+              </div>
+              <div class="right_1_up_right">
+                <div class="right_1_up_right_item">
+                  <p class="right_1_up_p1">计划产量</p>
+                  <p class="right_1_up_p2">200000<span>PCS</span></p>
+                </div>
+                <div class="right_1_up_right_item">
+                  <p class="right_1_up_p1">计划产量</p>
+                  <p class="right_1_up_p2">200000<span>PCS</span></p>
+                </div>
+              </div>
+            </div>
+            <div class="right_1_down">
+              <div class="right_1_down_inner_1">
+                <div>工单总数：</div>
+                <div>190个</div>
+              </div>
+              <div class="right_1_down_inner_2">
+                <div></div>
+                <div></div>
+              </div>
+              <div class="right_1_down_inner_3">
+                <div class="right_1_down_inner_3_i">
+                  <div class="right_1_down_inner_3_l">
+                    <span></span>
+                    <span>正常工单</span>
+                  </div>
+                  <div class="right_1_down_inner_3_r">
+                    <span>163</span>
+                    <span>个</span>
+                  </div>
+                </div>
+                <div class="right_1_down_inner_3_i">
+                  <div class="right_1_down_inner_3_l">
+                    <span></span>
+                    <span>延期工单</span>
+                  </div>
+                  <div class="right_1_down_inner_3_r">
+                    <span>16</span>
+                    <span>个</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">今日TOP10产量</div>
+          </div>
+          <div class="item_content_4">
+            <vue-seamless-scroll :data="array2" :class-option="defaultOption2">
+              <ul class="scroll-ul_2">
+                <li v-for="(e, i) in array2" :key="i">
+                  <div class="scroll-ul_2_div_1"><span></span></div>
+                  <div class="scroll-ul_2_div_2"></div>
+                  <div class="scroll-ul_2_div_3">
+                    <span></span><span></span>
+                  </div>
+                </li>
+              </ul>
+            </vue-seamless-scroll>
+          </div>
+        </div>
+        <div class="item_wrap">
+          <div class="item_tip">
+            <div class="item_tip_left">近30天生产订单分布</div>
+          </div>
+          <div class="item_content_5">
+            <div id="echart_d4" style="width: 100%; height: 100%"></div>
+            <!-- <div class="item_5_l">
+              <div class="item_5_l_1"></div>
+              <div class="item_5_l_2">
+                <div class="right_1_down_inner_3_i">
+                  <div class="right_1_down_inner_3_l">
+                    <span></span>
+                    <span>正常工单</span>
+                  </div>
+                  <div class="right_1_down_inner_3_r">
+                    <span>163</span>
+                    <span>个</span>
+                  </div>
+                </div>
+                <div class="right_1_down_inner_3_i">
+                  <div class="right_1_down_inner_3_l">
+                    <span></span>
+                    <span>正常工单</span>
+                  </div>
+                  <div class="right_1_down_inner_3_r">
+                    <span>163</span>
+                    <span>个</span>
+                  </div>
+                </div>
+                <div class="right_1_down_inner_3_i">
+                  <div class="right_1_down_inner_3_l">
+                    <span></span>
+                    <span>正常工单</span>
+                  </div>
+                  <div class="right_1_down_inner_3_r">
+                    <span>163</span>
+                    <span>个</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="item_5_r">
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span></span>
+                  <span>正常工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>163</span>
+                  <span>个</span>
+                </div>
+              </div>
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span></span>
+                  <span>正常工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>163</span>
+                  <span>个</span>
+                </div>
+              </div>
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span></span>
+                  <span>正常工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>163</span>
+                  <span>个</span>
+                </div>
+              </div>
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span></span>
+                  <span>正常工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>163</span>
+                  <span>个</span>
+                </div>
+              </div>
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span></span>
+                  <span>正常工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>163</span>
+                  <span>个</span>
+                </div>
+              </div>
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span></span>
+                  <span>正常工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>163</span>
+                  <span>个</span>
+                </div>
+              </div>
+              <div class="right_1_down_inner_3_i">
+                <div class="right_1_down_inner_3_l">
+                  <span></span>
+                  <span>正常工单</span>
+                </div>
+                <div class="right_1_down_inner_3_r">
+                  <span>163</span>
+                  <span>个</span>
+                </div>
+              </div>
+            </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <section class="bottom"></section>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'MonitoringScreen1',
+  data () {
+    return {
+      timer: null,
+      time: '',
+      hours: '',
+      minutes: '',
+      seconds: '',
+      date: '',
+      week: '',
+      myCharts1: '',
+      myCharts2: '',
+      myCharts3: '',
+      myCharts4: '',
+      array1: [{material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}, {material_code: '001'}],
+      array2: [],
+      num: 7
+    }
+  },
+  computed: {
+    defaultOption1 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: this.num, // 开始无缝滚动的数据量 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: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    },
+    defaultOption2 () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 5, // 开始无缝滚动的数据量 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: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  created () {
+    this.updateTime()
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
+  mounted () {
+    this.setEchart1()
+    this.setEchart2()
+    this.setEchart3()
+    this.setEchart4()
+  },
+  methods: {
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.hours = `${hh}`
+      this.minutes = `${mm}`
+      this.seconds = `${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    },
+    setEchart1 () {
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '弯头工段', itemStyle: {color: '#0E90FD'}}, {name: '综合工段', itemStyle: {color: '#33CCCC'}}, {name: '成品工段', itemStyle: {color: '#EAAD24'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            }
+          },
+          data: ['07-21', '07-21', '07-21', '07-21', '07-21']
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '弯头工段',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 1
+                  },
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 0.1
+                  }
+                ])
+              }
+            },
+            data: ['390', '390', '390', '390', '390']
+          },
+          {
+            name: '综合工段',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#33CCCC',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: ['230', '230', '230', '230', '230']
+          },
+          {
+            name: '成品工段',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#B68845',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(134,98,45,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: ['210', '210', '210', '210', '210']
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d1')
+      this.myCharts1 = this.$echarts.init(echart)
+      this.myCharts1.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts1.resize()
+      })
+    },
+    setEchart2 () {
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            // interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            }
+          },
+          data: ['07-21', '07-21', '07-21', '07-21', '07-21', '07-21', '07-21', '07-21', '07-21', '07-21']
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '今日',
+            type: 'line',
+            smooth: true,
+            symbolSize: 5,
+            showSymbol: false,
+            itemStyle: {
+              normal: {
+                lineStyle: {
+                  color: '#33CCCC',
+                  width: 2.4
+                }
+              }
+            },
+            areaStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: 'rgba(38,191,191,0.50)'
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.00)'
+                  }
+                ], false)
+              }
+            },
+            data: ['750', '500', '1100', '900', '1200', '750', '500', '1100', '900', '1200']
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d2')
+      this.myCharts2 = this.$echarts.init(echart)
+      this.myCharts2.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts2.resize()
+      })
+    },
+    setEchart3 () {
+      let value = 85
+      let title = '%'
+      let text = '完成率'
+      let option = {
+        title: [
+          {
+            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 36,
+                  color: '#00D9FF',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700'
+                },
+                b: {
+                  fontSize: 16,
+                  color: '#ffffff',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700',
+                  padding: [10, 0, 0, 5]
+                },
+                c: {
+                  color: '#FFFFFF',
+                  fontSize: 13,
+                  fontWeight: '700',
+                  fontFamily: 'SourceHanSansCN',
+                  padding: [10, 0, 0, 0]
+                }
+              }
+            }
+          }
+        ],
+        polar: {
+          radius: ['75%', '83%'],
+          center: ['50%', '50%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {name: '',
+            type: 'bar',
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#0a2543'
+            },
+            data: [value],
+            coordinateSystem: 'polar',
+            itemStyle: {
+              normal: {
+                color: '#00dfff'
+              }
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d3')
+      this.myCharts3 = this.$echarts.init(echart)
+      this.myCharts3.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts3.resize()
+      })
+    },
+    setEchart4 () {
+      let arr = [
+        { value: 163, name: '三通1/21' },
+        { value: 163, name: '三通1/22' },
+        { value: 163, name: '三通1/23' },
+        { value: 24, name: '三通1/24' },
+        { value: 163, name: '三通1/25' },
+        { value: 163, name: '三通1/26' },
+        { value: 163, name: '三通1/27' },
+        { value: 163, name: '三通1/28' },
+        { value: 163, name: '三通1/29' },
+        { value: 163, name: '三通1/30' }
+      ]
+      var option = {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: [{
+          data: ['三通1/21', '三通1/22', '三通1/23'],
+          top: 'center',
+          left: '55%',
+          orient: 'vertical',
+          icon: 'circle',
+          itemGap: 75,
+          itemHeight: 20,
+          formatter: (name) => {
+            var arr = option.series[0].data
+            arr.map((e, i) => {
+              if (name === e.name) {
+                return '{a|' + name + '}{b|' + e.value + '}{c|个}'
+              }
+            })
+          },
+          textStyle: {
+            rich: {
+              a: {
+                color: '#ffffff',
+                fontSize: 14,
+                lineHeight: 30,
+                fontFamily: 'SourceHanSansCN',
+                foontWeight: '400'
+              },
+              b: {
+                color: '#00D5FF ',
+                fontSize: 18,
+                lineHeight: 30,
+                fontFamily: 'SourceHanSansCN',
+                foontWeight: '700'
+              },
+              c: {
+                color: '#ffffff ',
+                fontSize: 12,
+                lineHeight: 30,
+                fontFamily: 'SourceHanSansCN',
+                foontWeight: '700'
+              }
+            }
+          }
+        },
+        {
+          data: ['三通1/24', '三通1/25', '三通1/26', '三通1/27', '三通1/28', '三通1/29', '三通1/30'],
+          top: 'center',
+          left: '80%',
+          orient: 'vertical',
+          icon: 'circle',
+          itemGap: 75,
+          itemHeight: 20,
+          formatter: (name) => {
+            var arr = option.series[0].data
+            arr.map((e, i) => {
+              if (name === e.name) {
+                return '{a|' + name + '}{b|' + e.value + '}{c|个}'
+              }
+            })
+          },
+          textStyle: {
+            rich: {
+              a: {
+                color: '#ffffff',
+                fontSize: 14,
+                lineHeight: 30,
+                fontFamily: 'SourceHanSansCN',
+                foontWeight: '400'
+              },
+              b: {
+                color: '#00D5FF ',
+                fontSize: 18,
+                lineHeight: 30,
+                fontFamily: 'SourceHanSansCN',
+                foontWeight: '700'
+              },
+              c: {
+                color: '#ffffff ',
+                fontSize: 12,
+                lineHeight: 30,
+                fontFamily: 'SourceHanSansCN',
+                foontWeight: '700'
+              }
+            }
+          }
+        }
+        ],
+        series: [
+          {
+            name: '区域',
+            type: 'pie',
+            radius: ['40%', '60%'],
+            center: ['30%', '50%'],
+            left: 0,
+            roseType: 'area',
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: 'center'
+            },
+            labelLine: {
+              show: false
+            },
+            data: arr
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d4')
+      this.myCharts4 = this.$echarts.init(echart)
+      this.myCharts4.setOption(option)
+      window.addEventListener('resize', () => {
+        this.myCharts4.resize()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@css/mixin'
+.bg
+  _wh(100%, 100%)
+  background #050d20 center center / 100% 100% url(../assets/images/screen1/bg.png) no-repeat
+  overflow hidden
+header
+  width 100%
+  height 1rem
+  position relative
+  background center center / 100% 100% url(../assets/images/screen1/header.png) no-repeat
+  p
+    font-family "PangMenZhengDao"
+    _font(.48rem, 1rem, #ffffff, lighter, center)
+    letter-spacing .05rem
+    text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
+.data_box
+  position absolute
+  right 0
+  top .14rem
+  height .37rem
+.date, .week
+  padding-right .2rem
+.time
+  width 1.7rem
+  text-align center
+.date_item
+  float left
+  _font(.2rem, .37rem, #fff,,)
+.tiem_item
+  float left
+  _font(.32rem, .37rem, #fff,,)
+.colon
+  float left
+  _font(.32rem, .37rem, #fff,,)
+.container
+  _wh(100%, calc(100% - 1.38rem))
+  padding .3rem .2509rem 0
+  overflow hidden
+  clear both
+.bottom
+  _wh(100%, .38rem)
+  background center bottom / 19.06rem 100% url(../assets/images/screen1/bottom.png) no-repeat
+.left_wrap
+  float left
+  _wh(4.0756rem, 100%)
+.center_wrap
+  float left
+  _wh(9.96rem, 100%)
+  margin-left .2936rem
+  padding .4rem .16rem
+  background center bottom / 100% 100% url(../assets/images/screen1/item_2.png) no-repeat
+.right_wrap
+  float right
+  _wh(4.0273rem, 100%)
+.item_wrap
+  _wh(100%, calc(100% / 3))
+.item_tip
+  clear both
+  _wh(100%, .32rem)
+  line-height .32rem
+  background center center / 100% 100% url(../assets/images/screen1/title_bg_1.png) no-repeat
+.item_tip_2
+  background center center / 100% 100% url(../assets/images/screen1/title_bg_2.png) no-repeat
+.item_tip_left
+  float left
+  _wh(60%, 100%)
+  font-family "SourceHanSansCN"
+  _font(.18rem, inherit, #fff, 700,)
+  letter-spacing .02rem
+  text-shadow 0 0 .09rem #159AFF
+  padding-left .38rem
+.item_tip_right
+  float right
+  _wh(39%, 100%)
+  line-height inherit
+  text-align right
+  padding-right .09rem
+  span
+    _font(.14rem, inherit, #FFCB00, lighter,)
+  .span1
+    font-size .12rem
+    color #84B0DA
+.item_content_1
+  _wh(100%, calc(100% - .32rem))
+  _fj(space-around)
+  padding .17rem 0 .24rem
+.item_content_1_inner
+  _wh(1.2rem, 100%)
+  background-color #011834
+.item_content_1_inner_1
+  _wh(100%, .37rem)
+  font-family "SourceHanSansCN"
+  _font(.14rem, .37rem, #78B1DE, 700, center)
+  letter-spacing .02rem
+  background center center / 100% 100% url(../assets/images/screen1/item_1.png) no-repeat
+.item_content_1_inner_2
+  _wh(100%, calc((100% - .37rem) / 3))
+  overflow hidden
+  _fj(space-evenly)
+  flex-direction column
+  padding-top .06rem
+.item_content_1_inner_2_bg
+  background center bottom / 1.02rem .03rem url(../assets/images/screen1/line_1.png) no-repeat
+.item_content_1_inner_2_p1
+  font-family "SourceHanSansCN"
+  _font(.18rem, .18rem, #fff, 700, center)
+  letter-spacing .0188rem
+.item_content_1_inner_2_p2
+  font-family "SourceHanSansCN"
+  _font(.14rem, .14rem, #84B0DA, 700, center)
+  letter-spacing .02rem
+.item_wrap_2
+  _wh(100%, calc((100% - .4rem) / 2))
+.item_wrap_3
+  margin-top .4rem
+.item_content_2
+  _wh(100%, calc(100% - .32rem))
+  margin-top .06rem
+  border .01rem solid rgba(8,205,248,0.3)
+.scroll_wrap
+  _wh(100%, 100%)
+.scroll_tab_1
+  _wh(100%, .4rem)
+  border-bottom .01rem solid rgba(8,205,248,0.3)
+  li
+    float left
+    width 13.8%
+    _font(.14rem,.4rem,#78B1DE,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(7)
+      width 17.2%
+.scroll_container_1
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.scroll-ul_1
+  li
+    _wh(100%, .44rem)
+    border-bottom .01rem solid rgba(8,205,248,0.3)
+    &:nth-child(even)
+      background rgba(1,24,52,0.60)
+      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    .scroll-ul_1_div
+      float left
+      _wh(13.8%, .44rem)
+      _fj(center)
+      _font(.14rem, .44rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding 0 .02rem
+      overflow hidden
+      &:nth-child(7)
+        width 17.2%
+.progress_line_wrap
+  position relative
+  _wh(1.35rem, .03rem)
+  background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
+.progress_dot
+  position absolute
+  top -.06rem
+  left -.05rem
+  _wh(.15rem, .15rem)
+  background center center / 100% 100% url(../assets/images/screen1/dot_1.png) no-repeat
+.item_content_3
+  _wh(100%, calc(100% - .32rem))
+  padding-top .1rem
+.right_1_up
+  clear both
+  _wh(100%, 1.6rem)
+  padding 0 .3rem .2rem
+  background center bottom / 100% .03rem url(../assets/images/screen1/line_2.png) no-repeat
+.right_1_up_left
+  float left
+  _wh(1.4rem, 1.4rem)
+  background center bottom / 100% 100% url(../assets/images/screen1/item_3.png) no-repeat
+  _fj(center)
+.echart_d3_wrap
+  _wh(80%, 80%)
+.right_1_up_right
+  float right
+  _wh(1.71rem, 100%)
+.right_1_up_right_item
+  _wh(100%, .6rem)
+  background center bottom / 100% 100% url(../assets/images/screen1/item_4.png) no-repeat
+  _fj(space-evenly)
+  flex-direction column
+  &:nth-child(2)
+    margin-top .2rem
+.right_1_up_p1
+  font-family "SourceHanSansCN"
+  _font(.14rem, .14rem, #78B1DE, 700, center)
+.right_1_up_p2
+  font-family "SourceHanSansCN"
+  _font(.18rem, .18rem, #fff, 700, center)
+  span
+    _font(.12rem, .18rem, #fff, 700, center)
+.right_1_down
+  _wh(100%, calc(100% - 1.6rem))
+  padding .05rem .3rem 0
+.right_1_down_inner_1
+  _wh(100%, .28rem)
+  overflow hidden
+  _fj()
+  div
+    &:nth-child(1)
+      font-family "SourceHanSansCN"
+      _font(.12rem, .28rem, #84B0DA, 700,)
+      letter-spacing .0171rem
+    &:nth-child(2)
+      font-family "SourceHanSansCN"
+      _font(.16rem, .28rem, #fff, 700, right)
+      letter-spacing .02rem
+.right_1_down_inner_2
+  _wh(100%, .1811rem)
+  background-color rgba(0,213,255,0.20)
+  _fj()
+  div
+    &:nth-child(1)
+      _wh(50%, .0805rem)
+      background-color #07E083
+    &:nth-child(2)
+      _wh(50%, .0805rem)
+      background-color #B68845
+.right_1_down_inner_3
+  _wh(100%, .3rem)
+  margin-top .1rem
+  _fj()
+.right_1_down_inner_3_i
+  _wh(1.83rem, .3rem)
+  _fj()
+  background center bottom / 100% 100% url(../assets/images/screen1/item_5.png) no-repeat
+.right_1_down_inner_3_l
+  _wh(50%, 100%)
+  overflow hidden
+  _fj()
+  span
+    display block
+    &:nth-child(1)
+      _wh(.0725rem, .0725rem)
+      border-radius 100%
+      background-color #07E083
+      margin-left .15rem
+    &:nth-child(2)
+      font-family "SourceHanSansCN"
+      _font(.14rem, .3rem, #fff,400,)
+.right_1_down_inner_3_r
+  _wh(50%, 100%)
+  line-height .3rem
+  overflow hidden
+  text-align center
+  span
+    font-family "SourceHanSansCN"
+    _font(.12rem, .3rem, #fff,700,)
+    &:nth-child(1)
+      font-family "SourceHanSansCN"
+      _font(.18rem, .3rem, #00D5FF,700,)
+.item_content_4
+  _wh(100%, calc(100% - .32rem))
+  padding .1rem 0 .2rem
+  overflow hidden
+.scroll-ul_2
+  li
+    _wh(100%, .4rem)
+    clear both
+    margin-bottom .1rem
+    &:nth-child(-n+3)
+      background center center / 100% 100% url(../assets/images/screen1/item_6.png) no-repeat
+    &:nth-child(n+4)
+      background center center / 100% 100% url(../assets/images/screen1/item_7.png) no-repeat
+    &:nth-child(1) .scroll-ul_2_div_1
+      background center center / .24rem .27rem url(../assets/images/screen1/top_1.png) no-repeat
+    &:nth-child(2) .scroll-ul_2_div_1
+      background center center / .24rem .27rem url(../assets/images/screen1/top_2.png) no-repeat
+    &:nth-child(3) .scroll-ul_2_div_1
+      background center center / .24rem .27rem url(../assets/images/screen1/top_3.png) no-repeat
+.scroll-ul_2_div_1
+  float left
+  _wh(.6rem, 100%)
+  _font(.16rem, .4rem, #fff, 700, center)
+.scroll-ul_2_div_2
+  float left
+  _wh(calc(60% - .6rem), 100%)
+  font-family "SourceHanSansCN"
+  _font(.14rem, .4rem, #fff, 700,)
+  padding-left .1rem
+  letter-spacing .02rem
+.scroll-ul_2_div_3
+  float right
+  _wh(30%, 100%)
+  font-family "SourceHanSansCN"
+  _font(.12rem, .4rem, #fff, 700, right)
+  padding-right .2rem
+  span
+   &:nth-child(1)
+    font-size .18rem
+    letter-spacing: .0125rem
+.item_content_5
+  _wh(100%, calc(100% - .32rem))
+  padding-top .3rem
+  clear both
+.item_5_l
+  float left
+  _wh(1.83rem, .3rem)
+.item_5_r
+  float right
+  _wh(1.83rem, .3rem)
+  .right_1_down_inner_3_i
+    margin-bottom .045rem
+.item_5_l_1
+  _wh(100%, 1.42rem)
+  background right center / .02rem 100% url(../assets/images/screen1/line_3.png) no-repeat
+.item_5_l_2
+  _wh(100%, calc(100% - 1.42rem))
+  .right_1_down_inner_3_i
+    margin-bottom .03rem
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 19f1c48..3d21f09 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,8 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
-const TaskScreen = r => require.ensure([], () => r(require('@page/TaskScreen')), 'TaskScreen')
-const WorkStep = r => require.ensure([], () => r(require('@page/WorkStep')), 'WorkStep')
+const MonitoringScreen1 = r => require.ensure([], () => r(require('@page/MonitoringScreen1')), 'MonitoringScreen1')
 
 Vue.use(Router)
 
@@ -19,12 +18,8 @@ export default new Router({
       component: Setup
     },
     {
-      path: '/taskscreen',
-      component: TaskScreen
-    },
-    {
-      path: '/workstep',
-      component: WorkStep
+      path: '/MonitoringScreen1',
+      component: MonitoringScreen1
     }
   ]
 })