up

src/views/bigScreen/drivingCabin/center.vue

@@ -5,31 +5,76 @@
       <rocketTit class="tit">全年目标</rocketTit>
       <div class="data">
         <div class="data-item">
-          <div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div>
+          <div>
-          <div class="box"><i>{{val.completedIncome}}/</i><i class="num">{{val.targetIncome}}</i><span class="num2">万</span></div>
+            <img src="./icon1.png" alt="" /><span style="font-weight: bold"
+              >收入</span
+            >
+          </div>
+          <div class="box">
+            <i>{{ val.completedIncome }}/</i
+            ><i class="num">{{ val.targetIncome }}</i
+            ><span class="num2">万</span>
+          </div>
           <div style="width: 100%">
-            <progressBar :percentage="val.completedIncome/val.targetIncome*100" />
+            <progressBar
+              :percentage="(val.completedIncome / val.targetIncome) * 100"
+            />
           </div>
         </div>
         <div class="data-item">
-          <div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div>
+          <div>
-          <div class="box"><i>{{val.completedProfit}}/</i><i class="num">{{val.targetProfit}}</i><span class="num2">万</span></div>
+            <img src="./icon2.png" alt="" /><span style="font-weight: bold"
+              >利润</span
+            >
+          </div>
+          <div class="box">
+            <i>{{ val.completedProfit }}/</i
+            ><i class="num">{{ val.targetProfit }}</i
+            ><span class="num2">万</span>
+          </div>
           <div style="width: 100%">
-            <progressBar :percentage="val.completedProfit/val.targetProfit*100" />
+            <progressBar
+              :percentage="(val.completedProfit / val.targetProfit) * 100"
+            />
           </div>
         </div>
         <div class="data-item">
-          <div><img src="./icon3.png" alt="" /><span style="font-weight: bold">装药量</span></div>
+          <div>
-          <div class="box"><i>{{val.completedChargeQuantity}}/</i><i class="num">{{val.targetChargeQuantity}}</i><span class="num2">万件</span></div>
+            <img src="./icon3.png" alt="" /><span style="font-weight: bold"
+              >装药量</span
+            >
+          </div>
+          <div class="box">
+            <i>{{ val.completedChargeQuantity }}/</i
+            ><i class="num">{{ val.targetChargeQuantity }}</i
+            ><span class="num2">万件</span>
+          </div>
           <div style="width: 100%">
-            <progressBar :percentage="val.completedChargeQuantity/val.targetChargeQuantity*100" />
+            <progressBar
+              :percentage="
+                (val.completedChargeQuantity / val.targetChargeQuantity) * 100
+              "
+            />
           </div>
         </div>
         <div class="data-item">
-          <div><img src="./icon4.png" alt="" /><span style="font-weight: bold">交付数量</span></div>
+          <div>
-          <div class="box"><i>{{val.completedDeliveryQuantity}}/</i><i class="num">{{val.targetDeliveryQuantity}}</i><span class="num2">万件</span></div>
+            <img src="./icon4.png" alt="" /><span style="font-weight: bold"
+              >交付数量</span
+            >
+          </div>
+          <div class="box">
+            <i>{{ val.completedDeliveryQuantity }}/</i
+            ><i class="num">{{ val.targetDeliveryQuantity }}</i
+            ><span class="num2">万件</span>
+          </div>
           <div style="width: 100%">
-            <progressBar :percentage="(val.completedDeliveryQuantity/val.targetDeliveryQuantity)*100" />
+            <progressBar
+              :percentage="
+                (val.completedDeliveryQuantity / val.targetDeliveryQuantity) *
+                100
+              "
+            />
           </div>
         </div>
       </div>
@@ -38,23 +83,23 @@
 </template>
 
 <script>
-import container3 from '../components/container3/index.vue'
+import container3 from "../components/container3/index.vue";
-import rocketTit from '../components/rocketTit/index.vue'
+import rocketTit from "../components/rocketTit/index.vue";
-import progressBar from './../components/progress/index.vue'
+import progressBar from "./../components/progress/index.vue";
 
-import echarts from 'echarts'
+import echarts from "echarts";
-require('echarts/theme/macarons') // echarts theme
+require("echarts/theme/macarons"); // echarts theme
-import resize from '../../dashboard/mixins/resize'
+import resize from "../../dashboard/mixins/resize";
 
 export default {
   mixins: [resize],
-  name: 'left1',
+  name: "left1",
   components: {
     container3,
     rocketTit,
     progressBar,
   },
-  data () {
+  data() {
     return {
       val: {
         bigPic: "",
@@ -68,31 +113,30 @@ export default {
         targetIncome: "0",
         targetProfit: "0",
         year: "0",
-      }
-    }
       },
-  mounted () {
+    };
+  },
+  mounted() {
     this.$nextTick(() => {
-      this.getData()
+      this.getData();
-    })
+    });
   },
-  beforeDestroy () { },
+  beforeDestroy() {},
   methods: {
-    getData () {
+    getData() {
       this.request({
-        url: '/hx/cockpitOverview/annualTargetAndPic',
+        url: "/hx/cockpitOverview/annualTargetAndPic",
-        method: 'get',
+        method: "get",
-      }).then(res => {
+      }).then((res) => {
         if (200 == res.code) {
           this.val = res.data[0];
         } else {
           this.$message.error(res.msg);
         }
-      })
+      });
-    }
-
     },
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/bigScreen/drivingCabin/left1.vue

@@ -10,7 +10,9 @@
         <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>
+          <i class="num"
+            >{{ res.map.completedTasks }}/{{ res.map.cate.toFixed(2) }}%</i
+          >
           <progressBar :percentage="res.map.cate" />
         </div>
       </div>
@@ -29,21 +31,21 @@
 </template>
 
 <script>
-import rocketTit from '../components/rocketTit/index.vue'
+import rocketTit from "../components/rocketTit/index.vue";
-import container2 from './components/container2/index.vue'
+import container2 from "./components/container2/index.vue";
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
-import colorList from '@/utils/colorPalette'
+import colorList from "@/utils/colorPalette";
 // import {Liquid} from '@antv/g2plot';
 // import resize from '../../dashboard/mixins/resize'
-import echarts from 'echarts'
+import echarts from "echarts";
-require('echarts/theme/macarons') // echarts theme
+require("echarts/theme/macarons"); // echarts theme
 
