右侧统计

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "0.4.0",
+    "animate.css": "^4.1.1",
     "autofit.js": "^3.1.1",
     "axios": "0.28.1",
     "clipboard": "2.0.8",

src/main.js

@@ -13,6 +13,7 @@ import router from "./router";
 import directive from "./directive"; // directive
 import plugins from "./plugins"; // plugins
 import { download } from "@/utils/request";
+import "animate.css";
 
 // 引入Leaflet对象 挂载到Vue上，便于全局使用，也可以单独页面中单独引用
 import "leaflet/dist/leaflet.css";

src/store/getters.js

@@ -21,5 +21,6 @@ const getters = {
   rightTopColor: (state) => state.taicang.rightTopColor,
   yjTotal: (state) => state.taicang.yjTotal,
   xiaoquIntroduce: (state) => state.taicang.xiaoquIntroduce,
+  colorListL: (state) => state.taicang.colorListL,
 };
 export default getters;

src/store/modules/taicang.js

@@ -30,6 +30,22 @@ const taicang = {
         kaiguo: {},
       },
     },
+    colorListL: [
+      { name: "HZ", house: 0, person: 0 },
+      { name: "HL", house: 0, person: 0 },
+      { name: "HO", house: 0, person: 0 },
+      { name: "HF", house: 0, person: 0 },
+      { name: "NZ", house: 0, person: 0 },
+      { name: "NL", house: 0, person: 0 },
+      { name: "NO", house: 0, person: 0 },
+      { name: "NF", house: 0, person: 0 },
+      { name: "户籍", house: 0, person: 0 },
+      { name: "流动", house: 0, person: 0 },
+      { name: "中共党员", house: 0, person: 0 },
+      { name: "帮扶对象", house: 0, person: 0 },
+      { name: "重点人群", house: 0, person: 0 },
+      { name: "退伍军人", house: 0, person: 0 },
+    ],
   },
   mutations: {
     SET_YJ_TOTAL: (state, total) => {

src/views/components/IndexModel/components/colorList.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="color-list">
+    <div class="list-item" v-for="(item, index) in colorListL" :key="index">
+      <div class="item-name">
+        {{ item.name }}
+      </div>
+      <div class="item-value">
+        <span>6160</span>
+        <span> 户 </span>
+        <span>20646</span>
+        <span> 人 </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapGetters(["colorListL"]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.color-list {
+  margin-top: 10px;
+  height: 550px;
+  background: url("~@/assets/images/ui/colorList_bg.png");
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 25px;
+  .list-item {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid rgba(0, 156, 255, 0.2);
+    .item-name {
+      font-size: 15px;
+      color: #abc7ed;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+    }
+    .item-value {
+      span:nth-child(odd) {
+        font-size: 16px;
+        color: #52ccff;
+        font-family: "DIN-Regular-2.otf";
+      }
+      span:nth-child(even) {
+        font-size: 14px;
+        color: #c9e1f5;
+      }
+    }
+  }
+  .list-item:nth-child(9) .item-value,
+  .list-item:nth-child(10) .item-value {
+    span:nth-child(odd) {
+      font-size: 16px;
+      color: #ffb400;
+      font-family: "DIN-Regular-2.otf";
+    }
+  }
+  .list-item:nth-child(9),
+  .list-item:nth-child(10) {
+    .item-name {
+      color: #fff;
+    }
+  }
+}
+</style>

src/views/components/IndexModel/components/pieChart.vue

@@ -0,0 +1,221 @@
+<template>
+  <div class="pie-chart">
+    <div class="tabLits">
+      <div
+        @click="handleClick(item, index)"
+        v-for="(item, index) in tabList"
+        :key="index"
+        :class="currentIndex == index ? 'currentIndex' : ''"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+    <div class="pie">
+      <div class="pie-title">目前数据更新情况</div>
+      <div id="pie-echarts"></div>
+      <div class="lable">
+        <span style="color: #ffb400">0</span> / <span>0</span>
+        {{ currentIndex == 0 ? "户" : "人" }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+var echarts = require("echarts");
+export default {
+  data() {
+    return {
+      currentIndex: 0,
+      tabList: [
+        { name: "住户", value: 0 },
+        { name: "居民", value: 1 },
+      ],
+    };
+  },
+  mounted() {
+    this.initPieEcharts(80);
+  },
+  methods: {
+    handleClick(item, index) {
+      if (this.currentIndex == index) return;
+      this.currentIndex = index;
+    },
+    initPieEcharts(num) {
+      if (!num) {
+        num = 0;
+      }
+      var myChart = echarts.init(document.getElementById("pie-echarts"));
+      let angle = 0; //角度，用来做简单的动画效果的
+      let value = num; //图上角度数据
+      var option = {
+        title: {
+          text: "{a|" + value + "}{c|%}",
+          x: "center",
+          y: "center",
+          textStyle: {
+            rich: {
+              a: {
+                fontSize: 14,
+                color: "#ffffff",
+                fontWeight: "bold",
+              },
+              c: {
+                fontSize: 14,
+                color: "#ffffff",
+                fontWeight: "normal",
+              },
+            },
+          },
+        },
+        series: [
+          //内环
+          {
+            name: "",
+            type: "custom",
+            coordinateSystem: "none",
+            renderItem: function (params, api) {
+              return {
+                type: "arc",
+                shape: {
+                  cx: api.getWidth() / 2,
+                  cy: api.getHeight() / 2,
+                  r: (Math.min(api.getWidth(), api.getHeight()) / 2.3) * 0.65,
+                  startAngle: ((0 + -angle) * Math.PI) / 180,
+                  endAngle: ((360 + -angle) * Math.PI) / 180,
+                },
+                style: {
+                  stroke: "#0CD3DB",
+                  fill: "transparent",
+                  lineWidth: 0.5,
+                },
+                silent: true,
+              };
+            },
+            data: [0],
+          },
+          //外环
+          {
+            name: "",
+            type: "pie",
+            radius: ["90%", "80%"],
+            silent: true,
+            clockwise: true,
+            startAngle: 90,
+            z: 0,
+            zlevel: 0,
+            label: {
+              normal: {
+                position: "center",
+              },
+            },
+            data: [
+              {
+                value: value,
+                name: "",
+                itemStyle: {
+                  normal: {
+                    //外环发光
+                    borderWidth: 0.5,
+                    shadowBlur: 10,
+                    borderColor: "#4bf3f9",
+                    shadowColor: "#9bfeff",
+                    color: {
+                      // 圆环的颜色
+                      colorStops: [
+                        {
+                          offset: 0,
+                          color: "#4bf3f9", // 0% 处的颜色
+                        },
+                        {
+                          offset: 1,
+                          color: "#4bf3f9", // 100% 处的颜色
+                        },
+                      ],
+                    },
+                  },
+                },
+              },
+              {
+                value: 100 - value,
+                name: "",
+                label: {
+                  normal: {
+                    show: false,
+                  },
+                },
+                itemStyle: {
+                  normal: {
+                    color: "#173164",
+                  },
+                },
+              },
+            ],
+          },
+        ],
+      };
+      myChart.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pie-chart {
+  margin-top: 10px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  .tabLits {
+    height: 100%;
+    width: 25px;
+    border: 1px solid #086394;
+    border-radius: 6px;
+    overflow: hidden;
+    div {
+      cursor: pointer;
+      display: flex;
+      text-align: center;
+      align-items: center;
+      height: 50%;
+      font-size: 14px;
+      color: #007dc1;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+    }
+    .currentIndex {
+      color: #fff;
+      font-weight: bold;
+      background: #086394;
+    }
+  }
+  .pie {
+    flex: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .pie-title {
+      font-size: 16px;
+      text-align: center;
+      color: #ffffff;
+      font-family: "Alibaba-PuHuiTi-Regular.otf";
+      text-shadow: 0 0 10px #278873, 0 0 10px #278873, 0 0 30px #278873,
+        0 0 50px #278873;
+    }
+    #pie-echarts {
+      flex: 1;
+      margin: 5px 0;
+      height: 75%;
+      width: 70%;
+    }
+    .lable {
+      text-align: center;
+      font-size: 14px;
+      color: #c9e1f5;
+      span {
+        font-family: "DIN-Regular-2.otf";
+      }
+    }
+  }
+}
+</style>

src/views/components/IndexModel/components/threeCell.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="three-cell">
+    <div class="cell-item">
+      <img src="@/assets/images/ui/icon_3.png" alt="" />
+      <div class="lable-value">
+        <div class="value-item">
+          <div class="value-data">17873</div>
+          <div class="value-lable">总户数</div>
+        </div>
+        <div class="value-item" style="margin-left: 6px">
+          <div class="value-data">39724</div>
+          <div class="value-lable">人口数</div>
+        </div>
+      </div>
+    </div>
+    <div class="cell-item">
+      <img src="@/assets/images/ui/icon_1.png" alt="" />
+      <div class="value-item">
+        <div class="value-data">19</div>
+        <div class="value-lable">网格总数</div>
+      </div>
+    </div>
+    <div class="cell-item">
+      <img src="@/assets/images/ui/icon_2.png" alt="" />
+      <div class="value-item">
+        <div class="value-data">19</div>
+        <div class="value-lable">楼幢总数</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.three-cell {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .cell-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    img {
+      display: block;
+      width: 60px;
+      height: 65px;
+    }
+    .lable-value {
+      display: flex;
+      align-items: center;
+      & > div {
+        flex: 1;
+      }
+    }
+    .value-item {
+      div {
+        text-align: center;
+      }
+      .value-data {
+        margin: 2px 0;
+        font-size: 18px;
+        color: #ffffff;
+        font-family: "DIN-Medium-2.otf";
+        text-shadow: 0 0 10px #278873, 0 0 10px #278873, 0 0 30px #278873,
+          0 0 50px #278873;
+      }
+      .value-lable {
+        font-size: 15px;
+        color: #30ecf9;
+        font-family: "Alibaba-PuHuiTi-Medium.otf";
+      }
+    }
+  }
+}
+</style>

src/views/components/IndexModel/left.vue

@@ -61,6 +61,7 @@ export default {
 .model-left {
   flex: 1;
   padding: 25px 0;
+
   display: flex;
   flex-direction: column;
   overflow: hidden;

src/views/components/IndexModel/right.vue

@@ -1,13 +1,29 @@
 <template>
-  <div></div>
+  <div class="model-right">
+    <threeCell />
+    <colorList />
+    <pieChart />
+  </div>
 </template>
 
 <script>
+import threeCell from "./components/threeCell.vue";
+import colorList from "./components/colorList.vue";
+import pieChart from "./components/pieChart.vue";
 export default {
+  components: { threeCell, colorList, pieChart },
   data() {
     return {};
   },
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+.model-right {
+  flex: 1;
+  padding: 25px 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+</style>

src/views/components/introduceTitle/index.vue

@@ -29,7 +29,6 @@ export default {
   background: url("~@/assets/images/ui/introduce-title.png");
   background-size: 100% 100%;
   display: flex;
-
   justify-content: space-between;
   padding-left: 55px;
   overflow: hidden;

src/views/index.vue

@@ -4,7 +4,9 @@
     <foldpanelLeft :title="xiaoquIntroduce.deptName + '简介'">
       <IndexModelLeft />
     </foldpanelLeft>
-    <foldpanelRight></foldpanelRight>
+    <foldpanelRight>
+      <IndexModelRight />
+    </foldpanelRight>
     <LeafletMap />
   </div>
 </template>