feat:风险预警

app/src/components/Headers.vue

@@ -80,6 +80,7 @@ export default {
         {
           name: "风险预警",
           id: 4,
+          url:'/risk'
         },
       ],
       titleList1: [

app/src/router/index.js

@@ -5,8 +5,8 @@ import HomePage from "../views/Home/index.vue";
 import DetailPage from "../views/Detail/index.vue";
 import Basic from '../views/Basic/index.vue'
 import Fire from '../views/Fire/index.vue'
+import Risk from '../views/Risk/index.vue'
 Vue.use(VueRouter);
-
 const router = new VueRouter({
   mode: "history",
   base: import.meta.env.BASE_URL,
@@ -48,6 +48,14 @@ const router = new VueRouter({
           meta: {
             id: 3,
           }
+        },
+        {
+          path: '/risk',
+          name: 'risk',
+          component: Risk,
+          meta: {
+            id: 4,
+          }
         }
 
       ]

app/src/views/Risk/components/Investigation.vue

@@ -0,0 +1,176 @@
+<template >
+    <div class="maintenance-supervision">
+      <div class="maintenance-supervision_header">
+        <button-group @change="change">
+          <button-group-item >
+            消防设施
+          </button-group-item>
+          <button-group-item >
+            生命通道
+          </button-group-item>
+          <button-group-item >
+            用电用气
+          </button-group-item>
+          <button-group-item >
+            消防管理
+          </button-group-item>
+        </button-group>
+      </div>
+      <div >
+        <div class="row header">
+          <span class="time">排查指标</span>
+          <span class="person">正常数</span>
+          <span class="result">异常数</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list1"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="item">
+            <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>
+  </template>
+  <script>
+  import VueSeamlessScroll from "vue-seamless-scroll";
+  
+  export default {
+    name: 'MaintenanceSupervision',
+    data() {
+      return {
+        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", "张三", "合格"],
+          ["09:23 05-14", "王小强", "不合格"],
+          ["09:23 05-14", "张三", "合格"],
+          ["09:23 05-14", "张三", "合格"],
+          ["09:23 05-14", "王小强", "不合格"],
+          ["09:23 05-14", "王小强", "不合格"]
+        ],
+        checked: 0,
+      }
+    },
+    components: {
+      VueSeamlessScroll
+    },
+    computed: {
+      classOption() {
+        return {
+          singleHeight: 43,
+        };
+      },
+    },
+    methods: {
+      change(idx) {
+        this.checked = idx
+        console.log("切换索引", idx)
+      },
+      resultType(text) {
+        return {
+          "合格": "#23f59d",
+          "不合格": "#df575b",
+          "是": "#23f59d",
+          "否": "#df575b"
+        }[text]
+      }
+    }
+  }
+  </script>
+  
+  <style scoped lang='less'>
+  .maintenance-supervision {
+    padding: 10px 10px 0px 10px;
+    .maintenance-supervision_header {
+      border-bottom: 1px solid #154956;
+      padding-bottom: 2px;
+    }
+    .warp {
+    height: 258px;
+    margin: 0 auto;
+    overflow: hidden;
+      .item {
+        list-style: none;
+        padding: 0;
+        margin: 0 auto;
+        cursor: pointer;
+      }
+    }
+  
+  .header {
+    color: #fff;
+    height: 33px !important;
+    line-height: 33px !important;
+    background-color: rgba(0, 163, 255, 0.3) !important;
+    color: #61DBFF;
+    margin-top: 15px;
+    margin-bottom: 6px;
+  }
+  
+  .row,
+  li,
+  a {
+    display: block;
+    height: 39px;
+    line-height: 39px;
+    margin-bottom: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    .time,
+    .person,
+    .result {
+      flex: 0.33;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  }
+  </style>
+  

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

@@ -0,0 +1,87 @@
+<template>
+    <div class="rect">
+        <div class="unit-hid">
+            <div>隐患数
+            <span class="num">765</span>
+            </div>
+        <span>单位:个</span>
+        </div>
+    <div class="num-hid">
+    <span>15日到期隐患数 
+        <div class="hid">7</div>
+    </span>
+    <span>30日到期隐患数 
+        <div class="hid">15</div>
+    </span>
+    <span>60日到期隐患数 
+        <div class="hid">58</div>
+    </span>
+    </div>
+    <!--限期  -->
+    <div class="hid-img">
+   <div>
+    <img src="../../../assets/images/Frame 1296.png" alt="">
+    <span>限期2023年底整改数量</span>
+   </div>
+    <span class="hid-num">1069</span>
+    </div>
+    <div class="hid-img">
+   <div>
+    <img src="../../../assets/images/Frame 1296.png" alt="">
+    <span>限期2023年底整改数量</span>
+   </div>
+    <span class="hid-num">1069</span>
+    </div>
+    <div class="hid-img">
+   <div>
+    <img src="../../../assets/images/Frame 1296.png" alt="">
+    <span>限期2023年底整改数量</span>
+   </div>
+    <span class="hid-num">10069</span>
+    </div>
+    </div>
+</template>
+
+<script >
+
+</script>
+
+<style lang="less" scoped>
+.rect{
+    font-size: 16px;
+    margin: 10px 10px;
+    .num{
+        font-size: 20px;
+    }
+    .hid{
+        font-size: 28px;
+        color: #FFCB44;
+        text-align: center;
+    }
+    .num-hid{
+        display: flex;
+        justify-content: space-between;
+        justify-items: center;
+        align-items: center;
+    }
+    .unit-hid{
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 20px;
+    }
+    .hid-img{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+        img{
+            margin-right: 8px;
+        }
+    }
+    .hid-num{
+        font-size: 32px;
+        color: #00C2FF;
+    }
+    
+}
+</style>

app/src/views/Risk/components/RiskDanger.vue

@@ -0,0 +1,183 @@
+<template>
+    <div>
+      <div class="row header">
+          <span class="type">序号</span>
+          <span class="count">建筑名称</span>
+          <span class="time">风险等级</span>
+          <span class="unit">隐患数</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="item">
+          <li class="row" v-for="(item, index) in list" :key="index">
+              <span class="type">{{ index+1 }}</span>
+              <span class="count">{{ item[0] }}</span>
+              <span
+            class="time"
+            :style="{
+              color: levelText(item[1]),
+            }"
+            >{{ item[1] }}</span
+          >
+              <span class="unit">{{ item[2] }}</span>
+            </li>
+          </ul>
+        </VueSeamlessScroll>
+    </div>
+    </template>
+    
+    <script>
+    import VueSeamlessScroll from "vue-seamless-scroll";
+    export default {
+      name: "BuildingStatistics",
+      components: {
+        VueSeamlessScroll,
+      },
+      data() {
+        return {
+          list: [
+            [
+              "国泰艺术中心",
+              "高",
+              "65条",
+            ],
+            [
+            "人民大礼堂",
+              "中",
+              "66条",
+            ],
+            [
+            "重庆大剧院",
+              "低",
+              "200条",
+            ],
+            [
+            "环球艺术中心",
+              "高",
+              "200m",
+            ],
+            [
+            "重庆大剧院",
+              "中",
+              "200m",
+            ],
+            [
+            "国泰艺术中心",
+              "高",
+              "200m",
+            ],
+            [
+            "国泰艺术中心",
+              "中",
+              "200m",
+            ],
+            [
+            "国泰艺术中心",
+              "高",
+              "200m",
+            ],
+            [
+            "国泰艺术中心",
+              "低",
+              "200m",
+            ],
+          ],
+        };
+      },
+      computed: {
+        classOption() {
+          return {
+            singleHeight: 51,
+          };
+        },
+      },
+      methods:{
+        levelText(text) {
+      return {
+        高: "#FF0B0B",
+        中: "#ff833d",
+        低: "#fbff3d",
+      }[text];
+    },
+      }
+    };
+    </script>
+    <style scoped lang='less'>
+    .warp {
+    height: 521px;
+    margin: 0 auto;
+    overflow: hidden;
+      .item {
+        list-style: none;
+        padding: 0;
+        margin: 0 auto;
+        cursor: pointer;
+      }
+    }
+  
+  .header {
+    color: #fff !important;
+    height: 38px !important;
+    background-color: rgba(0, 163, 255, 0.3) !important;
+    margin-top: 2px;
+    letter-spacing: 1px;
+    .is_notice {
+      line-height: 19px;
+      font-size: 10px;
+    }
+  }
+  
+  li.row > span {
+    text-align: center;
+    font-size: 14x;
+    position: relative;
+    display: inline-block;
+  }
+  
+  li.row {
+  //   border-bottom: 1px dotted #1d525f;
+    box-sizing: border-box;
+  }
+  
+  .row,
+  li,
+  a {
+    display: block;
+    height: 46px;
+    line-height: 46px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    background-color: rgba(0, 0, 0, 0.2);
+    color: #44F1FF;
+    margin-top: 5px;
+    .time,
+    .type,
+    .count,
+    .unit {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  
+    .time {
+      flex: 0.2;
+    }
+    .type {
+      flex: 0.12;
+    }
+    .count {
+      flex: 0.2;
+    }
+    .unit {
+      flex: 0.35;
+    }
+  
+  }
+    </style>
+    
+    

app/src/views/Risk/components/Riskdistribution.vue

@@ -0,0 +1,175 @@
+<template >
+    <div class="maintenance-supervision">
+      <div class="maintenance-supervision_header">
+        <button-group @change="change">
+          <button-group-item >
+            重大风险
+          </button-group-item>
+          <button-group-item >
+            较大风险
+          </button-group-item>
+          <button-group-item >
+            一般风险
+          </button-group-item>
+          <button-group-item >
+            低风险
+          </button-group-item>
+        </button-group>
+      </div>
+      <div >
+        <div class="row header">
+          <span class="time">序号</span>
+          <span class="person">区域</span>
+          <span class="result">风险数(栋)</span>
+        </div>
+        <VueSeamlessScroll
+          :data="list1"
+          :class-option="classOption"
+          class="warp"
+        >
+          <ul class="item">
+            <li class="row" v-for="(item, index) in list1" :key="index">
+                <span class="time">{{ index+1}}</span>
+                <span class="person">{{ item[0] }}</span>
+                <span class="result"
+                  :style="{
+                    color: resultType(item[1])
+                  }"
+                  >{{ item[1] }}</span
+                >
+              </li>
+            </ul>
+          </VueSeamlessScroll>
+      </div>
+      
+    </div>
+  </template>
+  <script>
+  import VueSeamlessScroll from "vue-seamless-scroll";
+  
+  export default {
+    name: 'MaintenanceSupervision',
+    data() {
+      return {
+        list1: [
+          [ "江北区", "8876"],
+          [ "九龙坡区", "8790"],
+          ["南川区", "7568"],
+          ["万州区", "6777"],
+          ["璧山区", "6734"],
+          [ "渝北区", "6734"],
+          [ "两江新区", "6890"],
+        ],
+        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", "张三", "合格"],
+          ["09:23 05-14", "王小强", "不合格"],
+          ["09:23 05-14", "张三", "合格"],
+          ["09:23 05-14", "张三", "合格"],
+          ["09:23 05-14", "王小强", "不合格"],
+          ["09:23 05-14", "王小强", "不合格"]
+        ],
+        checked: 0,
+      }
+    },
+    components: {
+      VueSeamlessScroll
+    },
+    computed: {
+      classOption() {
+        return {
+          singleHeight: 43,
+        };
+      },
+    },
+    methods: {
+      change(idx) {
+        this.checked = idx
+        console.log("切换索引", idx)
+      },
+      resultType(text) {
+        return {
+          "合格": "#23f59d",
+          "不合格": "#df575b",
+          "是": "#23f59d",
+          "否": "#df575b"
+        }[text]
+      }
+    }
+  }
+  </script>
+  
+  <style scoped lang='less'>
+  .maintenance-supervision {
+    padding: 10px 10px 0px 10px;
+    .maintenance-supervision_header {
+      border-bottom: 1px solid #154956;
+      padding-bottom: 2px;
+    }
+    .warp {
+    height: 520px;
+    margin: 0 auto;
+    overflow: hidden;
+      .item {
+        list-style: none;
+        padding: 0;
+        margin: 0 auto;
+        cursor: pointer;
+      }
+    }
+  
+  .header {
+    color: #fff;
+    height: 33px !important;
+    line-height: 33px !important;
+    background-color: rgba(0, 163, 255, 0.3) !important;
+    color: #61DBFF;
+    margin-top: 15px;
+    margin-bottom: 6px;
+  }
+  
+  .row,
+  li,
+  a {
+    display: block;
+    height: 39px;
+    line-height: 39px;
+    margin-bottom: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 16px;
+    background-color: rgba(0, 0, 0, 0.2);
+    .time,
+    .person,
+    .result {
+      flex: 0.33;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+  }
+  </style>
+  

app/src/views/Risk/components/Totality.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <div >
+            <div class="unit-w">
+               <div class="unit " >
+
+                <div v-for="(item,index) in list" :key="index" >
+                  <div >
+                    <img :src="item.imgs" alt="" >
+                    <div class="num ">
+                        <span class="num-b">{{ item.num }}</span>
+                        <span>栋</span>
+                        <div class="title">{{ item.title }}</div>
+                    </div>
+                   <div class="img"></div>
+                  </div>
+                </div>
+               </div>
+               <div ></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import imga from '../../../assets/images/Frame.png'
+ export default {
+    data(){
+        return{
+            list:[
+                {
+                    title:'重大风险',
+                    num:12,
+                    unit:'栋',
+                    imgs:imga            
+                },
+                {
+                    title:'较大风险',
+                    num:78,
+                    unit:'栋',
+                    imgs:imga            
+                },
+                {
+                    title:'一般风险',
+                    num:998,
+                    unit:'栋',
+                    imgs:imga            
+                },
+                {
+                    title:'低风险',
+                    num:1123,
+                    unit:'栋',
+                    imgs:imga            
+                }
+            ]
+        }
+    }
+ }
+</script>
+
+<style lang="less" scoped>
+.unit-w{
+
+    margin: 20px 0;
+}
+.img{
+  width: 100%;
+  height: 120px;
+background: url('../../../assets/images/rite.png') no-repeat;
+background-size: 100% 1005;
+
+}
+.unit{
+    display: flex;
+    justify-content: space-around;
+    text-align: center;
+    letter-spacing: 1px;
+    position: relative;
+  .num{
+    text-align: center;
+    // margin: 20px 0;
+    .num-b{
+        display: inline-block;
+        font-size: 28px;
+        margin-left: 20px;
+        padding-top: 60px;
+    }
+  }
+  .img{
+    position: absolute;
+    bottom: -20px;
+  }
+  .title{
+    font-size: 16px;
+    margin: 20px 0 10px 20px;
+  }
+}
+</style>

app/src/views/Risk/index.vue

@@ -0,0 +1,57 @@
+
+<template >
+    <div style="padding: 0px 35px; display: flex; justify-content: space-between"
+        >
+        <div>
+            <border-panel
+              height="310px"
+              style="margin-bottom: 6px"
+              title="总体展示"
+            >
+            <Totality/>
+            </border-panel>
+            <border-panel
+              height="320px"
+              style="margin-bottom: 6px"
+              title="排查统计"
+            >
+          <Investigation/>
+            </border-panel>
+            <border-panel height="310px" title="整改统计">
+           <Rectification/>
+            </border-panel>
+          </div>
+        <div>
+          <border-panel
+              height="521px"
+            
+              style="margin-bottom: 6px"
+              title="风险分布                "
+            > 
+          <Riskdistribution/>
+            </border-panel>
+            <border-panel
+              height="421px"
+              style="margin-bottom: 6px"
+              title="风险隐患"
+            >
+              <RiskDanger/>
+            </border-panel>
+        </div>
+    </div>
+  </template>
+  <script>
+    import Totality from './components/Totality.vue'
+    import Investigation from './components/Investigation.vue';
+    import Rectification from './components/Rectification.vue'
+    import Riskdistribution from './components/Riskdistribution.vue';
+    import RiskDanger from './components/RiskDanger.vue';
+  export default {
+    name: 'Risk',
+    components:{Totality,Investigation,Rectification,Riskdistribution,RiskDanger}
+  }
+  </script>
+  
+  <style scoped lang='less'>
+  </style>
+