-import request from '@/utils/request'
+import request from "@/utils/request";
 //hx/cockpitOverview/businessResponsibility
 export default {
   // mixins: [resize],
-	name: 'left1',
+  name: "left1",
   components: {
     rocketTit,
     container2,
@@ -53,14 +55,14 @@ export default {
   data() {
     return {
       data: [
-				{ value: 154, name: '类别一' },
+        { value: 154, name: "类别一" },
-				{ value: 775, name: '类别二' },
+        { value: 775, name: "类别二" },
-				{ value: 679, name: '类别三' },
+        { value: 679, name: "类别三" },
-				{ value: 679, name: '类别四' },
+        { value: 679, name: "类别四" },
-				{ value: 679, name: '类别五' },
+        { value: 679, name: "类别五" },
-				{ value: 679, name: '类别六' },
+        { value: 679, name: "类别六" },
-				{ value: 679, name: '类别七' },
+        { value: 679, name: "类别七" },
-				{ value: 679, name: '类别八' },
+        { value: 679, name: "类别八" },
       ],
       colorList,
       res: {
@@ -68,52 +70,51 @@ export default {
           cate: 0,
           completedTasks: 0,
           targetTasks: 0,
-				}
         },
-		}
+      },
+    };
   },
   mounted() {
     this.$nextTick(() => {
-			this.initChart()
+      this.initChart();
-			this.initLine()
+      this.initLine();
-		})
+    });
   },
   beforeDestroy() {},
   methods: {
     initChart() {
-			this.setOptions()
+      this.setOptions();
     },
     setOptions() {
       request({
-				url: '/hx/cockpitOverview/businessResponsibility',
+        url: "/hx/cockpitOverview/businessResponsibility",
-				method: 'get',
+        method: "get",
-			}).then(res=> {
+      }).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(
+          valData.push({ value: item.cate, name: item.indicator_name });
-						{ value: item.cate, name: item.indicator_name },
-					);
         }
-				this.chart = echarts.init(this.$refs.left1, 'macarons')
+        this.chart = echarts.init(this.$refs.left1, "macarons");
         this.chart.setOption({
           tooltip: {
-					trigger: 'item',
+            trigger: "item",
-					formatter: '{a} <br/>{b}: {c} ({d}%)',
+            formatter: "{a} <br/>{b}: {c} ({d}%)",
           },
           color: this.colorList,
           legend: {
+            type: "scroll",
             data: titData,
-					orient: 'vertical',
+            orient: "vertical",
             // left: '60%',
-					right: '2%',
+            right: "2%",
-					y: 'center',
+            y: "center",
             textStyle: {
               //图例文字的样式
-						color: '#fff',
+              color: "#fff",
               fontSize: 16,
             },
             // formatter: value => {
@@ -122,13 +123,13 @@ export default {
           },
           series: [
             {
-						name: '概括',
+              name: "概括",
-						type: 'pie',
+              type: "pie",
-						radius: [0, '85%'],
+              radius: [0, "85%"],
-						center: ['35%', '50%'],
+              center: ["35%", "50%"],
               label: {
-							formatter: '',
+                formatter: "",
-							position: 'inner',
+                position: "inner",
                 fontSize: 14,
               },
               labelLine: {
@@ -137,21 +138,22 @@ export default {
               data: valData,
             },
           ],
-			})
+        });
-		
+      });
-			})
 
       const calcAverageValue = (data, name) => {
-				const items = data.filter(d => d.name === name)
+        const items = data.filter((d) => d.name === name);
-				return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
+        return items.length
-			}
+          ? items.reduce((a, b) => a + b.value, 0) / items.length
+          : "-";
+      };
     },
     initLine() {
       request({
-				url: '/hx/cockpitOverview/revenueProfile',
+        url: "/hx/cockpitOverview/revenueProfile",
-				method: 'get',
+        method: "get",
-			}).then(res=> {
+      }).then((res) => {
-				this.chart = echarts.init(this.$refs.left2)
+        this.chart = echarts.init(this.$refs.left2);
         let titData = [];
         let COMPLETEDREVENUE = [];
         let FORECASTREVENUE = [];
@@ -161,21 +163,28 @@ export default {
           titData.push(item.month);
           COMPLETEDREVENUE.push(item.COMPLETEDREVENUE);
           FORECASTREVENUE.push(item.FORECASTREVENUE);
-					TARGETREVENUE.push((item.COMPLETEDREVENUE/item.TARGETREVENUE * 100).toFixed(2));
+          TARGETREVENUE.push(
+            ((item.COMPLETEDREVENUE / item.TARGETREVENUE) * 100).toFixed(2)
+          );
         }
-				this.setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE)
+        this.setOptions2(
-			})
+          titData,
+          COMPLETEDREVENUE,
+          FORECASTREVENUE,
+          TARGETREVENUE
+        );
+      });
     },
