up

src/views/bigScreen/components/scaleBox.vue

@@ -70,16 +70,16 @@ export default {
 #ScaleBox {
   --scale: 1;
 }
-// .ScaleBox {
+.ScaleBox {
-// 	position: absolute;
+  position: absolute;
-// 	transform: scale(var(--scale)) translate(-50%, -50%);
+  transform: scale(var(--scale)) translate(-50%, -50%);
-// 	display: flex;
+  display: flex;
-// 	flex-direction: column;
+  flex-direction: column;
-// 	transform-origin: 0 0;
+  transform-origin: 0 0;
-// 	left: 50%;
+  left: 50%;
-// 	top: 50%;
+  top: 50%;
-// 	transition: 0.3s;
+  transition: 0.3s;
-// 	z-index: 999;
+  z-index: 999;
-// 	// background: rgba(255, 0, 0, 0.3);
+  // background: rgba(255, 0, 0, 0.3);
-// }
+}
 </style>

src/views/bigScreen/drivingCabin/center.vue

@@ -22,10 +22,9 @@
             >
           </div>
           <div class="box">
-            <!-- <i>{{ handleMillion(val.completedIncome) }}/</i
+            <i>{{ handleMillion(val.completedIncome) }}/</i
             ><i class="num">{{ handleMillion(val.targetIncome) }}</i
-            ><span class="num2">亿元</span> -->
+            ><span class="num2">亿元</span>
-            <i>99.99/</i><i class="num">99.99</i><span class="num2">亿元</span>
           </div>
           <!-- <div style="width: 100%">
             <progressBar
@@ -40,10 +39,9 @@
             >
           </div>
           <div class="box">
-            <!-- <i>{{ handleMillion(val.completedProfit) }}/</i
+            <i>{{ handleMillion(val.completedProfit) }}/</i
             ><i class="num">{{ handleMillion(val.targetProfit) }}</i
-            ><span class="num2">亿元</span> -->
+            ><span class="num2">亿元</span>
-            <i>99.99/</i><i class="num">99.99</i><span class="num2">亿元</span>
           </div>
           <!-- <div style="width: 100%">
             <progressBar
@@ -58,10 +56,9 @@
             >
           </div>
           <div class="box">
-            <!-- <i>{{ handleMillion(val.completedChargeQuantity) }}/</i
+            <i>{{ handleMillion(val.completedChargeQuantity) }}/</i
             ><i class="num">{{ handleMillion(val.targetChargeQuantity) }}</i
-            ><span class="num2">亿件</span> -->
+            ><span class="num2">亿件</span>
-            <i>99.99/</i><i class="num">99.99</i><span class="num2">亿件</span>
           </div>
           <!-- <div style="width: 100%">
             <progressBar
@@ -78,10 +75,9 @@
             >
           </div>
           <div class="box">
-            <!-- <i>{{ handleMillion(val.completedDeliveryQuantity) }}/</i
+            <i>{{ handleMillion(val.completedDeliveryQuantity) }}/</i
             ><i class="num">{{ handleMillion(val.targetDeliveryQuantity) }}</i
-            ><span class="num2">亿件</span> -->
+            ><span class="num2">亿件</span>
-            <i>99.99/</i><i class="num">99.99</i><span class="num2">亿件</span>
           </div>
           <!-- <div style="width: 100%">
             <progressBar

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);
+          this.titData.push(item.indicator_name);
-          valData.push({ value: item.cate, name: item.indicator_name });
+          this.valData.push({ value: item.cate, name: item.indicator_name });
         }
-        this.chart = echarts.init(this.$refs.left1, "macarons");
+        this.setPageData(val);
-        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,
-            },
-          ],
-        });
       });
+    },
+
+    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",
@@ -325,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;

src/views/bigScreen/management/center.vue

@@ -16,10 +16,9 @@
             >
           </div>
           <div class="box">
-            <!-- <i>{{ handleMillion(resData.realIncome) }}/</i
+            <i>{{ handleMillion(resData.realIncome) }}/</i
             ><i class="num">{{ handleMillion(resData.targetIncome) }}</i
-            ><span class="num2">亿元</span> -->
+            ><span class="num2">亿元</span>
-            <i>99.99/</i><i class="num">99.99</i><span class="num2">亿元</span>
           </div>
           <!-- <div style="width: 100%">
             <progressBar
@@ -34,10 +33,9 @@
             >
           </div>
           <div class="box">
-            <!-- <i>{{ handleMillion(resData.realProfit) }}/</i
+            <i>{{ handleMillion(resData.realProfit) }}/</i
             ><i class="num">{{ handleMillion(resData.targetProfit) }}</i
-            ><span class="num2">亿元</span> -->
+            ><span class="num2">亿元</span>
-            <i>99.99/</i><i class="num">99.99</i><span class="num2">亿元</span>
           </div>
           <!-- <div style="width: 100%">
             <progressBar
@@ -52,10 +50,9 @@
             >
           </div>
           <div class="box">
-            <!-- <i>{{ handleMillion(resData.realEva) }}/</i
+            <i>{{ handleMillion(resData.realEva) }}/</i
             ><i class="num">{{ handleMillion(resData.targetEva) }}</i
-            ><span class="num2">亿元</span> -->
+            ><span class="num2">亿元</span>
-            <i>99.99/</i><i class="num">99.99</i><span class="num2">亿元</span>
           </div>
           <!-- <div style="width: 100%">
             <progressBar
@@ -66,18 +63,18 @@
         <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; position: relative">
-                <!-- <i>{{ handleMillion(resData.realCollection) }}/</i
+                <i>{{ handleMillion(resData.realCollection) }}/</i
                 ><i class="num">{{ handleMillion(resData.targetCollection) }}</i
-                ><span class="num2">亿元</span> -->
-                <i>99.99/</i><i class="num">99.99</i
                 ><span class="num2">亿元</span>
-                <div
+                <!-- <div
                   style="
                     font-size: 12px;
                     color: #fff;
@@ -86,7 +83,7 @@
                   "
                 >
                   产成品
-                </div>
+                </div> -->
               </div>
 
               <!-- <div style="display: flex">
@@ -99,14 +96,12 @@
             </div>
             <div style="margin-left: 10px">
               <div class="box" style="margin-bottom: 0; position: relative">
-                <!-- <i>{{ handleMillion(resData.realFinishProduct) }}/</i
+                <i>{{ handleMillion(resData.realFinishProduct) }}/</i
                 ><i class="num">{{
                   handleMillion(resData.targetFinishProduct)
                 }}</i
-                ><span class="num2">亿元</span> -->
-                <i>99.99/</i><i class="num">99.99</i
                 ><span class="num2">亿元</span>
-                <div
+                <!-- <div
                   style="
                     font-size: 12px;
                     color: #fff;
@@ -115,7 +110,7 @@
                   "
                 >
                   应收账款
-                </div>
+                </div> -->
               </div>
               <!-- <div style="display: flex">
                 <progressBar

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);
+      // const data = this.dataList.slice(val * 2 - 2, val * 2);
-      this.setData(data);
+      const data = this.dataList.slice(val - 1, val);
+      // this.setData(data);
+      this.setOddEchars(data);
     },
 
     setData(list) {