feat: 添加模态框

app/src/components/BasicTotal.vue

@@ -19,9 +19,18 @@ export default {
 </script>
 
 <template >
-  <div class="layer">{{ label }}<span class="num">
-    <linear-text :text="number" fontSize="16px" ></linear-text>
-  </span>{{ unit }}</div>
+  <div class="layer">
+    <slot name="label" v-if="$slots.label"></slot>
+    <span v-else>
+    {{ label }}
+    </span>
+    
+   <span>
+    <span class="num">
+      <linear-text :text="number" fontSize="16px" ></linear-text>
+    </span>{{ unit }}
+   </span>
+  </div>
 </template>
 
 <style scoped lang='less'>
@@ -34,8 +43,8 @@ export default {
   background: rgba(0, 213, 255, .13);
   line-height: 31px;
   color: #fff;
-  padding: 0 5px;
-
+  padding: 3px 5px;
+  justify-content: space-between;
 }
 // 渐变
 .num{
@@ -43,6 +52,8 @@ export default {
   margin: 0 8px;
   background: rgba(0, 213, 255, .33);
   padding: 0px 5px;
+  width: 51px;
+  text-align: center;
   border: 1px solid rgb(0, 106, 255, .54);
 }
 </style>

app/src/main.js

@@ -3,9 +3,11 @@ import { createPinia, PiniaVuePlugin } from "pinia";
 import DataVComponent from "@zhgkpt/components";
 import App from "./App.vue";
 import router from "./router";
-
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 import "./assets/css/main.css";
 
+Vue.use(ElementUI);
 Vue.use(PiniaVuePlugin);
 Vue.use(DataVComponent);
 new Vue({

app/src/views/Detail/components/MaintenanceSupervision.vue

@@ -16,19 +16,95 @@
         </button-group-item>
       </button-group>
     </div>
-    <div>
+    <div v-if="checked === 0">
       <div class="row header">
         <span class="time">排查时间</span>
         <span class="person">排查人员</span>
         <span class="result">排查结果</span>
       </div>
       <VueSeamlessScroll
-        :data="list"
+        :data="list1"
         :class-option="classOption"
         class="warp"
       >
         <ul class="item">
-          <li class="row" v-for="(item, index) in list" :key="index">
+          <li class="row" v-for="(item, index) in list1" :key="index">
+              <span class="time">{{ item[0] }}</span>
+              <span class="person">{{ item[1] }}</span>
+              <span class="result"
+                :style="{
+                  color: resultType(item[2])
+                }"
+                >{{ item[2] }}</span
+              >
+            </li>
+          </ul>
+        </VueSeamlessScroll>
+    </div>
+    
+    <div v-if="checked === 1">
+      <div class="row header">
+        <span class="time">检查结束事件</span>
+        <span class="person">执法机构</span>
+        <span class="result">检查结果</span>
+      </div>
+      <VueSeamlessScroll
+        :data="list2"
+        :class-option="classOption"
+        class="warp"
+      >
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list2" :key="index">
+              <span class="time">{{ item[0] }}</span>
+              <span class="person">{{ item[1] }}</span>
+              <span class="result"
+                :style="{
+                  color: resultType(item[2])
+                }"
+                >{{ item[2] }}</span
+              >
+            </li>
+          </ul>
+        </VueSeamlessScroll>
+    </div>
+    <div v-if="checked === 2">
+      <div class="row header">
+        <span class="time">登记事件</span>
+        <span class="person">排查人员</span>
+        <span class="result">是否存在隐患</span>
+      </div>
+      <VueSeamlessScroll
+        :data="list3"
+        :class-option="classOption"
+        class="warp"
+      >
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list3" :key="index">
+              <span class="time">{{ item[0] }}</span>
+              <span class="person">{{ item[1] }}</span>
+              <span class="result"
+                :style="{
+                  color: resultType(item[2])
+                }"
+                >{{ item[2] }}</span
+              >
+            </li>
+          </ul>
+        </VueSeamlessScroll>
+    </div>
+    <div v-if="checked === 3">
+      <div class="row header">
+        <span class="time">检查时间</span>
+        <span class="person">检查人</span>
+        <span class="result">检查结果</span>
+      </div>
+      <VueSeamlessScroll
+        :data="list4"
+        :class-option="classOption"
+        class="warp"
+      >
+        <ul class="item">
+          <li class="row" v-for="(item, index) in list4" :key="index">
               <span class="time">{{ item[0] }}</span>
               <span class="person">{{ item[1] }}</span>
               <span class="result"
@@ -50,7 +126,37 @@ export default {
   name: 'MaintenanceSupervision',
   data() {
     return {
-      list: [
+      list1: [
+        ["09:23 05-14", "张三", "合格"],
+        ["09:23 05-14", "王小强", "不合格"],
+        ["09:23 05-14", "张三", "合格"],
+        ["09:23 05-14", "王小强", "不合格"],
+        ["09:23 05-14", "张三", "合格"],
+        ["09:23 05-14", "张三", "合格"],
+        ["09:23 05-14", "王小强", "不合格"],
+        ["09:23 05-14", "王小强", "不合格"]
+      ],
+      list2: [
+        ["09:23 05-14", "沙坪坝支队", "合格"],
+        ["09:23 05-14", "两江支队", "不合格"],
+        ["09:23 05-14", "城口大队", "合格"],
+        ["09:23 05-14", "永川支队", "不合格"],
+        ["09:23 05-14", "城口大队", "合格"],
+        ["09:23 05-14", "永川支队", "合格"],
+        ["09:23 05-14", "永川支队", "不合格"],
+        ["09:23 05-14", "永川支队", "不合格"]
+      ],
+      list3: [
+        ["09:23 05-14", "张三", "是"],
+        ["09:23 05-14", "王小强", "否"],
+        ["09:23 05-14", "张三", "是"],
+        ["09:23 05-14", "王小强", "否"],
+        ["09:23 05-14", "张三", "是"],
+        ["09:23 05-14", "张三", "是"],
+        ["09:23 05-14", "王小强", "否"],
+        ["09:23 05-14", "王小强", "否"]
+      ],
+      list4: [
         ["09:23 05-14", "张三", "合格"],
         ["09:23 05-14", "王小强", "不合格"],
         ["09:23 05-14", "张三", "合格"],
@@ -59,7 +165,8 @@ export default {
         ["09:23 05-14", "张三", "合格"],
         ["09:23 05-14", "王小强", "不合格"],
         ["09:23 05-14", "王小强", "不合格"]
-      ]
+      ],
+      checked: 0,
     }
   },
   components: {
@@ -74,12 +181,15 @@ export default {
   },
   methods: {
     change(idx) {
+      this.checked = idx
       console.log("切换索引", idx)
     },
     resultType(text) {
       return {
         "合格": "#23f59d",
-        "不合格": "#df575b"
+        "不合格": "#df575b",
+        "是": "#23f59d",
+        "否": "#df575b"
       }[text]
     }
   }

app/src/views/Home/components/AlarmingSituationDynamics.vue

@@ -28,12 +28,6 @@
           <span class="org">{{ item[4] }}</span>
           <span
             class="state"
-            :style="{
-              color: {
-                出动: '#44F1FF',
-                归队: '#05cd19',
-              }[item[5]],
-            }"
             >{{ item[5] }}</span
           >
           <span
@@ -50,6 +44,7 @@
 </template>
 
 <script>
+// 接警 下达 出动 到场 展开 出水 控制 熄灭 停水 清理 返回 #归队
 import VueSeamlessScroll from "vue-seamless-scroll";
 export default {
   name: "AlarmingSituationDynamics",
@@ -83,7 +78,7 @@ export default {
           "金融大厦",
           "火灾扑救",
           "悦来消防站",
-          "归队",
+          "到场",
           "一般风险",
         ],
         [
@@ -117,10 +112,10 @@ export default {
   methods: {
     levelText(text) {
       return {
-        高风险: "#ff4f4f",
+        高风险: "#FF0B0B",
         较高风险: "#ff833d",
         一般风险: "#fbff3d",
-        低风险: "#44F1FF",
+        低风险: "#35c2ff",
       }[text];
     },
   },

app/src/views/Home/components/BasicInfo.vue

@@ -13,15 +13,30 @@ export default {
 
 <template >
   <div class="basic-info">
-      <div class="__top">
-        <FirstHight />
+      <div class="__left">
         <FirstHight />
       </div>
-      <div class="__bottom">
-        <linear-text startColor="#00D1FF" endColor="#00FFE088" text="治理重点" fontSize="12px" />
-        <BasicTotal number="1326" label="超高层" unit="栋"/>
-        <BasicTotal number="926" label="老旧" unit="栋"/>
-        <BasicTotal number="1273" label="混合体" unit="栋"/>
+      <div class="__right">
+        <linear-text startColor="#00FFE0" endColor="#00D1FF" text="治理重点" fontSize="16px" />
+        <div class="basic-total">
+          <BasicTotal style="width: 187px;" number="1326" label="超高层建筑" unit="栋"/>
+          <BasicTotal style="width: 187px;" number="926" label="" unit="栋">
+            <template #label>
+              <span class="label">
+                <span class="sub-label">2000年前底</span>
+                老旧住宅建筑
+              </span>
+            </template>
+          </BasicTotal>
+          <BasicTotal style="width: 187px;" number="1273" label="老旧商业混合体" unit="栋">
+            <template #label>
+              <span class="label">
+                <span class="sub-label">2000年前底</span>
+                老旧住宅建筑
+              </span>
+            </template>
+          </BasicTotal>
+        </div>
       </div>
     </div>
 </template>
@@ -29,15 +44,30 @@ export default {
 <style scoped lang='less'>
 .basic-info {
   padding: 4px;
-  .__top {
+  display: flex;
+  .__left {
     display: flex; justify-content: space-around;
   }
-  .__bottom {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
+  .__right {
     margin-top: 20px;
+    margin-left: 5px;
     font-size: 14px;
+    .basic-total {
+      margin-top: 17px;
+      display: flex;
+      flex-direction: column;
+      gap: 17px;
+      .label {
+        font-size: 12px;
+        display: flex;
+        line-height: 12px;
+        flex-direction: column;
+        justify-content: center;
+        .sub-label {
+          font-size: 10px;
+        }
+      }
+    }
   }
 }
 </style>

app/src/views/Home/components/HiddenDangerDetection.vue

@@ -17,7 +17,7 @@ export default {
     <div class="hidden-danger-detection_top">
       <div>按排查进度分：</div>
       <div class="hidden-danger-detection_top_inner">
-        <hidden-danger-total number="1302/23768" label="总条数" unit="栋/条"/>
+        <hidden-danger-total number="1302/23768" label="总条数" unit="栋/次"/>
         <hidden-danger-total number="987/8768" label="隐患数" unit="栋/条"/>
       </div>
     </div>

app/src/views/Home/components/MapCharts.vue

@@ -50,7 +50,160 @@ export default {
       // mapIcon: require("@/assets/images/map-icon.png"),
       activeName: "重庆市",
       activeMapData: [],
-      heatData: [],
+      heatData: [
+    {
+        "name": "万州区",
+        "value": 320
+    },
+    {
+        "name": "涪陵区",
+        "value": 21
+    },
+    {
+        "name": "渝中区",
+        "value": 121
+    },
+    {
+        "name": "大渡口区",
+        "value": 21
+    },
+    {
+        "name": "江北区",
+        "value": 32
+    },
+    {
+        "name": "沙坪坝区",
+        "value": 32
+    },
+    {
+        "name": "九龙坡区",
+        "value": 12
+    },
+    {
+        "name": "南岸区",
+        "value": 134
+    },
+    {
+        "name": "北碚区",
+        "value": 11
+    },
+    {
+        "name": "綦江区",
+        "value": 323
+    },
+    {
+        "name": "大足区",
+        "value": 23
+    },
+    {
+        "name": "渝北区",
+        "value": 123
+    },
+    {
+        "name": "巴南区",
+        "value": 89
+    },
+    {
+        "name": "黔江区",
+        "value": 111
+    },
+    {
+        "name": "长寿区",
+        "value": 150
+    },
+    {
+        "name": "江津区",
+        "value": 111
+    },
+    {
+        "name": "合川区",
+        "value": 19
+    },
+    {
+        "name": "永川区",
+        "value": 16
+    },
+    {
+        "name": "南川区",
+        "value": 21
+    },
+    {
+        "name": "璧山区",
+        "value": 32
+    },
+    {
+        "name": "铜梁区",
+        "value": 45
+    },
+    {
+        "name": "潼南区",
+        "value": 121
+    },
+    {
+        "name": "荣昌区",
+        "value": 111
+    },
+    {
+        "name": "开州区",
+        "value": 34
+    },
+    {
+        "name": "梁平区",
+        "value": 56
+    },
+    {
+        "name": "武隆区",
+        "value": 12
+    },
+    {
+        "name": "城口县",
+        "value": 15
+    },
+    {
+        "name": "丰都县",
+        "value": 45
+    },
+    {
+        "name": "垫江县",
+        "value": 32
+    },
+    {
+        "name": "忠县",
+        "value": 40
+    },
+    {
+        "name": "云阳县",
+        "value": 1
+    },
+    {
+        "name": "奉节县",
+        "value": 12
+    },
+    {
+        "name": "巫山县",
+        "value": 65
+    },
+    {
+        "name": "巫溪县",
+        "value": 145
+    },
+    {
+        "name": "石柱土家族自治县",
+        "value": 67
+    },
+    {
+        "name": "秀山土家族苗族自治县",
+        "value": 87
+    },
+    {
+        "name": "酉阳土家族苗族自治县",
+        "value": 100
+    },
+    {
+        "name": "彭水苗族土家族自治县",
+        "value": 123
+    }
+            ],
     };
   },
   // props: {
@@ -109,14 +262,14 @@ export default {
           latitude: 0,
         },
       ];
-      this.heatData = this.heatDataList.map((e) => {
-        // this.heatData = heatDataList.map((e) => {
-        return {
-          name: e.areaTitle,
-          // value: e.value ? e.value * 1000000 : 0,
-          value: e.value ? e.value : 0,
-        };
-      });
+      // this.heatData = this.heatDataList.map((e) => {
+      //   // this.heatData = heatDataList.map((e) => {
+      //   return {
+      //     name: e.areaTitle,
+      //     // value: e.value ? e.value * 1000000 : 0,
+      //     value: e.value ? e.value : 0,
+      //   };
+      // });
 
       this.drawMap();
     },
@@ -359,12 +512,29 @@ export default {
         //   },
         // },
         visualMap: {
-          show: false,
+          show: true,
           bottom: 20,
           left: 10,
-          color: ["#b5f8ff", "#235d99"],
+          // color: ["#b5f8ff", "#235d99"],
+          // min: 1000,
+      // max: 38000000,
+      inRange: {
+        color: [
+          // '#313695',
+          // '#4575b4',
+          // '#74add1',
+          // '#abd9e9',
+          // '#e0f3f8',
+          // '#ffffbf',
+          // '#fee090',
+          '#fdae61',
+          '#f46d43',
+          '#d73027',
+          '#a50026'
+        ]
+      },
           // min: 0,
-          max: maxMap > 0 ? maxMap : 1,
+          // max: maxMap > 0 ? maxMap : 1,
           calculable: true,
           textStyle: {
             color: "#fff",
@@ -378,10 +548,9 @@ export default {
               position: [0, 0],
               normal: {
                 show: true,
-
                 textStyle: {
                   color: "#fff",
-                  fontSize: 10,
+                  fontSize: 12,
                 },
               },
               emphasis: {
@@ -410,7 +579,7 @@ export default {
                 // borderColor: '#a6eeff',
                 borderColor: "#75b9da", // 地图边缘线颜色
                 borderWidth: 2,
-                areaColor: "#0f417f",
+                // areaColor: "#0f417f",
               },
 
               emphasis: {
@@ -448,18 +617,8 @@ export default {
             layoutCenter: ["50%", "50%"],
             layoutSize: "100%",
             map: mapName, // 使用
-          },
-
-          {
-            name: "热图",
-            type: "heatmap",
-            coordinateSystem: "geo",
-            data: convertedData[0],
-            // minOpacity: 0.2,
-            // maxOpacity: 1,
-            pointSize: 50,
-            blurSize: 20,
-          },
+            data: data
+          }
         ],
       };
       const chart = echarts.init(mapChart, "light");

app/src/views/Home/components/Rectification.vue

@@ -7,7 +7,7 @@
             </div>
             <div class="num">
                 <span class="gress-num">存在隐患数</span>
-                <span>3276</span>
+                <linear-text  text="3276" fontSize="16px" />
             </div>
             <div>
                 <ul>
@@ -29,7 +29,7 @@
                     </li>
                     <li class="list-one">
                         <span class="line-list">待计划整改</span>
-                        <div class="line">
+                        <div class="line" title="123">
                             <span class="line-num"  :style="{
             width: Math.round(80) + '%',
           }"></span>
@@ -56,14 +56,17 @@ export default {
 .gress{
     width: 100%;
     display: flex;
+    font-size: 12px;
     justify-content: space-between;
 }
 .gress-num{
     color: #00C2FF;
     margin-right: 18px;
+    font-size: 12px;
 }
 .num{
-    font-size: 20px;
+    display: flex;
+    align-items: center;
     margin-top: 20px;
 }
 .list-one{

app/src/views/Home/components/RiskWarning.vue

@@ -35,12 +35,24 @@ export default {
           formatter: "{a} <br/>{b}",
         },
         title: {
-          text: "建筑总数1773栋",
-          x: "29%",
+          text: "{value|1773}栋\n{name|高层建筑总数}",
+          x: "39%",
           y: "center",
+          textAlign: 'center',
           textStyle: {
             color: "#fff",
             fontSize: 12,
+            rich: {
+                value: {
+                    color: '#fff',
+                    fontSize: 28,
+                    lineHeight: 28,
+                },
+                name: {
+                    color: '#fff',
+                    lineHeight: 12
+                },
+            },
           },
         },
         legend: {
@@ -57,7 +69,7 @@ export default {
           },
           data: ["高风险", "一般风险", "较高风险", "低风险"],
         },
-        color: ["#FF4F4F", "#FF833D", "#FBFF3D", "#35C2FF"],
+        color: ["#FF0B0B", "#ff833d", "#fbff3d", "#35c2ff"],
         series: [
           // 数据展示层
           {

app/src/views/Home/components/WisdomFire.vue

@@ -192,6 +192,8 @@ img {
   font-size: 24px;
   text-align: center;
   padding-left: 3px;
+  padding-top: 20px;
+  box-sizing: border-box;
   margin: auto;
 }
 .pressure-line {

app/src/views/Home/index.vue

@@ -59,6 +59,7 @@
             </template>
           </border-panel>
         </div>
+        <basic-modal />
       </div>
 </template>
 <script>

components/BasicModal/index.js

@@ -0,0 +1,4 @@
+import BasicModal from "./index.vue";
+import { withInstall } from "@zhgkpt/utils";
+
+export default withInstall(BasicModal);

components/BasicModal/index.vue

@@ -0,0 +1,52 @@
+<script>
+import { Dialog as ElDialog } from 'element-ui'
+
+export default {
+  name: 'BasicModal',
+  components: {
+    ElDialog
+  }
+}
+</script>
+
+<template >
+  <el-dialog title="基本信息" width="1456px" top="184px" :visible="false" :append-to-body="true">
+    <!-- <slot /> -->
+    111111111111111
+  </el-dialog>
+</template>
+
+<style scoped lang='less'>
+::v-deep(.el-dialog) {
+  background: none;
+  color: #fff;
+  .el-dialog__header {
+    background-color: rgba(0, 102, 255, .26);
+    color: #fff;
+    height: 60px;
+    box-sizing: border-box;
+    border-top: 2px solid #00aaff;
+    .el-dialog__title {
+      color: #fff;
+    }
+
+    .el-dialog__title::before {
+      content: "";
+      display: inline-block;
+      background: url('../assets/modal_header.svg') no-repeat center center;
+      width: 9px;
+      height: 14px;
+      margin-right: 10px;
+    }
+    
+    .el-dialog__headerbtn .el-dialog__close {
+      color: #fff;
+    }
+  }
+  
+  .el-dialog__body {
+      color: #fff;
+      background-color: rgba(3, 18, 57, .78);
+    }
+}
+</style>

components/assets/modal_header.svg

@@ -0,0 +1,3 @@
+<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.28024 0.0155029H0V13.9844H3.28024L8.82242 6.99995L3.28024 0.0155029Z" fill="#00EAFF"/>
+</svg>

components/index.js

@@ -1,4 +1,5 @@
 import BorderPanel from "./BorderPanel";
+import BasicModal from "./BasicModal";
 import ButtonBlock from "./ButtonBlock";
 import { ButtonGroup, ButtonGroupItem } from "./ButtonGroup";
 import LinearText from "./LinearText";
@@ -8,6 +9,7 @@ const components = [
   ButtonBlock,
   ButtonGroup,
   ButtonGroupItem,
+  BasicModal
 ];
 
 function install(app) {
@@ -16,7 +18,7 @@ function install(app) {
   });
 }
 
-export { BorderPanel, LinearText, ButtonBlock, ButtonGroup, ButtonGroupItem };
+export { BorderPanel, LinearText, ButtonBlock, ButtonGroup, ButtonGroupItem, BasicModal};
 
 export default {
   install,

package.json

@@ -30,6 +30,7 @@
     "vue": "^2.7.7"
   },
   "dependencies": {
-    "echarts": "^5.4.2"
+    "echarts": "^5.4.2",
+    "element-ui": "^2.15.13"
   }
 }