-		setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE) {
+    setOptions2(titData, COMPLETEDREVENUE, FORECASTREVENUE, TARGETREVENUE) {
       this.chart.setOption({
         tooltip: {
-					trigger: 'axis',
+          trigger: "axis",
           // formatter: '{a1}<br/>{b1}：{c1}',
         },
         legend: {
-					data: ['收入', '预测', '目标完成率'],
+          data: ["收入", "预测", "目标完成率"],
           textStyle: {
-						color: '#fff', //legend字体颜色
+            color: "#fff", //legend字体颜色
           },
           // selectedMode: false,
         },
@@ -204,43 +213,43 @@ export default {
           data: titData,
           axisLine: {
             lineStyle: {
-							color: 'rgb(255, 255, 255)',
+              color: "rgb(255, 255, 255)",
             },
           },
         },
         dataZoom: {
-					type: 'slider',
+          type: "slider",
           start: 0,
-					end: this.dataZoomEnd(titData.length,7),
+          end: this.dataZoomEnd(titData.length, 7),
         },
-				color: ['#ccc', 'red'],
+        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: Math.max.apply(null, TARGETREVENUE),
             interval: 20,
             axisLabel: {
-							formatter: '{value} %',
+              formatter: "{value} %",
             },
             splitLine: {
               show: false, //不显示网格线
@@ -250,51 +259,51 @@ export default {
             },
             axisLine: {
               lineStyle: {
-								color: 'rgb(255, 255, 255)',
+                color: "rgb(255, 255, 255)",
               },
             },
           },
         ],
         series: [
           {
-						name: '预测',
+            name: "预测",
-						type: 'bar',
+            type: "bar",
-						z: '-1',
+            z: "-1",
-						barGap: '-75%',
+            barGap: "-75%",
             barWidth: 30,
             itemStyle: {
-							color: 'rgba(85, 197, 162, .3)',
+              color: "rgba(85, 197, 162, .3)",
             },
             data: FORECASTREVENUE,
           },
           {
-						name: '收入',
+            name: "收入",
-						type: 'bar',
+            type: "bar",
             barWidth: 15,
             position: [0, 0],
             itemStyle: {
-							color: 'rgba(90, 216, 166, 0.85)',
+              color: "rgba(90, 216, 166, 0.85)",
             },
             data: COMPLETEDREVENUE,
           },
           {
-						name: '目标完成率',
+            name: "目标完成率",
-						type: 'scatter',
+            type: "scatter",
-						symbol: 'rect',
+            symbol: "rect",
             symbolSize: [30, 4],
             symbolOffset: [3, 0],
             position: [0, 0],
             itemStyle: {
-							color: '#F6D97E',
+              color: "#F6D97E",
             },
             yAxisIndex: 1,
             data: TARGETREVENUE,
           },
         ],
-			})
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -357,7 +366,7 @@ export default {
     padding-left: 15px;
   }
   .tit::after {
-		content: '';
+    content: "";
     display: block;
     position: absolute;
     top: 3px;

src/views/bigScreen/information/left1.vue

@@ -10,11 +10,21 @@
         <div class="than">
           <span style="font-size: 25px; margin-right: 3px">·</span>
           <span>已完成任务/完成率</span>
-					<i class="num">{{ totalAndRate.total }}/{{ Math.floor(totalAndRate.rate * 100) / 100 }}%</i>
+          <i class="num"
+            >{{ totalAndRate.total }}/{{
+              Math.floor(totalAndRate.rate * 100) / 100
+            }}%</i
+          >
           <progressBar :percentage="totalAndRate.rate" />
         </div>
         <el-col :span="24" style="margin-bottom: 1px">
-					<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
+          <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="7">责任令</el-col>
             <el-col style="text-align: center" :span="7">部门</el-col>
@@ -32,9 +42,21 @@
           <ul class="item">
             <li v-for="item in dataList" :key="item.id">
               <el-row>
-								<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
+                <el-col style="text-align: center" :span="3">{{
-								<el-col style="text-align: center" :span="7" :title="item.responsibilityContent">{{ item.responsibilityContent }}</el-col>
+                  item.id
-								<el-col style="text-align: center" :span="7" :title="item.deptName">{{ item.deptName }}</el-col>
+                }}</el-col>
+                <el-col
+                  style="text-align: center"
+                  :span="7"
+                  :title="item.responsibilityContent"
+                  >{{ item.responsibilityContent }}</el-col
+                >
+                <el-col
+                  style="text-align: center"
+                  :span="7"
+                  :title="item.deptName"
+                  >{{ item.deptName }}</el-col
+                >
                 <el-col style="text-align: center" :span="7">
                   <section class="box">
                     <span
@@ -47,9 +69,15 @@
                       style="color: #f64f58; font-size: 25px; margin-right: 3px"
                       >·</span
                     >
-										<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
+                    <span
+                      v-else
+                      style="color: #fa8c16; font-size: 25px; margin-right: 3px"
+                      >·</span
+                    >
                     <span v-if="item.completionStatus == '已完成'">已完成</span>
-										<span v-else-if="item.completionStatus == '未完成'">未完成</span>
+                    <span v-else-if="item.completionStatus == '未完成'"
+                      >未完成</span
+                    >
                     <span v-else>进行中</span>
                   </section>
                 </el-col>
@@ -61,7 +89,10 @@
     </container2>
     <container2 title="项目工作计划" style="margin-top: 10px">
       <div slot="datePicker">
-				<bigScreenTabs v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
+        <bigScreenTabs
+          v-model="index"
+          :titleArr="['完成率', '明细']"
+        ></bigScreenTabs>
       </div>
       <el-row
         v-if="index == 0"
@@ -77,14 +108,22 @@
         <div class="than">
           <span style="font-size: 25px; margin-right: 3px">·</span>
           <span>已完成任务/完成率</span>
-					<i class="num">{{ totalAndRateTwo.total }}/{{ totalAndRateTwo.rate }}%</i>
+          <i class="num"
+            >{{ totalAndRateTwo.total }}/{{ totalAndRateTwo.rate }}%</i
+          >
           <progressBar :percentage="totalAndRateTwo.rate" />
         </div>
         <div style="height: 100%; width: 100%" ref="chart"></div>
       </el-row>
       <el-row v-else style="height: 100%; width: 100%; padding: 0 10px 0 20px">
         <el-col :span="24" style="margin-bottom: 1px">
-					<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
+          <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="7">责任令</el-col>
             <el-col style="text-align: center" :span="7">部门</el-col>
@@ -103,9 +142,21 @@
           <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" :span="3">{{
-								<el-col style="text-align: center" :title="item.workPlanName" :span="7">{{ item.workPlanName }}</el-col>
+                  item.id
-								<el-col style="text-align: center" :title="item.deptName" :span="7">{{ item.deptName }}</el-col>
+                }}</el-col>
+                <el-col
+                  style="text-align: center"
+                  :title="item.workPlanName"
+                  :span="7"
+                  >{{ item.workPlanName }}</el-col
+                >
+                <el-col
+                  style="text-align: center"
+                  :title="item.deptName"
+                  :span="7"
+                  >{{ item.deptName }}</el-col
+                >
                 <el-col style="text-align: center" :span="7">
                   <section class="box">
                     <span
@@ -118,9 +169,15 @@
                       style="color: #f64f58; font-size: 25px; margin-right: 3px"
                       >·</span
                     >
-										<span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
+                    <span
+                      v-else
+                      style="color: #fa8c16; font-size: 25px; margin-right: 3px"
+                      >·</span
+                    >
                     <span v-if="item.completedStatus == '已完成'">已完成</span>
-										<span v-else-if="item.completedStatus == '未完成'">未完成</span>
+                    <span v-else-if="item.completedStatus == '未完成'"
+                      >未完成</span
+                    >
                     <span v-else>进行中</span>
                   </section>
                 </el-col>
@@ -134,19 +191,19 @@
 </template>
 
 <script>
-import rocketTit from '../components/rocketTit/index.vue'
+import rocketTit from "../components/rocketTit/index.vue";
-import container2 from './components/container2/index.vue'
+import container2 from "./components/container2/index.vue";
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
-import vueSeamlessScroll from 'vue-seamless-scroll'
+import vueSeamlessScroll from "vue-seamless-scroll";
-import colorList from '@/utils/colorPalette'
+import colorList from "@/utils/colorPalette";
 // import {Liquid} from '@antv/g2plot';
 // import resize from '../../dashboard/mixins/resize'
