tijaio

src/views/coastalMap/components/flowPopup.vue

@@ -23,9 +23,21 @@
           }"
           :cell-style="{ borderColor: '#0c365b', color: '#ecf4f9' }"
         >
-          <el-table-column prop="userName" label="姓名"></el-table-column>
-          <el-table-column prop="idCard" label="身份证号码"></el-table-column>
-          <el-table-column prop="sexCn" label="性别"></el-table-column>
+          <el-table-column
+            width="100"
+            prop="userName"
+            label="姓名"
+          ></el-table-column>
+          <el-table-column
+            prop="idCard"
+            label="身份证号码"
+            width="250"
+          ></el-table-column>
+          <el-table-column
+            width="100"
+            prop="sexCn"
+            label="性别"
+          ></el-table-column>
           <el-table-column prop="phone" label="手机号码"></el-table-column>
           <el-table-column prop="landline" label="联系方式"></el-table-column>
           <el-table-column

src/views/coastalMap/components/unitPopup.vue

@@ -63,12 +63,12 @@
           ></el-table-column>
           <el-table-column
             prop="legalPerson"
-            label="企业法定代表人"
+            label="法人"
             width="120"
           ></el-table-column>
           <el-table-column
             prop="phone"
-            label="法定代表人联系方式"
+            label="法人电话"
             width="150"
           ></el-table-column>
           <el-table-column

src/views/home/index.vue

@@ -6,7 +6,8 @@
     </div> -->
     <!-- // * 底部导航按钮 - 跳转路由 -->
     <div class="under_btn">
-      <div class="under_btn_item">
+      <!-- //第一期css -->
+      <!-- <div class="under_btn_item">
         <div class="item_check" @click="toHome"></div>
       </div>
       <div class="under_btn_item">
@@ -20,6 +21,25 @@
       </div>
       <div class="under_btn_item">
         <div class="item_check_back" @click="toUtils">研判工具</div>
+      </div> -->
+
+      <!-- 第二期css -->
+      <div class="under_box">
+        <div class="under_icon_box">
+          <div class="icon1" style="cursor: progress" @click="toHome"></div>
+          <div class="icon2" style="cursor: progress" @click="toVideo"></div>
+          <div class="icon3" style="cursor: progress" @click="toDevice"></div>
+          <div class="icon4" style="cursor: progress" @click="toBuild"></div>
+          <div class="icon5" style="cursor: progress" @click="toUtils"></div>
+        </div>
+        <div class="under_center_box">
+          <div class="under_center"></div>
+          <div class="under_center"></div>
+          <div class="under_center"></div>
+          <div class="under_center"></div>
+          <div class="under_center"></div>
+        </div>
+        <div class="under_bottom"></div>
       </div>
     </div>
     <router-view></router-view>
