态势图片

src/api/taishi/taishi.js

@@ -38,4 +38,28 @@ export function tongjiluoshi() {
     url: "/situation/situationinfo/tongjiluoshi",
     method: "get"
   });
-}
+}
+
+// 集中文印
+export function rizongwenyin() {
+  return request({
+    url: "/situation/situationinfo/rizongwenyin",
+    method: "get"
+  });
+}
+
+// 军车管理
+export function juncheguanli() {
+  return request({
+    url: "/situation/situationinfo/juncheguanli",
+    method: "get"
+  });
+}
+
+// 统计物品外借数量
+export function getNumber() {
+  return request({
+    url: "/bdglSecret/secret/getNumber",
+    method: "get"
+  });
+}

src/layout/components/AppMain.vue

@@ -119,34 +119,36 @@ export default {
 .tkbox-title {
   width: 100%;
   height: 90px;
-  display: flex;
-  flex-direction: row;
 }
 
 .tkbox-title-left {
-  flex: 3;
-  display: flex;
-  align-items: center;
+  width: 90%;
+  display: inline-block;
+  line-height: 90px;
+  position: relative;
 }
 
 .tkbox-title-left img {
-  margin-right: 10px;
-  width: 30px;
-  height: 30px;
-  margin-left: 35px;
-  display: inline-block;
+   position: absolute;
+   left:35px;
+   top:30px;
 }
 
 .tkbox-title-left span {
   color: #fff;
+  line-height: 95px;
+  margin-left: 75px;
 }
 
 .tkbox-title-right {
-  flex: 1;
-  display: flex;
-  justify-content: right;
-  align-items: center;
-  margin-right: 35px;
+  width: 10%;
+  text-align: right;
+  display: inline-block;
+}
+
+.tkbox-title-right img{
+  text-align: right;
+  margin-right: 30px;
 }
 
 .tkbox-main {

src/views/pt.vue

@@ -806,34 +806,36 @@ hr {
 .tkbox-title {
   width: 100%;
   height: 90px;
-  display: flex;
-  flex-direction: row;
 }
 
 .tkbox-title-left {
-  flex: 2;
-  display: flex;
-  align-items: center;
+  width: 90%;
+  display: inline-block;
+  line-height: 90px;
+  position: relative;
 }
 
 .tkbox-title-left img {
-  margin-right: 10px;
-  width: 30px;
-  height: 30px;
-  margin-left: 35px;
-  display: inline-block;
+   position: absolute;
+   left:35px;
+   top:30px;
 }
 
 .tkbox-title-left span {
   color: #fff;
+  line-height: 95px;
+  margin-left: 75px;
 }
 
 .tkbox-title-right {
-  flex: 1;
-  display: flex;
-  justify-content: right;
-  align-items: center;
-  margin-right: 35px;
+  width: 10%;
+  text-align: right;
+  display: inline-block;
+}
+
+.tkbox-title-right img{
+  text-align: right;
+  margin-right: 30px;
 }
 
 .tkbox-main {

src/views/taishi/index.vue

@@ -5,7 +5,7 @@
         <span>主控台</span>
       </div>
       <div class="title-right">
-        <span>{{times}}</span>
+        <span>{{ times }}</span>
       </div>
     </div>
     <div class="main">
@@ -15,10 +15,10 @@
             <span>今日值班</span>
           </div>
           <div class="left1-wrap">
-            <div class="left1-wrap-item" v-for="(item,index) in jrzblist" :key="index">
-              <span>{{item.name}}：</span>
-              <b v-if="item.value?true:false">{{item.value}}</b>
-              <b v-if="!item.value?true:false">无</b>
+            <div class="left1-wrap-item" v-for="(item, index) in jrzblist" :key="index">
+              <span>{{ item.name }}：</span>
+              <b v-if="item.value ? true : false">{{ item.value }}</b>
+              <b v-if="!item.value ? true : false">无</b>
             </div>
           </div>
         </div>
@@ -293,13 +293,13 @@
             </div>
           </div>
           <div class="center1-c">
-            <div class="center2" >
+            <div class="center2">
               <div class="left1-head">
                 <span>各单位人员在位情况</span>
               </div>
               <div id="center2_d"></div>
             </div>
-            <div class="center3" >
+            <div class="center3">
               <div class="left1-head">
                 <span>外出人员对比</span>
               </div>
@@ -434,7 +434,11 @@
             </div>
             <vueSeamlessScroll :data="djlslist" class="seamless-warp" :class-option="defaultOption">
               <div class="right1-main-box" v-for="(item, index) in djlslist" :key="index">
-                <span style="color:#fff;font-size:12px;">{{item.unitname}}</span>
+                <span style="color:#fff;font-size:12px;">
+                  {{
+                  item.unitname
+                  }}
+                </span>
                 <span>
                   <svg
                     t="1638612550724"
@@ -445,7 +449,7 @@
                     p-id="3323"
                     width="20"
                     height="10"
-                    v-if="item.unitvalue.yaoshidengji==1"
+                    v-if="item.unitvalue.yaoshidengji == 1"
                   >
                     <path
                       d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z"
@@ -462,7 +466,7 @@
                     p-id="3323"
                     width="20"
                     height="10"
-                    v-if="item.unitvalue.yaoshidengji==0"
+                    v-if="item.unitvalue.yaoshidengji == 0"
                   >
                     <path
                       d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z"
@@ -481,7 +485,7 @@
                     p-id="3323"
                     width="20"
                     height="10"
-                    v-if="item.unitvalue.daduizhiban==1"
+                    v-if="item.unitvalue.daduizhiban == 1"
                   >
                     <path
                       d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z"
@@ -498,7 +502,7 @@
                     p-id="3323"
                     width="20"
                     height="10"
-                    v-if="item.unitvalue.daduizhiban==0"
+                    v-if="item.unitvalue.daduizhiban == 0"
                   >
                     <path
                       d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z"
@@ -517,7 +521,7 @@
                     p-id="3323"
                     width="20"
                     height="10"
-                    v-if="item.unitvalue.gongzuoanpai==1"
+                    v-if="item.unitvalue.gongzuoanpai == 1"
                   >
                     <path
                       d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z"
@@ -534,7 +538,7 @@
                     p-id="3323"
                     width="20"
                     height="10"
-                    v-if="item.unitvalue.gongzuoanpai==0"
+                    v-if="item.unitvalue.gongzuoanpai == 0"
                   >
                     <path
                       d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z"
@@ -553,7 +557,7 @@
                     p-id="3323"
                     width="20"
                     height="10"
-                    v-if="item.unitvalue.chagangchashao==1"
+                    v-if="item.unitvalue.chagangchashao == 1"
                   >
                     <path
                       d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z"
@@ -570,7 +574,7 @@
                     p-id="3323"
                     width="20"
                     height="10"
-                    v-if="item.unitvalue.chagangchashao==0"
+                    v-if="item.unitvalue.chagangchashao == 0"
                   >
                     <path
                       d="M920 789H104l-40-40V275l40-40h816l40 40v474l-40 40z"
@@ -601,11 +605,50 @@
               <span>集中文印</span>
             </div>
             <div class="right3-l-main">
-              <dv-scroll-board
-                style="width:99%;margin-left:0.5%;font-size:12px;"
-                :config="config2"
-                ref="scrollBoard"
-              />
+              <div class="right3-r-main-item">
+                <div class="right3-r-main-item-l">
+                  <img src=".././../assets/images/打印icon.png" alt />
+                </div>
+                <div class="right3-r-main-item-r">
+                  <div class="s1">总打印数量</div>
+                  <div class="s2">
+                    <b style="color:#30FDFF">23</b>台
+                  </div>
+                </div>
+              </div>
+              <div class="right3-r-main-item">
+                <div class="right3-r-main-item-l">
+                  <img src=".././../assets/images/归还2.png" alt />
+                </div>
+                <div class="right3-r-main-item-r">
+                  <div class="s1">归还数量</div>
+                  <div class="s2">
+                    <b style="color:#2BF1B2">1</b>台
+                  </div>
+                </div>
+              </div>
+              <div class="right3-r-main-item">
+                <div class="right3-r-main-item-l">
+                  <img src=".././../assets/images/电脑icon.png" alt />
+                </div>
+                <div class="right3-r-main-item-r">
+                  <div class="s1">未归还数量</div>
+                  <div class="s2">
+                    <b style="color:#30AAFF">1</b>台
+                  </div>
+                </div>
+              </div>
+              <div class="right3-r-main-item">
+                <div class="right3-r-main-item-l">
+                  <img src=".././../assets/images/归还3.png" alt />
+                </div>
+                <div class="right3-r-main-item-r">
+                  <div class="s1">无需归还数量</div>
+                  <div class="s2">
+                    <b style="color:#9D83FF ">3</b>台
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div class="right3-r">
@@ -615,7 +658,7 @@
             <div id="right3-r-main">
               <div class="right3-r-main-item">
                 <div class="right3-r-main-item-l">
-                  <img src=".././../assets/images/移动载体icon.png" alt />
+                  <img src=".././../assets/images/归还4.png" alt />
                 </div>
                 <div class="right3-r-main-item-r">
                   <div class="s1">移动载体</div>
@@ -671,7 +714,9 @@ import {
   gedanweizaiweiqingkaung,
   waichurenyuanzhanbi,
   jinrizhiban,
-  tongjiluoshi
+  tongjiluoshi,
+  rizongwenyin,
+  getNumber
 } from "@/api/taishi/taishi";
 import * as echarts from "echarts";
 import vueSeamlessScroll from "vue-seamless-scroll";
@@ -750,9 +795,10 @@ export default {
     //大队人员在位数据
     zaiweipeople().then(res => {
       if (res.code == 200) {
-        this.zwlist = res.data[0];
-        for (var i in res.data[0]) {
-          this.zsz(res.data[0], i);
+        // this.zwlist = res.data[0];
+        let arr = res.data[0];
+        for (var i in arr) {
+          this.zsz(arr, i);
         }
       }
     });
@@ -782,6 +828,13 @@ export default {
     tongjiluoshi().then(res => {
       this.djlslist = res.data;
     });
+    //集中文印
+    rizongwenyin().then(res=>{
+        console.log(res)
+    })
+    getNumber().then(res=>{
+      cconsole.log(res)
+    })
     this.startTime();
   },
   mounted() {
@@ -806,9 +859,9 @@ export default {
     zsz(obj, n) {
       var s = (obj[n] + "").split("");
       if (s.length == 1) {
-        s.push(0, 0);
+        s.unshift(0, 0);
       } else if (s.length == 2) {
-        s.push(0);
+        s.unshift(0);
       }
       this.zwlist[n] = s;
     },
@@ -838,8 +891,8 @@ export default {
           z += 1;
         }
 
-        var data2 = datav.slice(z - 1, s);
-
+        var data2 = datav.slice(z, s + 1);
+        // console.log(datav,data2,className)
         const colorList9 = [
           "#39B3FF",
           "#39B3FF",
@@ -877,7 +930,7 @@ export default {
             left: 10,
             right: 30,
             bottom: 10,
-            top: 10,
+            top: 1,
             containLabel: true
           },
           tooltip: {
@@ -899,7 +952,7 @@ export default {
           },
           xAxis: {
             position: "top",
-            show: true,
+            show: false,
             type: "value",
             splitLine: {
               show: false
@@ -942,10 +995,10 @@ export default {
                 textStyle: {
                   color: "#ffffff",
                   fontSize: "12"
-                },
-                formatter: function(datav) {
-                  return datav;
                 }
+                // formatter: function(datav) {
+                //   return datav;
+                // }
               },
               data: data2
             }
@@ -955,6 +1008,7 @@ export default {
               name: "完成率",
               type: "bar",
               zlevel: 1,
+              showBackground: true,
               itemStyle: {
                 normal: {
                   barBorderRadius: 0,
@@ -969,7 +1023,9 @@ export default {
           ]
         };
         myChartv.setOption(option4);
-        window.onresize = myChartv.resize;
+        window.addEventListener("resize", function() {
+          myChartv.resize();
+        });
       }
       c();
       this.timer = setInterval(() => {
@@ -995,363 +1051,82 @@ export default {
         }
       }
 
-      const path = "path://M1390,595h79l-39,22Z";
-      const myColor = ["#fff", "#fff", "#fff", "#fff", "#fff"];
+      const myColor = ["#0496FF", "#EF4E4E", "#00E4FF", "#36E2B3", "#E89831"];
       const option12 = {
         grid: {
-          left: 50,
-          bottom: 20,
-          top: 20
+          containLabel: true,
+          left: "2%",
+          top: 20,
+          right: "3%",
+          bottom: "1%"
         },
-        xAxis: {
-          show: true,
-          axisLabel: {
-            padding: 15,
-            interval: 0,
-            textStyle: {
-              color: function(param, index) {
-                return myColor[index];
-              },
-              fontSize: 12,
-              fontWeight: 100
+        xAxis: [
+          {
+            type: "category",
+            data: data,
+            axisTick: {
+              alignWithLabel: true,
+              show: false
             },
-            margin: 10
-          },
-          splitLine: {
-            show: false
-          },
-          axisLine: {
-            show: false
-          },
-          splitArea: {
-            show: false
-          },
-          axisTick: {
-            show: false
-          },
-          data: data
-        },
-        yAxis: {
-          axisLine: {
-            lineStyle: {
-              color: "#6e6e6e",
-              width: 1
-            }
-          },
-          axisLabel: {
-            interval: 0,
-            formatter: "{value}%",
-            textStyle: {
-              fontSize: 12,
+            nameTextStyle: {
               color: "#fff"
             },
-            margin: 20
-          },
-          splitLine: {
-            show: true
-          },
-          axisTick: {
-            lineStyle: {
-              color: "#fff",
-              width: 1,
-              height: 5
-            }
-          }
-        },
-        series: [
-          {
-            type: "bar",
-            barWidth: 50,
-            barGap: "0",
-            stack: "广告",
-            itemStyle: {
-              color: function(params) {
-                const colorList = [
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ]),
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ]),
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ]),
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ]),
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ])
-                ];
-                return colorList[params.dataIndex];
+            axisLine: {
+              lineStyle: {
+                color: "#5c6c81"
               }
             },
-            data: data1
-          },
-          {
-            name: "",
-            type: "pictorialBar",
-            symbol: path,
-            symbolSize: [60, 20],
-            symbolOffset: [0, 0],
-            z: 12,
-            symbolPosition: "end",
-            itemStyle: {
-              color: "#e2e2e2",
-              opacity: 0
-            },
-            data: data2
-          },
-          {
-            name: "",
-            type: "pictorialBar",
-            symbol: path,
-            symbolSize: [60, 20],
-            symbolOffset: [0, 20],
-            z: 12,
-            itemStyle: {
-              opacity: 1,
-              color: function(params) {
-                const colorList = [
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ]),
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ]),
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ]),
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ]),
-                  new echarts.graphic.LinearGradient(1, 0, 0, 0, [
-                    {
-                      offset: 0,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 0.5,
-                      color: "#39b3ff"
-                    },
-                    {
-                      offset: 1,
-                      color: "#39b3ff"
-                    }
-                  ])
-                ];
-                return colorList[params.dataIndex];
+            axisLabel: {
+              textStyle: {
+                color: "#fff"
               }
-            },
-            data: [1, 1, 1, 1, 1]
-          },
+            }
+          }
+        ],
+        yAxis: [
           {
-            name: "",
-            type: "pictorialBar",
-            symbol: path,
-            symbolSize: [60, 20],
-            symbolOffset: [0, 0],
-            z: 12,
-            label: {
-              show: true,
-              formatter: "{c}人",
-              position: "top",
-              distance: 5,
-              color: "#fff",
-              fontWeight: 100,
-              textShadowColor: "rgba(255, 255, 255, .6)",
-              fontSize: 16,
-              textShadowBlur: "0",
-              textShadowOffsetX: 1,
-              textShadowOffsetY: 1
+            type: "value",
+            axisLabel: {
+              textStyle: {
+                color: "#fff"
+              },
+              formatter: "{value}",
+              color: "#00e4ff"
             },
-            itemStyle: {
-              opacity: 1,
-              color: function(params) {
-                const colorList = [
-                  "#39b3ff",
-                  "#39b3ff",
-                  "#39b3ff",
-                  "#39b3ff",
-                  "#39b3ff"
-                ];
-                return colorList[params.dataIndex];
+            splitLine: {
+              lineStyle: {
+                color: "#fff",
+                opacity: 0.3
               }
             },
-            symbolPosition: "end",
-            data: data1
-          },
+            axisLine: {
+              show: false
+            }
+          }
+        ],
+        series: [
           {
-            name: "",
-            type: "effectScatter",
-            rippleEffect: {
-              period: 1,
-              scale: 5,
-              brushType: "fill"
-            },
-            z: 20,
-            symbolPosition: "end",
-            symbol: path,
-            symbolSize: [15, 5],
-            symbolOffset: [0, 9],
+            data: data1,
+            type: "bar",
+            barWidth: 18,
             itemStyle: {
               normal: {
-                color: "#fff"
+                barBorderRadius: 0,
+                color: params => {
+                  return myColor[params.dataIndex];
+                }
               }
-            },
-            data: data1
+            }
           }
         ]
       };
-      const backImg = "/asset/get/s/data-1622796959507-HTopachtJ.png";
-      myChartss._dom.style.backgroundImage = "url('" + backImg + "')";
       myChartss.setOption(option12);
-      window.onresize = myChartss.resize;
+      window.addEventListener("resize", function() {
+        myChartss.resize();
+      });
     },
     center4() {
-      var myChart = echarts.init(
-        document.getElementById("center-a-main"),
-        "vintage"
-      );
+      var myChart = echarts.init(document.getElementById("center-a-main"));
       var option = {
         color: ["#00CCFF"],
         tooltip: {
@@ -1362,7 +1137,7 @@ export default {
           left: "2%",
           top: 20,
           right: "3%",
-          bottom: 40
+          bottom: "1%"
         },
         xAxis: [
           {
@@ -1484,7 +1259,9 @@ export default {
         ]
       };
       myChart.setOption(option);
-      window.onresize = myChart.resize;
+      window.addEventListener("resize", function() {
+        myChart.resize();
+      });
     },
     startTime() {
       this.timer2 = setInterval(() => {
@@ -1921,7 +1698,7 @@ export default {
 
 .center4 {
   width: 100%;
-  height: 20%;
+  height: 60px;
 }
 
 #center4_d {
@@ -1953,7 +1730,7 @@ export default {
 }
 #center-a-main {
   width: 100%;
-  height: 100%;
+  height: 90%;
 }
 
 .center-b {
@@ -1990,16 +1767,15 @@ export default {
   color: white;
   font-size: 1rem;
   text-align: center;
-  height: 80%;
   background-color: #052c41;
   width: 18%;
-  margin-top: 0.8%;
   margin-left: 1%;
+  height: 40px;
   /* display: flex;
   justify-content: center;
   align-items: center; */
   display: inline-block;
-  line-height: 30px;
+  line-height: 40px;
 }
 
 .right2_d span {
@@ -2007,10 +1783,11 @@ export default {
   font-size: 1.5rem;
   margin-left: 10px;
   font-family: "IMPACT";
+  line-height: 40px;
 }
 
 .right2_b {
-  height: 80%;
+  height: 40px;
   width: 18%;
   color: white;
   font-size: 1rem;
@@ -2018,10 +1795,8 @@ export default {
   background-color: rgba(207, 60, 42, 0.3);
   /* margin-top: 0.7rem; */
   margin-left: 1%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   display: inline-block;
+  line-height: 40px;
 }
 
 .right2_b span {
@@ -2029,6 +1804,7 @@ export default {
   font-size: 1.5rem;
   margin-left: 10px;
   font-family: "IMPACT";
+  line-height: 40px;
 }
 
 .right1 {
@@ -2244,12 +2020,12 @@ export default {
   text-align: center;
   line-height: 30px;
 }
-.center1-t{
-  width:100%;
+.center1-t {
+  width: 100%;
   height: 25%;
 }
-.center1-c{
-  width:100%;
-  height: 45%;
+.center1-c {
+  width: 100%;
+  height: 46%;
 }
 </style>