-import echarts from 'echarts'
+import echarts from "echarts";
-require('echarts/theme/macarons') // echarts theme
+require("echarts/theme/macarons"); // echarts theme
 export default {
   // mixins: [resize],
-	name: 'left1',
+  name: "left1",
   components: {
     rocketTit,
     container2,
@@ -158,12 +215,12 @@ export default {
     return {
       dataList: [],
       totalAndRate: {
-        total:0,
+        total: 0,
-        rate:0
+        rate: 0,
       },
       totalAndRateTwo: {
-        total:0,
+        total: 0,
-        rate:0
+        rate: 0,
       },
       index: 0,
       chart: null,
@@ -201,81 +258,81 @@ export default {
       // 		status: 3,
       // 	},
       // ],
-		}
+    };
   },
   watch: {
     index(newVal, oldVal) {
       if (newVal == 0) {
         this.$nextTick(() => {
-					this.initChart()
+          this.initChart();
-				})
+        });
       } else {
-				this.getData2()
+        this.getData2();
       }
     },
   },
   mounted() {
     this.$nextTick(() => {
-			this.initChart()
+      this.initChart();
-		})
+    });
   },
   beforeDestroy() {},
   methods: {
     getData() {
       this.request({
-				url: '/hx/informationManagement/getHxResponsibilityStatusPic',
+        url: "/hx/informationManagement/getHxResponsibilityStatusPic",
-				method: 'get',
+        method: "get",
       }).then(({ data }) => {
-				this.dataList = data.list
+        this.dataList = data.list;
-				this.totalAndRate = data.totalAndRate
+        this.totalAndRate = data.totalAndRate;
-				this.$refs.seamlessScroll.reset()
+        this.$refs.seamlessScroll.reset();
-			})
+      });
     },
     getData2() {
       this.request({
-				url: '/hx/informationManagement/getHxWorkPlanPic',
+        url: "/hx/informationManagement/getHxWorkPlanPic",
-				method: 'get',
+        method: "get",
         params: {
-					type: '2',
+          type: "2",
         },
       }).then(({ data }) => {
-				this.listData = data.list
+        this.listData = data.list;
-				this.$refs.seamlessScroll2.reset()
+        this.$refs.seamlessScroll2.reset();
-			})
+      });
     },
     initChart() {
       this.request({
-				url: '/hx/informationManagement/getHxWorkPlanPic',
+        url: "/hx/informationManagement/getHxWorkPlanPic",
-				method: 'get',
+        method: "get",
         params: {
-					type: '1',
+          type: "1",
         },
       }).then(({ data }) => {
-				this.totalAndRateTwo = data.totalAndRate
+        this.totalAndRateTwo = data.totalAndRate;
-				this.chart = echarts.init(this.$refs.chart)
+        this.chart = echarts.init(this.$refs.chart);
-				this.setOptions(data.list)
+        this.setOptions(data.list);
-			})
+      });
     },
     setOptions(resData) {
       // console.log(resData)
-			let titList = []
+      let titList = [];
-			let rate = []
+      let rate = [];
-			let completedNum = []
+      let completedNum = [];
       for (let i = 0; i < resData.length; i++) {
-				const item = resData[i]
+        const item = resData[i];
-				titList.push(item.name)
+        titList.push(item.name);
-				rate.push(item.value.rate)
+        rate.push(item.value.rate);
-				completedNum.push(item.value.completedNum)
+        completedNum.push(item.value.completedNum);
       }
       this.chart.setOption({
         tooltip: {
-					trigger: 'axis',
+          trigger: "axis",
           // formatter: '{a1}<br/>{b1}：{c1}',
         },
         legend: {
-					data: ['数量', '完成率'],
+          data: ["数量", "完成率"],
           textStyle: {
-						color: '#fff', //legend字体颜色
+            color: "#fff", //legend字体颜色
           },
           // selectedMode: false,
         },
@@ -284,49 +341,52 @@ export default {
           left: 20,
           right: 10,
           top: 30,
-					bottom: 10,
+          bottom: 50,
         },
         xAxis: {
           data: titList,
           axisLine: {
             lineStyle: {
-							color: 'rgb(255, 255, 255)',
+              color: "rgb(255, 255, 255)",
             },
           },
         },
-				// dataZoom: {
+        dataZoom: {
-				// 	type: 'slider',
+          type: "slider",
-				// 	start: 0,
+          start: 0,
-				// 	end: 50,
+          end: this.dataZoomEnd(titList.length, 5),
-				// },
+          textStyle: {
-				color: ['#ccc', 'red'],
+            color: "#fff",
+          },
+        },
+        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, //不显示网格线
@@ -336,21 +396,21 @@ export default {
             },
             axisLine: {
               lineStyle: {
-								color: 'rgb(255, 255, 255)',
+                color: "rgb(255, 255, 255)",
               },
             },
           },
         ],
         series: [
           {
-						name: '数量',
+            name: "数量",
-						type: 'bar',
+            type: "bar",
             barWidth: 30,
             position: [0, 0],
             data: completedNum,
             itemStyle: {
               color: {
-								type: 'linear', // 线性渐变
+                type: "linear", // 线性渐变
                 x: 0,
                 y: 0,
                 x2: 0,
@@ -358,37 +418,37 @@ export default {
                 colorStops: [
                   {
                     offset: 0,
-										color: '#B5D3FE',
+                    color: "#B5D3FE",
                   },
                   {
                     offset: 1,
-										color: '#7EA7FC',
+                    color: "#7EA7FC",
                   },
                 ],
               },
             },
           },
           {
-						name: '完成率',
+            name: "完成率",
-						type: 'scatter',
+            type: "scatter",
-						symbol: 'rect',
+            symbol: "rect",
             symbolSize: [30, 4],
             symbolOffset: [0, 0],
             position: [0, 0],
             yAxisIndex: 1,
             itemStyle: {
-							color: '#F6D97E',
+              color: "#F6D97E",
             },
             data: rate,
           },
         ],
-			})
+      });
     },
   },
   created() {
-		this.getData()
+    this.getData();
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -480,7 +540,7 @@ export default {
     padding-left: 15px;
   }
   .tit::after {
-		content: '';
+    content: "";
     display: block;
     position: absolute;
     top: 3px;

src/views/bigScreen/management/right1.vue

@@ -1,49 +1,92 @@
 <template>
   <div>
     <container2 title="综合计划/绩效计划">
-      <bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
+      <bigScreenTabs
+        slot="datePicker"
+        v-model="index"
+        :titleArr="['完成率', '明细']"
+      ></bigScreenTabs>
       <div style="display: flex; height: 100%" v-if="index == 0">
         <div style="height: 100%; width: 75%" ref="chart"></div>
-        <div style="
+        <div
+          style="
             height: 100%;
             width: 25%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-					">
+          "
-          <el-date-picker v-model="month" value-format="yyyy-MM" v-if="index == 0" type="month" size="mini" placeholder="选择月">
+        >
+          <el-date-picker
+            v-model="month"
+            value-format="yyyy-MM"
+            v-if="index == 0"
+            type="month"
+            size="mini"
+            placeholder="选择月"
+          >
           </el-date-picker>
-          <div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">综合完成率</span></div>
+          <div class="box">
-          <progressBar :percentage="rate.comprehensiveRate" style="margin: 10px 0 20px" />
+            <span style="font-size: 25px">·</span
-          <i class="num">{{rate.comprehensiveRate.toFixed(2) || 0}}%</i>
+            ><span style="font-size: 18px">综合完成率</span>
-          <div style="height:10px"></div>
+          </div>
-          <div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">绩效完成率</span></div>
+          <progressBar
-          <progressBar :percentage="rate.performanceRate" style="margin: 10px 0 20px" />
+            :percentage="rate.comprehensiveRate"
-          <i class="num">{{rate.performanceRate.toFixed(2) || 0}}%</i>
+            style="margin: 10px 0 20px"
+          />
+          <i class="num">{{ rate.comprehensiveRate.toFixed(2) || 0 }}%</i>
+          <div style="height: 10px"></div>
+          <div class="box">
+            <span style="font-size: 25px">·</span
+            ><span style="font-size: 18px">绩效完成率</span>
+          </div>
+          <progressBar
+            :percentage="rate.performanceRate"
+            style="margin: 10px 0 20px"
+          />
+          <i class="num">{{ rate.performanceRate.toFixed(2) || 0 }}%</i>
         </div>
       </div>
       <div style="display: flex; height: 100%" v-else>
         <div style="height: 100%; width: 75%" ref="chart2"></div>
-        <div style="
+        <div
+          style="
             height: 100%;
             width: 25%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-					">
+          "
-          <div class="box"><span style="font-size: 25px">·</span><span style="font-size: 18px">总体完成率</span></div>
+        >
+          <div class="box">
+            <span style="font-size: 25px">·</span
+            ><span style="font-size: 18px">总体完成率</span>
+          </div>
           <progressBar :percentage="80" style="margin: 10px 0 20px" />
           <i class="num">80%</i>
         </div>
       </div>
     </container2>
     <container2 title="信息公示" style="margin-top: 10px">
-      <bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['民用产业项目信息', '信息公示']"></bigScreenTabs>
+      <bigScreenTabs
-      <el-row style="height: 100%; width: 100%; padding: 0 10px 0 20px" v-show="index2 == 0">
+        slot="datePicker"
+        v-model="index2"
+        :titleArr="['民用产业项目信息', '信息公示']"
+      ></bigScreenTabs>
+      <el-row
+        style="height: 100%; width: 100%; padding: 0 10px 0 20px"
+        v-show="index2 == 0"
+      >
         <el-col :span="24" style="margin-bottom: 1px">
-          <el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
+          <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>
@@ -51,22 +94,51 @@
             <el-col style="text-align: center" :span="4">完成情况</el-col>
           </el-row>
         </el-col>
-        <vue-seamless-scroll ref="seamlessScroll1" :data="listData" class="warp-scroll" :class-option="{
+        <vue-seamless-scroll
+          ref="seamlessScroll1"
+          :data="listData"
+          class="warp-scroll"
+          :class-option="{
             singleHeight: 43,
-					}" style="height: 168px">
+          }"
+          style="height: 168px"
+        >
           <ul class="item">
             <li v-for="item in scrollList1" :key="item.id">
               <el-row>
