diff --git a/src/main.js b/src/main.js
index 00fa465..1efe892 100644
--- a/src/main.js
+++ b/src/main.js
@@ -59,6 +59,18 @@ Vue.prototype.dataZoomEnd = (titLength, defaultLength = 7) => {
 	}
 	return ((defaultLength / (titLength + 1)) * 100).toFixed(0)
 }
+Vue.prototype.dataZoomStart = (titLength, defaultLength = 4,position) => {
+	if (titLength <= defaultLength) {
+    if(position=='start'){
+      return 0
+    }
+		return titLength - 1
+	}
+  if(position=='start'){
+    return titLength - 4
+  }
+  return titLength - 1
+}
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
diff --git a/src/views/bigScreen/components/scaleBox.vue b/src/views/bigScreen/components/scaleBox.vue
index 7260f21..f0dfe2c 100644
--- a/src/views/bigScreen/components/scaleBox.vue
+++ b/src/views/bigScreen/components/scaleBox.vue
@@ -1,85 +1,85 @@
 <template>
-	<div style="background-color: #000; height: 100%; width: 100%">
-		<div
-			class="ScaleBox"
-			ref="ScaleBox"
-			:style="{
-				width: width + 'px',
-				height: height + 'px',
-			}"
-		>
-			<slot></slot>
-		</div>
-	</div>
+  <div style="background-color: #000; height: 100%; width: 100%">
+    <div
+      class="ScaleBox"
+      ref="ScaleBox"
+      :style="{
+        width: width + 'px',
+        height: height + 'px',
+      }"
+    >
+      <slot></slot>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-	name: 'ScaleBox',
-	props: {},
-	data() {
-		return {
-			scale: 0,
-			width: 1920,
-			height: 1080,
-		}
-	},
-	mounted() {
-		this.setScale()
-		window.addEventListener('resize', this.debounce(this.setScale))
-	},
-	methods: {
-		getScale() {
-			const { width, height } = this
-			const wh = window.innerHeight / height
-			const ww = window.innerWidth / width
-			console.log(ww < wh ? ww : wh)
-			return ww < wh ? ww : wh
-		},
-		setScale() {
-			// if (window.innerHeight == 1080) {
-			//   this.height = 1080
-			// } else {
-			//   this.height = 937
-			// }
-			this.scale = this.getScale()
-			if (this.$refs.ScaleBox) {
-				this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
-			}
-		},
-		debounce(fn, delay) {
-			const delays = delay || 500
-			let timer
-			return function () {
-				const th = this
-				const args = arguments
-				if (timer) {
-					clearTimeout(timer)
-				}
-				timer = setTimeout(function () {
-					timer = null
-					fn.apply(th, args)
-				}, delays)
-			}
-		},
-	},
-}
+  name: "ScaleBox",
+  props: {},
+  data() {
+    return {
+      scale: 0,
+      width: 1920,
+      height: 1080,
+    };
+  },
+  mounted() {
+    this.setScale();
+    window.addEventListener("resize", this.debounce(this.setScale));
+  },
+  methods: {
+    getScale() {
+      const { width, height } = this;
+      const wh = window.innerHeight / height;
+      const ww = window.innerWidth / width;
+      console.log(ww < wh ? ww : wh);
+      return ww < wh ? ww : wh;
+    },
+    setScale() {
+      // if (window.innerHeight == 1080) {
+      //   this.height = 1080
+      // } else {
+      //   this.height = 937
+      // }
+      this.scale = this.getScale();
+      if (this.$refs.ScaleBox) {
+        this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+      }
+    },
+    debounce(fn, delay) {
+      const delays = delay || 500;
+      let timer;
+      return function () {
+        const th = this;
+        const args = arguments;
+        if (timer) {
+          clearTimeout(timer);
+        }
+        timer = setTimeout(function () {
+          timer = null;
+          fn.apply(th, args);
+        }, delays);
+      };
+    },
+  },
+};
 </script>
 
 <style lang="scss">
 #ScaleBox {
-	--scale: 1;
+  --scale: 1;
 }
 .ScaleBox {
-	position: absolute;
-	transform: scale(var(--scale)) translate(-50%, -50%);
-	display: flex;
-	flex-direction: column;
-	transform-origin: 0 0;
-	left: 50%;
-	top: 50%;
-	transition: 0.3s;
-	z-index: 999;
-	// background: rgba(255, 0, 0, 0.3);
+  position: absolute;
+  transform: scale(var(--scale)) translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  transform-origin: 0 0;
+  left: 50%;
+  top: 50%;
+  transition: 0.3s;
+  z-index: 999;
+  // background: rgba(255, 0, 0, 0.3);
 }
 </style>
diff --git a/src/views/bigScreen/drivingCabin/center.vue b/src/views/bigScreen/drivingCabin/center.vue
index ab4d7c0..cc55be2 100644
--- a/src/views/bigScreen/drivingCabin/center.vue
+++ b/src/views/bigScreen/drivingCabin/center.vue
@@ -26,11 +26,11 @@
             ><i class="num">{{ handleMillion(val.targetIncome) }}</i
             ><span class="num2">亿元</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar
               :percentage="(val.completedIncome / val.targetIncome) * 100"
             />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div>
@@ -43,11 +43,11 @@
             ><i class="num">{{ handleMillion(val.targetProfit) }}</i
             ><span class="num2">亿元</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar
               :percentage="(val.completedProfit / val.targetProfit) * 100"
             />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div>
@@ -60,13 +60,13 @@
             ><i class="num">{{ handleMillion(val.targetChargeQuantity) }}</i
             ><span class="num2">亿件</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar
               :percentage="
                 (val.completedChargeQuantity / val.targetChargeQuantity) * 100
               "
             />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div>
@@ -79,14 +79,14 @@
             ><i class="num">{{ handleMillion(val.targetDeliveryQuantity) }}</i
             ><span class="num2">亿件</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar
               :percentage="
                 (val.completedDeliveryQuantity / val.targetDeliveryQuantity) *
                 100
               "
             />
-          </div>
+          </div> -->
         </div>
       </div>
     </container3>
