From 7c68c20f0ecdc875e8a7ab0d147f61236caf5caf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AA=86=E4=B9=90?= <342503599@qq.com>
Date: Mon, 29 Aug 2022 15:32:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E5=BB=BA=E5=9B=9B=E5=B1=80(=E6=94=BF?=
 =?UTF-8?q?=E4=BC=81=E8=81=94=E5=90=88):=E7=9B=91=E7=9D=A3=E6=A3=80?=
 =?UTF-8?q?=E6=9F=A5=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../zjsj/assets/images/common/icon_hs.png     | Bin 0 -> 1784 bytes
 .../zjsj/assets/images/common/icon_jt.png     | Bin 0 -> 317 bytes
 .../zjsj/assets/images/common/icon_zg.png     | Bin 0 -> 2112 bytes
 src/views/projectAdmin/zjsj/govComp/index.vue |   4 +-
 .../projectAdmin/zjsj/govComp/leftBottom.vue  |   8 +-
 .../projectAdmin/zjsj/govComp/leftMiddle.vue  | 249 +++++++++++++++++-
 6 files changed, 249 insertions(+), 12 deletions(-)
 create mode 100644 src/views/projectAdmin/zjsj/assets/images/common/icon_hs.png
 create mode 100644 src/views/projectAdmin/zjsj/assets/images/common/icon_jt.png
 create mode 100644 src/views/projectAdmin/zjsj/assets/images/common/icon_zg.png

diff --git a/src/views/projectAdmin/zjsj/assets/images/common/icon_hs.png b/src/views/projectAdmin/zjsj/assets/images/common/icon_hs.png
new file mode 100644
index 0000000000000000000000000000000000000000..bbf4246bd222573009e0b39b1067c773061fe85d
GIT binary patch
literal 1784
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
a1pfnpwhT}`5`D4&0000<MNUMnLSTZNi%NL_

literal 0
HcmV?d00001

diff --git a/src/views/projectAdmin/zjsj/assets/images/common/icon_jt.png b/src/views/projectAdmin/zjsj/assets/images/common/icon_jt.png
new file mode 100644
index 0000000000000000000000000000000000000000..a65297b026c3d64d6e9fd4a7883a2054da5eccca
GIT binary patch
literal 317
zcmeAS@N?(olHy`uVBq!ia0vp^av;pX1|+Qw)-3{3oCO|{#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{v}Tr$B+ufz1I(N9Wvlyd*E{CWcP(;@%#Vp
z+KBAszQ*z@H+Isue)}mKw|(ecmn|_-dF|H8W=w5sIhn+EPN|EYxl>3%#(}dl`gHlt
zm)d_DgC3q=P%pXtLHibS)d%y=Zaw)_FIU=UX4P}GIjy@N@Z8~D{86Ci$YBGn`Avd9
zO!joG50kNtiDQ498gg~PQoTu`5z~KE8Lac(TYc~RyI1nR_MdHa04nA^=y8R2aiI8|
z##seot2XX?EOLeUzEJ@GoTjP=>Z%LWbQ;3ub-CSrX`h?U^o)Dwn})~fFWxr;eaGPG
L>gTe~DWM4f8%BSk

literal 0
HcmV?d00001

diff --git a/src/views/projectAdmin/zjsj/assets/images/common/icon_zg.png b/src/views/projectAdmin/zjsj/assets/images/common/icon_zg.png
new file mode 100644
index 0000000000000000000000000000000000000000..d9ca655da8d3a5afead554fd5b10501ad73029fe
GIT binary patch
literal 2112
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

literal 0
HcmV?d00001

diff --git a/src/views/projectAdmin/zjsj/govComp/index.vue b/src/views/projectAdmin/zjsj/govComp/index.vue
index 3a2e8117..107ce776 100644
--- a/src/views/projectAdmin/zjsj/govComp/index.vue
+++ b/src/views/projectAdmin/zjsj/govComp/index.vue
@@ -38,10 +38,10 @@ export default {
       height: 33%;
     }
     .middle {
-      height: 42%;
+      height: 45%;
     }
     .bottom {
-      height: 25%;
+      height: 22%;
     }
   }
 }
diff --git a/src/views/projectAdmin/zjsj/govComp/leftBottom.vue b/src/views/projectAdmin/zjsj/govComp/leftBottom.vue
index 0496efcc..9b102cdf 100644
--- a/src/views/projectAdmin/zjsj/govComp/leftBottom.vue
+++ b/src/views/projectAdmin/zjsj/govComp/leftBottom.vue
@@ -10,7 +10,7 @@
           <p class="text">在场总人数</p>
         </div>
         <div class="img">
-          <img src="../assets/images/common/num_skyblue.png" />
+          <img src="../assets/images/common/icon_hs.png" />
         </div>
         <div class="contentBtn">
           <p class="num2">5649</p>