-                <el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
+                <el-col style="text-align: center" :span="3">{{
-                <el-col style="text-align: center" :title="item.projectName" :span="5">{{item.projectName}}</el-col>
+                  item.id
-                <el-col style="text-align: center" :span="5"> {{item.director}} </el-col>
+                }}</el-col>
-                <el-col style="text-align: center" :span="7">{{item.deptName}} </el-col>
+                <el-col
+                  style="text-align: center"
+                  :title="item.projectName"
+                  :span="5"
+                  >{{ item.projectName }}</el-col
+                >
+                <el-col style="text-align: center" :span="5">
+                  {{ item.director }}
+                </el-col>
+                <el-col style="text-align: center" :span="7"
+                  >{{ item.deptName }}
+                </el-col>
                 <el-col style="text-align: center" :span="4">
                   <section class="box">
-                    <span v-if="item.completedStatus == '已完成'" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
+                    <span
-                    <span v-else-if="item.completedStatus == '未完成'" style="color: #f64f58; font-size: 25px; margin-right: 3px">·</span>
+                      v-if="item.completedStatus == '已完成'"
-                    <span v-else style="color: #fa8c16; font-size: 25px; margin-right: 3px">·</span>
+                      style="color: #6fd1b4; font-size: 25px; margin-right: 3px"
-                    <span>{{item.completedStatus}}</span>
+                      >·</span
+                    >
+                    <span
+                      v-else-if="item.completedStatus == '未完成'"
+                      style="color: #f64f58; font-size: 25px; margin-right: 3px"
+                      >·</span
+                    >
+                    <span
+                      v-else
+                      style="color: #fa8c16; font-size: 25px; margin-right: 3px"
+                      >·</span
+                    >
+                    <span>{{ item.completedStatus }}</span>
                   </section>
                 </el-col>
               </el-row>
@@ -74,25 +146,51 @@
           </ul>
         </vue-seamless-scroll>
       </el-row>
-      <el-row style="height: 100%; width: 100%; padding: 0 10px 0 20px" v-show="index2 == 1">
+      <el-row
+        style="height: 100%; width: 100%; padding: 0 10px 0 20px"
+        v-show="index2 == 1"
+      >
         <el-col :span="24" style="margin-bottom: 1px">
-          <el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
+          <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="7">部门</el-col>
             <el-col style="text-align: center" :span="7">公示内容</el-col>
             <el-col style="text-align: center" :span="7">时间</el-col>
           </el-row>
         </el-col>
-        <vue-seamless-scroll ref="seamlessScroll2" :data="listData" class="warp-scroll" :class-option="{
+        <vue-seamless-scroll
+          ref="seamlessScroll2"
+          :data="listData"
+          class="warp-scroll"
+          :class-option="{
             singleHeight: 43,
-					}" style="height: 168px">
+          }"
+          style="height: 168px"
+        >
           <ul class="item">
             <li v-for="item in scrollList2" :key="item.id">
               <el-row>
-                <el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
+                <el-col style="text-align: center" :span="3">{{
-                <el-col style="text-align: center" :span="7">{{item.deptName}}</el-col>
+                  item.id
-                <el-col style="text-align: center" :title="item.publicityContent" :span="7">{{item.publicityContent}}</el-col>
+                }}</el-col>
-                <el-col style="text-align: center" :span="7">{{item.todayDate}}</el-col>
+                <el-col style="text-align: center" :span="7">{{
+                  item.deptName
+                }}</el-col>
+                <el-col
+                  style="text-align: center"
+                  :title="item.publicityContent"
+                  :span="7"
+                  >{{ item.publicityContent }}</el-col
+                >
+                <el-col style="text-align: center" :span="7">{{
+                  item.todayDate
+                }}</el-col>
               </el-row>
             </li>
           </ul>
@@ -103,19 +201,19 @@
 </template>
 
 <script>
-import rocketTit from '../components/rocketTit/index.vue'
+import rocketTit from "../components/rocketTit/index.vue";
-import container2 from './components/container2/index.vue'
+import container2 from "./components/container2/index.vue";
-import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
-import progressBar from '@/views/bigScreen/components/progress/index.vue'
+import progressBar from "@/views/bigScreen/components/progress/index.vue";
-import vueSeamlessScroll from 'vue-seamless-scroll'
+import vueSeamlessScroll from "vue-seamless-scroll";
-import colorList from '@/utils/colorPalette'
+import colorList from "@/utils/colorPalette";
 // import {Liquid} from '@antv/g2plot';
 // import resize from '../../dashboard/mixins/resize'
-import echarts from 'echarts'
+import echarts from "echarts";
-require('echarts/theme/macarons') // echarts theme
+require("echarts/theme/macarons"); // echarts theme
 export default {
   // mixins: [resize],
-  name: 'right1',
+  name: "right1",
   components: {
     rocketTit,
     container2,
@@ -123,7 +221,7 @@ export default {
     progressBar,
     vueSeamlessScroll,
   },
-  data () {
+  data() {
     return {
       rate: {
         comprehensiveRate: 0,
@@ -137,47 +235,48 @@ export default {
       listData: [1, 2, 3, 4, 5, 6, 7, 8],
       scrollList1: [],
       scrollList2: [],
-      month: '',
+      month: "",
-    }
+    };
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.initChart()
+      this.initChart();
       this.getData(1);
-    })
+    });
   },
-  beforeDestroy () { },
+  beforeDestroy() {},
   watch: {
-    month (newVal) {
+    month(newVal) {
-      this.initChart(newVal)
+      this.initChart(newVal);
     },
-    index (newVal, oldVal) {
+    index(newVal, oldVal) {
       if (newVal == 0) {
-        this.chart2.dispose()
+        this.chart2.dispose();
-        this.chart2 = null
+        this.chart2 = null;
         this.$nextTick(() => {
-          this.initChart()
+          this.initChart();
-        })
+        });
       } else {
-        this.chart.dispose()
+        this.chart.dispose();
-        this.chart = null
+        this.chart = null;
         this.$nextTick(() => {
-          this.initLine()
+          this.initLine();
-        })
+        });
       }
     },