@@ -56,95 +76,150 @@ export default {
   position: relative;
   width: 100vw;
   height: 100vh;
-  // .system_title {
-  //   display: flex;
-  //   justify-content: center;
-  //   align-items: center;
-  //   width: 100vw;
-  //   height: 6vh;
-  //   position: absolute;
-  //   z-index: 2;
-  //   background: url('~@/assets/homepage/title_back.png') no-repeat;
-  //   background-size: cover;
-
-  //   .system_title_icon {
-  //     margin-right: 2vw;
-  //     width: 4vw;
-  //     height: 8vh;
-  //     background: url("../../assets/首页_slices/logo.png") no-repeat center /
-  //       cover;
-  //   }
-
-  //   .system_title_text {
-  //     width: 20vw;
-  //     height: 6vh;
-  //     font-size: 2.2rem;
-  //     font-weight: 600;
-  //     font-family: 'YouSheBiaoTiHei';
-  //     color: #fff;
-  //     text-align: center;
-  //     line-height: 6vh;
-  //   }
-  // }
 
   .under_btn {
     position: absolute;
-    left: 32.5vw;
+    left: 28vw;
     right: 32.5vw;
-    bottom: 5vh;
-    width: 35vw;
-    height: 12vh;
+    bottom: 1vh;
+    width: 45vw;
+    height: 11vh;
     // background: #33a59f;
     display: flex;
     z-index: 2;
 
-    .under_btn_item {
-      width: 13vw;
-      height: 12vh;
-      // border: 1px solid #b1335d;
+    // 第二期样式
+    .under_box {
+      height: auto;
+      width: 45vw;
+      position: relative;
+      // background-color: orange;
+      .under_icon_box {
         display: flex;
-      justify-content: center;
-      align-items: center;
-
-      // * 导航样式
-      .item_check {
-        width: 5.5vw;
-        height: 5.5vw;
-        background-image: url('@/assets/picture/icon_home_nor.png');
-        background-repeat: no-repeat;
+        z-index: 3;
+        position: absolute;
+        top: 0vw;
+        width: 45vw;
+        height: 6vh;
+        // background-color: red;
+        .icon1 {
+          width: 3vw;
+          height: 6vh;
+          background-image: url(../../assets/home/icon_1.png);
           background-size: 100% 100%;
-        cursor: pointer;
-
-        &:hover {
-          background-image: url('@/assets/picture/icon_home_sel.png');
-          background-repeat: no-repeat;
-          background-size: 100% auto;
+          margin-left: 4.25vw;
         }
+        .icon2 {
+          width: 3vw;
+          height: 6vh;
+          background-image: url(../../assets/home/icon1.png);
+          background-size: 100% 100%;
+          // background-color: #fff;
+          margin-left: 5.25vw;
         }
-
-      .item_check_back {
-        width: 5.5vw;
-        height: 5.5vw;
-        background-image: url('@/assets/picture/under_button.png');
-        background-repeat: no-repeat;
+        .icon3 {
+          width: 3vw;
+          height: 6vh;
+          // background-color: #fff;
+          background-image: url(../../assets/home/icon_3.png);
           background-size: 100% 100%;
-        font-size: 1.2rem;
-        font-family: PingFangSC, PingFang SC;
-        font-weight: 500;
-        color: #ecf4f9;
-        line-height: 10.5vh;
-        text-shadow: 0px 0px 9px #00a2ff;
-        text-align: center;
-        cursor: pointer;
-
-        &:hover {
-          color: #00f5ff;
-          // * 强行增亮
-          filter: brightness(140%);
-          background-size: 100% auto;
+          margin-left: 5.25vw;
         }
+        .icon4 {
+          width: 3vw;
+          height: 6vh;
+          // background-color: #fff;
+          background-image: url(../../assets/home/icon_4.png);
+          background-size: 100% 100%;
+          margin-left: 5vw;
+        }
+        .icon5 {
+          width: 3vw;
+          height: 6vh;
+          background-image: url(../../assets/home/icon_5.png);
+          background-size: 100% 100%;
+          // background-color: #fff;
+          margin-left: 5.25vw;
         }
       }
+      .under_bottom {
+        position: absolute;
+        width: 45vw;
+        height: 6vh;
+        background-image: url(../../assets/home/icon_7.png);
+        background-size: 100% 100%;
+        // background-color: #fff;
+        bottom: 0vh;
+      }
+      .under_center_box {
+        position: absolute;
+        bottom: 2vh;
+        width: 45vw;
+        height: 10vh;
+        // background-color: red;
+        display: flex;
+        .under_center {
+          width: 5vw;
+          height: 9.5vh;
+          // background-color: blue;
+          background-image: url(../../assets//home/icon_6.png);
+          background-size: 100% 100%;
+          margin-top: 2vh;
+          margin-left: 3.2vw;
+        }
+      }
+    }
+
+    // 第一期样式
+    // .under_btn_item {
+    //   background-color: orange;
+    //   width: 13vw;
+    //   height: 12vh;
+    //   // border: 1px solid #b1335d;
+    //   display: flex;
+    //   justify-content: center;
+    //   align-items: center;
+
+    //   // * 导航样式
+    //   .item_check {
+    //     background-color: pink;
+    //     width: 5.5vw;
+    //     height: 5.5vw;
+    //     background-image: url('@/assets/picture/icon_home_nor.png');
+    //     background-repeat: no-repeat;
+    //     background-size: 100% 100%;
+    //     cursor: pointer;
+
+    //     &:hover {
+    //       background-image: url('@/assets/picture/icon_home_sel.png');
+    //       background-repeat: no-repeat;
+    //       background-size: 100% auto;
+    //     }
+    //   }
+
+    //   .item_check_back {
+    //     width: 5.5vw;
+    //     height: 5.5vw;
+    //     background-image: url('@/assets/picture/under_button.png');
+    //     background-repeat: no-repeat;
+    //     background-size: 100% 100%;
+    //     font-size: 1.2rem;
+    //     font-family: PingFangSC, PingFang SC;
+    //     font-weight: 500;
+    //     color: #ecf4f9;
+    //     line-height: 10.5vh;
+    //     text-shadow: 0px 0px 9px #00a2ff;
+    //     text-align: center;
+    //     cursor: pointer;
+
+    //     &:hover {
+    //       color: #00f5ff;
+    //       // * 强行增亮
+    //       filter: brightness(140%);
+    //       background-size: 100% auto;
+    //     }
+    //   }
+    // }
   }
 }
 </style>

src/views/sensingDevice/components/mancarStatistics.vue

@@ -5,32 +5,31 @@
       <div class="mancar_title_text">人车统计</div>
     </div>
     <div class="mancar_main">
-      <div class="echart_box" id="man-charts"></div>
-      <div class="echart_box" id="car-charts"></div>
-      <!-- <div class="text_people">人流统计</div>
-      <div class="text_car">车流统计</div> -->
+      <div class="mancar_box">
+        <div class="mancar_item">
+          <div class="mancar_icon"></div>
+          <div class="mancar_text">{{ list.userCount }}</div>
+        </div>
+        <div class="mancar_item1">
+          <div class="mancar_icon1"></div>
+          <div class="mancar_text1">{{ list.vehicleCount }}</div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import * as echarts from 'echarts'
 import { humanVehicleStatistics } from '@/api/sensingDevice/resource/index'
 
 export default {
   name: 'ManCar',
   data() {
     return {
-      list: {}
+      list: []
     }
   },
-  mounted() {
-    setTimeout(()=>{
-    this.init_charts()
-    this.init_car_charts()
-    },1500)
-
-  },
+  mounted() {},
   created() {
     this.onhumanVehicleStatistics()
   },
@@ -38,187 +37,7 @@ export default {
     async onhumanVehicleStatistics() {
       const res = await humanVehicleStatistics()
       this.list = res.data
-   
-    },
-    //
-    init_charts() {
-      var chartDom = document.getElementById('man-charts')
-      var myChart = echarts.init(chartDom)
-      var option
-
-      const gaugeData = [
-        {
-          value: this.list.userCount,
-          name: '人口',
-          title: {
-            offsetCenter: ['0%', '30%']
-          },
-          detail: {
-            valueAnimation: true,
-            offsetCenter: ['0%', '-20%']
-          }
-        }
-      ]
-      option = {
-        series: [
-          {
-            type: 'gauge',
-            startAngle: 120,
-            endAngle: -270,
-            pointer: {
-              show: false
-            },
-            progress: {
-              show: true,
-              overlap: false,
-              roundCap: true,
-              clip: false,
-              itemStyle: {
-                borderWidth: 1,
-                borderColor: '#464646'
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                width: 10
-              }
-            },
-            splitLine: {
-              show: false,
-              distance: 0,
-              length: 10
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false,
-              distance: 50
-            },
-            data: gaugeData,
-            title: {
-              fontSize: 18,
-              color: '#fff',
-              fontweight: 600
-            },
-            detail: {
-              width: 50,
-              height: 14,
-              fontSize: 12,
-              color: '',
-              borderColor: 'inherit',
-              borderRadius: 20,
-              borderWidth: 1,
-              formatter: '{value}'
-            }
-          }
-        ]
-      }
-      setInterval(function () {
-        gaugeData.value = +(Math.random() * 100).toFixed(2)
-
-        myChart.setOption({
-          series: [
-            {
-              data: gaugeData,
-              pointer: {
-                show: false
-              }
-            }
-          ]
-        })
-      }, 2000)
-      option && myChart.setOption(option)
-    },
-    //
-    init_car_charts() {
-      var chartDom = document.getElementById('car-charts')
-      var myChart = echarts.init(chartDom)
-      var option
-
-      const gaugeData = [
-        {
-          value: this.list.vehicleCount,
-          name: '车辆',
-          title: {
-            offsetCenter: ['0%', '30%']
-          },
-          detail: {
-            valueAnimation: true,
-            offsetCenter: ['0%', '-20%']
-          }
-        }
-      ]
-      option = {
-        series: [
-          {
-            type: 'gauge',
-            startAngle: 120,
-            endAngle: -270,
-            pointer: {
-              show: false
-            },
-            progress: {
-              show: true,
-              overlap: false,
-              roundCap: true,
-              clip: false,
-              itemStyle: {
-                borderWidth: 1,
-                borderColor: '#464646'
-              }
-            },
-            axisLine: {
-              lineStyle: {
-                width: 10
-              }
-            },
-            splitLine: {
-              show: false,
-              distance: 0,
-              length: 10
-            },
-            axisTick: {
-              show: false
-            },
-            axisLabel: {
-              show: false,
-              distance: 50
-            },
-            data: gaugeData,
-            title: {
-              fontSize: 18,
-              color: '#fff',
-              fontweight: 600
-            },
-            detail: {
-              width: 50,
-              height: 14,
-              fontSize: 12,
-              color: 'inherit',
-              borderColor: 'inherit',
-              borderRadius: 20,
-              borderWidth: 1,
-              formatter: '{value}'
-            }
-          }
-        ]
-      }
-      setInterval(function () {
-        gaugeData.value = +(Math.random() * 100).toFixed(2)
-
-        myChart.setOption({
-          series: [
-            {
-              data: gaugeData,
-              pointer: {
-                show: false
-              }
-            }
-          ]
-        })
-      }, 2000)
-      option && myChart.setOption(option)
+      console.log(res.data, 'lloo')
     }
   }
 }
@@ -233,7 +52,7 @@ export default {
     width: 20vw;
     height: 4vh;
     background-image: url('@/assets/picture/bg_small_title.png');
-    background-size: 100% auto;
+    background-size: 100% 100%;
     background-repeat: no-repeat;
 
     .mancar_title_text {
@@ -251,9 +70,81 @@ export default {
     width: 20vw;
     height: 19vh;
     color: #edf1f7;
-
+    background-image: url(../../../assets/icon-hza/bg_5@2x.png);
     background-repeat: no-repeat;
-    background-size: 100% auto;
+    background-size: 100% 100%;
+    .mancar_box {
+      width: 18vw;
+      height: 15vh;
+      // background-color: pink;
+      // margin-top: 2vh;
+      display: flex;
+      .mancar_item {
+        width: 11vw;
+        height: 18vh;
+        // background-color: red;
+        background-image: url(../../../assets/people-car_hza/icon1.png);
+        background-size: 100% 100%;
+        position: relative;
+
+        // background-color: #fff;
+        margin-top: 0.5vh;
+        .mancar_text {
+          text-align: center;
+          font-size: 1.3rem;
+          font-weight: 600;
+          width: 3.5vw;
+          height: 3vh;
+          // background-color: #fff;
+          position: absolute;
+          top: 50%;
+          left: 2.5vw;
+        }
+        .mancar_icon {
+          position: absolute;
+          top: 40%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 2vw;
+          height: 4vh;
+          // background-color: #fff;
+          background-image: url(../../../assets/people-car_hza/icon5.png);
+          background-size: 100% 100%;
+        }
+      }
+      .mancar_item1 {
+        width: 11vw;
+        height: 18vh;
+        margin-top: 0.5vh;
+        // background-color: blue;
+        margin-left: 1vw;
+        background-image: url(../../../assets/people-car_hza/icon4.png);
+        background-size: 100% 100%;
+        position: relative;
+        .mancar_text1 {
+          text-align: center;
+          font-size: 1.3rem;
+          font-weight: 600;
+          width: 3.5vw;
+          height: 3vh;
+          // background-color: #fff;
+          position: absolute;
+          top: 50%;
+          left: 2.5vw;
+        }
+        .mancar_icon1 {
+          position: absolute;
+          top: 40%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 2vw;
+          height: 4vh;
+          // background-color: #fff;
+          background-image: url(../../../assets/people-car_hza/icon2.png);
+          background-size: 100% 100%;
+        }
+      }
+    }
 
     // .text_people {
     //   // z-index: 3;