@@ -45,7 +45,6 @@ export default {
 <style lang="less" scoped>
 .contentBox {
   margin-top: 20px;
-  margin-left: 25px;
   .contentTop {
     display: flex;
     justify-content: center;
@@ -56,8 +55,8 @@ export default {
     }
     .img {
       img {
-        height: 66px;
-        width: 66px;
+        height: 56px;
+        width: 56px;
       }
     }
     .contentBtn {
@@ -77,7 +76,6 @@ export default {
   }
   .contentbut {
     margin-top: 20px;
-    margin-left: 25px;
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/views/projectAdmin/zjsj/govComp/leftMiddle.vue b/src/views/projectAdmin/zjsj/govComp/leftMiddle.vue
index 03d8c933..2b140be4 100644
--- a/src/views/projectAdmin/zjsj/govComp/leftMiddle.vue
+++ b/src/views/projectAdmin/zjsj/govComp/leftMiddle.vue
@@ -1,14 +1,253 @@
 <template>
   <Card title="监督巡查">
-    监督巡查
+    <div class="contentBox">
+      <div>监督员</div>
+      <div class="person">
+        <span>李四</span>
+        <span>张三毛</span>
+        <span>王明</span>
+        <span>吴老五</span>
+      </div>
+
+      <div class="contentTop">
+        <div class="img">
+          <img src="../assets/images/common/num_skyblue.png" />
+        </div>
+        <div class="contentBtn">
+          <p class="num1">68</p>
+          <p class="text">下发整改通知书</p>
+        </div>
+        <div class="img">
+          <img src="../assets/images/common/icon_zg.png" />
+        </div>
+        <div class="contentBtn">
+          <p class="num2">312</p>
+          <p class="text">累计监督签到人数</p>
+        </div>
+      </div>
+      <div class="rowInfo">
+        <span>
+          下发整改通知书
+          <span style="font-size:20px;color:#e1e2e4">36</span> 份
+        </span>
+        <span>
+          <img class="image" src="../assets/images/common/icon_jt.png" />
+        </span>
+        <span>
+          已整改
+          <span style="font-size:20px;color:#66d4d9">18</span>
+        </span>
+        <span>
+          未整改
+          <span style="font-size:20px;color:#f89872">18</span>
+        </span>
+      </div>
+
+      <div class="echarts">
+        <div class="checkChart" ref="checkChart"></div>
+        <div class="right">
+          <div class="one">
+            <div class="point"></div>
+            <div class="checkNum">
+              <span>监督检查</span>
+              <p>(数)</p>
+            </div>
+          </div>
+          <div class="two">
+            <div class="point point2"></div>
+            <div class="checkNum">
+              <span>下发整改</span>
+              <p>(份)</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </Card>
 </template>
 
 <script>
-import Card from '../components/Card.vue'
+import Card from "../components/Card.vue";
+import echarts from "echarts4";
 export default {
-  components: { Card }
-}
+  components: { Card },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.createChart();
+  },
+  methods: {
+    createChart() {
+      const checkChart = echarts.init(this.$refs.checkChart);
+      const option = {
+        grid: {
+        x: "8%",//x 偏移量
+        y: "10%", // y 偏移量
+        width: "86%", // 宽度
+        height: "60%"// 高度
+      },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: ["2022-1", "2022-3", "2022-6", "2022-8"],
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#9ea3ab"
+            }
+          }
+        },
+        yAxis: {
+          type: "value",
+          splitNumber: 4,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#777f8a"
+            }
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#9ea3ab"
+            }
+          }
+        },
+        series: [
+          {
+            data: [3.5, 4.5, 3.5, 4],
+            type: "line",
+            smooth: true,
+            color: "#f56c35",
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "rgba(213, 97, 52,0.5)" },
+                { offset: 1, color: "rgba(213, 97, 52,0.3)" }
+              ])
+            }
+          },
+          {
+            data: [0.5, 2.5, 1.8, 1.2],
+            type: "line",
+            smooth: true,
+            color: "#51a4ac",
+            areaStyle: {
+              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                { offset: 0, color: "rgba(53, 98, 111,0.5)" },
+                { offset: 1, color: "rgba(53, 98, 111,0.3)" }
+              ])
+            }
+          }
+        ]
+      };
+      checkChart.setOption(option);
+    }
+  }
+};
 </script>
 
-<style></style>
+<style lang="less" scoped>
+.contentBox {
+  width: 100%;
+  height: 100%;
+  margin-top: 20px;
+  margin-left: 10px;
+  color: #bec1c7;
+  .person {
+    span {
+      margin: 5px 5px 10px 0px;
+      display: inline-block;
+      width: 88px;
+      height: 40px;
+      text-align: center;
+      line-height: 40px;
+      background-image: url(../assets/images/common/num_bg.png);
+      background-repeat: no-repeat;
+      background-size: 100%;
+      color: #6ee4f0;
+    }
+  }
+
+  .contentTop {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 15px;
+    .img,
+    .contentBtn {
+      margin-right: 20px;
+      font-size: 16px;
+      .num1 {
+        color: #53a9b1;
+        font-size: 20px;
+      }
+      .num2 {
+        color: #f56c35;
+        font-size: 20px;
+      }
+      .text {
+        margin-top: 5px;
+        color: #a4a9b0;
+      }
+    }
+    .img {
+      img {
+        height: 56px;
+        width: 56px;
+      }
+    }
+  }
+  .rowInfo {
+    color: #69717d;
+    span {
+      margin-left: 10px;
+      display: inline-block;
+      height: 30px;
+      line-height: 30px;
+      .image {
+        margin-top: 5px;
+      }
+    }
+  }
+  .echarts {
+    width: 100%;
+    height: 55%;
+    display: flex;
+    .checkChart {
+      width: 70%;
+      height: 100%;
+    }
+    .right {
+      width: 30%;
+      margin-top: 12%;
+      margin-left: 3%;
+      font-size: 12px;
+      color: #9ea3ab;
+      .one,
+      .two {
+        margin-bottom: 10%;
+        .point {
+          width: 7px;
+          height: 7px;
+          margin-right: 5%;
+          margin-bottom: 5%;
+          display: inline-block;
+          background-color: #f56c35;
+          border-radius: 50%;
+        }
+        .checkNum {
+          display: inline-block;
+          margin-bottom: 5%;
+        }
+      }
+      .two {
+        .point2 {
+          background-color: #66d4d9;
+        }
+      }
+    }
+  }
+}
+</style>