-    index2 (newVal, oldVal) {
+    index2(newVal, oldVal) {
       this.getData(1 + newVal);
     },
   },
   methods: {
-    getData (type) {
+    getData(type) {
       this.request({
-        url: '/hx/operating/getInformationPublicityPic',
+        url: "/hx/operating/getInformationPublicityPic",
-        method: 'get',
+        method: "get",
-        params: { type: type }
+        params: { type: type },
-      }).then(res => {
+      }).then((res) => {
         if (200 == res.code) {
+          console.log(res);
           if (type == 1) {
             this.scrollList1 = res.data.list;
             this.listData = Array(this.scrollList1.length).fill(0);
@@ -189,39 +288,39 @@ export default {
           }
           //   this.resData = res.data;
         }
-      })
+      });
     },
-    initChart (month) {
+    initChart(month) {
       let params = { type: 1 };
       if (month) {
-        params['month'] = month
+        params["month"] = month;
       }
       if (this.chart) {
         this.chart.dispose();
         this.chart = null;
       }
       this.request({
-        url: '/hx/operating/getComprehensivePlanPic',
+        url: "/hx/operating/getComprehensivePlanPic",
-        method: 'get',
+        method: "get",
-        params: params
+        params: params,
-      }).then(res => {
+      }).then((res) => {
         if (200 == res.code) {
           let { rate, list } = res.data;
           if (rate) {
             this.rate = rate;
           }
-          this.chart = echarts.init(this.$refs.chart)
+          this.chart = echarts.init(this.$refs.chart);
           this.chart.setOption({
             tooltip: {
-              trigger: 'axis',
+              trigger: "axis",
               axisPointer: {
-                type: 'shadow',
+                type: "shadow",
               },
             },
             legend: {
-              data: ['综合', '绩效'],
+              data: ["综合", "绩效"],
               textStyle: {
-                color: '#fff', //legend字体颜色
+                color: "#fff", //legend字体颜色
               },
             },
             grid: {
@@ -232,49 +331,49 @@ export default {
               containLabel: true,
             },
             dataZoom: {
-              type: 'slider',
+              type: "slider",
               start: 0,
               end: this.dataZoomEnd(list.length, 5),
               textStyle: {
-                color: '#fff',
+                color: "#fff",
               },
             },
             xAxis: [
               {
-                type: 'category',
+                type: "category",
-                data: list.map(e => e.deptName),
+                data: list.map((e) => e.deptName),
                 // 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",
                 axisLabel: {
-                  formatter: '{value} %',
+                  formatter: "{value} %",
                 },
                 splitLine: {
                   show: false, //不显示网格线
@@ -284,38 +383,38 @@ export default {
                 },
                 axisLine: {
                   lineStyle: {
-                    color: 'rgb(255, 255, 255)',
+                    color: "rgb(255, 255, 255)",
                   },
                 },
               },
             ],
             series: [
               {
-                name: '绩效',
+                name: "绩效",
-                type: 'bar',
+                type: "bar",
-                stack: 'Ad',
+                stack: "Ad",
                 emphasis: {
-                  focus: 'series',
+                  focus: "series",
                 },
                 itemStyle: {
-                  color: '#F64F58',
+                  color: "#F64F58",
                 },
                 barWidth: 30,
-                data: list.map(e => e.performancePlanCompleted),
+                data: list.map((e) => e.performancePlanCompleted),
                 // data: [150, 232, 201, 154, 190, 330, 410],
               },
               {
-                name: '综合',
+                name: "综合",
-                type: 'bar',
+                type: "bar",
-                stack: 'Ad',
+                stack: "Ad",
                 emphasis: {
-                  focus: 'series',
+                  focus: "series",
                 },
                 itemStyle: {
-                  color: '#F6D97E',
+                  color: "#F6D97E",
                 },
                 barWidth: 30,
-                data: list.map(e => e.comprehensivePlanCompleted),
+                data: list.map((e) => e.comprehensivePlanCompleted),
                 // data: [150, 232, 201, 154, 190, 330, 410],
               },
               //   {
@@ -339,29 +438,28 @@ export default {
               //     symbol: 'none',
               //   },
             ],
-          })
+          });
-
         }
-      })
+      });
     },
     // setOptions () {
     //   },
-    initLine () {
+    initLine() {
-      this.chart2 = echarts.init(this.$refs.chart2)
+      this.chart2 = echarts.init(this.$refs.chart2);
-      this.setOptions2()
+      this.setOptions2();
     },
-    setOptions2 () {
+    setOptions2() {
       this.chart2.setOption({
         tooltip: {
-          trigger: 'axis',
+          trigger: "axis",
           axisPointer: {
-            type: 'shadow',
+            type: "shadow",
           },
         },
         legend: {
-          data: ['综合', '绩效'],
+          data: ["综合", "绩效"],
           textStyle: {
-            color: '#fff', //legend字体颜色
+            color: "#fff", //legend字体颜色
           },
         },
         grid: {
@@ -372,48 +470,56 @@ export default {
           containLabel: true,
         },
         dataZoom: {
-          type: 'slider',
+          type: "slider",
           start: 0,
           end: 50,
         },
         xAxis: [
           {
-            type: 'category',
+            type: "category",
-            data: ['部门一', '部门二', '部门三', '部门四', '部门五', '部门六', '部门七'],
+            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",
             min: 0,
             max: 100,
             interval: 20,
             axisLabel: {
-              formatter: '{value} %',
+              formatter: "{value} %",
             },
             splitLine: {
               show: false, //不显示网格线
@@ -423,47 +529,47 @@ export default {
             },
             axisLine: {
               lineStyle: {
-                color: 'rgb(255, 255, 255)',
+                color: "rgb(255, 255, 255)",
               },
             },
           },
         ],
         series: [
           {
-            name: '绩效',
+            name: "绩效",
-            type: 'bar',
+            type: "bar",
-            stack: 'Ad',
+            stack: "Ad",
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
             itemStyle: {
-              color: '#F64F58',
+              color: "#F64F58",
             },
             barWidth: 30,
             data: [150, 232, 201, 154, 190, 330, 410],
           },
           {
-            name: '综合',
+            name: "综合",
-            type: 'bar',
+            type: "bar",
-            stack: 'Ad',
+            stack: "Ad",
             emphasis: {
-              focus: 'series',
+              focus: "series",
             },
             itemStyle: {
-              color: '#F6D97E',
+              color: "#F6D97E",
             },
             barWidth: 30,
             data: [150, 232, 201, 154, 190, 330, 410],
           },
           {
-            name: '完成率',
+            name: "完成率",
-            type: 'scatter',
+            type: "scatter",
-            symbol: 'rect',
+            symbol: "rect",
             symbolSize: [30, 4],
             symbolOffset: [0, 0],
             position: [0, 0],
             itemStyle: {
-              color: '#7EA7FC',
+              color: "#7EA7FC",
             },
             data: [600, 650, 700, 750, 800, 750, 700],
           },
@@ -488,10 +594,10 @@ export default {
           // 	symbol: 'none',
           // },
         ],
-      })
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>

src/views/bigScreen/qualityManage/center.vue

@@ -14,13 +14,17 @@
         <div class="data-item">
           <div><span style="font-weight: bold">产品合格率</span></div>
           <div class="box">
-						<span>{{ dataInfo.productCate }}%</span>
+            <span>{{ dataInfo.productCate || 0 }}%</span>
+          </div>
+          <div style="width: 100%">
+            <progressBar :percentage="dataInfo.productCate" />
           </div>
-					<div style="width: 100%"><progressBar :percentage="dataInfo.productCate" /></div>
         </div>
         <div class="data-item">
           <div><span style="font-weight: bold">一般性质量问题数量</span></div>
-					<div class="box" style="font-size: 18px"><span style="color: #55c5a2; margin: 0 5px">↓</span>20%</div>
+          <div class="box" style="font-size: 18px">
+            <span style="color: #55c5a2; margin: 0 5px">↓</span>20%
+          </div>
           <div class="box">
             <i>{{ dataInfo.commonlyProblemTotal }}</i
             ><span class="num2"></span>
@@ -36,26 +40,34 @@
         <div class="data-item">
           <div><span style="font-weight: bold">小型产品合格率</span></div>
           <div class="box">
-						<span>{{ dataInfo.smallProductCate }}</span
+            <span>{{ dataInfo.smallProductCate || 0 }}</span
             >%
           </div>
-					<div style="width: 100%"><progressBar :percentage="dataInfo.smallProductCate" /></div>
+          <div style="width: 100%">
+            <progressBar :percentage="dataInfo.smallProductCate" />
+          </div>
         </div>
         <div class="data-item">
-					<div><span style="font-weight: bold">产品错/漏检率</span></div>
+          <div><span style="font-weight: bold">产品错、漏检率</span></div>
           <div class="box">
-						<span>{{ dataInfo.errorCheckRate }}%/{{ dataInfo.leakCheckRate }}%</span>
+            <span
+              >{{ dataInfo.errorCheckRate.toFixed(2) }}%/{{
+                dataInfo.leakCheckRate.toFixed(2)
+              }}%</span
+            >
           </div>
         </div>
         <div class="data-item">
           <div><span style="font-weight: bold">质量计划完成率</span></div>
           <div class="box">
-						<span>{{ dataInfo.planCompleteRate }}</span
+            <span>{{ dataInfo.planCompleteRate.toFixed(2) }}</span
             >%<span style="color: #55c5a2; margin: 0 5px; font-size: 16px">{{
               dataInfo.qualityPlanCompleteTotal
             }}</span>
           </div>
-					<div style="width: 100%"><progressBar :percentage="dataInfo.planCompleteRate" /></div>
+          <div style="width: 100%">
+            <progressBar :percentage="dataInfo.planCompleteRate" />
+          </div>
         </div>
         <div class="data-item">
           <div><span style="font-weight: bold">质量检查完成率</span></div>
@@ -65,7 +77,9 @@
               dataInfo.qualityNotificationCompleteTotal
             }}</span>
           </div>
-					<div style="width: 100%"><progressBar :percentage="dataInfo.checkCompleteRate" /></div>
+          <div style="width: 100%">
+            <progressBar :percentage="dataInfo.checkCompleteRate" />
+          </div>
         </div>
       </div>
     </center1>
@@ -73,16 +87,16 @@
 </template>
 
 <script>
-import center1 from './components/center1/index.vue'
+import center1 from "./components/center1/index.vue";
-import rocketTit from '../components/rocketTit/index.vue'
+import rocketTit from "../components/rocketTit/index.vue";
-import progressBar from './../components/progress/index.vue'
+import progressBar from "./../components/progress/index.vue";
 
-import echarts from 'echarts'
+import echarts from "echarts";
-require('echarts/theme/macarons') // echarts theme
+require("echarts/theme/macarons"); // echarts theme
-import resize from '../../dashboard/mixins/resize'
+import resize from "../../dashboard/mixins/resize";
 export default {
   mixins: [resize],
-	name: 'left1',
+  name: "left1",
   components: {
     center1,
     rocketTit,
@@ -104,28 +118,28 @@ export default {
         checkCompleteRate: 0,
         qualityNotificationCompleteTotal: 0,
       },
-		}
+    };
   },
   computed: {
     percentage() {
-			return Math.floor(this.dataInfo.rectificationRate * 100) / 100 || 0
+      return Math.floor(this.dataInfo.rectificationRate * 100) / 100 || 0;
     },
   },
   mounted() {
-		this.getData()
+    this.getData();
   },
   beforeDestroy() {},
   methods: {
     getData() {
       this.request({
-				url: '/hx/qualityAssurance/getQualityManage',
+        url: "/hx/qualityAssurance/getQualityManage",
-				method: 'get',
+        method: "get",
       }).then(({ data }) => {
-				this.dataInfo = data
+        this.dataInfo = data;
-			})
+      });
     },
   },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -208,13 +222,13 @@ export default {
       }
     }
     .con_title_bg1 {
-			background: url('./img/left1/1.png') no-repeat;
+      background: url("./img/left1/1.png") no-repeat;
     }
     .con_title_bg2 {
-			background: url('./img/left1/2.png') no-repeat;
+      background: url("./img/left1/2.png") no-repeat;
     }
     .con_title_bg3 {
-			background: url('./img/left1/3.png') no-repeat;
+      background: url("./img/left1/3.png") no-repeat;
     }
     .com_img {
       margin-top: 5px;

src/views/bigScreen/securityManage/center.vue

@@ -1,29 +1,57 @@
 <template>
   <div>
     <container3>
-      <img v-if="pic.length" class="img" :src="pic" style="width: 100%; height: 100%">
+      <img
-      <img v-else class="img" src="./center.png" style="width: 100%; height: 100%" />
+        v-if="pic.length"
-      <section v-for="(v,index) in points" :key="index">
+        class="img"
-        <div v-if="v.level == '一级'" class="con_right" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
+        :src="pic"
+        style="width: 100%; height: 100%"
+      />
+      <img
+        v-else
+        class="img"
+        src="./center.png"
+        style="width: 100%; height: 100%"
+      />
+      <section v-for="(v, index) in points" :key="index">
+        <div
+          v-if="v.level == '一级'"
+          class="con_right"
+          :style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
+        >
           <div class="con_title con_title_bg1">
             <img src="./img/left1/icon.png" alt="" />
-            <span style="margin-left: 2px">一级：{{v.pointName}}</span>
+            <span style="margin-left: 2px">一级：{{ v.pointName }}</span>
           </div>
-          <div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon1.png" alt="" /></div>
+          <div class="com_img" @click="handleItem(v)">
+            <img src="./img/left1/icon1.png" alt="" />
           </div>
-        <div v-if="v.level == '二级'" class="con_right con_two" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
+        </div>
+        <div
+          v-if="v.level == '二级'"
+          class="con_right con_two"
+          :style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
+        >
           <div class="con_title con_title_bg2">
             <img src="./img/left1/icon.png" alt="" />
-            <span style="margin-left: 2px">二级：{{v.pointName}}</span>
+            <span style="margin-left: 2px">二级：{{ v.pointName }}</span>
           </div>
-          <div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon2.png" alt="" /></div>
+          <div class="com_img" @click="handleItem(v)">
+            <img src="./img/left1/icon2.png" alt="" />
           </div>
-        <div v-if="v.level == '三级'" class="con_right con_three" :style="{top: v.ordinate +' %',left: v.abscissa + '%'}">
+        </div>
+        <div
+          v-if="v.level == '三级'"
+          class="con_right con_three"
+          :style="{ top: v.ordinate + '%', left: v.abscissa + '%' }"
+        >
           <div class="con_title con_title_bg3">
             <img src="./img/left1/icon.png" alt="" />
-          <span style="margin-left: 2px">三级：{{v.pointName}}</span>
+            <span style="margin-left: 2px">三级：{{ v.pointName }}</span>
+          </div>
+          <div class="com_img" @click="handleItem(v)">
+            <img src="./img/left1/icon3.png" alt="" />
           </div>
-        <div class="com_img" @click="handleItem(v)"><img src="./img/left1/icon3.png" alt="" /></div>
         </div>
       </section>
       <!-- <div class="con_right">
@@ -49,23 +77,47 @@
       </div> -->
       <div class="data">
         <div class="data-item">
-          <div><span style="font-weight: bold">一级危险点/危险源数量</span></div>
+          <div>
-          <div class="box"><i>{{getItem(pointLevelCount,'一级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'一级').COUNTNUMBER}}</i><span
+            <span style="font-weight: bold">一级危险点/危险源数量</span>
-              class="num2">个</span></div>
+          </div>
+          <div class="box">
+            <i
+              >{{ getItem(pointLevelCount, "一级").COUNTNUMBER }}/{{
+                getItem(sourceLevelCount, "一级").COUNTNUMBER
+              }}</i
+            ><span class="num2">个</span>
+          </div>
         </div>
         <div class="data-item">
-          <div><span style="font-weight: bold">二级危险点/危险源数量</span></div>
+          <div>
-          <div class="box"><i>{{getItem(pointLevelCount,'二级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'二级').COUNTNUMBER}}</i><span
+            <span style="font-weight: bold">二级危险点/危险源数量</span>
-              class="num2">个</span></div>
+          </div>
+          <div class="box">
+            <i
+              >{{ getItem(pointLevelCount, "二级").COUNTNUMBER }}/{{
+                getItem(sourceLevelCount, "二级").COUNTNUMBER
+              }}</i
+            ><span class="num2">个</span>
+          </div>
         </div>
         <div class="data-item">
-          <div><span style="font-weight: bold">三级危险点/危险源数量</span></div>
+          <div>
-          <div class="box"><i>{{getItem(pointLevelCount,'三级').COUNTNUMBER}}/{{getItem(sourceLevelCount,'三级').COUNTNUMBER}}</i><span
+            <span style="font-weight: bold">三级危险点/危险源数量</span>
-              class="num2">个</span></div>
+          </div>
+          <div class="box">
+            <i
+              >{{ getItem(pointLevelCount, "三级").COUNTNUMBER }}/{{
+                getItem(sourceLevelCount, "三级").COUNTNUMBER
+              }}</i
+            ><span class="num2">个</span>
+          </div>
         </div>
         <div class="data-item">
           <div><span style="font-weight: bold">四级危险源数量</span></div>
-          <div class="box"><i>{{getItem(sourceLevelCount,'四级').COUNTNUMBER}}</i><span class="num2">个</span></div>
+          <div class="box">
+            <i>{{ getItem(sourceLevelCount, "四级").COUNTNUMBER }}</i
+            ><span class="num2">个</span>
+          </div>
         </div>
       </div>
     </container3>
@@ -73,70 +125,70 @@
 </template>
 
 <script>
-import container3 from '../components/container3/index.vue'
+import container3 from "../components/container3/index.vue";
-import rocketTit from '../components/rocketTit/index.vue'
+import rocketTit from "../components/rocketTit/index.vue";
-import progressBar from './../components/progress/index.vue'
+import progressBar from "./../components/progress/index.vue";
 
-import echarts from 'echarts'
+import echarts from "echarts";
-require('echarts/theme/macarons') // echarts theme
+require("echarts/theme/macarons"); // echarts theme
-import resize from '../../dashboard/mixins/resize'
+import resize from "../../dashboard/mixins/resize";
 export default {
   mixins: [resize],
-  name: 'left1',
+  name: "left1",
   components: {
     container3,
     rocketTit,
     progressBar,
   },
-  data () {
+  data() {
     return {
-      pic: '',
+      pic: "",
       pointLevelCount: [
         {
-          "name": "二级",
+          name: "二级",
-          "COUNTNUMBER": 0
+          COUNTNUMBER: 0,
         },
         {
-          "name": "三级",
+          name: "三级",
-          "COUNTNUMBER": 0
+          COUNTNUMBER: 0,
         },
         {
-          "name": "一级",
+          name: "一级",
-          "COUNTNUMBER": 0
+          COUNTNUMBER: 0,
-        }
+        },
       ],
       sourceLevelCount: [
         {
-          "name": "二级",
+          name: "二级",
-          "COUNTNUMBER": 0
+          COUNTNUMBER: 0,
         },
         {
-          "name": "三级",
+          name: "三级",
-          "COUNTNUMBER": 0
+          COUNTNUMBER: 0,
         },
         {
-          "name": "四级",
+          name: "四级",
-          "COUNTNUMBER": 0
+          COUNTNUMBER: 0,
         },
         {
-          "name": "一级",
+          name: "一级",
-          "COUNTNUMBER": 0
+          COUNTNUMBER: 0,
-        }
+        },
       ],
-      points: []
+      points: [],
-    }
+    };
   },
-  mounted () {
+  mounted() {
     this.$nextTick(() => {
-      this.getData()
+      this.getData();
       // this.initChart3()
-    })
+    });
   },
   methods: {
     handleItem(item) {
       this.$bus.emit("getTarget", item);
     },
-    getItem (list, name) {
+    getItem(list, name) {
       for (let index = 0; index < list.length; index++) {
         const item = list[index];
         if (name == item.name) {
@@ -144,33 +196,33 @@ export default {
         }
       }
     },
-    getData () {
+    getData() {
       this.request({
-        url: '/hx/securityManagement/dangerousMap',
+        url: "/hx/securityManagement/dangerousMap",
-        method: 'get',
+        method: "get",
-      }).then(res => {
+      }).then((res) => {
         if (200 == res.code) {
           this.pointLevelCount = res.data.pointLevelCount;
           this.sourceLevelCount = res.data.sourceLevelCount;
           this.points = res.data.points;
         }
-      })
+      });
       this.request({
-        url: '/hx/bigPic/getByType',
+        url: "/hx/bigPic/getByType",
-        method: 'get',
+        method: "get",
-        params: { type: 1}
+        params: { type: 1 },
-      }).then(res => {
+      }).then((res) => {
         if (200 == res.code) {
           this.pic = res.data.pic;
         }
-      })
+      });
-    }
+    },
   },
   beforeDestroy() {
     //销毁监听事件
     this.$bus.off("getTarget");
-  }
+  },
-}
+};
 </script>
 
 <style lang="scss" scoped>
@@ -228,6 +280,9 @@ export default {
 .container3 {
   position: relative;
   .con_right {
+    &:hover {
+      z-index: 10;
+    }
     width: 138px;
     position: absolute;
     top: 41%;