@@ -168,8 +168,8 @@ export default {
   color: #ffffff;
   font-size: 18px;
   .data-item {
-    // flex: 1;
-    width: 20%;
+    flex: 1;
+    // width: 20%;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
diff --git a/src/views/bigScreen/drivingCabin/left1.vue b/src/views/bigScreen/drivingCabin/left1.vue
index ffeea9f..9e6f1ef 100644
--- a/src/views/bigScreen/drivingCabin/left1.vue
+++ b/src/views/bigScreen/drivingCabin/left1.vue
@@ -5,16 +5,28 @@
         <el-row class="content1">
           <el-col :span="24">
             <div id="left1" ref="left1" class="chart1"></div>
+            <div style="text-align: right; padding-right: 20px">
+              <el-pagination
+                small
+                layout="prev, pager, next"
+                background
+                :total="total"
+                :page-size="7"
+                :current-page.sync="currentPage1"
+                @current-change="handleCurrentChange"
+              >
+              </el-pagination>
+            </div>
           </el-col>
         </el-row>
-        <div class="box">
+        <!-- <div class="box">
           <span style="font-size: 25px; margin-right: 3px">·</span>
           <span>总完成任务/完成率</span>
           <i class="num"
             >{{ res.map.completedTasks }}/{{ res.map.cate.toFixed(2) }}%</i
           >
           <progressBar :percentage="res.map.cate" />
-        </div>
+        </div> -->
       </div>
     </container2>
     <container2 title="收入概况" style="margin-top: 10px">
@@ -54,6 +66,11 @@ export default {
   },
   data() {
     return {
+      currentPage1: 1,
+      total: 30,
+      titData: [],
+      valData: [],
+      time: null,
       data: [
         { value: 154, name: "类别一" },
         { value: 775, name: "类别二" },
@@ -78,73 +95,59 @@ export default {
     this.$nextTick(() => {
       this.initChart();
       this.initLine();
+      this.start();
     });
   },
-  beforeDestroy() {},
+  beforeDestroy() {
+    this.end();
+  },
   methods: {
+    start() {
+      this.time = setInterval(() => {
+        let size = this.currentPage1 + 1;
+        if (size * 6 > this.total) size = 1;
+        this.handleCurrentChange(size);
+      }, 5000);
+    },
+    end() {
+      if (this.time) {
+        clearInterval(this.time);
+      }
+    },
     initChart() {
       this.setOptions();
     },
-    setOptions() {
+    handleCurrentChange(val) {
+      this.currentPage1 = val;
+      this.setPageData(val);
+    },
+    setOptions(val) {
       request({
         url: "/hx/cockpitOverview/businessResponsibility",
         method: "get",
       }).then((res) => {
         this.res = res.data;
-        let titData = [];
-        let valData = [];
         for (let i = 0; i < this.res.list.length; i++) {
           const item = this.res.list[i];
-          titData.push(item.indicator_name);
-          valData.push({ value: item.cate, name: item.indicator_name });
+          this.titData.push(item.indicator_name);
+          this.valData.push({ value: item.cate, name: item.indicator_name });
         }
-        this.chart = echarts.init(this.$refs.left1, "macarons");
-        this.chart.setOption({
-          tooltip: {
-            trigger: "item",
-            formatter: "{a} <br/>{b}: {c} ({d}%)",
-          },
-          color: this.colorList,
-          legend: {
-            type: "scroll",
-            data: titData,
-            orient: "vertical",
-            // left: '60%',
-            right: "10%",
-            y: "center",
-            textStyle: {
-              //图例文字的样式
-              color: "#fff",
-              fontSize: 16,
-            },
-            pageTextStyle: {
-              color: "#fff",
-            },
-            pageIconColor: "#fff",
-            pageIconInactiveColor: "#ccc",
-            // formatter: value => {
-            // 	return value + calcAverageValue(this.data, value)
-            // },
-          },
-          series: [
-            {
-              name: "概括",
-              type: "pie",
-              radius: [0, "85%"],
-              center: ["35%", "50%"],
-              label: {
-                formatter: "",
-                position: "inner",
-                fontSize: 14,
-              },
-              labelLine: {
-                show: false,
-              },
-              data: valData,
-            },
-          ],
-        });
+        this.setPageData(val);
       });
+    },
+
+    setPageData(val) {
+      let titData = [];
+      let valData = [];
+      if (!val) {
+        titData = this.titData.slice(0, 7);
+        // valData = this.valData.slice(0, 7);
+        valData = this.valData;
+      } else {
+        titData = this.titData.slice((val - 1) * 7, 7 * val);
+        // valData = this.valData.slice((val - 1) * 7, 7 * val);
+        valData = this.valData;
+      }
 
       const calcAverageValue = (data, name) => {
         const items = data.filter((d) => d.name === name);
@@ -152,7 +155,54 @@ export default {
           ? items.reduce((a, b) => a + b.value, 0) / items.length
           : "-";
       };
+      this.chart = echarts.init(this.$refs.left1, "macarons");
+      this.chart.setOption({
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)",
+        },
+        color: this.colorList,
+        legend: {
+          type: "scroll",
+          data: titData,
+          orient: "vertical",
+          // left: '60%',
+          right: "10%",
+          y: "center",
+          textStyle: {
+            //图例文字的样式
+            color: "#fff",
+            fontSize: 16,
+          },
+          pageTextStyle: {
+            color: "#fff",
+          },
+          pageIconColor: "#fff",
+          pageIconInactiveColor: "#ccc",
+          // formatter: value => {
+          // 	return value + calcAverageValue(this.data, value)
+          // },
+        },
+        series: [
+          {
+            name: "概括",
+            type: "pie",
+            radius: [0, "85%"],
+            center: ["35%", "50%"],
+            label: {
+              formatter: "",
+              position: "inner",
+              fontSize: 14,
+            },
+            labelLine: {
+              show: false,
+            },
+            data: valData,
+          },
+        ],
+      });
     },
+
     initLine() {
       request({
         url: "/hx/cockpitOverview/revenueProfile",
@@ -222,11 +272,24 @@ export default {
             },
           },
         },
-        dataZoom: {
-          type: "slider",
-          start: 0,
-          end: this.dataZoomEnd(titData.length, 7),
-        },
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(titData.length, 7),
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(titData.length, 4, "start"),
+            endValue: this.dataZoomStart(titData.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
         color: ["#ccc", "red"],
         yAxis: [
           {
@@ -312,6 +375,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep.el-pagination button {
+  display: none;
+  color: #fff !important;
+  background-color: unset !important;
+}
+::v-deep.el-pagination button:disabled {
+  color: #ccc !important;
+}
+::v-deep.el-pagination.is-background .el-pager li {
+  color: rgba(255, 255, 255, 0.65);
+  background: rgba(145, 213, 254, 0.2) !important;
+
+  &:hover {
+    color: #fff;
+  }
+}
+::v-deep.el-pagination.is-background .el-pager li:not(.disabled).active {
+  background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%) !important;
+}
 .wrap {
   display: flex;
   flex-direction: column;
diff --git a/src/views/bigScreen/drivingCabin/left2.vue b/src/views/bigScreen/drivingCabin/left2.vue
index c08de29..f7d6032 100644
--- a/src/views/bigScreen/drivingCabin/left2.vue
+++ b/src/views/bigScreen/drivingCabin/left2.vue
@@ -307,11 +307,24 @@ export default {
             top: 50,
             bottom: 50,
           },
-          dataZoom: {
-            type: "slider",
-            start: 0,
-            end: this.dataZoomEnd(titData.length, 7),
-          },
+          // dataZoom: {
+          //   type: "slider",
+          //   start: 0,
+          //   end: this.dataZoomEnd(titData.length, 7),
+          // },
+          dataZoom: [
+            {
+              type: "slider",
+              textStyle: {
+                color: "#fff",
+              },
+              startValue: this.dataZoomStart(titData.length, 4, "start"),
+              endValue: this.dataZoomStart(titData.length, 4, "end"),
+            },
+            {
+              type: "inside",
+            },
+          ],
           series: [
             {
               name: "预测",
diff --git a/src/views/bigScreen/drivingCabin/right1.vue b/src/views/bigScreen/drivingCabin/right1.vue
index 5787175..a340faf 100644
--- a/src/views/bigScreen/drivingCabin/right1.vue
+++ b/src/views/bigScreen/drivingCabin/right1.vue
@@ -10,7 +10,7 @@
         <div class="box">
           <span style="font-size: 25px; margin-right: 3px">·</span>
           <span>已完成任务/完成率</span>
-          <i class="num">{{rate.completedTotal}}/{{rate.rate}}%</i>
+          <i class="num">{{ rate.completedTotal }}/{{ rate.rate }}%</i>
           <progressBar :percentage="rate.rate" />
         </div>
       </div>
@@ -29,25 +29,25 @@
 </template>
 
 <script>
-import rocketTit from '../components/rocketTit/index.vue'
-import container2 from './components/container2/index.vue'
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
-import colorList from '@/utils/colorPalette'
+import rocketTit from "../components/rocketTit/index.vue";
+import container2 from "./components/container2/index.vue";
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
+import colorList from "@/utils/colorPalette";
 // import {Liquid} from '@antv/g2plot';
 // import resize from '../../dashboard/mixins/resize'
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
 export default {
   // mixins: [resize],
-  name: 'left1',
+  name: "left1",
   components: {
     rocketTit,
     container2,
     bigScreenTabs,
     progressBar,
   },
-  data () {
+  data() {
     return {
       chart: null,
       chart1: null,
@@ -56,79 +56,80 @@ export default {
         completedTotal: 0,
         rate: 0,
         targetTotal: 0,
-      }
-    }
+      },
+    };
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.initChart()
-      this.initLine()
-    })
+      this.initChart();
+      this.initLine();
+    });
   },
-  beforeDestroy () { },
+  beforeDestroy() {},
   methods: {
-    initChart () {
-      this.setOptions()
+    initChart() {
+      this.setOptions();
     },
-    setOptions () {
+    setOptions() {
       this.request({
-        url: '/hx/cockpitOverview/productionResponsibility',
-        method: 'get',
-      }).then(res => {
+        url: "/hx/cockpitOverview/productionResponsibility",
+        method: "get",
+      }).then((res) => {
         if (200 == res.code) {
           this.rate = res.data.rate;
           let valData = [];
           let titData = [];
           for (let i = 0; i < res.data.list.length; i++) {
             const item = res.data.list[i];
-            titData.push(item.translateName)
-            valData.push(
-              { value: item.completedTaskNumber, name: item.translateName },
-            );
+            titData.push(item.translateName);
+            valData.push({
+              value: item.completedTaskNumber,
+              name: item.translateName,
+            });
           }
-          this.chart = echarts.init(this.$refs.left1, 'macarons')
+          this.chart = echarts.init(this.$refs.left1, "macarons");
 
           this.chart.setOption({
             tooltip: {
-              trigger: 'item',
-              formatter: '{a} <br/>{b}: {c} ({d}%)',
+              trigger: "item",
+              formatter: "{a} <br/>{b}: {c} ({d}%)",
             },
             color: this.colorList,
             legend: {
               //   data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'],
               data: titData,
-              orient: 'vertical',
+              orient: "vertical",
               // left: '60%',
-              right: '2%',
-              y: 'center',
+              right: "2%",
+              y: "center",
               textStyle: {
                 //图例文字的样式
-                color: '#fff',
+                color: "#fff",
                 fontSize: 16,
               },
             },
             series: [
               {
-                name: '概括',
-                type: 'pie',
-                radius: ['40%', '80%'],
-                center: ['35%', '50%'],
+                name: "概括",
+                type: "pie",
+                radius: ["40%", "80%"],
+                center: ["35%", "50%"],
                 avoidLabelOverlap: false,
                 label: {
                   show: false,
-                  position: 'center',
+                  position: "center",
                 },
                 emphasis: {
                   label: {
                     show: false,
-                    fontSize: '40',
-                    fontWeight: 'bold',
+                    fontSize: "40",
+                    fontWeight: "bold",
                   },
                 },
                 labelLine: {
                   show: false,
                 },
-                data: valData
+                data: valData,
                 // [
                 //   { value: 154, name: '型号一' },
                 //   { value: 775, name: '型号二' },
@@ -139,24 +140,22 @@ export default {
                 //   { value: 679, name: '型号七' },
                 //   { value: 679, name: '型号八' },
                 // ]
-                ,
               },
             ],
-          })
+          });
         } else {
           this.$message.error(res.msg);
         }
-      })
-
+      });
     },
-    initLine () {
-      this.setOptions2()
+    initLine() {
+      this.setOptions2();
     },
-    setOptions2 () {
+    setOptions2() {
       this.request({
-        url: '/hx/cockpitOverview/productCompletion',
-        method: 'get',
-      }).then(res => {
+        url: "/hx/cockpitOverview/productCompletion",
+        method: "get",
+      }).then((res) => {
         if (200 == res.code) {
           let titData = [];
           let completionRate = [];
@@ -169,17 +168,17 @@ export default {
             actualDeliveryQuantity.push(item.actualDeliveryQuantity);
             targetDeliveryQuantity.push(item.targetDeliveryQuantity);
           }
-          this.chart1 = echarts.init(this.$refs.left2)
+          this.chart1 = echarts.init(this.$refs.left2);
 
           this.chart1.setOption({
             tooltip: {
-              trigger: 'axis',
-              formatter: '{a1}<br/>{b1}：{c1}',
+              trigger: "axis",
+              formatter: "{a1}<br/>{b1}：{c1}",
             },
             legend: {
-              data: ['预测', '实际', '目标完成率'],
+              data: ["预测", "实际", "目标完成率"],
               textStyle: {
-                color: '#fff', //legend字体颜色
+                color: "#fff", //legend字体颜色
               },
               // selectedMode: false,
             },
@@ -216,43 +215,56 @@ export default {
               //   ],
               axisLine: {
                 lineStyle: {
-                  color: 'rgb(255, 255, 255)',
+                  color: "rgb(255, 255, 255)",
                 },
               },
             },
-            dataZoom: {
-              type: 'slider',
-              start: 0,
-              end: this.dataZoomEnd(titData.length, 7),
-            },
-            color: ['#ccc', 'red'],
+            // dataZoom: {
+            //   type: 'slider',
+            //   start: 0,
+            //   end: this.dataZoomEnd(titData.length, 7),
+            // },
+            dataZoom: [
+              {
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
+                },
+                startValue: this.dataZoomStart(titData.length, 4, "start"),
+                endValue: this.dataZoomStart(titData.length, 4, "end"),
+              },
+              {
+                type: "inside",
+              },
+            ],
+            color: ["#ccc", "red"],
             yAxis: [
               {
-                name: '件',
+                name: "件",
                 splitLine: {
                   show: true,
                   //  改变轴线颜色
                   lineStyle: {
                     // 使用深浅的间隔色
-                    color: ['rgba(255, 255, 255,.5)'],
+                    color: ["rgba(255, 255, 255,.5)"],
                   },
                 },
                 axisLabel: {
-                  formatter: '{value}',
+                  formatter: "{value}",
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
               {
-                type: 'value',
+                type: "value",
                 min: 0,
                 max: 100,
                 interval: 20,
                 axisLabel: {
-                  formatter: '{value} %',
+                  formatter: "{value} %",
                 },
                 splitLine: {
                   show: false, //不显示网格线
@@ -262,57 +274,55 @@ export default {
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             series: [
               {
-                name: '预测',
-                type: 'bar',
+                name: "预测",
+                type: "bar",
                 // z: '-1',
-                barGap: '-75%',
+                barGap: "-75%",
                 barWidth: 30,
                 itemStyle: {
-                  color: 'rgba(85, 197, 162, .3)',
+                  color: "rgba(85, 197, 162, .3)",
                 },
                 data: targetDeliveryQuantity,
                 // data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
               },
               {
-                name: '实际',
-                type: 'bar',
+                name: "实际",
+                type: "bar",
                 barWidth: 15,
                 position: [0, 0],
                 itemStyle: {
-                  color: 'rgba(90, 216, 166, 0.85)',
+                  color: "rgba(90, 216, 166, 0.85)",
                 },
                 data: actualDeliveryQuantity,
                 // data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
               },
               {
-                name: '目标完成率',
-                type: 'scatter',
-                symbol: 'rect',
+                name: "目标完成率",
+                type: "scatter",
+                symbol: "rect",
                 symbolSize: [30, 4],
                 symbolOffset: [3, 0],
                 position: [0, 0],
                 itemStyle: {
-                  color: '#F6D97E',
+                  color: "#F6D97E",
                 },
                 data: completionRate,
                 // data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
               },
             ],
-          })
-
+          });
         }
-      })
-
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bigScreen/drivingCabin/right2.vue b/src/views/bigScreen/drivingCabin/right2.vue
index 593fb55..4f29533 100644
--- a/src/views/bigScreen/drivingCabin/right2.vue
+++ b/src/views/bigScreen/drivingCabin/right2.vue
@@ -1,59 +1,66 @@
 <template>
   <div>
     <container3 title="装药量概况">
-      <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
-        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-      <div style="height:100%;width:100%;" ref="chart"></div>
+      <el-date-picker
+        slot="datePicker"
+        v-model="dateRange"
+        size="small"
+        style="width: 240px"
+        value-format="yyyy-MM-dd"
+        type="daterange"
+        range-separator="-"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"
+      ></el-date-picker>
+      <div style="height: 100%; width: 100%" ref="chart"></div>
     </container3>
   </div>
-
 </template>
 
 <script>
-import scalseBox from '../components/scaleBox.vue'
+import scalseBox from "../components/scaleBox.vue";
 import bigScreenHead from "../components/bigScreenHead/index.vue";
 import rocketTit from "../components/rocketTit/index.vue";
 import container3 from "./components/container3/index.vue";
 
-
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from '../../dashboard/mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../../dashboard/mixins/resize";
 export default {
   mixins: [resize],
-  name: 'right2',
+  name: "right2",
   components: {
     scalseBox,
     bigScreenHead,
     rocketTit,
     container3,
   },
-  data () {
+  data() {
     return {
       dateRange: [],
       chart: null,
-    }
+    };
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
-  beforeDestroy () {
+  beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    initChart () {
+    initChart() {
       this.chart = echarts.init(this.$refs.chart);
 
       this.request({
-        url: '/hx/cockpitOverview/chargeQuantityList',
-        method: 'get',
-      }).then(res => {
+        url: "/hx/cockpitOverview/chargeQuantityList",
+        method: "get",
+      }).then((res) => {
         console.log(res);
 
         let titData = [];
@@ -69,23 +76,23 @@ export default {
         }
         this.chart.setOption({
           legend: {
-            data: ['实际', '预测', '目标完成率'],
+            data: ["实际", "预测", "目标完成率"],
             textStyle: {
-              color: '#fff'
+              color: "#fff",
             },
           },
-				tooltip: {
-					trigger: 'axis',
-				},
+          tooltip: {
+            trigger: "axis",
+          },
           grid: {
-            left: '3%',
-            right: '6%',
-            bottom: '3%',
-            containLabel: true
+            left: "3%",
+            right: "6%",
+            bottom: "3%",
+            containLabel: true,
           },
           xAxis: [
             {
-              type: 'category',
+              type: "category",
               data: titData,
               // data: [
               //   '2021-01',
@@ -102,54 +109,54 @@ export default {
               //   '2021-12',
               // ],
               axisPointer: {
-                type: 'shadow'
+                type: "shadow",
               },
               axisLine: {
                 lineStyle: {
-                  color: 'rgb(255, 255, 255)'
+                  color: "rgb(255, 255, 255)",
                 },
-              }
-            }
+              },
+            },
           ],
           yAxis: [
             {
-              type: 'value',
-              name: '万元',
+              type: "value",
+              name: "万元",
               min: 0,
               axisLabel: {
-                formatter: '{value}'
+                formatter: "{value}",
               },
               splitLine: {
-                show: false//不显示网格线
+                show: false, //不显示网格线
               },
               splitArea: {
-                show: false//不显示网格区域
+                show: false, //不显示网格区域
               },
               axisLine: {
                 lineStyle: {
-                  color: 'rgb(255, 255, 255)'
+                  color: "rgb(255, 255, 255)",
                 },
-              }
+              },
             },
             {
-              type: 'value',
+              type: "value",
 
               interval: 20,
               axisLabel: {
-                formatter: '{value} %',
+                formatter: "{value} %",
               },
               splitLine: {
-                show: false//不显示网格线
+                show: false, //不显示网格线
               },
               splitArea: {
-                show: false//不显示网格区域
+                show: false, //不显示网格区域
               },
               axisLine: {
                 lineStyle: {
-                  color: 'rgb(255, 255, 255)'
+                  color: "rgb(255, 255, 255)",
                 },
-              }
-            }
+              },
+            },
           ],
           grid: {
             containLabel: true,
@@ -158,67 +165,82 @@ export default {
             top: 50,
             bottom: 50,
           },
-          dataZoom: {
-            type: 'slider',
-            start: 0,
-            end: this.dataZoomEnd(titData.length, 7),
-          },
+          // dataZoom: {
+          //   type: 'slider',
+          //   start: 0,
+          //   end: this.dataZoomEnd(titData.length, 7),
+          // },
+          dataZoom: [
+            {
+              type: "slider",
+              textStyle: {
+                color: "#fff",
+              },
+              startValue: this.dataZoomStart(titData.length, 4, "start"),
+              endValue: this.dataZoomStart(titData.length, 4, "end"),
+            },
+            {
+              type: "inside",
+            },
+          ],
           series: [
             {
-              name: '预测',
-              type: 'bar',
-              z: '-1',
-              barGap: '-75%',
+              name: "预测",
+              type: "bar",
+              z: "-1",
+              barGap: "-75%",
               barWidth: 30,
               itemStyle: {
-                color: 'rgba(145, 213, 254, .3)',
+                color: "rgba(145, 213, 254, .3)",
               },
               data: forecastQuantity,
             },
             {
-              name: '实际',
-              type: 'bar',
+              name: "实际",
+              type: "bar",
               barWidth: 15,
               position: [0, 0],
               itemStyle: {
                 color: {
-                  type: 'linear', // 线性渐变
+                  type: "linear", // 线性渐变
                   x: 0,
                   y: 0,
                   x2: 0,
                   y2: 1,
-                  colorStops: [{
-                    offset: 0,
-                    color: '#B5D3FE' // 0%处的颜色为红色
-                  }, {
-                    offset: 1,
-                    color: '#7EA7FC' // 100%处的颜色为蓝
-                  }]
-                }
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: "#B5D3FE", // 0%处的颜色为红色
+                    },
+                    {
+                      offset: 1,
+                      color: "#7EA7FC", // 100%处的颜色为蓝
+                    },
+                  ],
+                },
               },
               data: actualQuantity,
             },
             {
-              name: '目标完成率',
-              type: 'line',
+              name: "目标完成率",
+              type: "line",
               yAxisIndex: 1,
               smooth: false,
               data: targetCompletionRate,
               // data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
               itemStyle: {
                 normal: {
-                  color: 'rgba(246, 217, 126, 1)'
-                }
+                  color: "rgba(246, 217, 126, 1)",
+                },
               },
-              symbol: 'none'
-            }
+              symbol: "none",
+            },
           ],
         });
-
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bigScreen/information/center.vue b/src/views/bigScreen/information/center.vue
index 467678a..a77e606 100644
--- a/src/views/bigScreen/information/center.vue
+++ b/src/views/bigScreen/information/center.vue
@@ -1,223 +1,229 @@
 <template>
-	<div>
-		<container3>
-			<rocketTit class="tit">信息化指标</rocketTit>
-			<div>
-				<div class="data">
-					<div class="data-item">
-						<div><span style="font-weight: bold">全年信息化投入</span></div>
-						<div class="box">
-							<i>{{ dataInfo.informationInvested }}/</i><i class="num">{{ dataInfo.informationTargetInveste }}</i
-							><span class="num2">万</span>
-						</div>
-						<div style="width: 100%">
+  <div>
+    <container3>
+      <!-- <rocketTit class="tit">信息化指标</rocketTit> -->
+      <div>
+        <div class="data" style="margin-top: 30px">
+          <div class="data-item">
+            <div><span style="font-weight: bold">全年信息化投入</span></div>
+            <div class="box">
+              <i>{{ dataInfo.informationInvested }}/</i
+              ><i class="num">{{ dataInfo.informationTargetInveste }}</i
+              ><span class="num2">万</span>
+            </div>
+            <!-- <div style="width: 100%">
 							<progressBar :percentage="percentage" />
-						</div>
-					</div>
-					<div class="data-item">
-						<div><span style="font-weight: bold">全年网络运维率</span></div>
-						<div class="box">
-							<i>{{ dataInfo.alreadyNetworkOperation }}%/</i
-							><span class="num">{{ dataInfo.targetNetworkOperation }}%</span>
-						</div>
-						<div style="width: 100%">
+						</div> -->
+          </div>
+          <div class="data-item">
+            <div><span style="font-weight: bold">全年网络运维率</span></div>
+            <div class="box">
+              <i>{{ dataInfo.alreadyNetworkOperation }}%/</i
+              ><span class="num">{{ dataInfo.targetNetworkOperation }}%</span>
+            </div>
+            <!-- <div style="width: 100%">
 							<progressBar :percentage="dataInfo.alreadyNetworkOperation" />
-						</div>
-					</div>
-					<div class="data-item">
-						<div><span style="font-weight: bold">全年设备接入率</span></div>
-						<div class="box">
-							<i>{{ dataInfo.alreadyDeviceAccess }}%/</i><span class="num">{{ dataInfo.targetDeviceAccess }}%</span>
-						</div>
-						<div style="width: 100%">
+						</div> -->
+          </div>
+          <div class="data-item">
+            <div><span style="font-weight: bold">全年设备接入率</span></div>
+            <div class="box">
+              <i>{{ dataInfo.alreadyDeviceAccess }}%/</i
+              ><span class="num">{{ dataInfo.targetDeviceAccess }}%</span>
+            </div>
+            <!-- <div style="width: 100%">
 							<progressBar :percentage="dataInfo.alreadyDeviceAccess" />
-						</div>
-					</div>
-					<div class="data-item">
-						<div><span style="font-weight: bold">全年业务覆盖率</span></div>
-						<div class="box">
-							<i>{{ dataInfo.alreadyBusinessCoverage }}%/</i
-							><span class="num">{{ dataInfo.targetBusinessCoverage }}%</span>
-						</div>
-						<div style="width: 100%">
+						</div> -->
+          </div>
+          <div class="data-item">
+            <div><span style="font-weight: bold">全年业务覆盖率</span></div>
+            <div class="box">
+              <i>{{ dataInfo.alreadyBusinessCoverage }}%/</i
+              ><span class="num">{{ dataInfo.targetBusinessCoverage }}%</span>
+            </div>
+            <!-- <div style="width: 100%">
 							<progressBar :percentage="dataInfo.alreadyBusinessCoverage" />
-						</div>
-					</div>
-				</div>
-				<div class="_img">
-					<img class="img" :src="dataInfo.bigPic" />
-				</div>
-			</div>
-		</container3>
-	</div>
+						</div> -->
+          </div>
+        </div>
+        <div class="_img">
+          <img class="img" :src="dataInfo.bigPic" />
+        </div>
+      </div>
+    </container3>
+  </div>
 </template>
 
 <script>
-import container3 from '../components/container3/index.vue'
-import rocketTit from '../components/rocketTit/index.vue'
-import progressBar from './../components/progress/index.vue'
+import container3 from "../components/container3/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import progressBar from "./../components/progress/index.vue";
 
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from '../../dashboard/mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../../dashboard/mixins/resize";
 export default {
-	mixins: [resize],
-	name: 'left1',
-	components: {
-		container3,
-		rocketTit,
-		progressBar,
-	},
-	data() {
-		return {
-			dataInfo: {
-        informationInvested:0,
-        informationTargetInveste:0,
-        alreadyNetworkOperation:0,
-        targetNetworkOperation:0,
-        alreadyDeviceAccess:0,
-        targetDeviceAccess:0,
-        alreadyBusinessCoverage:0,
-        targetBusinessCoverage:0,
+  mixins: [resize],
+  name: "left1",
+  components: {
+    container3,
+    rocketTit,
+    progressBar,
+  },
+  data() {
+    return {
+      dataInfo: {
+        informationInvested: 0,
+        informationTargetInveste: 0,
+        alreadyNetworkOperation: 0,
+        targetNetworkOperation: 0,
+        alreadyDeviceAccess: 0,
+        targetDeviceAccess: 0,
+        alreadyBusinessCoverage: 0,
+        targetBusinessCoverage: 0,
       },
-		}
-	},
-	computed: {
-		percentage() {
-			return (this.dataInfo.informationInvested / this.dataInfo.informationTargetInveste) * 100 || 0
-		},
-	},
-	mounted() {},
-	beforeDestroy() {},
-	methods: {
-		getData() {
-			this.request({
-				url: '/hx/informationManagement/getHxInformationIndex',
-				method: 'get',
-			}).then(({ data }) => {
-				this.dataInfo = data
-			})
-		},
-	},
-	created() {
-		this.getData()
-	},
-}
+    };
+  },
+  computed: {
+    percentage() {
+      return (
+        (this.dataInfo.informationInvested /
+          this.dataInfo.informationTargetInveste) *
+          100 || 0
+      );
+    },
+  },
+  mounted() {},
+  beforeDestroy() {},
+  methods: {
+    getData() {
+      this.request({
+        url: "/hx/informationManagement/getHxInformationIndex",
+        method: "get",
+      }).then(({ data }) => {
+        this.dataInfo = data;
+      });
+    },
+  },
+  created() {
+    this.getData();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .tit {
-	padding: 16px 24px;
+  padding: 16px 24px;
 }
 .img {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: -1;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
 }
 .data {
-	display: flex;
-	justify-content: space-evenly;
-	margin: 0 30px;
-	background: rgba(2, 18, 63, 0.33);
-	color: #ffffff;
-	font-size: 18px;
-	.data-item {
-		// flex: 1;
-		width: 20%;
-		display: flex;
-		flex-direction: column;
-		align-items: flex-start;
-		> div {
-			margin: 5px 0;
-			text-align: center;
-			img {
-				// width: 10px;
-				// height: 10px;
-				vertical-align: middle;
-				margin-right: 5px;
-			}
-		}
-		.box {
-			font-size: 26px;
-			font-family: Roboto-BlackItalic, Roboto;
-			font-weight: 600;
-			color: #55c5a2;
-		}
-		.num {
-			font-size: 14px;
-		}
-		.num2 {
-			font-size: 16px;
-			margin-left: 5px;
-			color: #fff;
-		}
-	}
+  display: flex;
+  justify-content: space-evenly;
+  margin: 0 30px;
+  background: rgba(2, 18, 63, 0.33);
+  color: #ffffff;
+  font-size: 18px;
+  .data-item {
+    // flex: 1;
+    width: 20%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    > div {
+      margin: 5px 0;
+      text-align: center;
+      img {
+        // width: 10px;
+        // height: 10px;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+    }
+    .box {
+      font-size: 26px;
+      font-family: Roboto-BlackItalic, Roboto;
+      font-weight: 600;
+      color: #55c5a2;
+    }
+    .num {
+      font-size: 14px;
+    }
+    .num2 {
+      font-size: 16px;
+      margin-left: 5px;
+      color: #fff;
+    }
+  }
 }
 
 ._img {
-	margin-top: 10px;
-	margin-right: 30px;
-	margin-left: 40px;
-	height: 400px;
-	position: relative;
-	img {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
+  margin-top: 50px;
+  margin-right: 30px;
+  margin-left: 40px;
+  height: 400px;
+  position: relative;
+  img {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 .container3 {
-	position: relative;
-	.con_right {
-		width: 138px;
-		position: absolute;
-		top: 41%;
-		right: 43%;
-		color: #fff;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		.con_title {
-			width: 100%;
-			height: 42px;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			img {
-				width: 18px;
-				height: 18px;
-				margin-right: 3px;
-			}
-		}
-		.con_title_bg1 {
-			background: url('./img/left1/1.png') no-repeat;
-		}
-		.con_title_bg2 {
-			background: url('./img/left1/2.png') no-repeat;
-		}
-		.con_title_bg3 {
-			background: url('./img/left1/3.png') no-repeat;
-		}
-		.com_img {
-			margin-top: 5px;
-			width: 40px;
-			height: 40px;
-			img {
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-	.con_two {
-		top: 37%;
-		left: 13%;
-	}
-	.con_three {
-		top: 70%;
-		right: 16%;
-	}
+  position: relative;
+  .con_right {
+    width: 138px;
+    position: absolute;
+    top: 41%;
+    right: 43%;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .con_title {
+      width: 100%;
+      height: 42px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 18px;
+        height: 18px;
+        margin-right: 3px;
+      }
+    }
+    .con_title_bg1 {
+      background: url("./img/left1/1.png") no-repeat;
+    }
+    .con_title_bg2 {
+      background: url("./img/left1/2.png") no-repeat;
+    }
+    .con_title_bg3 {
+      background: url("./img/left1/3.png") no-repeat;
+    }
+    .com_img {
+      margin-top: 5px;
+      width: 40px;
+      height: 40px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .con_two {
+    top: 37%;
+    left: 13%;
+  }
+  .con_three {
+    top: 70%;
+    right: 16%;
+  }
 }
 </style>
diff --git a/src/views/bigScreen/information/left1.vue b/src/views/bigScreen/information/left1.vue
index 784a9d3..011ec90 100644
--- a/src/views/bigScreen/information/left1.vue
+++ b/src/views/bigScreen/information/left1.vue
@@ -12,7 +12,7 @@
           <span>已完成任务/完成率</span>
           <i class="num"
             >{{ totalAndRate.total }}/{{
-              Math.floor(totalAndRate.rate * 100) / 100
+              Math.floor(totalAndRate.rate * 100) / 100 || 0
             }}%</i
           >
           <progressBar :percentage="totalAndRate.rate" />
@@ -351,14 +351,27 @@ export default {
             },
           },
         },
-        dataZoom: {
-          type: "slider",
-          start: 0,
-          end: this.dataZoomEnd(titList.length, 5),
-          textStyle: {
-            color: "#fff",
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(titList.length, 5),
+        //   textStyle: {
+        //     color: "#fff",
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(titList.length, 4, "start"),
+            endValue: this.dataZoomStart(titList.length, 4, "end"),
           },
-        },
+          {
+            type: "inside",
+          },
+        ],
         color: ["#ccc", "red"],
         yAxis: [
           {
diff --git a/src/views/bigScreen/information/right1.vue b/src/views/bigScreen/information/right1.vue
index cf9075b..e85d96a 100644
--- a/src/views/bigScreen/information/right1.vue
+++ b/src/views/bigScreen/information/right1.vue
@@ -1,577 +1,637 @@
 <template>
-	<div>
-		<container title="月度工作计划">
-			<div class="wrap">
-				<el-row class="content1">
-					<el-col :span="24">
-						<div style="height: 270px; margin: 14px 0 8px">
-							<div style="height: 100%; width: 100%" ref="chart"></div>
-						</div>
-					</el-col>
-					<el-col :span="24" style="margin: 20px 0">
-						<div style="text-align: right; margin-right: 30px">
-							<el-date-picker
-								style="width: 30%"
-								v-model="value"
-								value-format="yyyy-MM"
-								type="month"
-								size="mini"
-								placeholder="选择月"
-								:clearable="false"
-								:editable="false"
-								@change="initLine"
-							>
-							</el-date-picker>
-						</div>
-						<div style="height: 270px; margin: 14px 0 8px">
-							<div style="height: 100%; width: 100%" ref="chart2"></div>
-						</div>
-					</el-col>
-					<el-col :span="24" style="margin-bottom: 1px">
-						<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
-							<el-col style="text-align: center" :span="3">序号</el-col>
-							<el-col style="text-align: center" :span="5">名称</el-col>
-							<el-col style="text-align: center" :span="5">部门</el-col>
-							<el-col style="text-align: center" :span="7">时间</el-col>
-							<el-col style="text-align: center" :span="4">完成情况</el-col>
-						</el-row>
-					</el-col>
-					<vue-seamless-scroll
-						:data="listData"
-						class="warp-scroll"
-						:class-option="{
-							singleHeight: 43,
-						}"
-					>
-						<ul class="item">
-							<li v-for="item in listData" :key="item.id">
-								<el-row>
-									<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
-									<el-col style="text-align: center" :title="item.planName" :span="5">{{ item.planName }}</el-col>
-									<el-col style="text-align: center" :title="item.deptName" :span="5">{{ item.deptName }}</el-col>
-									<el-col style="text-align: center" :span="7">{{ item.todayDate }}</el-col>
-									<el-col style="text-align: center" :span="4">
-										<section class="box">
-											<span v-if="item.status == '已完成'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
-												>·</span
-											>
-											<span v-else style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
-											<span v-if="item.status == '已完成'">已完成</span>
-											<span v-else>未完成</span>
-										</section>
-									</el-col>
-								</el-row>
-							</li>
-						</ul>
-					</vue-seamless-scroll>
-				</el-row>
-			</div>
-		</container>
-	</div>
+  <div>
+    <container title="月度工作计划">
+      <div class="wrap">
+        <el-row class="content1">
+          <el-col :span="24">
+            <div style="height: 270px; margin: 14px 0 8px">
+              <div style="height: 100%; width: 100%" ref="chart"></div>
+            </div>
+          </el-col>
+          <el-col :span="24" style="margin: 20px 0">
+            <div style="text-align: right; margin-right: 30px">
+              <el-date-picker
+                style="width: 30%"
+                v-model="value"
+                value-format="yyyy-MM"
+                type="month"
+                size="mini"
+                placeholder="选择月"
+                :clearable="false"
+                :editable="false"
+                @change="initLine"
+              >
+              </el-date-picker>
+            </div>
+            <div style="height: 270px; margin: 14px 0 8px">
+              <div style="height: 100%; width: 100%" ref="chart2"></div>
+            </div>
+          </el-col>
+          <el-col :span="24" style="margin-bottom: 1px">
+            <el-row
+              style="
+                height: 42px;
+                line-height: 42px;
+                background: rgba(0, 255, 255, 0.3);
+              "
+            >
+              <el-col style="text-align: center" :span="3">序号</el-col>
+              <el-col style="text-align: center" :span="5">名称</el-col>
+              <el-col style="text-align: center" :span="5">部门</el-col>
+              <el-col style="text-align: center" :span="7">时间</el-col>
+              <el-col style="text-align: center" :span="4">完成情况</el-col>
+            </el-row>
+          </el-col>
+          <vue-seamless-scroll
+            :data="listData"
+            class="warp-scroll"
+            :class-option="{
+              singleHeight: 43,
+            }"
+          >
+            <ul class="item">
+              <li v-for="item in listData" :key="item.id">
+                <el-row>
+                  <el-col style="text-align: center" :span="3">{{
+                    item.id
+                  }}</el-col>
+                  <el-col
+                    style="text-align: center"
+                    :title="item.planName"
+                    :span="5"
+                    >{{ item.planName }}</el-col
+                  >
+                  <el-col
+                    style="text-align: center"
+                    :title="item.deptName"
+                    :span="5"
+                    >{{ item.deptName }}</el-col
+                  >
+                  <el-col style="text-align: center" :span="7">{{
+                    item.todayDate
+                  }}</el-col>
+                  <el-col style="text-align: center" :span="4">
+                    <section class="box">
+                      <span
+                        v-if="item.status == '已完成'"
+                        style="
+                          color: #6fd1b4;
+                          font-size: 25px;
+                          margin-right: 3px;
+                        "
+                        >·</span
+                      >
+                      <span
+                        v-else
+                        style="
+                          color: #f64f58;
+                          font-size: 25px;
+                          margin-right: 3px;
+                        "
+                        >·</span
+                      >
+                      <span v-if="item.status == '已完成'">已完成</span>
+                      <span v-else>未完成</span>
+                    </section>
+                  </el-col>
+                </el-row>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
+        </el-row>
+      </div>
+    </container>
+  </div>
 </template>
 
 <script>
-import rocketTit from '../components/rocketTit/index.vue'
-import container from './components/container/index.vue'
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
-import colorList from '@/utils/colorPalette'
-import vueSeamlessScroll from 'vue-seamless-scroll'
+import rocketTit from "../components/rocketTit/index.vue";
+import container from "./components/container/index.vue";
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
+import colorList from "@/utils/colorPalette";
+import vueSeamlessScroll from "vue-seamless-scroll";
 // import {Liquid} from '@antv/g2plot';
 // import resize from '../../dashboard/mixins/resize'
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
 export default {
-	// mixins: [resize],
-	name: 'left1',
-	components: {
-		rocketTit,
-		container,
-		bigScreenTabs,
-		progressBar,
-		vueSeamlessScroll,
-	},
-	data() {
-		return {
-			chart: null,
-			value: new Date().getFullYear() + '-' + (new Date().getMonth() + 1),
-			chart2: null,
-			data: [
-				{ value: 154, name: '类别一' },
-				{ value: 775, name: '类别二' },
-				{ value: 679, name: '类别三' },
-				{ value: 679, name: '类别四' },
-				{ value: 679, name: '类别五' },
-				{ value: 679, name: '类别六' },
-				{ value: 679, name: '类别七' },
-				{ value: 679, name: '类别八' },
-			],
-			colorList,
-			listData: [],
-			scrollList: [
-				{
-					id: 1,
-					name: '计划一',
-					level: '一级',
-					status: 1,
-				},
-				{
-					id: 2,
-					name: '计划二',
-					level: '二级',
-					status: 3,
-				},
-				{
-					id: 3,
-					name: '计划三',
-					level: '三级',
-					status: 3,
-				},
-				{
-					id: 4,
-					name: '计划四',
-					level: '二级',
-					status: 1,
-				},
-				{
-					id: 5,
-					name: '计划五',
-					level: '三级',
-					status: 3,
-				},
-			],
-		}
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.initChart()
-			this.initLine()
-		})
-	},
-	methods: {
-		getData() {
-			this.request({
-				url: '/hx/informationManagement/getHxPlanCompletedListPic',
-				method: 'get',
-			}).then(({ data }) => {
-				this.listData = data
-			})
-		},
-		initChart() {
-			this.request({
-				url: '/hx/informationManagement/getHxPlanCompletedPic',
-				method: 'get',
-			}).then(({ data }) => {
-				this.chart = echarts.init(this.$refs.chart)
-				this.setOptions(data)
-			})
-		},
-		setOptions(resData) {
-			let month = []
-			let total = []
-			let rate = []
-			for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
-				month.push(item.month)
-				total.push(item.data.total)
-				rate.push(item.data.rate)
-			}
-			this.chart.setOption({
-				tooltip: {
-					trigger: 'axis',
-					// formatter: '{a1}<br/>{b1}：{c1}',
-				},
-				legend: {
-					data: ['数量', '完成率'],
-					textStyle: {
-						color: '#fff', //legend字体颜色
-					},
-					// selectedMode: false,
-				},
-				grid: {
-					containLabel: true,
-					left: 20,
-					right: 10,
-					top: 30,
-					bottom: 50,
-				},
-				xAxis: {
-					data: month,
-					axisLine: {
-						lineStyle: {
-							color: 'rgb(255, 255, 255)',
-						},
-					},
-				},
-				dataZoom: {
-					type: 'slider',
-					start: 0,
-					end: this.dataZoomEnd(month.length, 5),
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				color: ['#ccc', 'red'],
-				yAxis: [
-					{
-						name: '件',
-						splitLine: {
-							show: true,
-							//  改变轴线颜色
-							lineStyle: {
-								// 使用深浅的间隔色
-								color: ['rgba(255, 255, 255,.5)'],
-							},
-						},
-						axisLabel: {
-							formatter: '{value}',
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-					{
-						type: 'value',
-						min: 0,
-						max: 100,
-						interval: 20,
-						axisLabel: {
-							formatter: '{value} %',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				series: [
-					{
-						name: '完成率',
-						type: 'bar',
-						z: '-1',
-						barGap: '-75%',
-						barWidth: 30,
-						itemStyle: {
-							color: 'rgba(85, 197, 162, .3)',
-						},
-						yAxisIndex: 1,
-						data: rate,
-					},
-					{
-						name: '数量',
-						type: 'bar',
-						barWidth: 15,
-						position: [0, 0],
-						itemStyle: {
-							color: 'rgba(90, 216, 166, 0.85)',
-						},
-						data: total,
-					},
-					// {
-					// 	name: '目标',
-					// 	type: 'scatter',
-					// 	symbol: 'rect',
-					// 	symbolSize: [30, 4],
-					// 	symbolOffset: [3, 0],
-					// 	position: [0, 0],
-					// 	itemStyle: {
-					// 		color: '#F6D97E',
-					// 	},
-					// 	data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
-					// },
-				],
-			})
-		},
-		initLine() {
-			this.request({
-				url: '/hx/informationManagement/getHxPlanCompletedByMonthPic',
-				method: 'get',
-				params: {
-					month: this.value,
-				},
-			}).then(({ data }) => {
-				this.chart2 = echarts.init(this.$refs.chart2)
-				this.setOptions2(data)
-			})
-		},
-		setOptions2(resData) {
-			let deptName = []
-			let total = []
-			let rate = []
-			for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
-				deptName.push(item.deptName)
-				total.push(item.total)
-				rate.push(item.rate)
-			}
+  // mixins: [resize],
+  name: "left1",
+  components: {
+    rocketTit,
+    container,
+    bigScreenTabs,
+    progressBar,
+    vueSeamlessScroll,
+  },
+  data() {
+    return {
+      chart: null,
+      value: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),
+      chart2: null,
+      data: [
+        { value: 154, name: "类别一" },
+        { value: 775, name: "类别二" },
+        { value: 679, name: "类别三" },
+        { value: 679, name: "类别四" },
+        { value: 679, name: "类别五" },
+        { value: 679, name: "类别六" },
+        { value: 679, name: "类别七" },
+        { value: 679, name: "类别八" },
+      ],
+      colorList,
+      listData: [],
+      scrollList: [
+        {
+          id: 1,
+          name: "计划一",
+          level: "一级",
+          status: 1,
+        },
+        {
+          id: 2,
+          name: "计划二",
+          level: "二级",
+          status: 3,
+        },
+        {
+          id: 3,
+          name: "计划三",
+          level: "三级",
+          status: 3,
+        },
+        {
+          id: 4,
+          name: "计划四",
+          level: "二级",
+          status: 1,
+        },
+        {
+          id: 5,
+          name: "计划五",
+          level: "三级",
+          status: 3,
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+      this.initLine();
+    });
+  },
+  methods: {
+    getData() {
+      this.request({
+        url: "/hx/informationManagement/getHxPlanCompletedListPic",
+        method: "get",
+      }).then(({ data }) => {
+        this.listData = data;
+      });
+    },
+    initChart() {
+      this.request({
+        url: "/hx/informationManagement/getHxPlanCompletedPic",
+        method: "get",
+      }).then(({ data }) => {
+        this.chart = echarts.init(this.$refs.chart);
+        this.setOptions(data);
+      });
+    },
+    setOptions(resData) {
+      let month = [];
+      let total = [];
+      let rate = [];
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        month.push(item.month);
+        total.push(item.data.total);
+        rate.push(item.data.rate);
+      }
+      this.chart.setOption({
+        tooltip: {
+          trigger: "axis",
+          // formatter: '{a1}<br/>{b1}：{c1}',
+        },
+        legend: {
+          data: ["数量", "完成率"],
+          textStyle: {
+            color: "#fff", //legend字体颜色
+          },
+          // selectedMode: false,
+        },
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 10,
+          top: 30,
+          bottom: 50,
+        },
+        xAxis: {
+          data: month,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(255, 255, 255)",
+            },
+          },
+        },
+        // dataZoom: {
+        // 	type: 'slider',
+        // 	start: 0,
+        // 	end: this.dataZoomEnd(month.length, 5),
+        // 	textStyle: {
+        // 		color: '#fff',
+        // 	},
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(month.length, 4, "start"),
+            endValue: this.dataZoomStart(month.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
+        color: ["#ccc", "red"],
+        yAxis: [
+          {
+            name: "件",
+            splitLine: {
+              show: true,
+              //  改变轴线颜色
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: ["rgba(255, 255, 255,.5)"],
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+          {
+            type: "value",
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: "{value} %",
+            },
+            splitLine: {
+              show: false, //不显示网格线
+            },
+            splitArea: {
+              show: false, //不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "完成率",
+            type: "bar",
+            z: "-1",
+            barGap: "-75%",
+            barWidth: 30,
+            itemStyle: {
+              color: "rgba(85, 197, 162, .3)",
+            },
+            yAxisIndex: 1,
+            data: rate,
+          },
+          {
+            name: "数量",
+            type: "bar",
+            barWidth: 15,
+            position: [0, 0],
+            itemStyle: {
+              color: "rgba(90, 216, 166, 0.85)",
+            },
+            data: total,
+          },
+          // {
+          // 	name: '目标',
+          // 	type: 'scatter',
+          // 	symbol: 'rect',
+          // 	symbolSize: [30, 4],
+          // 	symbolOffset: [3, 0],
+          // 	position: [0, 0],
+          // 	itemStyle: {
+          // 		color: '#F6D97E',
+          // 	},
+          // 	data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
+          // },
+        ],
+      });
+    },
+    initLine() {
+      this.request({
+        url: "/hx/informationManagement/getHxPlanCompletedByMonthPic",
+        method: "get",
+        params: {
+          month: this.value,
+        },
+      }).then(({ data }) => {
+        this.chart2 = echarts.init(this.$refs.chart2);
+        this.setOptions2(data);
+      });
+    },
+    setOptions2(resData) {
+      let deptName = [];
+      let total = [];
+      let rate = [];
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        deptName.push(item.deptName);
+        total.push(item.total);
+        rate.push(item.rate);
+      }
 
-			this.chart2.setOption({
-				tooltip: {
-					trigger: 'axis',
-					// formatter: '{a1}<br/>{b1}：{c1}',
-				},
-				legend: {
-					data: ['数量', '完成率'],
-					textStyle: {
-						color: '#fff', //legend字体颜色
-					},
-					// selectedMode: false,
-				},
-				grid: {
-					containLabel: true,
-					left: 20,
-					right: 10,
-					top: 30,
-					bottom: 50,
-				},
-				xAxis: {
-					data: deptName,
-					axisLine: {
-						lineStyle: {
-							color: 'rgb(255, 255, 255)',
-						},
-					},
-				},
-				dataZoom: {
-					type: 'slider',
-					start: 0,
-					end: this.dataZoomEnd(deptName.length, 5),
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				color: ['#ccc', 'red'],
-				yAxis: [
-					{
-						name: '个',
-						splitLine: {
-							show: true,
-							//  改变轴线颜色
-							lineStyle: {
-								// 使用深浅的间隔色
-								color: ['rgba(255, 255, 255,.5)'],
-							},
-						},
-						axisLabel: {
-							formatter: '{value}',
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-					{
-						type: 'value',
-						min: 0,
-						max: 100,
-						interval: 20,
-						axisLabel: {
-							formatter: '{value} %',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				series: [
-					// {
-					// 	name: '目标',
-					// 	type: 'bar',
-					// 	z: '-1',
-					// 	barGap: '-75%',
-					// 	barWidth: 30,
-					// 	itemStyle: {
-					// 		color: 'rgba(85, 197, 162, .3)',
-					// 	},
-					// 	data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
-					// },
-					{
-						name: '数量',
-						type: 'bar',
-						barGap: '-100%',
-						barWidth: 30,
-						position: [0, 0],
-						data: total,
-						itemStyle: {
-							color: {
-								type: 'linear', // 线性渐变
-								x: 0,
-								y: 0,
-								x2: 0,
-								y2: 1,
-								colorStops: [
-									{
-										offset: 0,
-										color: '#9AF0D5',
-									},
-									{
-										offset: 1,
-										color: '#61DDAA',
-									},
-								],
-							},
-						},
-					},
-					{
-						name: '完成率',
-						type: 'scatter',
-						symbol: 'rect',
-						symbolSize: [30, 4],
-						symbolOffset: [0, 0],
-						position: [0, 0],
-						itemStyle: {
-							color: '#F64F58',
-						},
-						yAxisIndex: 1,
-						data: rate,
-					},
-				],
-			})
-		},
-	},
-	created() {
-		this.getData()
-	},
-}
+      this.chart2.setOption({
+        tooltip: {
+          trigger: "axis",
+          // formatter: '{a1}<br/>{b1}：{c1}',
+        },
+        legend: {
+          data: ["数量", "完成率"],
+          textStyle: {
+            color: "#fff", //legend字体颜色
+          },
+          // selectedMode: false,
+        },
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 10,
+          top: 30,
+          bottom: 50,
+        },
+        xAxis: {
+          data: deptName,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(255, 255, 255)",
+            },
+          },
+        },
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(deptName.length, 5),
+        //   textStyle: {
+        //     color: "#fff",
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(deptName.length, 4, "start"),
+            endValue: this.dataZoomStart(deptName.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
+        color: ["#ccc", "red"],
+        yAxis: [
+          {
+            name: "个",
+            splitLine: {
+              show: true,
+              //  改变轴线颜色
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: ["rgba(255, 255, 255,.5)"],
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+          {
+            type: "value",
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: "{value} %",
+            },
+            splitLine: {
+              show: false, //不显示网格线
+            },
+            splitArea: {
+              show: false, //不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        series: [
+          // {
+          // 	name: '目标',
+          // 	type: 'bar',
+          // 	z: '-1',
+          // 	barGap: '-75%',
+          // 	barWidth: 30,
+          // 	itemStyle: {
+          // 		color: 'rgba(85, 197, 162, .3)',
+          // 	},
+          // 	data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
+          // },
+          {
+            name: "数量",
+            type: "bar",
+            barGap: "-100%",
+            barWidth: 30,
+            position: [0, 0],
+            data: total,
+            itemStyle: {
+              color: {
+                type: "linear", // 线性渐变
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#9AF0D5",
+                  },
+                  {
+                    offset: 1,
+                    color: "#61DDAA",
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: "完成率",
+            type: "scatter",
+            symbol: "rect",
+            symbolSize: [30, 4],
+            symbolOffset: [0, 0],
+            position: [0, 0],
+            itemStyle: {
+              color: "#F64F58",
+            },
+            yAxisIndex: 1,
+            data: rate,
+          },
+        ],
+      });
+    },
+  },
+  created() {
+    this.getData();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 ::v-deep .el-progress-bar__inner {
-	background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%) !important;
+  background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%) !important;
 }
 
 ::v-deep .el-date-editor {
-	border-radius: 0;
-	box-shadow: none !important;
-	border: 1px solid rgba(255, 255, 255, 0.2);
-	vertical-align: middle;
-	color: #fff;
-	background-color: transparent;
-	.el-range-input,
-	.el-range-separator {
-		color: #fff;
-	}
-	.el-range-editor.is-active {
-		border-color: #fff !important;
-	}
+  border-radius: 0;
+  box-shadow: none !important;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  vertical-align: middle;
+  color: #fff;
+  background-color: transparent;
+  .el-range-input,
+  .el-range-separator {
+    color: #fff;
+  }
+  .el-range-editor.is-active {
+    border-color: #fff !important;
+  }
 
-	input {
-		background-color: transparent;
-		color: #fff;
-	}
+  input {
+    background-color: transparent;
+    color: #fff;
+  }
 }
 
 .warp-scroll {
-	height: 215px;
-	width: 100%;
-	margin: 0 auto;
-	overflow: hidden;
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0 auto;
-		li,
-		a {
-			display: block;
-			display: flex;
-			justify-content: space-between;
-			font-size: 15px;
-		}
-		li {
-			display: block;
-			height: 42px;
-			line-height: 42px;
-			background: #2a437d;
-			opacity: 0.6;
-			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
-			margin-bottom: 1px;
-			img {
-				vertical-align: sub;
-				margin-right: 5px;
-			}
-		}
-	}
+  height: 215px;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    li,
+    a {
+      display: block;
+      display: flex;
+      justify-content: space-between;
+      font-size: 15px;
+    }
+    li {
+      display: block;
+      height: 42px;
+      line-height: 42px;
+      background: #2a437d;
+      opacity: 0.6;
+      // box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
+      margin-bottom: 1px;
+      img {
+        vertical-align: sub;
+        margin-right: 5px;
+      }
+    }
+  }
 }
 .wrap {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
 
 .content1 {
-	// height: 200px;
-	height: 100%;
+  // height: 200px;
+  height: 100%;
 
-	.chart1 {
-		margin: 0 auto;
-		width: 100%;
-		height: 192px;
-		background: transparent;
-	}
+  .chart1 {
+    margin: 0 auto;
+    width: 100%;
+    height: 192px;
+    background: transparent;
+  }
 }
 .box {
-	display: flex;
-	justify-content: center;
-	align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .num {
-	font-size: 30px;
-	font-family: Roboto-BlackItalic, Roboto;
-	font-weight: normal;
-	color: #91d5fe;
-	vertical-align: sub;
-	//   margin-right: 3px;
+  font-size: 30px;
+  font-family: Roboto-BlackItalic, Roboto;
+  font-weight: normal;
+  color: #91d5fe;
+  vertical-align: sub;
+  //   margin-right: 3px;
 }
 
 .content2 {
-	padding: 20px;
-	flex: 1;
-	height: 100%;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	.chart2 {
-		height: 100%;
-	}
+  padding: 20px;
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .chart2 {
+    height: 100%;
+  }
 
-	.tit {
-		font-size: 16px;
-		font-family: PingFangSC-Semibold, PingFang SC;
-		font-weight: 600;
-		color: #ffffff;
-		line-height: 22px;
-		position: relative;
-		padding-left: 15px;
-	}
-	.tit::after {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 3px;
-		left: 0px;
-		width: 4px;
-		height: 16px;
-		background: #00ffff;
-	}
+  .tit {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 22px;
+    position: relative;
+    padding-left: 15px;
+  }
+  .tit::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 3px;
+    left: 0px;
+    width: 4px;
+    height: 16px;
+    background: #00ffff;
+  }
 }
 </style>
diff --git a/src/views/bigScreen/management/center.vue b/src/views/bigScreen/management/center.vue
index 78d56f3..a8c8773 100644
--- a/src/views/bigScreen/management/center.vue
+++ b/src/views/bigScreen/management/center.vue
@@ -20,11 +20,11 @@
             ><i class="num">{{ handleMillion(resData.targetIncome) }}</i
             ><span class="num2">亿元</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar
               :percentage="(resData.realIncome / resData.targetIncome) * 100"
             />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div>
@@ -37,11 +37,11 @@
             ><i class="num">{{ handleMillion(resData.targetProfit) }}</i
             ><span class="num2">亿元</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar
               :percentage="(resData.realProfit / resData.targetProfit) * 100"
             />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div>
@@ -54,55 +54,72 @@
             ><i class="num">{{ handleMillion(resData.targetEva) }}</i
             ><span class="num2">亿元</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar
               :percentage="(resData.realEva / resData.targetEva) * 100"
             />
-          </div>
+          </div> -->
         </div>
-        <div class="data-item" style="width: 34%">
+        <div class="data-item" style="width: 37%">
           <div>
             <img src="./icon4.png" alt="" /><span style="font-weight: bold"
-              >两金</span
+              >两金<span style="font-size: 14px"
+                >（ 产成品 / 应收账款 ）</span
+              ></span
             >
           </div>
           <div style="display: flex">
             <div>
-              <div class="box" style="margin-bottom: 0">
+              <div class="box" style="margin-bottom: 0; position: relative">
                 <i>{{ handleMillion(resData.realCollection) }}/</i
                 ><i class="num">{{ handleMillion(resData.targetCollection) }}</i
                 ><span class="num2">亿元</span>
+                <!-- <div
+                  style="
+                    font-size: 12px;
+                    color: #fff;
+                    position: absolute;
+                    bottom: -20px;
+                  "
+                >
+                  产成品
+                </div> -->
               </div>
-              <span style="font-size: 12px; position: relative; top: -6px"
-                >产成品</span
-              >
-              <div style="display: flex">
+
+              <!-- <div style="display: flex">
                 <progressBar
                   :percentage="
                     (resData.realCollection / resData.targetCollection) * 100
                   "
                 />
-              </div>
+              </div> -->
             </div>
             <div style="margin-left: 10px">
-              <div class="box" style="margin-bottom: 0">
+              <div class="box" style="margin-bottom: 0; position: relative">
                 <i>{{ handleMillion(resData.realFinishProduct) }}/</i
                 ><i class="num">{{
                   handleMillion(resData.targetFinishProduct)
                 }}</i
                 ><span class="num2">亿元</span>
+                <!-- <div
+                  style="
+                    font-size: 12px;
+                    color: #fff;
+                    position: absolute;
+                    bottom: -20px;
+                  "
+                >
+                  应收账款
+                </div> -->
               </div>
-              <span style="font-size: 12px; position: relative; top: -6px"
-                >应收账款</span
-              >
-              <div style="display: flex">
+              <!-- <div style="display: flex">
                 <progressBar
                   :percentage="
                     (resData.realFinishProduct / resData.targetFinishProduct) *
                     100
                   "
                 />
-              </div>
+              </div> -->
             </div>
           </div>
         </div>
@@ -848,7 +865,8 @@ export default {
     padding: 5px 0;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    justify-content: center;
+    // justify-content: space-between;
     align-items: flex-start;
     > div {
       margin: 5px 0;
diff --git a/src/views/bigScreen/management/left1.vue b/src/views/bigScreen/management/left1.vue
index 1fcbf4e..e31c9b3 100644
--- a/src/views/bigScreen/management/left1.vue
+++ b/src/views/bigScreen/management/left1.vue
@@ -8,7 +8,7 @@
         layout="prev, pager, next"
         background
         :total="total"
-        :page-size="2"
+        :page-size="1"
         :current-page.sync="currentPage1"
         @current-change="handleCurrentChange"
       >
@@ -165,6 +165,7 @@ export default {
       currentPage1: 1,
       dataList: [],
       total: 0,
+      time: null,
       index: 0,
       chart: null,
       chart2: null,
@@ -179,9 +180,12 @@ export default {
     this.$nextTick(() => {
       this.initChart();
       this.initLine();
+      this.start();
     });
   },
-  beforeDestroy() {},
+  beforeDestroy() {
+    this.end();
+  },
   watch: {
     index(newVal, oldVal) {
       if (newVal == 0) {
@@ -196,6 +200,18 @@ export default {
     },
   },
   methods: {
+    start() {
+      this.time = setInterval(() => {
+        let size = this.currentPage1 + 1;
+        if (size > this.total) size = 1;
+        this.handleCurrentChange(size);
+      }, 5000);
+    },
+    end() {
+      if (this.time) {
+        clearInterval(this.time);
+      }
+    },
     initChart() {
       this.request({
         url: "/hx/operating/getHxStrategyIndexPic",
@@ -206,6 +222,7 @@ export default {
           this.dataList = res.data;
           if (this.total == 0) return false;
           this.setData(res.data.slice(0, 2));
+          this.setOddEchars(res.data.slice(0, 1));
           // if (res.data.length > 2) {
           //   list = res.data.splice(0, 2);
           // } else {
@@ -216,8 +233,10 @@ export default {
     },
     handleCurrentChange(val) {
       this.currentPage1 = val;
-      const data = this.dataList.slice(val * 2 - 2, val * 2);
-      this.setData(data);
+      // const data = this.dataList.slice(val * 2 - 2, val * 2);
+      const data = this.dataList.slice(val - 1, val);
+      // this.setData(data);
+      this.setOddEchars(data);
     },
 
     setData(list) {
@@ -591,11 +610,24 @@ export default {
               top: 50,
               bottom: 50,
             },
-            dataZoom: {
-              type: "slider",
-              start: 0,
-              end: this.dataZoomEnd(list.length, 5),
-            },
+            // dataZoom: {
+            //   type: "slider",
+            //   start: 0,
+            //   end: this.dataZoomEnd(list.length, 5),
+            // },
+            dataZoom: [
+              {
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
+                },
+                startValue: this.dataZoomStart(list.length, 4, "start"),
+                endValue: this.dataZoomStart(list.length, 4, "end"),
+              },
+              {
+                type: "inside",
+              },
+            ],
             series: [
               {
                 name: "实际",
diff --git a/src/views/bigScreen/management/left2.vue b/src/views/bigScreen/management/left2.vue
index 24894c1..1837dc9 100644
--- a/src/views/bigScreen/management/left2.vue
+++ b/src/views/bigScreen/management/left2.vue
@@ -579,11 +579,24 @@ export default {
               top: 30,
               bottom: 40,
             },
-            dataZoom: {
-              type: "slider",
-              start: 0,
-              end: this.dataZoomEnd(list.length, 11),
-            },
+            // dataZoom: {
+            //   type: "slider",
+            //   start: 0,
+            //   end: this.dataZoomEnd(list.length, 11),
+            // },
+            dataZoom: [
+              {
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
+                },
+                startValue: this.dataZoomStart(list.length, 4, "start"),
+                endValue: this.dataZoomStart(list.length, 4, "end"),
+              },
+              {
+                type: "inside",
+              },
+            ],
             xAxis: {
               data: list.map((e) => e.deptName),
               // data: [
diff --git a/src/views/bigScreen/management/right1.vue b/src/views/bigScreen/management/right1.vue
index 66c02b9..8c6373c 100644
--- a/src/views/bigScreen/management/right1.vue
+++ b/src/views/bigScreen/management/right1.vue
@@ -330,14 +330,27 @@ export default {
               bottom: 50,
               containLabel: true,
             },
-            dataZoom: {
-              type: "slider",
-              start: 0,
-              end: this.dataZoomEnd(list.length, 5),
-              textStyle: {
-                color: "#fff",
+            // dataZoom: {
+            //   type: "slider",
+            //   start: 0,
+            //   end: this.dataZoomEnd(list.length, 5),
+            //   textStyle: {
+            //     color: "#fff",
+            //   },
+            // },
+            dataZoom: [
+              {
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
+                },
+                startValue: this.dataZoomStart(list.length, 4, "start"),
+                endValue: this.dataZoomStart(list.length, 4, "end"),
               },
-            },
+              {
+                type: "inside",
+              },
+            ],
             xAxis: [
               {
                 type: "category",
diff --git a/src/views/bigScreen/management/right2.vue b/src/views/bigScreen/management/right2.vue
index b30c1d4..9bec295 100644
--- a/src/views/bigScreen/management/right2.vue
+++ b/src/views/bigScreen/management/right2.vue
@@ -191,14 +191,27 @@ export default {
               bottom: 50,
               containLabel: true,
             },
-            dataZoom: {
-              type: "slider",
-              start: 0,
-              end: this.dataZoomEnd(list.length, 7),
-              textStyle: {
-                color: "#fff",
+            // dataZoom: {
+            //   type: "slider",
+            //   start: 0,
+            //   end: this.dataZoomEnd(list.length, 7),
+            //   textStyle: {
+            //     color: "#fff",
+            //   },
+            // },
+            dataZoom: [
+              {
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
+                },
+                startValue: this.dataZoomStart(list.length, 4, "start"),
+                endValue: this.dataZoomStart(list.length, 4, "end"),
               },
-            },
+              {
+                type: "inside",
+              },
+            ],
             xAxis: [
               {
                 type: "category",
@@ -793,14 +806,27 @@ export default {
           top: 30,
           bottom: 50,
         },
-        dataZoom: {
-          type: "slider",
-          start: 0,
-          end: this.dataZoomEnd(list.length, 7),
-          textStyle: {
-            color: "#fff",
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(list.length, 7),
+        //   textStyle: {
+        //     color: "#fff",
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(list.length, 4, "start"),
+            endValue: this.dataZoomStart(list.length, 4, "end"),
           },
-        },
+          {
+            type: "inside",
+          },
+        ],
         xAxis: {
           data: list.map((e) => e.deptName),
           axisLine: {
diff --git a/src/views/bigScreen/qualityManage/center.vue b/src/views/bigScreen/qualityManage/center.vue
index 6161032..f040538 100644
--- a/src/views/bigScreen/qualityManage/center.vue
+++ b/src/views/bigScreen/qualityManage/center.vue
@@ -7,18 +7,18 @@
           <div class="box">
             <span>{{ percentage }}%</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar :percentage="percentage" />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div><span style="font-weight: bold">产品合格率</span></div>
           <div class="box">
             <span>{{ dataInfo.productCate || 0 }}%</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar :percentage="dataInfo.productCate" />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div><span style="font-weight: bold">一般性质量问题数量</span></div>
@@ -43,9 +43,9 @@
             <span>{{ dataInfo.smallProductCate || 0 }}</span
             >%
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar :percentage="dataInfo.smallProductCate" />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div><span style="font-weight: bold">产品错、漏检率</span></div>
@@ -64,9 +64,9 @@
               dataInfo.qualityPlanCompleteTotal
             }}</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar :percentage="dataInfo.planCompleteRate" />
-          </div>
+          </div> -->
         </div>
         <div class="data-item">
           <div><span style="font-weight: bold">质量检查完成率</span></div>
@@ -76,9 +76,9 @@
               dataInfo.qualityNotificationCompleteTotal
             }}</span>
           </div>
-          <div style="width: 100%">
+          <!-- <div style="width: 100%">
             <progressBar :percentage="dataInfo.checkCompleteRate" />
-          </div>
+          </div> -->
         </div>
       </div>
     </center1>
diff --git a/src/views/bigScreen/qualityManage/center2.vue b/src/views/bigScreen/qualityManage/center2.vue
index d38b215..c3105ad 100644
--- a/src/views/bigScreen/qualityManage/center2.vue
+++ b/src/views/bigScreen/qualityManage/center2.vue
@@ -150,11 +150,24 @@ export default {
           top: 30,
           bottom: 50,
         },
-        dataZoom: {
-          type: "slider",
-          start: 0,
-          end: this.dataZoomEnd(productName.length, 7),
-        },
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(productName.length, 7),
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(productName.length, 4, "start"),
+            endValue: this.dataZoomStart(productName.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
         series: [
           {
             name: "实际",
diff --git a/src/views/bigScreen/qualityManage/left1.vue b/src/views/bigScreen/qualityManage/left1.vue
index 27adc63..96e1016 100644
--- a/src/views/bigScreen/qualityManage/left1.vue
+++ b/src/views/bigScreen/qualityManage/left1.vue
@@ -1,457 +1,490 @@
 <template>
-	<div>
-		<container2 title="质量计划">
-			<div slot="datePicker">
-				<bigScreenTabs v-model="index" :titleArr="['全厂', '部门']"></bigScreenTabs>
-			</div>
-			<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
-			<div style="height: 100%; width: 100%" ref="chart2" v-else></div>
-		</container2>
-	</div>
+  <div>
+    <container2 title="质量计划">
+      <div slot="datePicker">
+        <bigScreenTabs
+          v-model="index"
+          :titleArr="['全厂', '部门']"
+        ></bigScreenTabs>
+      </div>
+      <div
+        style="height: 100%; width: 100%"
+        ref="chart"
+        v-if="index == 0"
+      ></div>
+      <div style="height: 100%; width: 100%" ref="chart2" v-else></div>
+    </container2>
+  </div>
 </template>
 
 <script>
-import rocketTit from '../components/rocketTit/index.vue'
-import container2 from './components/container2/index.vue'
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
-import colorList from '@/utils/colorPalette'
+import rocketTit from "../components/rocketTit/index.vue";
+import container2 from "./components/container2/index.vue";
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
+import colorList from "@/utils/colorPalette";
 // import {Liquid} from '@antv/g2plot';
 // import resize from '../../dashboard/mixins/resize'
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
 export default {
-	// mixins: [resize],
-	name: 'left1',
-	components: {
-		rocketTit,
-		container2,
-		bigScreenTabs,
-		progressBar,
-	},
-	data() {
-		return {
-			index: 0,
-			chart: null,
-			chart2: null,
-			data: [
-				{ value: 154, name: '类别一' },
-				{ value: 775, name: '类别二' },
-				{ value: 679, name: '类别三' },
-				{ value: 679, name: '类别四' },
-				{ value: 679, name: '类别五' },
-				{ value: 679, name: '类别六' },
-				{ value: 679, name: '类别七' },
-				{ value: 679, name: '类别八' },
-			],
-			colorList,
-		}
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.initChart()
-		})
-	},
-	watch: {
-		index(newVal, oldVal) {
-			if (newVal == 0) {
-				this.chart2.dispose()
-				this.chart2 = null
-				this.$nextTick(() => {
-					this.initChart()
-				})
-			} else {
-				this.chart.dispose()
-				this.chart = null
-				this.$nextTick(() => {
-					this.initChart2()
-				})
-			}
-		},
-	},
-	beforeDestroy() {},
-	methods: {
-		initChart() {
-			this.request({
-				url: '/hx/qualityAssurance/getQualityPlan',
-				method: 'get',
-				params: {
-					type: '1',
-				},
-			}).then(({ data }) => {
-				this.chart = echarts.init(this.$refs.chart)
-				this.setOptions(data)
-			})
-		},
-		setOptions(resData) {
-			let month = []
-			let rate = []
-			let completed = []
-			for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
-				month.push(item.month)
-				rate.push(item.rate)
-				completed.push(item.completed)
-			}
-			this.chart.setOption({
-				legend: {
-					data: ['数量', '完成率'],
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				grid: {
-					left: '3%',
-					right: '6%',
-					bottom: '3%',
-					containLabel: true,
-				},
-				xAxis: [
-					{
-						type: 'category',
-						data: month,
-						axisPointer: {
-							type: 'shadow',
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				yAxis: [
-					{
-						type: 'value',
-						name: '个',
-						min: 0,
-						// max: 250,
-						// interval: 50,
-						axisLabel: {
-							formatter: '{value}',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-					{
-						type: 'value',
-						min: 0,
-						max: 100,
-						// interval: 5,
-						axisLabel: {
-							formatter: '{value} %',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				grid: {
-					containLabel: true,
-					width: '99%',
-					left: 0,
-					top: 50,
-					bottom: 50,
-				},
-				dataZoom: {
-					type: 'slider',
-					start: 0,
-					end: this.dataZoomEnd(month.length, 5),
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				series: [
-					{
-						name: '数量',
-						type: 'bar',
-						barWidth: 20,
-						data: completed,
-						itemStyle: {
-							color: {
-								type: 'linear', // 线性渐变
-								x: 0,
-								y: 0,
-								x2: 0,
-								y2: 1,
-								colorStops: [
-									{
-										offset: 0,
-										color: '#9AF0D5', // 0%处的颜色为红色
-									},
-									{
-										offset: 1,
-										color: '#61DDAA', // 100%处的颜色为蓝
-									},
-								],
-							},
-						},
-					},
-					{
-						name: '完成率',
-						type: 'line',
-						yAxisIndex: 1,
-						smooth: false,
-						data: rate,
-						itemStyle: {
-							color: '#7EA7FC',
-						},
-						symbol: 'none',
-					},
-				],
-				// yAxis: {
-				//   type: 'value',
-				//   splitLine: {
-				//     show: false//不显示网格线
-				//   },
-				//   splitArea: {
-				//     show: false//不显示网格区域
-				//   },
-				//   axisLine: {
-				//     lineStyle: {
-				//       color: 'rgb(255, 255, 255)'
-				//     },
-				//   }
-				// },
-				// series: [
-				//   {
-				//     name: '利润',
-				//     type: 'bar',
-				//     data: [
-				//       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-				//     ]
-				//   },
-				//   {
-				//     name: '数量',
-				//     type: 'bar',
-				//     data: [
-				//       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-				//     ]
-				//   },
-				//   {
-				//     name: '完成率',
-				//     type: 'line',
-				//     yAxisIndex: 1,
-				//     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
-				//   }
+  // mixins: [resize],
+  name: "left1",
+  components: {
+    rocketTit,
+    container2,
+    bigScreenTabs,
+    progressBar,
+  },
+  data() {
+    return {
+      index: 0,
+      chart: null,
+      chart2: null,
+      data: [
+        { value: 154, name: "类别一" },
+        { value: 775, name: "类别二" },
+        { value: 679, name: "类别三" },
+        { value: 679, name: "类别四" },
+        { value: 679, name: "类别五" },
+        { value: 679, name: "类别六" },
+        { value: 679, name: "类别七" },
+        { value: 679, name: "类别八" },
+      ],
+      colorList,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  watch: {
+    index(newVal, oldVal) {
+      if (newVal == 0) {
+        this.chart2.dispose();
+        this.chart2 = null;
+        this.$nextTick(() => {
+          this.initChart();
+        });
+      } else {
+        this.chart.dispose();
+        this.chart = null;
+        this.$nextTick(() => {
+          this.initChart2();
+        });
+      }
+    },
+  },
+  beforeDestroy() {},
+  methods: {
+    initChart() {
+      this.request({
+        url: "/hx/qualityAssurance/getQualityPlan",
+        method: "get",
+        params: {
+          type: "1",
+        },
+      }).then(({ data }) => {
+        this.chart = echarts.init(this.$refs.chart);
+        this.setOptions(data);
+      });
+    },
+    setOptions(resData) {
+      let month = [];
+      let rate = [];
+      let completed = [];
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        month.push(item.month);
+        rate.push(item.rate);
+        completed.push(item.completed);
+      }
+      this.chart.setOption({
+        legend: {
+          data: ["数量", "完成率"],
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "6%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: month,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "个",
+            min: 0,
+            // max: 250,
+            // interval: 50,
+            axisLabel: {
+              formatter: "{value}",
+            },
+            splitLine: {
+              show: false, //不显示网格线
+            },
+            splitArea: {
+              show: false, //不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+          {
+            type: "value",
+            min: 0,
+            max: 100,
+            // interval: 5,
+            axisLabel: {
+              formatter: "{value} %",
+            },
+            splitLine: {
+              show: false, //不显示网格线
+            },
+            splitArea: {
+              show: false, //不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        grid: {
+          containLabel: true,
+          width: "99%",
+          left: 0,
+          top: 50,
+          bottom: 50,
+        },
+        // dataZoom: {
+        // 	type: 'slider',
+        // 	start: 0,
+        // 	end: this.dataZoomEnd(month.length, 5),
+        // 	textStyle: {
+        // 		color: '#fff',
+        // 	},
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(month.length, 4, "start"),
+            endValue: this.dataZoomStart(month.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
+        series: [
+          {
+            name: "数量",
+            type: "bar",
+            barWidth: 20,
+            data: completed,
+            itemStyle: {
+              color: {
+                type: "linear", // 线性渐变
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#9AF0D5", // 0%处的颜色为红色
+                  },
+                  {
+                    offset: 1,
+                    color: "#61DDAA", // 100%处的颜色为蓝
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: "完成率",
+            type: "line",
+            yAxisIndex: 1,
+            smooth: false,
+            data: rate,
+            itemStyle: {
+              color: "#7EA7FC",
+            },
+            symbol: "none",
+          },
+        ],
+        // yAxis: {
+        //   type: 'value',
+        //   splitLine: {
+        //     show: false//不显示网格线
+        //   },
+        //   splitArea: {
+        //     show: false//不显示网格区域
+        //   },
+        //   axisLine: {
+        //     lineStyle: {
+        //       color: 'rgb(255, 255, 255)'
+        //     },
+        //   }
+        // },
+        // series: [
+        //   {
+        //     name: '利润',
+        //     type: 'bar',
+        //     data: [
+        //       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        //     ]
+        //   },
+        //   {
+        //     name: '数量',
+        //     type: 'bar',
+        //     data: [
+        //       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+        //     ]
+        //   },
+        //   {
+        //     name: '完成率',
+        //     type: 'line',
+        //     yAxisIndex: 1,
+        //     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+        //   }
 
-				// ]
-			})
-		},
-		initChart2() {
-			this.request({
-				url: '/hx/qualityAssurance/getQualityPlan',
-				method: 'get',
-				params: {
-					type: '2',
-				},
-			}).then(({ data }) => {
-				this.chart2 = echarts.init(this.$refs.chart2)
-				this.setOptions2(data)
-			})
-		},
-		setOptions2(resData) {
-			let deptName = []
-			let rate = []
-			let completed = []
-			for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
-				deptName.push(item.deptName)
-				rate.push(item.rate)
-				completed.push(item.completed)
-			}
-			this.chart2.setOption({
-				tooltip: {
-					trigger: 'axis',
-				},
-				// legend: {
-				// 	// data: ['收入', '实际', '目标'],
-				// 	textStyle: {
-				// 		color: '#fff', //legend字体颜色
-				// 	},
-				// 	// selectedMode: false,
-				// },
-				grid: {
-					containLabel: true,
-					left: 20,
-					right: 10,
-					top: 30,
-					bottom: 50,
-				},
-				xAxis: {
-					data: deptName,
-					axisLine: {
-						lineStyle: {
-							color: 'rgb(255, 255, 255)',
-						},
-					},
-				},
-				dataZoom: {
-					type: 'slider',
-					start: 0,
-					end: this.dataZoomEnd(deptName.length, 5),
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				color: ['#ccc', 'red'],
-				yAxis: [
-					{
-						name: '个',
-						splitLine: {
-							show: true,
-							//  改变轴线颜色
-							lineStyle: {
-								// 使用深浅的间隔色
-								color: ['rgba(255, 255, 255,.5)'],
-							},
-						},
-						axisLabel: {
-							formatter: '{value}',
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-					{
-						type: 'value',
-						min: 0,
-						max: 100,
-						interval: 20,
-						axisLabel: {
-							formatter: '{value} %',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				series: [
-					{
-						name: '实际',
-						type: 'bar',
-						barWidth: 15,
-						position: [0, 0],
-						itemStyle: {
-							color: 'rgba(90, 216, 166, 0.85)',
-						},
-						data: completed,
-					},
-					{
-						name: '目标',
-						type: 'scatter',
-						symbol: 'rect',
-						yAxisIndex: 1,
-						symbolSize: [30, 4],
-						// symbolOffset: [3, 0],
-						// position: [0, 0],
-						itemStyle: {
-							color: '#F64F58',
-						},
-						data: [50, 40],
-					},
-				],
-			})
-		},
-	},
-}
+        // ]
+      });
+    },
+    initChart2() {
+      this.request({
+        url: "/hx/qualityAssurance/getQualityPlan",
+        method: "get",
+        params: {
+          type: "2",
+        },
+      }).then(({ data }) => {
+        this.chart2 = echarts.init(this.$refs.chart2);
+        this.setOptions2(data);
+      });
+    },
+    setOptions2(resData) {
+      let deptName = [];
+      let rate = [];
+      let completed = [];
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        deptName.push(item.deptName);
+        rate.push(item.rate);
+        completed.push(item.completed);
+      }
+      this.chart2.setOption({
+        tooltip: {
+          trigger: "axis",
+        },
+        // legend: {
+        // 	// data: ['收入', '实际', '目标'],
+        // 	textStyle: {
+        // 		color: '#fff', //legend字体颜色
+        // 	},
+        // 	// selectedMode: false,
+        // },
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 10,
+          top: 30,
+          bottom: 50,
+        },
+        xAxis: {
+          data: deptName,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(255, 255, 255)",
+            },
+          },
+        },
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(deptName.length, 5),
+        //   textStyle: {
+        //     color: "#fff",
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(deptName.length, 4, "start"),
+            endValue: this.dataZoomStart(deptName.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
+        color: ["#ccc", "red"],
+        yAxis: [
+          {
+            name: "个",
+            splitLine: {
+              show: true,
+              //  改变轴线颜色
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: ["rgba(255, 255, 255,.5)"],
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+          {
+            type: "value",
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: "{value} %",
+            },
+            splitLine: {
+              show: false, //不显示网格线
+            },
+            splitArea: {
+              show: false, //不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "实际",
+            type: "bar",
+            barWidth: 15,
+            position: [0, 0],
+            itemStyle: {
+              color: "rgba(90, 216, 166, 0.85)",
+            },
+            data: completed,
+          },
+          {
+            name: "目标",
+            type: "scatter",
+            symbol: "rect",
+            yAxisIndex: 1,
+            symbolSize: [30, 4],
+            // symbolOffset: [3, 0],
+            // position: [0, 0],
+            itemStyle: {
+              color: "#F64F58",
+            },
+            data: [50, 40],
+          },
+        ],
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .wrap {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	.box {
-		padding: 0 0 5px 15px;
-		display: flex;
-		align-items: center;
-		.num {
-			font-size: 24px;
-			font-weight: 600;
-			margin: 0 10px;
-		}
-	}
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  .box {
+    padding: 0 0 5px 15px;
+    display: flex;
+    align-items: center;
+    .num {
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0 10px;
+    }
+  }
 }
 
 .content1 {
-	// height: 200px;
-	height: 100%;
+  // height: 200px;
+  height: 100%;
 
-	.chart1 {
-		margin: 0 auto;
-		width: 100%;
-		height: 192px;
-		background: transparent;
-	}
+  .chart1 {
+    margin: 0 auto;
+    width: 100%;
+    height: 192px;
+    background: transparent;
+  }
 }
 
 .num {
-	font-size: 30px;
-	font-family: Roboto-BlackItalic, Roboto;
-	font-weight: normal;
-	color: #91d5fe;
-	vertical-align: sub;
-	//   margin-right: 3px;
+  font-size: 30px;
+  font-family: Roboto-BlackItalic, Roboto;
+  font-weight: normal;
+  color: #91d5fe;
+  vertical-align: sub;
+  //   margin-right: 3px;
 }
 
 .content2 {
-	padding: 20px;
-	flex: 1;
-	height: 100%;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	.chart2 {
-		height: 100%;
-	}
+  padding: 20px;
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .chart2 {
+    height: 100%;
+  }
 
-	.tit {
-		font-size: 16px;
-		font-family: PingFangSC-Semibold, PingFang SC;
-		font-weight: 600;
-		color: #ffffff;
-		line-height: 22px;
-		position: relative;
-		padding-left: 15px;
-	}
-	.tit::after {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 3px;
-		left: 0px;
-		width: 4px;
-		height: 16px;
-		background: #00ffff;
-	}
+  .tit {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 22px;
+    position: relative;
+    padding-left: 15px;
+  }
+  .tit::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 3px;
+    left: 0px;
+    width: 4px;
+    height: 16px;
+    background: #00ffff;
+  }
 }
 </style>
diff --git a/src/views/bigScreen/qualityManage/right1.vue b/src/views/bigScreen/qualityManage/right1.vue
index 7b98716..522f450 100644
--- a/src/views/bigScreen/qualityManage/right1.vue
+++ b/src/views/bigScreen/qualityManage/right1.vue
@@ -1,46 +1,82 @@
 <template>
-	<div>
-		<container2 title="质量问题">
-			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['全年', '月度']"></bigScreenTabs>
-			<div style="height: 100%; width: 100%" ref="chart" v-if="index == 0"></div>
-			<div style="height: 100%; width: 100%" ref="chart1" v-else></div>
-		</container2>
-		<container2 title="质量检查分析" style="margin-top: 10px">
-			<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['总厂', '部门']"></bigScreenTabs>
-			<div style="height: 100%; width: 100%" ref="chart2" v-if="index2 == 0"></div>
-			<div style="height: 100%; width: 100%" ref="chart22" v-else></div>
-		</container2>
-		<container2 title="质量案例/检查明细" style="margin-top: 10px">
-			<bigScreenTabs slot="datePicker" v-model="index3" :titleArr="['案例', '明细']"></bigScreenTabs>
-			<el-row style="padding: 15px 30px" v-if="index3 == 0">
-				<el-col :span="24" style="margin-bottom: 1px">
-					<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
-						<el-col style="text-align: center" :span="4">序号</el-col>
-						<el-col style="text-align: center" :span="8">部门</el-col>
-						<el-col style="text-align: center" :span="12">作业内容</el-col>
-					</el-row>
-				</el-col>
-				<vue-seamless-scroll
-					:data="scrollList"
-					class="warp-scroll"
-					ref="seamlessScroll"
-					:class-option="{
-						singleHeight: 43,
-					}"
-				>
-					<ul class="item">
-						<li v-for="item in scrollList" :key="item.id">
-							<el-row style="font-size: 14px">
-								<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
-								<el-col style="text-align: center" :span="8">{{ item.className }}</el-col>
-								<el-col style="text-align: center" :title="item.faultRevelation" :span="12">{{ item.faultRevelation }}</el-col>
-							</el-row>
-						</li>
-					</ul>
-				</vue-seamless-scroll>
-			</el-row>
-			<el-row style="padding: 15px 30px" v-if="index3 == 1">
-				<!-- <el-col :span="24" style="margin-bottom: 1px">
+  <div>
+    <container2 title="质量问题">
+      <bigScreenTabs
+        slot="datePicker"
+        v-model="index"
+        :titleArr="['全年', '月度']"
+      ></bigScreenTabs>
+      <div
+        style="height: 100%; width: 100%"
+        ref="chart"
+        v-if="index == 0"
+      ></div>
+      <div style="height: 100%; width: 100%" ref="chart1" v-else></div>
+    </container2>
+    <container2 title="质量检查分析" style="margin-top: 10px">
+      <bigScreenTabs
+        slot="datePicker"
+        v-model="index2"
+        :titleArr="['总厂', '部门']"
+      ></bigScreenTabs>
+      <div
+        style="height: 100%; width: 100%"
+        ref="chart2"
+        v-if="index2 == 0"
+      ></div>
+      <div style="height: 100%; width: 100%" ref="chart22" v-else></div>
+    </container2>
+    <container2 title="质量案例/检查明细" style="margin-top: 10px">
+      <bigScreenTabs
+        slot="datePicker"
+        v-model="index3"
+        :titleArr="['案例', '明细']"
+      ></bigScreenTabs>
+      <el-row style="padding: 15px 30px" v-if="index3 == 0">
+        <el-col :span="24" style="margin-bottom: 1px">
+          <el-row
+            style="
+              font-size: 14px;
+              height: 42px;
+              line-height: 42px;
+              background: rgba(0, 255, 255, 0.3);
+            "
+          >
+            <el-col style="text-align: center" :span="4">序号</el-col>
+            <el-col style="text-align: center" :span="8">部门</el-col>
+            <el-col style="text-align: center" :span="12">作业内容</el-col>
+          </el-row>
+        </el-col>
+        <vue-seamless-scroll
+          :data="scrollList"
+          class="warp-scroll"
+          ref="seamlessScroll"
+          :class-option="{
+            singleHeight: 43,
+          }"
+        >
+          <ul class="item">
+            <li v-for="item in scrollList" :key="item.id">
+              <el-row style="font-size: 14px">
+                <el-col style="text-align: center" :span="4">{{
+                  item.id
+                }}</el-col>
+                <el-col style="text-align: center" :span="8">{{
+                  item.className
+                }}</el-col>
+                <el-col
+                  style="text-align: center"
+                  :title="item.faultRevelation"
+                  :span="12"
+                  >{{ item.faultRevelation }}</el-col
+                >
+              </el-row>
+            </li>
+          </ul>
+        </vue-seamless-scroll>
+      </el-row>
+      <el-row style="padding: 15px 30px" v-if="index3 == 1">
+        <!-- <el-col :span="24" style="margin-bottom: 1px">
 					<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
 						<el-col style="text-align: center" :span="4">序号</el-col>
 						<el-col style="text-align: center" :span="8">部门</el-col>
@@ -64,797 +100,847 @@
 						</li>
 					</ul>
 				</vue-seamless-scroll> -->
-			</el-row>
-		</container2>
-	</div>
+      </el-row>
+    </container2>
+  </div>
 </template>
 
 <script>
-import rocketTit from '../components/rocketTit/index.vue'
-import container2 from './components/container2/index.vue'
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
-import colorList from '@/utils/colorPalette'
-import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
-import vueSeamlessScroll from 'vue-seamless-scroll'
+import rocketTit from "../components/rocketTit/index.vue";
+import container2 from "./components/container2/index.vue";
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
+import colorList from "@/utils/colorPalette";
+import {
+  blueColorList,
+  greenColorList,
+  yelloColorList,
+} from "@/utils/gradualColor";
+import vueSeamlessScroll from "vue-seamless-scroll";
 // import {Liquid} from '@antv/g2plot';
 // import resize from '../../dashboard/mixins/resize'
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
 export default {
-	// mixins: [resize],
-	name: 'left1',
-	components: {
-		rocketTit,
-		container2,
-		bigScreenTabs,
-		progressBar,
-		vueSeamlessScroll,
-	},
-	data() {
-		return {
-			index: 0,
-			index2: 0,
-			index3: 0,
-			colorList,
-			chart: null,
-			chart1: null,
-			chart2: null,
-			chart22: null,
+  // mixins: [resize],
+  name: "left1",
+  components: {
+    rocketTit,
+    container2,
+    bigScreenTabs,
+    progressBar,
+    vueSeamlessScroll,
+  },
+  data() {
+    return {
+      index: 0,
+      index2: 0,
+      index3: 0,
+      colorList,
+      chart: null,
+      chart1: null,
+      chart2: null,
+      chart22: null,
 
-			listData: [1, 2, 3, 4, 5, 6, 7, 8],
-			scrollList: [],
-		}
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.initChart()
-			this.initLine()
-			this.getData()
-		})
-	},
-	watch: {
-		index(newVal, oldVal) {
-			if (newVal == 0) {
-				this.chart1.dispose()
-				this.chart1 = null
-				this.$nextTick(() => {
-					this.initChart()
-				})
-			} else {
-				this.chart.dispose()
-				this.chart = null
-				this.$nextTick(() => {
-					this.initChart1()
-				})
-			}
-		},
-		index2(newVal, oldVal) {
-			if (newVal == 0) {
-				this.chart22.dispose()
-				this.chart22 = null
-				this.$nextTick(() => {
-					this.initLine()
-				})
-			} else {
-				this.chart2.dispose()
-				this.chart2 = null
-				this.$nextTick(() => {
-					this.initChart22()
-				})
-			}
-		},
-	},
-	beforeDestroy() {},
-	methods: {
-		// 获取滚动列表数据
-		getData() {
-			this.request({
-				url: '/hx/qualityAssurance/getHxQualityCasePic',
-				method: 'get',
-			}).then(({ data }) => {
-				this.scrollList = data
-				this.$refs.seamlessScroll.reset()
-			})
-		},
-		// 右上切换前
-		initChart() {
-			this.request({
-				url: '/hx/qualityAssurance/getQualityProblem',
-				method: 'get',
-				params: {
-					type: '1',
-				},
-			}).then(({ data }) => {
-				this.chart = echarts.init(this.$refs.chart)
-				this.setOptions(data.list)
-			})
-		},
-		setOptions(resData) {
-			resData.map((item, index) => {
-				item.value.map(i => {
-					i.value = i.TOTAL
-				})
-			})
-			this.chart.setOption({
-				tooltip: {
-					trigger: 'item',
-				},
-				legend: {
-					top: '5%',
-					right: '5%',
-					orient: 'vertical',
-					y: 'center',
-					// left: 'right',
-					textStyle: {
-						color: '#fff', //legend字体颜色
-					},
-				},
-				series: [
-					{
-						name: resData[0].dimension,
-						type: 'pie',
-						center: ['35%', '50%'],
-						radius: ['60%', '80%'],
-						avoidLabelOverlap: false,
-						label: {
-							show: false,
-							position: 'center',
-						},
-						emphasis: {
-							label: {
-								show: false,
-								fontSize: '40',
-								fontWeight: 'bold',
-							},
-						},
-						labelLine: {
-							show: false,
-						},
-						data: resData[0].value,
-						// [
-						// 	{ value: 1048, name: '型号1' },
-						// 	{ value: 735, name: '型号2' },
-						// 	{ value: 580, name: '型号3' },
-						// 	{ value: 484, name: '型号4' },
-						// 	{ value: 301, name: '型号5' },
-						// ],
-						color: blueColorList,
-					},
-					{
-						name: resData[1].dimension,
-						type: 'pie',
-						radius: ['35%', '55%'],
-						center: ['35%', '50%'],
-						avoidLabelOverlap: false,
-						label: {
-							show: false,
-							position: 'center',
-						},
-						emphasis: {
-							label: {
-								show: false,
-								fontSize: '40',
-								fontWeight: 'bold',
-							},
-						},
-						labelLine: {
-							show: false,
-						},
-						data: resData[1].value,
-						// [
-						// 	{ value: 1048, name: '类别1' },
-						// 	{ value: 735, name: '类别2' },
-						// 	{ value: 580, name: '类别3' },
-						// 	{ value: 484, name: '类别4' },
-						// 	{ value: 300, name: '类别5' },
-						// ],
-						color: greenColorList,
-					},
-					{
-						name: resData[2].dimension,
-						type: 'pie',
-						radius: ['10%', '30%'],
-						center: ['35%', '50%'],
-						avoidLabelOverlap: false,
-						label: {
-							show: false,
-							position: 'center',
-						},
-						emphasis: {
-							label: {
-								show: false,
-								fontSize: '40',
-								fontWeight: 'bold',
-							},
-						},
-						labelLine: {
-							show: false,
-						},
-						data: resData[2].value,
-						// [
-						// 	{ value: 1048, name: '部门1' },
-						// 	{ value: 735, name: '部门2' },
-						// 	{ value: 580, name: '部门3' },
-						// 	{ value: 484, name: '部门4' },
-						// 	{ value: 300, name: '部门5' },
-						// ],
-						color: yelloColorList,
-					},
-				],
-			})
-		},
-		// 右上切换后
-		initChart1() {
-			this.request({
-				url: '/hx/qualityAssurance/getQualityProblem',
-				method: 'get',
-				params: {
-					type: '2',
-				},
-			}).then(({ data }) => {
-				this.chart1 = echarts.init(this.$refs.chart1)
-				this.setOptions1(data)
-			})
-		},
-		setOptions1(resData) {
-			let titData = resData.allName
-			delete resData.allName
-			let titList = []
-			let valList = []
-			for (let index = 0; index < titData.length; index++) {
-				valList.push([])
-			}
-			let newData = {}
-			for (let i = 0; i < resData.list.length; i++) {
-				const item = resData.list[i]
-				for (const key in item) {
-					newData[key] = item[key]
-				}
-			}
-			for (const key in newData) {
-				if (Object.hasOwnProperty.call(newData, key)) {
-					const item = newData[key]
-					titList.push(key)
-					for (let i = 0; i < item.length; i++) {
-						const ele = item[i]
-						let index = titData.findIndex(e => e == ele.name)
-						valList[index][titList.length - 1] = ele.COMPLETED
-					}
-				}
-			}
+      listData: [1, 2, 3, 4, 5, 6, 7, 8],
+      scrollList: [],
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+      this.initLine();
+      this.getData();
+    });
+  },
+  watch: {
+    index(newVal, oldVal) {
+      if (newVal == 0) {
+        this.chart1.dispose();
+        this.chart1 = null;
+        this.$nextTick(() => {
+          this.initChart();
+        });
+      } else {
+        this.chart.dispose();
+        this.chart = null;
+        this.$nextTick(() => {
+          this.initChart1();
+        });
+      }
+    },
+    index2(newVal, oldVal) {
+      if (newVal == 0) {
+        this.chart22.dispose();
+        this.chart22 = null;
+        this.$nextTick(() => {
+          this.initLine();
+        });
+      } else {
+        this.chart2.dispose();
+        this.chart2 = null;
+        this.$nextTick(() => {
+          this.initChart22();
+        });
+      }
+    },
+  },
+  beforeDestroy() {},
+  methods: {
+    // 获取滚动列表数据
+    getData() {
+      this.request({
+        url: "/hx/qualityAssurance/getHxQualityCasePic",
+        method: "get",
+      }).then(({ data }) => {
+        this.scrollList = data;
+        this.$refs.seamlessScroll.reset();
+      });
+    },
+    // 右上切换前
+    initChart() {
+      this.request({
+        url: "/hx/qualityAssurance/getQualityProblem",
+        method: "get",
+        params: {
+          type: "1",
+        },
+      }).then(({ data }) => {
+        this.chart = echarts.init(this.$refs.chart);
+        this.setOptions(data.list);
+      });
+    },
+    setOptions(resData) {
+      resData.map((item, index) => {
+        if (item.dimension == 1) {
+          item.dimension = "型号";
+        } else if (item.dimension == 2) {
+          item.dimension = "类别";
+        } else if (item.dimension == 3) {
+          item.dimension = "部门";
+        }
+        item.value.map((i) => {
+          i.value = i.TOTAL;
+        });
+      });
+      this.chart.setOption({
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          top: "5%",
+          right: "5%",
+          orient: "vertical",
+          y: "center",
+          // left: 'right',
+          textStyle: {
+            color: "#fff", //legend字体颜色
+          },
+        },
+        series: [
+          {
+            name: resData[0].dimension,
+            type: "pie",
+            center: ["35%", "50%"],
+            radius: ["60%", "80%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: "40",
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: resData[0].value,
+            // [
+            // 	{ value: 1048, name: '型号1' },
+            // 	{ value: 735, name: '型号2' },
+            // 	{ value: 580, name: '型号3' },
+            // 	{ value: 484, name: '型号4' },
+            // 	{ value: 301, name: '型号5' },
+            // ],
+            color: blueColorList,
+          },
+          {
+            name: resData[1].dimension,
+            type: "pie",
+            radius: ["35%", "55%"],
+            center: ["35%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: "40",
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: resData[1].value,
+            // [
+            // 	{ value: 1048, name: '类别1' },
+            // 	{ value: 735, name: '类别2' },
+            // 	{ value: 580, name: '类别3' },
+            // 	{ value: 484, name: '类别4' },
+            // 	{ value: 300, name: '类别5' },
+            // ],
+            color: greenColorList,
+          },
+          {
+            name: resData[2].dimension,
+            type: "pie",
+            radius: ["10%", "30%"],
+            center: ["35%", "50%"],
+            avoidLabelOverlap: false,
+            label: {
+              show: false,
+              position: "center",
+            },
+            emphasis: {
+              label: {
+                show: false,
+                fontSize: "40",
+                fontWeight: "bold",
+              },
+            },
+            labelLine: {
+              show: false,
+            },
+            data: resData[2].value,
+            // [
+            // 	{ value: 1048, name: '部门1' },
+            // 	{ value: 735, name: '部门2' },
+            // 	{ value: 580, name: '部门3' },
+            // 	{ value: 484, name: '部门4' },
+            // 	{ value: 300, name: '部门5' },
+            // ],
+            color: yelloColorList,
+          },
+        ],
+      });
+    },
+    // 右上切换后
+    initChart1() {
+      this.request({
+        url: "/hx/qualityAssurance/getQualityProblem",
+        method: "get",
+        params: {
+          type: "2",
+        },
+      }).then(({ data }) => {
+        this.chart1 = echarts.init(this.$refs.chart1);
+        this.setOptions1(data);
+      });
+    },
+    setOptions1(resData) {
+      let titData = resData.allName;
+      delete resData.allName;
+      let titList = [];
+      let valList = [];
+      for (let index = 0; index < titData.length; index++) {
+        valList.push([]);
+      }
+      let newData = {};
+      for (let i = 0; i < resData.list.length; i++) {
+        const item = resData.list[i];
+        for (const key in item) {
+          newData[key] = item[key];
+        }
+      }
+      for (const key in newData) {
+        if (Object.hasOwnProperty.call(newData, key)) {
+          const item = newData[key];
+          titList.push(key);
+          for (let i = 0; i < item.length; i++) {
+            const ele = item[i];
+            let index = titData.findIndex((e) => e == ele.name);
+            valList[index][titList.length - 1] = ele.COMPLETED;
+          }
+        }
+      }
 
-			this.chart1.setOption({
-				tooltip: {
-					trigger: 'axis',
-					axisPointer: {
-						type: 'shadow',
-					},
-				},
-				legend: {
-					data: titData,
-					textStyle: {
-						color: '#fff', //legend字体颜色
-					},
-				},
-				grid: {
-					left: 20,
-					right: 20,
-					top: 30,
-					bottom: 50,
-					containLabel: true,
-				},
-				dataZoom: {
-					type: 'slider',
-					start: 0,
-					end: this.dataZoomEnd(titList.length, 5),
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				color: colorList,
-				xAxis: [
-					{
-						type: 'category',
-						data: titList,
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				yAxis: [
-					{
-						name: '个',
-						splitLine: {
-							show: true,
-							//  改变轴线颜色
-							lineStyle: {
-								// 使用深浅的间隔色
-								color: ['rgba(255, 255, 255,.5)'],
-							},
-						},
-						axisLabel: {
-							formatter: '{value}',
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-					{
-						type: 'value',
-					},
-				],
-				series: [
-					...valList.map((e, index) => {
-						return {
-							name: titData[index],
-							type: 'bar',
-							stack: 'Ad',
-							emphasis: {
-								focus: 'series',
-							},
-							barWidth: 30,
-							data: e,
-						}
-					}),
-				],
-			})
-		},
+      this.chart1.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          data: titData,
+          textStyle: {
+            color: "#fff", //legend字体颜色
+          },
+        },
+        grid: {
+          left: 20,
+          right: 20,
+          top: 30,
+          bottom: 50,
+          containLabel: true,
+        },
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(titList.length, 5),
+        //   textStyle: {
+        //     color: "#fff",
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(titList.length, 4, "start"),
+            endValue: this.dataZoomStart(titList.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
+        color: colorList,
+        xAxis: [
+          {
+            type: "category",
+            data: titList,
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "个",
+            splitLine: {
+              show: true,
+              //  改变轴线颜色
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: ["rgba(255, 255, 255,.5)"],
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          ...valList.map((e, index) => {
+            return {
+              name: titData[index],
+              type: "bar",
+              stack: "Ad",
+              emphasis: {
+                focus: "series",
+              },
+              barWidth: 30,
+              data: e,
+            };
+          }),
+        ],
+      });
+    },
 
-		initLine() {
-			this.request({
-				url: '/hx/qualityAssurance/getHxQualityInspect',
-				method: 'get',
-				params: {
-					type: '1',
-				},
-			}).then(({ data }) => {
-				this.chart2 = echarts.init(this.$refs.chart2)
-				this.setOptions2(data.factory)
-			})
-		},
-		setOptions2(resData) {
-			let month = []
-			let cate = [] // 率
-			let completed = [] // 完成
-			for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
-				month.push(item.month)
-				cate.push(item.CATE)
-				completed.push(item.COMPLETED)
-			}
-			this.chart2.setOption({
-				tooltip: {
-					trigger: 'axis',
-					// formatter: '{a1}<br/>{b1}：{c1}',
-				},
-				legend: {
-					data: ['数量', '完成率'],
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				grid: {
-					left: '3%',
-					right: '6%',
-					bottom: '3%',
-					containLabel: true,
-				},
-				xAxis: [
-					{
-						type: 'category',
-						data: month,
-						axisPointer: {
-							type: 'shadow',
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				yAxis: [
-					{
-						type: 'value',
-						name: '个',
-						min: 0,
-						// max: 250,
-						// interval: 50,
-						axisLabel: {
-							formatter: '{value}',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-					{
-						type: 'value',
-						min: 0,
-						max: 100,
-						// interval: 5,
-						axisLabel: {
-							formatter: '{value} %',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				grid: {
-					containLabel: true,
-					width: '99%',
-					left: 0,
-					top: 50,
-					bottom: 50,
-				},
-				dataZoom: {
-					type: 'slider',
-					start: 0,
-					end: this.dataZoomEnd(month.length, 5),
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				series: [
-					{
-						name: '数量',
-						type: 'bar',
-						barWidth: 20,
-						data: completed,
-						itemStyle: {
-							color: {
-								type: 'linear', // 线性渐变
-								x: 0,
-								y: 0,
-								x2: 0,
-								y2: 1,
-								colorStops: [
-									{
-										offset: 0,
-										color: '#F49220', // 0%处的颜色为红色
-									},
-									{
-										offset: 1,
-										color: '#F6D97E', // 100%处的颜色为蓝
-									},
-								],
-							},
-						},
-					},
-					{
-						name: '完成率',
-						type: 'line',
-						yAxisIndex: 1,
-						smooth: false,
-						data: cate,
-						itemStyle: {
-							color: '#55C5A2',
-						},
-						symbol: 'none',
-					},
-				],
-				// yAxis: {
-				//   type: 'value',
-				//   splitLine: {
-				//     show: false//不显示网格线
-				//   },
-				//   splitArea: {
-				//     show: false//不显示网格区域
-				//   },
-				//   axisLine: {
-				//     lineStyle: {
-				//       color: 'rgb(255, 255, 255)'
-				//     },
-				//   }
-				// },
-				// series: [
-				//   {
-				//     name: '利润',
-				//     type: 'bar',
-				//     data: [
-				//       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-				//     ]
-				//   },
-				//   {
-				//     name: '数量',
-				//     type: 'bar',
-				//     data: [
-				//       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-				//     ]
-				//   },
-				//   {
-				//     name: '完成率',
-				//     type: 'line',
-				//     yAxisIndex: 1,
-				//     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
-				//   }
+    initLine() {
+      this.request({
+        url: "/hx/qualityAssurance/getHxQualityInspect",
+        method: "get",
+        params: {
+          type: "1",
+        },
+      }).then(({ data }) => {
+        this.chart2 = echarts.init(this.$refs.chart2);
+        this.setOptions2(data.factory);
+      });
+    },
+    setOptions2(resData) {
+      let month = [];
+      let cate = []; // 率
+      let completed = []; // 完成
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        month.push(item.month);
+        cate.push(item.CATE);
+        completed.push(item.COMPLETED);
+      }
+      this.chart2.setOption({
+        tooltip: {
+          trigger: "axis",
+          // formatter: '{a1}<br/>{b1}：{c1}',
+        },
+        legend: {
+          data: ["数量", "完成率"],
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "6%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: "category",
+            data: month,
+            axisPointer: {
+              type: "shadow",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            name: "个",
+            min: 0,
+            // max: 250,
+            // interval: 50,
+            axisLabel: {
+              formatter: "{value}",
+            },
+            splitLine: {
+              show: false, //不显示网格线
+            },
+            splitArea: {
+              show: false, //不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+          {
+            type: "value",
+            min: 0,
+            max: 100,
+            // interval: 5,
+            axisLabel: {
+              formatter: "{value} %",
+            },
+            splitLine: {
+              show: false, //不显示网格线
+            },
+            splitArea: {
+              show: false, //不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        grid: {
+          containLabel: true,
+          width: "99%",
+          left: 0,
+          top: 50,
+          bottom: 50,
+        },
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(month.length, 5),
+        //   textStyle: {
+        //     color: "#fff",
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(month.length, 4, "start"),
+            endValue: this.dataZoomStart(month.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
+        series: [
+          {
+            name: "数量",
+            type: "bar",
+            barWidth: 20,
+            data: completed,
+            itemStyle: {
+              color: {
+                type: "linear", // 线性渐变
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#F49220", // 0%处的颜色为红色
+                  },
+                  {
+                    offset: 1,
+                    color: "#F6D97E", // 100%处的颜色为蓝
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: "完成率",
+            type: "line",
+            yAxisIndex: 1,
+            smooth: false,
+            data: cate,
+            itemStyle: {
+              color: "#55C5A2",
+            },
+            symbol: "none",
+          },
+        ],
+        // yAxis: {
+        //   type: 'value',
+        //   splitLine: {
+        //     show: false//不显示网格线
+        //   },
+        //   splitArea: {
+        //     show: false//不显示网格区域
+        //   },
+        //   axisLine: {
+        //     lineStyle: {
+        //       color: 'rgb(255, 255, 255)'
+        //     },
+        //   }
+        // },
+        // series: [
+        //   {
+        //     name: '利润',
+        //     type: 'bar',
+        //     data: [
+        //       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+        //     ]
+        //   },
+        //   {
+        //     name: '数量',
+        //     type: 'bar',
+        //     data: [
+        //       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+        //     ]
+        //   },
+        //   {
+        //     name: '完成率',
+        //     type: 'line',
+        //     yAxisIndex: 1,
+        //     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+        //   }
 
-				// ]
-			})
-		},
-		initChart22() {
-			this.request({
-				url: '/hx/qualityAssurance/getHxQualityInspect',
-				method: 'get',
-				params: {
-					type: '2',
-				},
-			}).then(({ data }) => {
-				this.chart22 = echarts.init(this.$refs.chart22)
-				this.setOptions22(data.dept)
-			})
-		},
-		setOptions22(resData) {
-			console.log(resData)
-			let deptName = []
-			let cate = [] // 率
-			let completed = [] // 完成
-			let total = [] // 总
-			for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
-				deptName.push(item.dept_name)
-				cate.push(item.CATE)
-				completed.push(item.COMPLETED)
-				total.push(item.TOTAL)
-			}
-			this.chart22.setOption({
-				tooltip: {
-					trigger: 'axis',
-					// formatter: '{a1}<br/>{b1}：{c1}',
-				},
-				// legend: {
-				// 	// data: ['收入', '实际', '目标'],
-				// 	textStyle: {
-				// 		color: '#fff', //legend字体颜色
-				// 	},
-				// 	// selectedMode: false,
-				// },
-				grid: {
-					containLabel: true,
-					left: 20,
-					right: 10,
-					top: 30,
-					bottom: 50,
-				},
-				xAxis: {
-					data: deptName,
-					axisLine: {
-						lineStyle: {
-							color: 'rgb(255, 255, 255)',
-						},
-					},
-				},
-				dataZoom: {
-					type: 'slider',
-					start: 0,
-					end: this.dataZoomEnd(deptName.length, 5),
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				color: ['#ccc', 'red'],
-				yAxis: [
-					{
-						name: '个',
-						splitLine: {
-							show: true,
-							//  改变轴线颜色
-							lineStyle: {
-								// 使用深浅的间隔色
-								color: ['rgba(255, 255, 255,.5)'],
-							},
-						},
-						axisLabel: {
-							formatter: '{value}',
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-					{
-						type: 'value',
-						min: 0,
-						max: 100,
-						interval: 20,
-						axisLabel: {
-							formatter: '{value} %',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				series: [
-					{
-						name: '收入',
-						type: 'bar',
-						z: '-1',
-						barGap: '-75%',
-						barWidth: 30,
-						itemStyle: {
-							color: 'rgba(85, 197, 162, .3)',
-						},
-						data: total,
-					},
-					{
-						name: '实际',
-						type: 'bar',
-						barWidth: 15,
-						position: [0, 0],
-						itemStyle: {
-							color: 'rgba(90, 216, 166, 0.85)',
-						},
-						data: completed,
-						itemStyle: {
-							color: {
-								type: 'linear', // 线性渐变
-								x: 0,
-								y: 0,
-								x2: 0,
-								y2: 1,
-								colorStops: [
-									{
-										offset: 0,
-										color: '#F49220', // 0%处的颜色为红色
-									},
-									{
-										offset: 1,
-										color: '#F6D97E', // 100%处的颜色为蓝
-									},
-								],
-							},
-						},
-					},
-					{
-						name: '目标',
-						type: 'scatter',
-						symbol: 'rect',
-						symbolSize: [30, 4],
-						symbolOffset: [3, 0],
-						position: [0, 0],
-						itemStyle: {
-							color: '#F6D97E',
-						},
-						yAxisIndex: 1,
-						data: cate,
-					},
-				],
-			})
-		},
-	},
-}
+        // ]
+      });
+    },
+    initChart22() {
+      this.request({
+        url: "/hx/qualityAssurance/getHxQualityInspect",
+        method: "get",
+        params: {
+          type: "2",
+        },
+      }).then(({ data }) => {
+        this.chart22 = echarts.init(this.$refs.chart22);
+        this.setOptions22(data.dept);
+      });
+    },
+    setOptions22(resData) {
+      console.log(resData);
+      let deptName = [];
+      let cate = []; // 率
+      let completed = []; // 完成
+      let total = []; // 总
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        deptName.push(item.dept_name);
+        cate.push(item.CATE);
+        completed.push(item.COMPLETED);
+        total.push(item.TOTAL);
+      }
+      this.chart22.setOption({
+        tooltip: {
+          trigger: "axis",
+          // formatter: '{a1}<br/>{b1}：{c1}',
+        },
+        // legend: {
+        // 	// data: ['收入', '实际', '目标'],
+        // 	textStyle: {
+        // 		color: '#fff', //legend字体颜色
+        // 	},
+        // 	// selectedMode: false,
+        // },
+        grid: {
+          containLabel: true,
+          left: 20,
+          right: 10,
+          top: 30,
+          bottom: 50,
+        },
+        xAxis: {
+          data: deptName,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(255, 255, 255)",
+            },
+          },
+        },
+        // dataZoom: {
+        //   type: "slider",
+        //   start: 0,
+        //   end: this.dataZoomEnd(deptName.length, 5),
+        //   textStyle: {
+        //     color: "#fff",
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(deptName.length, 4, "start"),
+            endValue: this.dataZoomStart(deptName.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
+        color: ["#ccc", "red"],
+        yAxis: [
+          {
+            name: "个",
+            splitLine: {
+              show: true,
+              //  改变轴线颜色
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: ["rgba(255, 255, 255,.5)"],
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+          {
+            type: "value",
+            min: 0,
+            max: 100,
+            interval: 20,
+            axisLabel: {
+              formatter: "{value} %",
+            },
+            splitLine: {
+              show: false, //不显示网格线
+            },
+            splitArea: {
+              show: false, //不显示网格区域
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "收入",
+            type: "bar",
+            z: "-1",
+            barGap: "-75%",
+            barWidth: 30,
+            itemStyle: {
+              color: "rgba(85, 197, 162, .3)",
+            },
+            data: total,
+          },
+          {
+            name: "实际",
+            type: "bar",
+            barWidth: 15,
+            position: [0, 0],
+            itemStyle: {
+              color: "rgba(90, 216, 166, 0.85)",
+            },
+            data: completed,
+            itemStyle: {
+              color: {
+                type: "linear", // 线性渐变
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: "#F49220", // 0%处的颜色为红色
+                  },
+                  {
+                    offset: 1,
+                    color: "#F6D97E", // 100%处的颜色为蓝
+                  },
+                ],
+              },
+            },
+          },
+          {
+            name: "目标",
+            type: "scatter",
+            symbol: "rect",
+            symbolSize: [30, 4],
+            symbolOffset: [3, 0],
+            position: [0, 0],
+            itemStyle: {
+              color: "#F6D97E",
+            },
+            yAxisIndex: 1,
+            data: cate,
+          },
+        ],
+      });
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .warp-scroll {
-	height: 172px;
-	width: 100%;
-	margin: 0 auto;
-	overflow: hidden;
-	ul {
-		list-style: none;
-		padding: 0;
-		margin: 0 auto;
-		li,
-		a {
-			display: block;
-			display: flex;
-			justify-content: space-between;
-			font-size: 15px;
-		}
-		li {
-			display: block;
-			height: 42px;
-			line-height: 42px;
-			background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
-			// opacity: 0.6;
-			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
-			margin-bottom: 1px;
-			img {
-				vertical-align: sub;
-				margin-right: 5px;
-			}
-		}
-	}
+  height: 172px;
+  width: 100%;
+  margin: 0 auto;
+  overflow: hidden;
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0 auto;
+    li,
+    a {
+      display: block;
+      display: flex;
+      justify-content: space-between;
+      font-size: 15px;
+    }
+    li {
+      display: block;
+      height: 42px;
+      line-height: 42px;
+      background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
+      // opacity: 0.6;
+      // box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
+      margin-bottom: 1px;
+      img {
+        vertical-align: sub;
+        margin-right: 5px;
+      }
+    }
+  }
 }
 .wrap {
-	display: flex;
-	flex-direction: column;
-	height: 100%;
-	width: 100%;
-	.box {
-		padding: 0 0 5px 15px;
-		display: flex;
-		align-items: center;
-		.num {
-			font-size: 24px;
-			font-weight: 600;
-			margin: 0 10px;
-		}
-	}
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  .box {
+    padding: 0 0 5px 15px;
+    display: flex;
+    align-items: center;
+    .num {
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0 10px;
+    }
+  }
 }
 
 .content1 {
-	// height: 200px;
-	height: 100%;
+  // height: 200px;
+  height: 100%;
 
-	.chart1 {
-		margin: 0 auto;
-		width: 100%;
-		height: 192px;
-		background: transparent;
-	}
+  .chart1 {
+    margin: 0 auto;
+    width: 100%;
+    height: 192px;
+    background: transparent;
+  }
 }
 
 .num {
-	font-size: 30px;
-	font-family: Roboto-BlackItalic, Roboto;
-	font-weight: normal;
-	color: #91d5fe;
-	vertical-align: sub;
-	//   margin-right: 3px;
+  font-size: 30px;
+  font-family: Roboto-BlackItalic, Roboto;
+  font-weight: normal;
+  color: #91d5fe;
+  vertical-align: sub;
+  //   margin-right: 3px;
 }
 
 .content2 {
-	padding: 20px;
-	flex: 1;
-	height: 100%;
-	box-sizing: border-box;
-	display: flex;
-	flex-direction: column;
-	.chart2 {
-		height: 100%;
-	}
+  padding: 20px;
+  flex: 1;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .chart2 {
+    height: 100%;
+  }
 
-	.tit {
-		font-size: 16px;
-		font-family: PingFangSC-Semibold, PingFang SC;
-		font-weight: 600;
-		color: #ffffff;
-		line-height: 22px;
-		position: relative;
-		padding-left: 15px;
-	}
-	.tit::after {
-		content: '';
-		display: block;
-		position: absolute;
-		top: 3px;
-		left: 0px;
-		width: 4px;
-		height: 16px;
-		background: #00ffff;
-	}
+  .tit {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 22px;
+    position: relative;
+    padding-left: 15px;
+  }
+  .tit::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 3px;
+    left: 0px;
+    width: 4px;
+    height: 16px;
+    background: #00ffff;
+  }
 }
 </style>
diff --git a/src/views/bigScreen/scientific/tab2/center1.vue b/src/views/bigScreen/scientific/tab2/center1.vue
index eda099e..19fc998 100644
--- a/src/views/bigScreen/scientific/tab2/center1.vue
+++ b/src/views/bigScreen/scientific/tab2/center1.vue
@@ -3,35 +3,58 @@
     <container1 title="生产指标">
       <div style="height: 100%; width: 100%; padding: 0 15px 0 25px">
         <div style="display: flex; height: 100%">
-          <div style="height: 100%; width: 22%; display: flex; flex-direction: column; justify-content: space-evenly">
+          <div
+            style="
+              height: 100%;
+              width: 22%;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-evenly;
+            "
+          >
             <div class="tag">
               <div class="title">军品收入</div>
-              <i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realMilitaryIncome}}/<i
-                  style="font-size: 16px">{{res.targetMilitaryIncome}}</i></i>
+              <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+                >{{ res.realMilitaryIncome }}/<i style="font-size: 16px">{{
+                  res.targetMilitaryIncome
+                }}</i></i
+              >
               万
             </div>
             <div class="tag">
               <div class="title">装药量</div>
-              <i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realCharge}}/<i
-                  style="font-size: 16px">{{res.targetCharge}}</i></i>
+              <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+                >{{ res.realCharge }}/<i style="font-size: 16px">{{
+                  res.targetCharge
+                }}</i></i
+              >
               万
             </div>
             <div class="tag">
               <div class="title">大型产品</div>
-              <i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realBigProduct}}/<i
-                  style="font-size: 16px">{{res.targetBigProduct}}</i></i>
+              <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+                >{{ res.realBigProduct }}/<i style="font-size: 16px">{{
+                  res.targetBigProduct
+                }}</i></i
+              >
               万
             </div>
             <div class="tag">
               <div class="title">中型产品</div>
-              <i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realMediumProduct}}/<i
-                  style="font-size: 16px">{{res.targetMediumProduct}}</i></i>
+              <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+                >{{ res.realMediumProduct }}/<i style="font-size: 16px">{{
+                  res.targetMediumProduct
+                }}</i></i
+              >
               万
             </div>
             <div class="tag">
               <div class="title">小型产品</div>
-              <i style="font-size: 18px; font-weight: bold; color: #55c5a2">{{res.realSmallProduct}}/<i
-                  style="font-size: 16px">{{res.targetSmallProduct}}</i></i>
+              <i style="font-size: 18px; font-weight: bold; color: #55c5a2"
+                >{{ res.realSmallProduct }}/<i style="font-size: 16px">{{
+                  res.targetSmallProduct
+                }}</i></i
+              >
               万
             </div>
           </div>
@@ -43,19 +66,23 @@
 </template>
 
 <script>
-import container1 from './components/container1/index.vue'
-import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
+import container1 from "./components/container1/index.vue";
+import {
+  blueColorList,
+  greenColorList,
+  yelloColorList,
+} from "@/utils/gradualColor";
 
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from '../../../dashboard/mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../../../dashboard/mixins/resize";
 export default {
   mixins: [resize],
-  name: 'left2',
+  name: "left2",
   components: {
     container1,
   },
-  data () {
+  data() {
     return {
       chart: null,
       res: {
@@ -69,40 +96,39 @@ export default {
         targetMediumProduct: "0",
         targetMilitaryIncome: "0",
         targetSmallProduct: "0",
-      }
-    }
+      },
+    };
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   methods: {
-    initChart () {
-      this.chart = echarts.init(this.$refs.chart)
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart);
       this.request({
-        url: '/hx/scientificProduction/getProductionIndexPic',
-        method: 'get',
-      }).then(res => {
+        url: "/hx/scientificProduction/getProductionIndexPic",
+        method: "get",
+      }).then((res) => {
         if (200 == res.code) {
           this.res = res.data.pic1;
           let list = res.data.pic2;
-          this.setOptions(list)
-
+          this.setOptions(list);
         }
-      })
+      });
     },
-    setOptions (list) {
+    setOptions(list) {
       this.chart.setOption({
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow',
+            type: "shadow",
           },
         },
         legend: {
           textStyle: {
-            color: '#fff', //legend字体颜色
+            color: "#fff", //legend字体颜色
           },
         },
         grid: {
@@ -112,43 +138,56 @@ export default {
           bottom: 40,
           containLabel: true,
         },
-        dataZoom: {
-          type: 'slider',
-          start: 0,
-          end: this.dataZoomEnd(list.length, 4),
-          textStyle: {
-            color: '#fff',
+        // dataZoom: {
+        //   type: 'slider',
+        //   start: 0,
+        //   end: this.dataZoomEnd(list.length, 4),
+        //   textStyle: {
+        //     color: '#fff',
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(list.length, 4, "start"),
+            endValue: this.dataZoomStart(list.length, 4, "end"),
           },
-        },
+          {
+            type: "inside",
+          },
+        ],
         xAxis: [
           {
-            type: 'category',
-            data: list.map(e => e.month),
+            type: "category",
+            data: list.map((e) => e.month),
             // data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
             axisLine: {
               lineStyle: {
-                color: 'rgb(255, 255, 255)',
+                color: "rgb(255, 255, 255)",
               },
             },
           },
         ],
         yAxis: [
           {
-            name: '',
+            name: "",
             splitLine: {
               show: true,
               //  改变轴线颜色
               lineStyle: {
                 // 使用深浅的间隔色
-                color: ['rgba(255, 255, 255,.5)'],
+                color: ["rgba(255, 255, 255,.5)"],
               },
             },
             axisLabel: {
-              formatter: '{value}',
+              formatter: "{value}",
             },
             axisLine: {
               lineStyle: {
-                color: 'rgb(255, 255, 255)',
+                color: "rgb(255, 255, 255)",
               },
             },
           },
@@ -175,58 +214,58 @@ export default {
         ],
         series: [
           {
-            name: '装药量(大)',
-            type: 'bar',
+            name: "装药量(大)",
+            type: "bar",
             barWidth: 30,
-            stack: 'Ad',
+            stack: "Ad",
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
-            data: list.map(e => e.bigCharge),
+            data: list.map((e) => e.bigCharge),
             // data: [120, 132, 101, 134, 90, 230, 210],
             itemStyle: {
               color: yelloColorList[2],
             },
           },
           {
-            name: '装药量(中)',
-            type: 'bar',
+            name: "装药量(中)",
+            type: "bar",
             barWidth: 30,
-            stack: 'Ad',
+            stack: "Ad",
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
-            data: list.map(e => e.mediumCharge),
+            data: list.map((e) => e.mediumCharge),
             // data: [220, 182, 191, 234, 290, 330, 310],
             itemStyle: {
               color: yelloColorList[1],
             },
           },
           {
-            name: '装药量(小)',
-            type: 'bar',
+            name: "装药量(小)",
+            type: "bar",
             barWidth: 30,
-            stack: 'Ad',
+            stack: "Ad",
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
-            data: list.map(e => e.smallCharge),
+            data: list.map((e) => e.smallCharge),
             // data: [150, 232, 201, 154, 190, 330, 410],
             itemStyle: {
               color: yelloColorList[0],
             },
           },
           {
-            name: '交付数量',
-            type: 'bar',
+            name: "交付数量",
+            type: "bar",
             barWidth: 30,
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
-            data: list.map(e => e.targetDeliver),
+            data: list.map((e) => e.targetDeliver),
             // data: [320, 332, 301, 334, 390, 330, 320],
             itemStyle: {
-              color: '#45D1CC',
+              color: "#45D1CC",
             },
           },
           // {
@@ -290,10 +329,10 @@ export default {
           // 	},
           // },
         ],
-      })
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bigScreen/scientific/tab2/center2.vue b/src/views/bigScreen/scientific/tab2/center2.vue
index 618f5e5..3389d8a 100644
--- a/src/views/bigScreen/scientific/tab2/center2.vue
+++ b/src/views/bigScreen/scientific/tab2/center2.vue
@@ -3,8 +3,19 @@
     <container1 title="本月计划执行情况">
       <!-- style="position: absolute; z-index: 1; left: 30px" -->
 
-      <el-select slot="datePicker" v-model="value" size="mini" placeholder="请选择">
-        <el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
+      <el-select
+        slot="datePicker"
+        v-model="value"
+        size="mini"
+        placeholder="请选择"
+      >
+        <el-option
+          v-for="item in selectData"
+          :key="item"
+          :label="item"
+          :value="item"
+        >
+        </el-option>
       </el-select>
       <div style="height: 100%; width: 100%" ref="chart"></div>
     </container1>
@@ -12,79 +23,89 @@
 </template>
 
 <script>
-import container1 from './components/container1/index.vue'
+import container1 from "./components/container1/index.vue";
 
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from '../../../dashboard/mixins/resize'
-import vueSeamlessScroll from 'vue-seamless-scroll'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../../../dashboard/mixins/resize";
+import vueSeamlessScroll from "vue-seamless-scroll";
 export default {
   mixins: [resize],
-  name: 'left2',
+  name: "left2",
   components: {
     container1,
     vueSeamlessScroll,
   },
-  data () {
+  data() {
     return {
       chart: null,
-      selectData: [
-        '厂计划',
-        '六院计划'
-      ],
-      value: '厂计划'
-    }
+      selectData: ["厂计划", "六院计划"],
+      value: "厂计划",
+    };
   },
   watch: {
-    value (newVal, oldVal) {
-      this.initChart()
+    value(newVal, oldVal) {
+      this.initChart();
     },
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
   methods: {
-    initChart () {
+    initChart() {
       if (this.chart) {
         this.chart.dispose();
         this.chart = null;
       }
       this.request({
-        url: '/hx/scientificProduction/getMonthPlanPic',
-        method: 'get',
+        url: "/hx/scientificProduction/getMonthPlanPic",
+        method: "get",
         params: {
           type: this.value,
         },
-      }).then(res => {
+      }).then((res) => {
         if (200 == res.code) {
           let list = res.data;
-          this.chart = echarts.init(this.$refs.chart)
-          this.setOptions(list)
+          this.chart = echarts.init(this.$refs.chart);
+          this.setOptions(list);
         }
-      })
+      });
     },
-    setOptions (list) {
+    setOptions(list) {
       this.chart.setOption({
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow',
+            type: "shadow",
           },
         },
-        dataZoom: {
-          type: 'slider',
-          start: 0,
-          end: this.dataZoomEnd(list.length, 7),
-          textStyle: {
-            color: '#fff',
+        // dataZoom: {
+        //   type: 'slider',
+        //   start: 0,
+        //   end: this.dataZoomEnd(list.length, 7),
+        //   textStyle: {
+        //     color: '#fff',
+        //   },
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(list.length, 4, "start"),
+            endValue: this.dataZoomStart(list.length, 4, "end"),
           },
-        },
+          {
+            type: "inside",
+          },
+        ],
         legend: {
-          data: ['装药', '总装', '交付'],
+          data: ["装药", "总装", "交付"],
           textStyle: {
-            color: '#fff', //legend字体颜色
+            color: "#fff", //legend字体颜色
           },
         },
         grid: {
@@ -96,40 +117,40 @@ export default {
         },
         xAxis: [
           {
-            type: 'category',
-            data: list.map(e => e.month),
+            type: "category",
+            data: list.map((e) => e.month),
             axisLine: {
               lineStyle: {
-                color: 'rgb(255, 255, 255)',
+                color: "rgb(255, 255, 255)",
               },
             },
           },
         ],
         yAxis: [
           {
-            name: '',
+            name: "",
             splitLine: {
               show: true,
               //  改变轴线颜色
               lineStyle: {
                 // 使用深浅的间隔色
-                color: ['rgba(255, 255, 255,.5)'],
+                color: ["rgba(255, 255, 255,.5)"],
               },
             },
             axisLabel: {
-              formatter: '{value}',
+              formatter: "{value}",
             },
             axisLine: {
               lineStyle: {
-                color: 'rgb(255, 255, 255)',
+                color: "rgb(255, 255, 255)",
               },
             },
           },
           {
-            type: 'value',
+            type: "value",
             min: 0,
             axisLabel: {
-              formatter: '{value} %',
+              formatter: "{value} %",
             },
             splitLine: {
               show: false, //不显示网格线
@@ -139,94 +160,94 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: 'rgb(255, 255, 255)',
+                color: "rgb(255, 255, 255)",
               },
             },
           },
         ],
         series: [
           {
-            name: '交付',
-            type: 'bar',
-            stack: 'Ad',
+            name: "交付",
+            type: "bar",
+            stack: "Ad",
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
             itemStyle: {
-              color: '#55C5A2',
+              color: "#55C5A2",
             },
             barWidth: 30,
-            data: list.map(e => e.realDeliver),
+            data: list.map((e) => e.realDeliver),
             // data: [150, 232, 201, 154, 190, 330, 410],
           },
           {
-            name: '总装',
-            type: 'bar',
-            stack: 'Ad',
+            name: "总装",
+            type: "bar",
+            stack: "Ad",
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
             itemStyle: {
-              color: '#FA8C16',
+              color: "#FA8C16",
             },
             barWidth: 30,
-            data: list.map(e => e.realAssemble),
+            data: list.map((e) => e.realAssemble),
           },
           {
-            name: '装药',
-            type: 'bar',
-            stack: 'Ad',
+            name: "装药",
+            type: "bar",
+            stack: "Ad",
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
             itemStyle: {
-              color: '#F6D97E',
+              color: "#F6D97E",
             },
             barWidth: 30,
-            data: list.map(e => e.realCharge),
+            data: list.map((e) => e.realCharge),
             // data: [150, 232, 201, 154, 190, 330, 900],
           },
           {
-            name: '交付完成率',
+            name: "交付完成率",
             yAxisIndex: 1,
-            type: 'line',
+            type: "line",
             smooth: false,
-            data: list.map(e => e.deliverRate),
+            data: list.map((e) => e.deliverRate),
             // data: [500, 550, 700, 520, 650, 520, 900],
             itemStyle: {
-              color: '#55C5A2',
+              color: "#55C5A2",
             },
-            symbol: 'none',
+            symbol: "none",
           },
           {
-            name: '总装完成率',
+            name: "总装完成率",
             yAxisIndex: 1,
-            type: 'line',
+            type: "line",
             smooth: false,
             itemStyle: {
-              color: '#FA8C16',
+              color: "#FA8C16",
             },
-            data: list.map(e => e.assembleRate),
+            data: list.map((e) => e.assembleRate),
             // data: [600, 500, 700, 620, 750, 800, 900],
-            symbol: 'none',
+            symbol: "none",
           },
           {
-            name: '装药完成率',
+            name: "装药完成率",
             yAxisIndex: 1,
-            type: 'line',
+            type: "line",
             smooth: false,
             itemStyle: {
-              color: '#F6D97E',
+              color: "#F6D97E",
             },
-            data: list.map(e => e.chargeRate),
+            data: list.map((e) => e.chargeRate),
             // data: [650, 550, 750, 670, 780, 900, 900],
-            symbol: 'none',
+            symbol: "none",
           },
         ],
-      })
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bigScreen/scientific/tab2/left1.vue b/src/views/bigScreen/scientific/tab2/left1.vue
index fb63557..05406f7 100644
--- a/src/views/bigScreen/scientific/tab2/left1.vue
+++ b/src/views/bigScreen/scientific/tab2/left1.vue
@@ -3,57 +3,56 @@
     <container1 title="生产责任令">
       <!-- <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> -->
-      <div style="height:100%;width:100%;" ref="chart"></div>
+      <div style="height: 100%; width: 100%" ref="chart"></div>
     </container1>
   </div>
-
 </template>
 
 <script>
 import container1 from "./components/container1/index.vue";
 
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from '../../../dashboard/mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../../../dashboard/mixins/resize";
 export default {
   mixins: [resize],
-  name: 'left1',
+  name: "left1",
   components: {
     container1,
   },
-  data () {
+  data() {
     return {
       dateRange: [],
       chart: null,
-    }
+    };
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.initChart()
-    })
+      this.initChart();
+    });
   },
-  beforeDestroy () { },
+  beforeDestroy() {},
   methods: {
-    initChart () {
-      this.chart = echarts.init(this.$refs.chart)
-      this.setOptions()
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart);
+      this.setOptions();
     },
-    setOptions () {
+    setOptions() {
       this.request({
-        url: '/hx/scientificProduction/getYearDutyPic',
-        method: 'get',
-      }).then(res => {
+        url: "/hx/scientificProduction/getYearDutyPic",
+        method: "get",
+      }).then((res) => {
         if (200 == res.code) {
           let list = res.data;
           this.chart.setOption({
             tooltip: {
-              trigger: 'axis',
-              formatter: '{a1}<br/>{b1}：{c1}',
+              trigger: "axis",
+              formatter: "{a1}<br/>{b1}：{c1}",
             },
             legend: {
-              data: ['预测', '实际', '目标完成率'],
+              data: ["预测", "实际", "目标完成率"],
               textStyle: {
-                color: '#fff', //legend字体颜色
+                color: "#fff", //legend字体颜色
               },
               // selectedMode: false,
             },
@@ -64,7 +63,7 @@ export default {
               bottom: 70,
             },
             xAxis: {
-              data: list.map(e => e.productModel),
+              data: list.map((e) => e.productModel),
               // data: [
               // 	'型号一',
               // 	'型号二',
@@ -89,44 +88,57 @@ export default {
               // ],
               axisLine: {
                 lineStyle: {
-                  color: 'rgb(255, 255, 255)',
+                  color: "rgb(255, 255, 255)",
                 },
               },
             },
-            dataZoom: {
-              type: 'slider',
-              start: 0,
-              end: this.dataZoomEnd(list.length, 6),
-              textStyle: {
-                color: '#fff',
+            // dataZoom: {
+            //   type: 'slider',
+            //   start: 0,
+            //   end: this.dataZoomEnd(list.length, 6),
+            //   textStyle: {
+            //     color: '#fff',
+            //   },
+            // },
+            dataZoom: [
+              {
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
+                },
+                startValue: this.dataZoomStart(list.length, 4, "start"),
+                endValue: this.dataZoomStart(list.length, 4, "end"),
               },
-            },
-            color: ['#ccc', 'red'],
+              {
+                type: "inside",
+              },
+            ],
+            color: ["#ccc", "red"],
             yAxis: [
               {
-                name: '件',
+                name: "件",
                 splitLine: {
                   show: true,
                   //  改变轴线颜色
                   lineStyle: {
                     // 使用深浅的间隔色
-                    color: ['rgba(255, 255, 255,.5)'],
+                    color: ["rgba(255, 255, 255,.5)"],
                   },
                 },
                 axisLabel: {
-                  formatter: '{value}',
+                  formatter: "{value}",
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
               {
-                type: 'value',
+                type: "value",
                 min: 0,
                 axisLabel: {
-                  formatter: '{value} %',
+                  formatter: "{value} %",
                 },
                 splitLine: {
                   show: false, //不显示网格线
@@ -136,57 +148,56 @@ export default {
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             series: [
               {
-                name: '预测',
-                type: 'bar',
+                name: "预测",
+                type: "bar",
                 // z: '-1',
-                barGap: '-75%',
+                barGap: "-75%",
                 barWidth: 30,
                 itemStyle: {
-                  color: 'rgba(85, 197, 162, .3)',
+                  color: "rgba(85, 197, 162, .3)",
                 },
-                data: list.map(e => e.targetTotal),
+                data: list.map((e) => e.targetTotal),
                 // data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
               },
               {
-                name: '实际',
-                type: 'bar',
+                name: "实际",
+                type: "bar",
                 barWidth: 15,
                 position: [0, 0],
                 itemStyle: {
-                  color: 'rgba(90, 216, 166, 0.85)',
+                  color: "rgba(90, 216, 166, 0.85)",
                 },
-                data: list.map(e => e.realTotal),
+                data: list.map((e) => e.realTotal),
                 // data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
               },
               {
-                name: '目标完成率',
-                type: 'scatter',
-                symbol: 'rect',
+                name: "目标完成率",
+                type: "scatter",
+                symbol: "rect",
                 symbolSize: [30, 3],
                 symbolOffset: [3, 0],
                 position: [0, 0],
                 yAxisIndex: 1,
                 itemStyle: {
-                  color: '#F64F58',
+                  color: "#F64F58",
                 },
-                data: list.map(e => e.rate),
+                data: list.map((e) => e.rate),
                 // data: [10, 40, 16, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
               },
             ],
-          })
+          });
         }
-      })
-
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bigScreen/scientific/tab3/left1.vue b/src/views/bigScreen/scientific/tab3/left1.vue
index 49b98f0..dc00066 100644
--- a/src/views/bigScreen/scientific/tab3/left1.vue
+++ b/src/views/bigScreen/scientific/tab3/left1.vue
@@ -1,642 +1,668 @@
 <template>
-	<div style="width: 100%; display: flex">
-		<container1 style="margin-right: 14px" title="型号信息">
-			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['年度任务', '两总']"></bigScreenTabs>
-			<div class="trends">
-				<div style="width: 100%; height: 100%" ref="chart"></div>
-			</div>
-		</container1>
-		<container1 style="margin-right: 14px" title="生产计划">
-			<div class="trends">
-				<div style="height: 100%; width: 100%" ref="chart2"></div>
-			</div>
-		</container1>
-		<container1 style="margin-right: 14px" title="型号生产统计">
-			<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['排行', '明细']"></bigScreenTabs>
-			<div class="trends">
-				<div style="width: 100%; height: 100%" ref="chart3"></div>
-			</div>
-		</container1>
-		<container1 style="margin-right: 14px" title="单台产品信息">
-			<div class="trends" style="text-align: center">
-				<img :src="dataInfo.pic" alt="" />
-			</div>
-		</container1>
-	</div>
+  <div style="width: 100%; display: flex">
+    <container1 style="margin-right: 14px" title="型号信息">
+      <bigScreenTabs
+        slot="datePicker"
+        v-model="index"
+        :titleArr="['年度任务', '两总']"
+      ></bigScreenTabs>
+      <div class="trends">
+        <div style="width: 100%; height: 100%" ref="chart"></div>
+      </div>
+    </container1>
+    <container1 style="margin-right: 14px" title="生产计划">
+      <div class="trends">
+        <div style="height: 100%; width: 100%" ref="chart2"></div>
+      </div>
+    </container1>
+    <container1 style="margin-right: 14px" title="型号生产统计">
+      <bigScreenTabs
+        slot="datePicker"
+        v-model="index2"
+        :titleArr="['排行', '明细']"
+      ></bigScreenTabs>
+      <div class="trends">
+        <div style="width: 100%; height: 100%" ref="chart3"></div>
+      </div>
+    </container1>
+    <container1 style="margin-right: 14px" title="单台产品信息">
+      <div class="trends" style="text-align: center">
+        <img :src="dataInfo.pic" alt="" />
+      </div>
+    </container1>
+  </div>
 </template>
 
 <script>
-import container1 from './components/container1/index.vue'
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
-import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
-import vueSeamlessScroll from 'vue-seamless-scroll'
-import colorList from '@/utils/colorPalette'
-import { blueColorList, greenColorList, yelloColorList, redColorList } from '@/utils/gradualColor'
+import container1 from "./components/container1/index.vue";
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
+import bigScreenTabs from "../../components/bigScreenTabs/index.vue";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import colorList from "@/utils/colorPalette";
+import {
+  blueColorList,
+  greenColorList,
+  yelloColorList,
+  redColorList,
+} from "@/utils/gradualColor";
 
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
 export default {
-	components: {
-		container1, //#endregion,
-		progressBar,
-		bigScreenTabs,
-		vueSeamlessScroll,
-	},
-	data() {
-		return {
-			dataInfo: {},
-			index: 0,
-			index2: 0,
-			chart: null,
-			chart2: null,
-			chart3: null,
-			listData: [1, 2, 3, 4, 5, 6, 7, 8],
-			customColor: colorList,
-		}
-	},
-	mounted() {
-		this.$nextTick(() => {
-			this.initChart()
-			this.initChart2()
-			this.initChart3()
-		})
-	},
-	beforeDestroy() {},
-	methods: {
-		getData() {
-			this.request({
-				url: '/hx/scientificProduction/getProductPic',
-			}).then(({ data }) => {
-				this.dataInfo = data
-			})
-		},
+  components: {
+    container1, //#endregion,
+    progressBar,
+    bigScreenTabs,
+    vueSeamlessScroll,
+  },
+  data() {
+    return {
+      dataInfo: {},
+      index: 0,
+      index2: 0,
+      chart: null,
+      chart2: null,
+      chart3: null,
+      listData: [1, 2, 3, 4, 5, 6, 7, 8],
+      customColor: colorList,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+      this.initChart2();
+      this.initChart3();
+    });
+  },
+  beforeDestroy() {},
+  methods: {
+    getData() {
+      this.request({
+        url: "/hx/scientificProduction/getProductPic",
+      }).then(({ data }) => {
+        this.dataInfo = data;
+      });
+    },
 
-		initChart() {
-			this.request({
-				url: '/hx/scientificProduction/getModelYearPlanPic',
-			}).then(({ data }) => {
-				this.chart = echarts.init(this.$refs.chart)
-				this.setOptions(data)
-			})
-		},
-		setOptions(resData) {
-			let titList = []
-			let realCharge = [] // 实际装药量
-			let realDeliver = [] // 实际支付
-			let chargeRate = [] // 装药量率
-			let deliverRate = [] // 支付率
-			for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
-				titList.push(item.productModel)
-				realCharge.push(item.realCharge)
-				realDeliver.push(item.realDeliver)
-				chargeRate.push(item.chargeRate)
-				deliverRate.push(item.deliverRate)
-			}
-			this.chart.setOption({
-				tooltip: {
-					trigger: 'axis',
-					axisPointer: {
-						type: 'shadow',
-					},
-					formatter: '{b0}<br /> {a0}:{c0}%<br />{a1}: {c1}%',
-				},
-				legend: {
-					textStyle: {
-						color: '#fff', //legend字体颜色
-					},
-				},
-				grid: {
-					top: 30,
-					left: '3%',
-					right: '4%',
-					bottom: 20,
-					containLabel: true,
-				},
-				xAxis: {
-					show: false,
-					// type: 'value',
-					// splitLine: {
-					// 	show: false, //不显示网格线
-					// },
-				},
-				yAxis: {
-					type: 'category',
-					boundaryGap: true,
-					splitLine: {
-						show: false, // 不显示网格线
-					},
-					axisTick: {
-						show: false, // y轴刻度线
-					},
-					axisLine: {
-						show: false,
-						lineStyle: {
-							color: 'rgb(255, 255, 255)',
-						},
-					},
-					data: titList,
-				},
-				color: ['#55C5A2', '#55C5A2'],
-				series: [
-					{
-						roundCap: true, // 没效果
-						showBackground: true,
-						backgroundStyle: {
-							color: 'rgba(180, 180, 180, 0.2)',
-						},
-						name: '装药',
-						type: 'bar',
-						stack: 'total',
-						// label: {
-						// 	show: true,
-						// },
-						emphasis: {
-							focus: 'series',
-						},
-						barWidth: 12,
-						data: chargeRate,
-						color: '#F6D97E',
-					},
-					{
-						showBackground: true,
-						backgroundStyle: {
-							color: 'rgba(180, 180, 180, 0.2)',
-						},
-						name: '支付',
-						type: 'bar',
-						stack: 'total',
-						// label: {
-						// 	show: true,
-						// },
-						emphasis: {
-							focus: 'series',
-						},
-						barWidth: 12,
-						data: deliverRate,
-						color: '#55C5A2',
-					},
-				],
-			})
-		},
+    initChart() {
+      this.request({
+        url: "/hx/scientificProduction/getModelYearPlanPic",
+      }).then(({ data }) => {
+        this.chart = echarts.init(this.$refs.chart);
+        this.setOptions(data);
+      });
+    },
+    setOptions(resData) {
+      let titList = [];
+      let realCharge = []; // 实际装药量
+      let realDeliver = []; // 实际支付
+      let chargeRate = []; // 装药量率
+      let deliverRate = []; // 支付率
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        titList.push(item.productModel);
+        realCharge.push(item.realCharge);
+        realDeliver.push(item.realDeliver);
+        chargeRate.push(item.chargeRate);
+        deliverRate.push(item.deliverRate);
+      }
+      this.chart.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+          formatter: "{b0}<br /> {a0}:{c0}%<br />{a1}: {c1}%",
+        },
+        legend: {
+          textStyle: {
+            color: "#fff", //legend字体颜色
+          },
+        },
+        grid: {
+          top: 30,
+          left: "3%",
+          right: "4%",
+          bottom: 20,
+          containLabel: true,
+        },
+        xAxis: {
+          show: false,
+          // type: 'value',
+          // splitLine: {
+          // 	show: false, //不显示网格线
+          // },
+        },
+        yAxis: {
+          type: "category",
+          boundaryGap: true,
+          splitLine: {
+            show: false, // 不显示网格线
+          },
+          axisTick: {
+            show: false, // y轴刻度线
+          },
+          axisLine: {
+            show: false,
+            lineStyle: {
+              color: "rgb(255, 255, 255)",
+            },
+          },
+          data: titList,
+        },
+        color: ["#55C5A2", "#55C5A2"],
+        series: [
+          {
+            roundCap: true, // 没效果
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(180, 180, 180, 0.2)",
+            },
+            name: "装药",
+            type: "bar",
+            stack: "total",
+            // label: {
+            // 	show: true,
+            // },
+            emphasis: {
+              focus: "series",
+            },
+            barWidth: 12,
+            data: chargeRate,
+            color: "#F6D97E",
+          },
+          {
+            showBackground: true,
+            backgroundStyle: {
+              color: "rgba(180, 180, 180, 0.2)",
+            },
+            name: "支付",
+            type: "bar",
+            stack: "total",
+            // label: {
+            // 	show: true,
+            // },
+            emphasis: {
+              focus: "series",
+            },
+            barWidth: 12,
+            data: deliverRate,
+            color: "#55C5A2",
+          },
+        ],
+      });
+    },
 
-		initChart2() {
-			this.request({
-				url: '/hx/scientificProduction/getProductionPlanPic',
-			}).then(({ data }) => {
-				this.chart2 = echarts.init(this.$refs.chart2)
-				this.setOptions2(data)
-			})
-			// 测试数据
-			const data2 = {
-				allMonth: ['2021-01', '2021-02'],
-				list: [
-					{
-						'2021-01': [
-							{
-								id: 1,
-								month: '2021-01',
-								productModel: '型号1',
-								adiabat: '10',
-								charge: '11',
-								assembly: '12',
-								deliver: '13',
-							},
-							{
-								id: 2,
-								month: '2021-01',
-								productModel: '型号2',
-								adiabat: '16',
-								charge: '17',
-								assembly: '18',
-								deliver: '19',
-							},
-						],
-					},
-					{
-						'2021-02': [
-							{
-								id: 10,
-								month: '2021-02',
-								productModel: '型号1',
-								adiabat: '20',
-								charge: '21',
-								assembly: '22',
-								deliver: '23',
-							},
-							{
-								id: 11,
-								month: '2021-02',
-								productModel: '型号2',
-								adiabat: '26',
-								charge: '27',
-								assembly: '28',
-								deliver: '29',
-							},
-						],
-					},
-				],
-				allModel: ['型号1', '型号2'],
-			}
-		},
-		setOptions2(resData) {
-			let adiabat = [] // 绝热数量
-			let deliver = [] // 交付数量
-			let charge = [] // 装药数量
-			let assembly = [] // 总装数量
+    initChart2() {
+      this.request({
+        url: "/hx/scientificProduction/getProductionPlanPic",
+      }).then(({ data }) => {
+        this.chart2 = echarts.init(this.$refs.chart2);
+        this.setOptions2(data);
+      });
+      // 测试数据
+      const data2 = {
+        allMonth: ["2021-01", "2021-02"],
+        list: [
+          {
+            "2021-01": [
+              {
+                id: 1,
+                month: "2021-01",
+                productModel: "型号1",
+                adiabat: "10",
+                charge: "11",
+                assembly: "12",
+                deliver: "13",
+              },
+              {
+                id: 2,
+                month: "2021-01",
+                productModel: "型号2",
+                adiabat: "16",
+                charge: "17",
+                assembly: "18",
+                deliver: "19",
+              },
+            ],
+          },
+          {
+            "2021-02": [
+              {
+                id: 10,
+                month: "2021-02",
+                productModel: "型号1",
+                adiabat: "20",
+                charge: "21",
+                assembly: "22",
+                deliver: "23",
+              },
+              {
+                id: 11,
+                month: "2021-02",
+                productModel: "型号2",
+                adiabat: "26",
+                charge: "27",
+                assembly: "28",
+                deliver: "29",
+              },
+            ],
+          },
+        ],
+        allModel: ["型号1", "型号2"],
+      };
+    },
+    setOptions2(resData) {
+      let adiabat = []; // 绝热数量
+      let deliver = []; // 交付数量
+      let charge = []; // 装药数量
+      let assembly = []; // 总装数量
 
-			let titData = resData.allModel
-			delete resData.allModel
-			let titList = []
-			for (let index = 0; index < titData.length; index++) {
-				adiabat.push([])
-				deliver.push([])
-				charge.push([])
-				assembly.push([])
-			}
-			let newData = {}
-			for (let i = 0; i < resData.list.length; i++) {
-				const item = resData.list[i]
-				for (const key in item) {
-					newData[key] = item[key]
-				}
-			}
-			for (const key in newData) {
-				if (Object.hasOwnProperty.call(newData, key)) {
-					const item = newData[key]
-					titList.push(key)
-					for (let i = 0; i < item.length; i++) {
-						const ele = item[i]
-						let index = titData.findIndex(e => e == ele.productModel)
-						adiabat[index][titList.length - 1] = ele.adiabat
-						deliver[index][titList.length - 1] = ele.deliver
-						charge[index][titList.length - 1] = ele.charge
-						assembly[index][titList.length - 1] = ele.assembly
-					}
-				}
-			}
-			// console.log(adiabat)
-			// console.log(deliver)
-			// console.log(charge)
-			// console.log(assembly)
+      let titData = resData.allModel;
+      delete resData.allModel;
+      let titList = [];
+      for (let index = 0; index < titData.length; index++) {
+        adiabat.push([]);
+        deliver.push([]);
+        charge.push([]);
+        assembly.push([]);
+      }
+      let newData = {};
+      for (let i = 0; i < resData.list.length; i++) {
+        const item = resData.list[i];
+        for (const key in item) {
+          newData[key] = item[key];
+        }
+      }
+      for (const key in newData) {
+        if (Object.hasOwnProperty.call(newData, key)) {
+          const item = newData[key];
+          titList.push(key);
+          for (let i = 0; i < item.length; i++) {
+            const ele = item[i];
+            let index = titData.findIndex((e) => e == ele.productModel);
+            adiabat[index][titList.length - 1] = ele.adiabat;
+            deliver[index][titList.length - 1] = ele.deliver;
+            charge[index][titList.length - 1] = ele.charge;
+            assembly[index][titList.length - 1] = ele.assembly;
+          }
+        }
+      }
+      // console.log(adiabat)
+      // console.log(deliver)
+      // console.log(charge)
+      // console.log(assembly)
 
-			// debugger
-			this.chart2.setOption({
-				tooltip: {
-					formatter: (params, ticket, callback) => {
-						let seriesName = params.seriesName
-						let newSeriesName = seriesName.split(',')
-						let name = params.name
-						let num = params.value
-						return `
+      // debugger
+      this.chart2.setOption({
+        tooltip: {
+          formatter: (params, ticket, callback) => {
+            let seriesName = params.seriesName;
+            let newSeriesName = seriesName.split(",");
+            let name = params.name;
+            let num = params.value;
+            return `
                 <div>
                     <div>${name}</div>
                     <div><span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${params.color};"></span> ${newSeriesName[0]}</div>
                     <div>${newSeriesName[1]} ${num}</div>
                 </div>
-                `
-					},
-				},
-				legend: {
-					data: ['绝热', '交付', '装药', '总装'],
-					textStyle: {
-						color: '#fff', //legend字体颜色
-					},
-				},
-				grid: {
-					left: 0,
-					right: 10,
-					top: 10,
-					bottom: 50,
-					containLabel: true,
-				},
-				dataZoom: {
-					type: 'slider',
-					start: 0,
-					end: this.dataZoomEnd(titList.length, 5),
-					textStyle: {
-						color: '#fff',
-					},
-				},
-				xAxis: [
-					{
-						type: 'category',
-						data: titList,
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
-				yAxis: [
-					{
-						name: '',
-						splitLine: {
-							show: true,
-							//  改变轴线颜色
-							lineStyle: {
-								// 使用深浅的间隔色
-								color: ['rgba(255, 255, 255,.5)'],
-							},
-						},
-						axisLabel: {
-							formatter: '{value}',
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-					{
-						type: 'value',
-					},
-				],
-				series: [
-					...adiabat.map((e, index) => {
-						return {
-							// name: '绝热',
-							name: '绝热,' + titData[index],
-							type: 'bar',
-							stack: 'adiabat',
-							emphasis: {
-								focus: 'series',
-							},
-							// barWidth: 30,
-							data: e,
-							itemStyle: {
-								color: blueColorList[index],
-							},
-						}
-					}),
-					...deliver.map((e, index) => {
-						return {
-							// name: '交付',
-							name: '交付,' + titData[index],
-							type: 'bar',
-							stack: 'deliver',
-							emphasis: {
-								focus: 'series',
-							},
-							// barWidth: 30,
-							data: e,
-							itemStyle: {
-								color: greenColorList[index],
-							},
-						}
-					}),
-					...charge.map((e, index) => {
-						return {
-							// name: '装药',
-							name: '装药,' + titData[index],
-							type: 'bar',
-							stack: 'charge',
-							emphasis: {
-								focus: 'series',
-							},
-							// barWidth: 30,
-							data: e,
-							itemStyle: {
-								color: yelloColorList[index],
-							},
-						}
-					}),
-					...assembly.map((e, index) => {
-						return {
-							// name: '总装',
-							name: '总装,' + titData[index],
-							type: 'bar',
-							stack: 'assembly',
-							emphasis: {
-								focus: 'series',
-							},
-							// barWidth: 30,
-							data: e,
-							itemStyle: {
-								color: redColorList[index],
-							},
-						}
-					}),
-					// {
-					// 	name: '绝热',
-					// 	type: 'bar',
-					// 	stack: 'Ad',
-					// 	emphasis: {
-					// 		focus: 'series',
-					// 	},
-					// 	itemStyle: {
-					// 		color: greenColorList[3],
-					// 	},
-					// 	data: adiabat[0],
-					// },
-					// {
-					// 	name: '交付',
-					// 	type: 'bar',
-					// 	stack: 'Ad',
-					// 	emphasis: {
-					// 		focus: 'series',
-					// 	},
-					// 	itemStyle: {
-					// 		color: greenColorList[2],
-					// 	},
-					// 	data: deliver[0],
-					// },
-					// {
-					// 	name: '装药',
-					// 	type: 'bar',
-					// 	stack: 'Ad',
-					// 	emphasis: {
-					// 		focus: 'series',
-					// 	},
-					// 	itemStyle: {
-					// 		color: greenColorList[1],
-					// 	},
-					// 	data: charge[0],
-					// },
-					// {
-					// 	name: '总装',
-					// 	type: 'bar',
-					// 	stack: 'Ad',
-					// 	emphasis: {
-					// 		focus: 'series',
-					// 	},
-					// 	itemStyle: {
-					// 		color: greenColorList[0],
-					// 	},
-					// 	data: assembly[0],
-					// },
+                `;
+          },
+        },
+        legend: {
+          data: ["绝热", "交付", "装药", "总装"],
+          textStyle: {
+            color: "#fff", //legend字体颜色
+          },
+        },
+        grid: {
+          left: 0,
+          right: 10,
+          top: 10,
+          bottom: 50,
+          containLabel: true,
+        },
+        // dataZoom: {
+        // 	type: 'slider',
+        // 	start: 0,
+        // 	end: this.dataZoomEnd(titList.length, 5),
+        // 	textStyle: {
+        // 		color: '#fff',
+        // 	},
+        // },
+        dataZoom: [
+          {
+            type: "slider",
+            textStyle: {
+              color: "#fff",
+            },
+            startValue: this.dataZoomStart(titList.length, 4, "start"),
+            endValue: this.dataZoomStart(titList.length, 4, "end"),
+          },
+          {
+            type: "inside",
+          },
+        ],
+        xAxis: [
+          {
+            type: "category",
+            data: titList,
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            name: "",
+            splitLine: {
+              show: true,
+              //  改变轴线颜色
+              lineStyle: {
+                // 使用深浅的间隔色
+                color: ["rgba(255, 255, 255,.5)"],
+              },
+            },
+            axisLabel: {
+              formatter: "{value}",
+            },
+            axisLine: {
+              lineStyle: {
+                color: "rgb(255, 255, 255)",
+              },
+            },
+          },
+          {
+            type: "value",
+          },
+        ],
+        series: [
+          ...adiabat.map((e, index) => {
+            return {
+              // name: '绝热',
+              name: "绝热," + titData[index],
+              type: "bar",
+              stack: "adiabat",
+              emphasis: {
+                focus: "series",
+              },
+              // barWidth: 30,
+              data: e,
+              itemStyle: {
+                color: blueColorList[index],
+              },
+            };
+          }),
+          ...deliver.map((e, index) => {
+            return {
+              // name: '交付',
+              name: "交付," + titData[index],
+              type: "bar",
+              stack: "deliver",
+              emphasis: {
+                focus: "series",
+              },
+              // barWidth: 30,
+              data: e,
+              itemStyle: {
+                color: greenColorList[index],
+              },
+            };
+          }),
+          ...charge.map((e, index) => {
+            return {
+              // name: '装药',
+              name: "装药," + titData[index],
+              type: "bar",
+              stack: "charge",
+              emphasis: {
+                focus: "series",
+              },
+              // barWidth: 30,
+              data: e,
+              itemStyle: {
+                color: yelloColorList[index],
+              },
+            };
+          }),
+          ...assembly.map((e, index) => {
+            return {
+              // name: '总装',
+              name: "总装," + titData[index],
+              type: "bar",
+              stack: "assembly",
+              emphasis: {
+                focus: "series",
+              },
+              // barWidth: 30,
+              data: e,
+              itemStyle: {
+                color: redColorList[index],
+              },
+            };
+          }),
+          // {
+          // 	name: '绝热',
+          // 	type: 'bar',
+          // 	stack: 'Ad',
+          // 	emphasis: {
+          // 		focus: 'series',
+          // 	},
+          // 	itemStyle: {
+          // 		color: greenColorList[3],
+          // 	},
+          // 	data: adiabat[0],
+          // },
+          // {
+          // 	name: '交付',
+          // 	type: 'bar',
+          // 	stack: 'Ad',
+          // 	emphasis: {
+          // 		focus: 'series',
+          // 	},
+          // 	itemStyle: {
+          // 		color: greenColorList[2],
+          // 	},
+          // 	data: deliver[0],
+          // },
+          // {
+          // 	name: '装药',
+          // 	type: 'bar',
+          // 	stack: 'Ad',
+          // 	emphasis: {
+          // 		focus: 'series',
+          // 	},
+          // 	itemStyle: {
+          // 		color: greenColorList[1],
+          // 	},
+          // 	data: charge[0],
+          // },
+          // {
+          // 	name: '总装',
+          // 	type: 'bar',
+          // 	stack: 'Ad',
+          // 	emphasis: {
+          // 		focus: 'series',
+          // 	},
+          // 	itemStyle: {
+          // 		color: greenColorList[0],
+          // 	},
+          // 	data: assembly[0],
+          // },
 
-					// {
-					// 	name: '绝热',
-					// 	type: 'bar',
-					// 	stack: 'Search Engine',
-					// 	emphasis: {
-					// 		focus: 'series',
-					// 	},
-					// 	data: adiabat[1],
-					// 	itemStyle: {
-					// 		color: blueColorList[0],
-					// 	},
-					// },
-					// {
-					// 	name: '交付',
-					// 	type: 'bar',
-					// 	stack: 'Search Engine',
-					// 	emphasis: {
-					// 		focus: 'series',
-					// 	},
-					// 	data: deliver[1],
-					// 	itemStyle: {
-					// 		color: blueColorList[1],
-					// 	},
-					// },
-					// {
-					// 	name: '装药',
-					// 	type: 'bar',
-					// 	stack: 'Search Engine',
-					// 	emphasis: {
-					// 		focus: 'series',
-					// 	},
-					// 	data: charge[1],
-					// 	itemStyle: {
-					// 		color: blueColorList[2],
-					// 	},
-					// },
-					// {
-					// 	name: '总装',
-					// 	type: 'bar',
-					// 	stack: 'Search Engine',
-					// 	emphasis: {
-					// 		focus: 'series',
-					// 	},
-					// 	data: assembly[1],
-					// 	itemStyle: {
-					// 		color: blueColorList[3],
-					// 	},
-					// },
-				],
-			})
-		},
+          // {
+          // 	name: '绝热',
+          // 	type: 'bar',
+          // 	stack: 'Search Engine',
+          // 	emphasis: {
+          // 		focus: 'series',
+          // 	},
+          // 	data: adiabat[1],
+          // 	itemStyle: {
+          // 		color: blueColorList[0],
+          // 	},
+          // },
+          // {
+          // 	name: '交付',
+          // 	type: 'bar',
+          // 	stack: 'Search Engine',
+          // 	emphasis: {
+          // 		focus: 'series',
+          // 	},
+          // 	data: deliver[1],
+          // 	itemStyle: {
+          // 		color: blueColorList[1],
+          // 	},
+          // },
+          // {
+          // 	name: '装药',
+          // 	type: 'bar',
+          // 	stack: 'Search Engine',
+          // 	emphasis: {
+          // 		focus: 'series',
+          // 	},
+          // 	data: charge[1],
+          // 	itemStyle: {
+          // 		color: blueColorList[2],
+          // 	},
+          // },
+          // {
+          // 	name: '总装',
+          // 	type: 'bar',
+          // 	stack: 'Search Engine',
+          // 	emphasis: {
+          // 		focus: 'series',
+          // 	},
+          // 	data: assembly[1],
+          // 	itemStyle: {
+          // 		color: blueColorList[3],
+          // 	},
+          // },
+        ],
+      });
+    },
 
-		initChart3() {
-			this.request({
-				url: '/hx/scientificProduction/getModelProductionStatisticPic',
-			}).then(({ data }) => {
-				this.chart3 = echarts.init(this.$refs.chart3)
-				this.setOptions3(data)
-			})
-		},
-		setOptions3(resData) {
-			// console.log(resData)
+    initChart3() {
+      this.request({
+        url: "/hx/scientificProduction/getModelProductionStatisticPic",
+      }).then(({ data }) => {
+        this.chart3 = echarts.init(this.$refs.chart3);
+        this.setOptions3(data);
+      });
+    },
+    setOptions3(resData) {
+      // console.log(resData)
 
-			let models = []
-			let adiabat = []
-			let charge = []
-			let deliver = []
-			let assembly = []
-			let review = []
-			let settlement = []
-			let productionNumber = []
+      let models = [];
+      let adiabat = [];
+      let charge = [];
+      let deliver = [];
+      let assembly = [];
+      let review = [];
+      let settlement = [];
+      let productionNumber = [];
 
-			for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
-				models.push(item.model)
-				adiabat.push(item.adiabat)
-				charge.push(item.charge)
-				deliver.push(item.deliver)
-				assembly.push(item.assembly)
-				review.push(item.review)
-				settlement.push(item.settlement)
-				productionNumber.push(item.productionNumber)
-			}
+      for (let i = 0; i < resData.length; i++) {
+        const item = resData[i];
+        models.push(item.model);
+        adiabat.push(item.adiabat);
+        charge.push(item.charge);
+        deliver.push(item.deliver);
+        assembly.push(item.assembly);
+        review.push(item.review);
+        settlement.push(item.settlement);
+        productionNumber.push(item.productionNumber);
+      }
 
-			this.chart3.setOption({
-				tooltip: {
-					trigger: 'axis',
-					axisPointer: {
-						type: 'shadow',
-					},
-				},
-				legend: {
-					textStyle: {
-						color: '#fff', //legend字体颜色
-					},
-				},
-				grid: {
-					left: '3%',
-					right: '4%',
-					bottom: '3%',
-					containLabel: true,
-				},
-				xAxis: {
-					type: 'value',
-					boundaryGap: [0, 0.01],
-					axisLine: {
-						lineStyle: {
-							color: 'rgb(255, 255, 255)',
-						},
-					},
-				},
-				yAxis: {
-					type: 'category',
-					data: models,
-					axisLine: {
-						lineStyle: {
-							color: 'rgb(255, 255, 255)',
-						},
-					},
-				},
-				color: colorList,
-				series: [
-					{
-						name: '绝热数',
-						type: 'bar',
-						data: adiabat,
-					},
-					{
-						name: '装药数',
-						type: 'bar',
-						data: charge,
-					},
-					{
-						name: '交付数(地试数)',
-						type: 'bar',
-						data: deliver,
-					},
-					{
-						name: '总装数',
-						type: 'bar',
-						data: assembly,
-					},
-					{
-						name: '评审数',
-						type: 'bar',
-						data: review,
-					},
-					{
-						name: '结算数',
-						type: 'bar',
-						data: settlement,
-					},
-					{
-						name: '生产数',
-						type: 'bar',
-						data: productionNumber,
-					},
-				],
-			})
-		},
-	},
-	created() {
-		this.getData()
-	},
-}
+      this.chart3.setOption({
+        tooltip: {
+          trigger: "axis",
+          axisPointer: {
+            type: "shadow",
+          },
+        },
+        legend: {
+          textStyle: {
+            color: "#fff", //legend字体颜色
+          },
+        },
+        grid: {
+          left: "3%",
+          right: "4%",
+          bottom: "3%",
+          containLabel: true,
+        },
+        xAxis: {
+          type: "value",
+          boundaryGap: [0, 0.01],
+          axisLine: {
+            lineStyle: {
+              color: "rgb(255, 255, 255)",
+            },
+          },
+        },
+        yAxis: {
+          type: "category",
+          data: models,
+          axisLine: {
+            lineStyle: {
+              color: "rgb(255, 255, 255)",
+            },
+          },
+        },
+        color: colorList,
+        series: [
+          {
+            name: "绝热数",
+            type: "bar",
+            data: adiabat,
+          },
+          {
+            name: "装药数",
+            type: "bar",
+            data: charge,
+          },
+          {
+            name: "交付数(地试数)",
+            type: "bar",
+            data: deliver,
+          },
+          {
+            name: "总装数",
+            type: "bar",
+            data: assembly,
+          },
+          {
+            name: "评审数",
+            type: "bar",
+            data: review,
+          },
+          {
+            name: "结算数",
+            type: "bar",
+            data: settlement,
+          },
+          {
+            name: "生产数",
+            type: "bar",
+            data: productionNumber,
+          },
+        ],
+      });
+    },
+  },
+  created() {
+    this.getData();
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .trends {
-	height: 100%;
-	padding: 0 25px;
+  height: 100%;
+  padding: 0 25px;
 }
 </style>
diff --git a/src/views/bigScreen/securityManage/center.vue b/src/views/bigScreen/securityManage/center.vue
index 7255618..a8c9f08 100644
--- a/src/views/bigScreen/securityManage/center.vue
+++ b/src/views/bigScreen/securityManage/center.vue
@@ -202,6 +202,7 @@ export default {
         method: "get",
       }).then((res) => {
         if (200 == res.code) {
+          console.log(res.data);
           this.pointLevelCount = res.data.pointLevelCount;
           this.sourceLevelCount = res.data.sourceLevelCount;
           this.points = res.data.points;
diff --git a/src/views/bigScreen/securityManage/left2.vue b/src/views/bigScreen/securityManage/left2.vue
index 00b7169..3477a74 100644
--- a/src/views/bigScreen/securityManage/left2.vue
+++ b/src/views/bigScreen/securityManage/left2.vue
@@ -3,7 +3,10 @@
     <container3 title="安全隐患整改情况">
       <div class="wrap">
         <div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
-          <bigScreenTabs v-model="index" :titleArr="['总厂', '车间']"></bigScreenTabs>
+          <bigScreenTabs
+            v-model="index"
+            :titleArr="['总厂', '车间']"
+          ></bigScreenTabs>
         </div>
         <el-row class="content1" style="height: 100%" v-if="index == 0">
           <el-col :span="14" style="height: 100%">
@@ -20,30 +23,69 @@
           <el-col :span="12" style="height: 100%">
             <el-row style="padding: 0 10px">
               <el-col :span="24" style="margin-bottom: 1px">
-                <el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
+                <el-row
+                  style="
+                    font-size: 14px;
+                    height: 42px;
+                    line-height: 42px;
+                    background: rgba(0, 255, 255, 0.3);
+                  "
+                >
                   <el-col style="text-align: center" :span="3">序号</el-col>
-                  <el-col style="text-align: center" :span="12">安全隐患内容</el-col>
+                  <el-col style="text-align: center" :span="12"
+                    >安全隐患内容</el-col
+                  >
                   <el-col style="text-align: center" :span="4">措施</el-col>
                   <el-col style="text-align: center" :span="3">责任人</el-col>
                 </el-row>
               </el-col>
-              <vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp-scroll" :class-option="{
-									singleHeight: 43,
-								}">
+              <vue-seamless-scroll
+                ref="seamlessScroll"
+                :data="listData"
+                class="warp-scroll"
+                :class-option="{
+                  singleHeight: 43,
+                }"
+              >
                 <ul class="item">
                   <li v-for="item in scrollList" :key="item.id">
                     <el-row style="font-size: 14px">
-                      <el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
-                      <el-col style="text-align: center" :span="12" :title="item.dangerContent">{{ item.dangerContent }}</el-col>
+                      <el-col style="text-align: center" :span="3">{{
+                        item.id
+                      }}</el-col>
+                      <el-col
+                        style="text-align: center"
+                        :span="12"
+                        :title="item.dangerContent"
+                        >{{ item.dangerContent }}</el-col
+                      >
                       <el-col style="text-align: center" :span="4">
                         <section class="box">
-                          <span v-if="item.measures == '未整改'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
-                          <span v-else style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
+                          <span
+                            v-if="item.measures == '未整改'"
+                            style="
+                              color: #f64f58;
+                              font-size: 25px;
+                              margin-right: 3px;
+                            "
+                            >·</span
+                          >
+                          <span
+                            v-else
+                            style="
+                              color: #6fd1b4;
+                              font-size: 25px;
+                              margin-right: 3px;
+                            "
+                            >·</span
+                          >
                           <span v-if="item.measures == '未整改'">未整改</span>
                           <span v-else>已整改</span>
                         </section>
                       </el-col>
-                      <el-col style="text-align: center" :span="3">{{ item.personLiable }}</el-col>
+                      <el-col style="text-align: center" :span="3">{{
+                        item.personLiable
+                      }}</el-col>
                     </el-row>
                   </li>
                 </ul>
@@ -57,20 +99,20 @@
 </template>
 
 <script>
-import scalseBox from '../components/scaleBox.vue'
-import bigScreenHead from '../components/bigScreenHead/index.vue'
-import rocketTit from '../components/rocketTit/index.vue'
-import container3 from './components/container3/index.vue'
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
-import colorList from '@/utils/colorPalette'
-import vueSeamlessScroll from 'vue-seamless-scroll'
+import scalseBox from "../components/scaleBox.vue";
+import bigScreenHead from "../components/bigScreenHead/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import container3 from "./components/container3/index.vue";
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
+import colorList from "@/utils/colorPalette";
+import vueSeamlessScroll from "vue-seamless-scroll";
 
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
-import resize from '../../dashboard/mixins/resize'
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
+import resize from "../../dashboard/mixins/resize";
 export default {
   mixins: [resize],
-  name: 'left2',
+  name: "left2",
   components: {
     scalseBox,
     bigScreenHead,
@@ -79,7 +121,7 @@ export default {
     container3,
     vueSeamlessScroll,
   },
-  data () {
+  data() {
     return {
       index: 0,
       colorList,
@@ -91,52 +133,52 @@ export default {
       chart1: null,
       chart2: null,
       chart3: null,
-    }
+    };
   },
   watch: {
-    index (newOld, oldVal) {
+    index(newOld, oldVal) {
       if (newOld == 0) {
-        this.chart3.dispose()
-        this.chart3 = null
+        this.chart3.dispose();
+        this.chart3 = null;
         this.$nextTick(() => {
-          this.initChart()
-        })
+          this.initChart();
+        });
       } else {
-        this.chart1.dispose()
-        this.chart1 = null
-        this.chart2.dispose()
-        this.chart2 = null
+        this.chart1.dispose();
+        this.chart1 = null;
+        this.chart2.dispose();
+        this.chart2 = null;
         this.$nextTick(() => {
-          this.initChart3()
-        })
+          this.initChart3();
+        });
       }
     },
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.initChart()
+      this.initChart();
       // this.initChart3()
-    })
+    });
   },
-  beforeDestroy () {
+  beforeDestroy() {
     if (!this.chart) {
-      return
+      return;
     }
-    this.chart.dispose()
-    this.chart = null
+    this.chart.dispose();
+    this.chart = null;
   },
   methods: {
-    initChart () {
+    initChart() {
       this.request({
-        url: '/hx/securityManagement/hiddenDanger/1',
-        method: 'get',
+        url: "/hx/securityManagement/hiddenDanger/1",
+        method: "get",
         // type=1车间/=2总厂
-        params: { type: 2 }
-      }).then(res => {
+        params: { type: 2 },
+      }).then((res) => {
         if (200 == res.code) {
           let { monthList, mapList, category } = res.data;
           this.initChart2(category);
-          this.chart1 = echarts.init(this.$refs.chart1)
+          this.chart1 = echarts.init(this.$refs.chart1);
           this.chart1.setOption({
             // legend: {
             // 	data: ['利润', '利润目标完成率'],
@@ -145,31 +187,31 @@ export default {
             // 	},
             // },
             grid: {
-              left: '3%',
-              right: '6%',
-              bottom: '3%',
+              left: "3%",
+              right: "6%",
+              bottom: "3%",
               containLabel: true,
             },
             xAxis: [
               {
-                type: 'category',
+                type: "category",
                 data: monthList,
                 axisPointer: {
-                  type: 'shadow',
+                  type: "shadow",
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             yAxis: [
               {
-                type: 'value',
-                name: '个',
+                type: "value",
+                name: "个",
                 axisLabel: {
-                  formatter: '{value}',
+                  formatter: "{value}",
                 },
                 splitLine: {
                   show: false, //不显示网格线
@@ -179,14 +221,14 @@ export default {
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
               {
-                type: 'value',
+                type: "value",
                 axisLabel: {
-                  formatter: '{value} %',
+                  formatter: "{value} %",
                 },
                 splitLine: {
                   show: false, //不显示网格线
@@ -196,59 +238,72 @@ export default {
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             grid: {
               containLabel: true,
-              width: '99%',
+              width: "99%",
               left: 0,
               top: 50,
               bottom: 50,
             },
-            dataZoom: {
-              type: 'slider',
-              start: 0,
-              end: this.dataZoomEnd(mapList.length, 5),
-            },
-            series: [
+            // dataZoom: {
+            //   type: 'slider',
+            //   start: 0,
+            //   end: this.dataZoomEnd(mapList.length, 5),
+            // },
+            dataZoom: [
               {
-                name: '利润',
-                type: 'bar',
-                barWidth: 20,
-                data: mapList.map(e => e.total),
-                // data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
-                itemStyle: {
-                  color: 'rgb(118,196,166)',
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
                 },
-                barGap: '0',
+                startValue: this.dataZoomStart(mapList.length, 4, "start"),
+                endValue: this.dataZoomStart(mapList.length, 4, "end"),
               },
               {
-                name: '利润目标完成率',
-                type: 'line',
+                type: "inside",
+              },
+            ],
+            series: [
+              {
+                name: "利润",
+                type: "bar",
+                barWidth: 20,
+                data: mapList.map((e) => e.total),
+                // data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
+                itemStyle: {
+                  color: "rgb(118,196,166)",
+                },
+                barGap: "0",
+              },
+              {
+                name: "利润目标完成率",
+                type: "line",
                 yAxisIndex: 1,
                 smooth: false,
-                data: mapList.map(e => e.rate),
+                data: mapList.map((e) => e.rate),
                 itemStyle: {
-                  color: '#55C5A2',
+                  color: "#55C5A2",
                 },
-                symbol: 'none',
+                symbol: "none",
               },
             ],
           });
         } else {
           this.$message.error(res.msg);
         }
-      })
+      });
     },
-    initChart2 (category) {
-      this.chart2 = echarts.init(this.$refs.chart2)
+    initChart2(category) {
+      this.chart2 = echarts.init(this.$refs.chart2);
       this.chart2.setOption({
         tooltip: {
-          trigger: 'item',
-          formatter: '{a} <br/>{b}: {c} ({d}%)',
+          trigger: "item",
+          formatter: "{a} <br/>{b}: {c} ({d}%)",
         },
         color: this.colorList,
         legend: {
@@ -260,38 +315,39 @@ export default {
           // y: 'bottom',
           textStyle: {
             //图例文字的样式
-            color: '#fff',
+            color: "#fff",
             fontSize: 16,
           },
         },
         series: [
           {
-            name: '型号',
-            type: 'pie',
-            radius: ['40%', '60%'],
-            center: ['45%', '45%'],
+            name: "型号",
+            type: "pie",
+            radius: ["40%", "60%"],
+            center: ["45%", "45%"],
             avoidLabelOverlap: false,
             label: {
               show: false,
-              position: 'center',
-              fontWeight: 'bold',
-              formatter: ' {c}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容
+              position: "center",
+              fontWeight: "bold",
+              formatter: " {c}", // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容
             },
             emphasis: {
               label: {
                 show: false,
-                fontSize: '40',
-                fontWeight: 'bold',
+                fontSize: "40",
+                fontWeight: "bold",
               },
             },
             labelLine: {
               show: false,
             },
-            data: category.map(e => {
+            data: category.map((e) => {
               return {
-                value: e.NUMBERCOUNT, name: e.category
-              }
-            })
+                value: e.NUMBERCOUNT,
+                name: e.category,
+              };
+            }),
             // data: [
             //   { value: 154, name: '型号一' },
             //   { value: 775, name: '型号二' },
@@ -300,17 +356,17 @@ export default {
             // ],
           },
         ],
-      })
+      });
     },
-    initChart3 () {
+    initChart3() {
       this.request({
-        url: '/hx/securityManagement/hiddenDanger/1',
-        method: 'get',
+        url: "/hx/securityManagement/hiddenDanger/1",
+        method: "get",
         // type=1车间/=2总厂
-        params: { type: 1 }
-      }).then(res => {
+        params: { type: 1 },
+      }).then((res) => {
         if (200 == res.code) {
-          this.chart3 = echarts.init(this.$refs.chart3)
+          this.chart3 = echarts.init(this.$refs.chart3);
           let { list, allWorkshop, mapList } = res.data;
           this.scrollList = list;
           this.listData2 = Array(this.scrollList.length).fill(0);
@@ -323,32 +379,32 @@ export default {
             // 	},
             // },
             grid: {
-              left: '3%',
-              right: '6%',
-              bottom: '3%',
+              left: "3%",
+              right: "6%",
+              bottom: "3%",
               containLabel: true,
             },
             xAxis: [
               {
-                type: 'category',
+                type: "category",
                 data: allWorkshop,
                 // data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
                 axisPointer: {
-                  type: 'shadow',
+                  type: "shadow",
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             yAxis: [
               {
-                type: 'value',
-                name: '个',
+                type: "value",
+                name: "个",
                 axisLabel: {
-                  formatter: '{value}',
+                  formatter: "{value}",
                 },
                 splitLine: {
                   show: false, //不显示网格线
@@ -358,14 +414,14 @@ export default {
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
               {
-                type: 'value',
+                type: "value",
                 axisLabel: {
-                  formatter: '{value} %',
+                  formatter: "{value} %",
                 },
                 splitLine: {
                   show: false, //不显示网格线
@@ -375,56 +431,67 @@ export default {
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             grid: {
               containLabel: true,
-              width: '99%',
+              width: "99%",
               left: 0,
               top: 50,
               bottom: 50,
             },
-            dataZoom: {
-              type: 'slider',
-              start: 0,
-              end: this.dataZoomEnd(mapList.length, 5),
-            },
-            series: [
+            // dataZoom: {
+            //   type: "slider",
+            //   start: 0,
+            //   end: this.dataZoomEnd(mapList.length, 5),
+            // },
+            dataZoom: [
               {
-                name: '利润',
-                type: 'bar',
-                barWidth: 20,
-                data: mapList.map(e => e.total),
-                // data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
-                itemStyle: {
-                  color: 'rgb(118,196,166)',
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
                 },
-                barGap: '0',
+                startValue: this.dataZoomStart(mapList.length, 4, "start"),
+                endValue: this.dataZoomStart(mapList.length, 4, "end"),
               },
               {
-                name: '利润目标完成率',
-                type: 'line',
-                yAxisIndex: 1,
-                smooth: false,
-                data: mapList.map(e => e.rate),
-                // data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
-                itemStyle: {
-                  color: '#7EA7FC ',
-                },
-                symbol: 'none',
+                type: "inside",
               },
             ],
-          })
+            series: [
+              {
+                name: "利润",
+                type: "bar",
+                barWidth: 20,
+                data: mapList.map((e) => e.total),
+                // data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
+                itemStyle: {
+                  color: "rgb(118,196,166)",
+                },
+                barGap: "0",
+              },
+              {
+                name: "利润目标完成率",
+                type: "line",
+                yAxisIndex: 1,
+                smooth: false,
+                data: mapList.map((e) => e.rate),
+                // data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
+                itemStyle: {
+                  color: "#7EA7FC ",
+                },
+                symbol: "none",
+              },
+            ],
+          });
         }
-      })
-
+      });
     },
-
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bigScreen/securityManage/right1.vue b/src/views/bigScreen/securityManage/right1.vue
index f6d796b..f62af04 100644
--- a/src/views/bigScreen/securityManage/right1.vue
+++ b/src/views/bigScreen/securityManage/right1.vue
@@ -10,45 +10,44 @@
 </template>
 
 <script>
-import rocketTit from '../components/rocketTit/index.vue'
-import container2 from './components/container2/index.vue'
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
-import colorList from '@/utils/colorPalette'
+import rocketTit from "../components/rocketTit/index.vue";
+import container2 from "./components/container2/index.vue";
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
+import colorList from "@/utils/colorPalette";
 // import {Liquid} from '@antv/g2plot';
 // import resize from '../../dashboard/mixins/resize'
-import echarts from 'echarts'
-require('echarts/theme/macarons') // echarts theme
+import echarts from "echarts";
+require("echarts/theme/macarons"); // echarts theme
 export default {
   // mixins: [resize],
-  name: 'left1',
+  name: "left1",
   components: {
     rocketTit,
     container2,
     bigScreenTabs,
     progressBar,
   },
-  data () {
+  data() {
     return {
       colorList,
       chart1: null,
       chart2: null,
-    }
+    };
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.initChart()
-      this.initLine()
-    })
+      this.initChart();
+      this.initLine();
+    });
   },
-  beforeDestroy () { },
+  beforeDestroy() {},
   methods: {
-    initChart () {
+    initChart() {
       this.request({
-        url: '/hx/securityManagement/dangerSource',
-        method: 'get',
-      }).then(res => {
-
+        url: "/hx/securityManagement/dangerSource",
+        method: "get",
+      }).then((res) => {
         if (200 == res.code) {
           let titData = res.data.allLevel;
           let data = res.data;
@@ -56,7 +55,7 @@ export default {
           let titList = [];
           let valList = [];
           for (let index = 0; index < titData.length; index++) {
-            valList.push([])
+            valList.push([]);
           }
           // var a = {
           // 	titData: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
@@ -76,25 +75,25 @@ export default {
               titList.push(key);
               for (let i = 0; i < item.length; i++) {
                 const ele = item[i];
-                let index = titData.findIndex(e => e == ele.name);
+                let index = titData.findIndex((e) => e == ele.name);
                 valList[index][titList.length - 1] = ele.COUNTNUMBER;
               }
             }
           }
 
-          this.chart1 = echarts.init(this.$refs.left1)
+          this.chart1 = echarts.init(this.$refs.left1);
           this.chart1.setOption({
             tooltip: {
-              trigger: 'axis',
+              trigger: "axis",
               axisPointer: {
-                type: 'shadow',
+                type: "shadow",
               },
             },
             legend: {
               //   data: ['一级危险源', '二级危险源', '三级危险源', '四级危险源'],
               data: titData,
               textStyle: {
-                color: '#fff', //legend字体颜色
+                color: "#fff", //legend字体颜色
               },
             },
             grid: {
@@ -104,63 +103,75 @@ export default {
               bottom: 50,
               containLabel: true,
             },
-            dataZoom: {
-              type: 'slider',
-              start: 0,
-              end: this.dataZoomEnd(titList.length, 5),
-            },
-            color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'],
+            // dataZoom: {
+            //   type: 'slider',
+            //   start: 0,
+            //   end: this.dataZoomEnd(titList.length, 5),
+            // },
+            dataZoom: [
+              {
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
+                },
+                startValue: this.dataZoomStart(titList.length, 4, "start"),
+                endValue: this.dataZoomStart(titList.length, 4, "end"),
+              },
+              {
+                type: "inside",
+              },
+            ],
+            color: ["#5B8FF9", "#55C5A2", "#F7DC87", "#FF9F43"],
             xAxis: [
               {
-                type: 'category',
+                type: "category",
                 // data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
                 data: titList,
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             yAxis: [
               {
-                name: '个',
+                name: "个",
                 splitLine: {
                   show: true,
                   //  改变轴线颜色
                   lineStyle: {
                     // 使用深浅的间隔色
-                    color: ['rgba(255, 255, 255,.5)'],
+                    color: ["rgba(255, 255, 255,.5)"],
                   },
                 },
                 axisLabel: {
-                  formatter: '{value}',
+                  formatter: "{value}",
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
               {
-                type: 'value',
+                type: "value",
               },
             ],
             series: [
               ...valList.map((e, index) => {
                 return {
-
                   name: titData[index],
-                  type: 'bar',
-                  stack: 'Ad',
+                  type: "bar",
+                  stack: "Ad",
                   emphasis: {
-                    focus: 'series',
+                    focus: "series",
                   },
 
                   barWidth: 30,
                   data: e,
-                }
-              })
+                };
+              }),
               //   {
               //     name: '四级危险源',
               //     type: 'bar',
@@ -214,19 +225,17 @@ export default {
               //     data: [150, 232, 201, 154, 190, 330, 410],
               //   },
             ],
-          })
+          });
         }
-      })
-      this.setOptions()
+      });
+      this.setOptions();
     },
-    setOptions () {
-
-    },
-    initLine () {
+    setOptions() {},
+    initLine() {
       this.request({
-        url: '/hx/securityManagement/dangerPoint',
-        method: 'get',
-      }).then(res => {
+        url: "/hx/securityManagement/dangerPoint",
+        method: "get",
+      }).then((res) => {
         if (200 == res.code) {
           let titData = res.data.allLevel;
           let data = res.data;
@@ -234,7 +243,7 @@ export default {
           let titList = [];
           let valList = [];
           for (let index = 0; index < titData.length; index++) {
-            valList.push([])
+            valList.push([]);
           }
           for (const key in data) {
             if (Object.hasOwnProperty.call(data, key)) {
@@ -242,24 +251,24 @@ export default {
               titList.push(key);
               for (let i = 0; i < item.length; i++) {
                 const ele = item[i];
-                let index = titData.findIndex(e => e == ele.name);
+                let index = titData.findIndex((e) => e == ele.name);
                 valList[index][titList.length - 1] = ele.COUNTNUMBER;
               }
             }
           }
-          this.chart2 = echarts.init(this.$refs.left2)
+          this.chart2 = echarts.init(this.$refs.left2);
           this.chart2.setOption({
             tooltip: {
-              trigger: 'axis',
+              trigger: "axis",
               axisPointer: {
-                type: 'shadow',
+                type: "shadow",
               },
             },
             legend: {
               //   data: ['一级危险源', '二级危险源', '三级危险源'],
               data: titData,
               textStyle: {
-                color: '#fff', //legend字体颜色
+                color: "#fff", //legend字体颜色
               },
             },
             grid: {
@@ -269,62 +278,74 @@ export default {
               bottom: 50,
               containLabel: true,
             },
-            dataZoom: {
-              type: 'slider',
-              start: 0,
-              end: this.dataZoomEnd(titList.length, 5),
-            },
-            color: ['#5B8FF9', '#55C5A2', '#F7DC87', '#FF9F43'],
+            // dataZoom: {
+            //   type: "slider",
+            //   start: 0,
+            //   end: this.dataZoomEnd(titList.length, 5),
+            // },
+            dataZoom: [
+              {
+                type: "slider",
+                textStyle: {
+                  color: "#fff",
+                },
+                startValue: this.dataZoomStart(titList.length, 4, "start"),
+                endValue: this.dataZoomStart(titList.length, 4, "end"),
+              },
+              {
+                type: "inside",
+              },
+            ],
+            color: ["#5B8FF9", "#55C5A2", "#F7DC87", "#FF9F43"],
             xAxis: [
               {
-                type: 'category',
+                type: "category",
                 data: titList,
                 // data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             yAxis: [
               {
-                name: '个',
+                name: "个",
                 splitLine: {
                   show: true,
                   //  改变轴线颜色
                   lineStyle: {
                     // 使用深浅的间隔色
-                    color: ['rgba(255, 255, 255,.5)'],
+                    color: ["rgba(255, 255, 255,.5)"],
                   },
                 },
                 axisLabel: {
-                  formatter: '{value}',
+                  formatter: "{value}",
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
               {
-                type: 'value',
+                type: "value",
               },
             ],
             series: [
               ...valList.map((e, index) => {
                 return {
-
                   name: titData[index],
-                  type: 'bar',
-                  stack: 'Ad',
+                  type: "bar",
+                  stack: "Ad",
                   emphasis: {
-                    focus: 'series',
+                    focus: "series",
                   },
 
                   barWidth: 30,
                   data: e,
-                }
+                };
               }),
               //   {
               //     name: '三级危险源',
@@ -366,14 +387,12 @@ export default {
               //     data: [150, 232, 201, 154, 190, 330, 410],
               //   },
             ],
-          })
-
+          });
         }
-      })
+      });
     },
-
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/vue.config.js b/vue.config.js
index b673fe9..0faba87 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -35,7 +35,8 @@ module.exports = {
 			[process.env.VUE_APP_BASE_API]: {
 				// target: `http://localhost:1818`,
 				// target: `http://120.26.107.74:1818`,
-				target: `http://192.168.0.154:1818`,
+				// target: `http://192.168.0.154:1818`,
+				target: `http://192.168.0.115:1818`,
 				// target: `http://124.70.138.50:1818`,
 				changeOrigin: true,
 				pathRewrite: {