公司端首页提交

package.json

@@ -50,6 +50,7 @@
     "emoji-mart-vue-fast": "^15.0.0",
     "enquire.js": "^2.1.6",
     "gsap": "^3.11.3",
+    "html2canvas": "^1.4.1",
     "intro.js": "^7.2.0",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",

pnpm-lock.yaml

@@ -92,6 +92,9 @@ dependencies:
   gsap:
     specifier: ^3.11.3
     version: 3.12.2
+  html2canvas:
+    specifier: ^1.4.1
+    version: 1.4.1
   intro.js:
     specifier: ^7.2.0
     version: 7.2.0
@@ -4106,7 +4109,7 @@ packages:
     dev: true
 
   /base64-arraybuffer@1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==, tarball: http://registry.npm.taobao.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz}
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
     engines: {node: '>= 0.6.0'}
     dev: false
 
@@ -5055,7 +5058,7 @@ packages:
     dev: true
 
   /css-line-break@2.1.0:
-    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==, tarball: http://registry.npm.taobao.org/css-line-break/-/css-line-break-2.1.0.tgz}
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
     dependencies:
       utrie: 1.0.2
     dev: false
@@ -7097,7 +7100,7 @@ packages:
     dev: true
 
   /html2canvas@1.4.1:
-    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==, tarball: http://registry.npm.taobao.org/html2canvas/-/html2canvas-1.4.1.tgz}
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
     engines: {node: '>=8.0.0'}
     dependencies:
       css-line-break: 2.1.0
@@ -11473,7 +11476,7 @@ packages:
     dev: true
 
   /text-segmentation@1.0.3:
-    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==, tarball: http://registry.npm.taobao.org/text-segmentation/-/text-segmentation-1.0.3.tgz}
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
     dependencies:
       utrie: 1.0.2
     dev: false
@@ -12057,7 +12060,7 @@ packages:
     dev: true
 
   /utrie@1.0.2:
-    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==, tarball: http://registry.npm.taobao.org/utrie/-/utrie-1.0.2.tgz}
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
     dependencies:
       base64-arraybuffer: 1.0.2
     dev: false

src/views/system/loginmini/MiniCodelogin.vue

@@ -67,7 +67,7 @@
   import { QrCode } from '/@/components/Qrcode/index';
   import ThirdModal from '/@/views/sys/login/ThirdModal.vue';
   // import logoImg from '/@/assets/loginmini/icon/jeecg_logo.png';
-  import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
+  // import adTextImg from '/@/assets/loginmini/icon/jeecg_ad_text.png';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useDesign } from "/@/hooks/web/useDesign";
   import { GithubFilled, WechatFilled, DingtalkCircleFilled, createFromIconfontCN } from '@ant-design/icons-vue';

src/views/vent/home/clique/components/dialog-modal.vue

@@ -0,0 +1,527 @@
+<template>
+    <div class="dialogModal">
+        <div class="modal-top">
+            <i>
+                <SvgIcon class="icon" size="14" name="inner-kd" />
+            </i>
+            <span class="modal-title"> {{ modalTitle }}</span>
+            <span class="close" @click="getClose">✕</span>
+        </div>
+        <div class="modal-card">
+            <div class="card-box" v-for="(item, index) in modalCard" :key="index">
+                <div class="card-pic">
+                    <img :src="item.imgSrc" alt="">
+                </div>
+                <div class="card-content">
+                    <div class="content-label">{{ item.label }}</div>
+                    <div class="content-value">{{ item.value }}</div>
+                </div>
+            </div>
+        </div>
+        <div class="modal-card1">
+            <div class="left-modal">
+                <div class="value-m">{{ valueM }}</div>
+                <div class="label-m">{{ labelM }}</div>
+            </div>
+            <div class="right-modal">
+                <div class="modal-zl" v-for="(item, index) in zlList" :key="index">
+                    <div class="left-zl">
+                        <div class="label-left">
+                            <span class="pic"></span>
+                            <span>{{ item.label }}</span>
+                        </div>
+                        <div class="value-left">
+                            <span class="text">{{ item.value }}</span>
+                            <span>Pa</span>
+                        </div>
+                    </div>
+                    <div class="right-zl">
+                        <span class="text"> {{ item.percent }}</span>
+                        <span>%</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal-card2">
+            <div class="modal-wind" v-for="(item, index) in windLfList" :key="index">
+                <span class="text">{{ item.label }}</span>
+                <span class="num">{{ item.value }}</span>
+                <span class="dw">%</span>
+            </div>
+        </div>
+        <div class="modal-card3">
+            <div class="warn-left">
+                <div class="vent-l">
+                    <span class="warn-label">{{ vent.value }}</span>
+                    <span class="warn-value">{{ vent.label }}</span>
+                </div>
+                <div class="gas-l">
+                    <span class="warn-label">{{ gas.value }}</span>
+                    <span class="warn-value">{{ gas.label }}</span>
+                </div>
+            </div>
+            <div class="warn-c"></div>
+            <div class="warn-right">
+                <div class="fire-r">
+                    <span class="warn-value">{{ fire.label }}</span>
+                    <span class="warn-label">{{ fire.value }}</span>
+                </div>
+                <div class="dust-r">
+                    <span class="warn-value">{{ dust.label }}</span>
+                    <span class="warn-label">{{ dust.value }}</span>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive,defineEmits } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+import { getAssetURL } from '/@/utils/ui';
+
+let modalTitle = ref('榆家梁矿')
+let modalCard = reactive([
+    { imgSrc: getAssetURL('company/hang.png'), label: '巷道长度', value: 12300 },
+    { imgSrc: getAssetURL('company/people.png'), label: '人员总数', value: 23 },
+    { imgSrc: getAssetURL('company/car.png'), label: '车辆总数', value: 17 },
+])
+
+let valueM = ref('10000')
+let labelM = ref('1号回风立井')
+
+let zlList = reactive([
+    { label: '关键阻力——进风', value: 3000, percent: 30 },
+    { label: '关键阻力——用风', value: 3000, percent: 30 },
+    { label: '关键阻力——回风', value: 3000, percent: 30 }
+])
+
+let windLfList = reactive([
+    { label: '有效风量率', value: 88 },
+    { label: '矿井风量率', value: 3.54 }
+])
+
+let vent = reactive({
+    label: '通风风险性',
+    value: '低风险'
+})
+
+let gas = reactive({
+    label: '瓦斯风险性',
+    value: '低风险'
+})
+
+let fire = reactive({
+    label: '火灾风险性',
+    value: '低风险'
+})
+
+let dust = reactive({
+    label: '粉尘风险性',
+    value: '低风险'
+})
+
+const emit = defineEmits(['closeDialog']);
+
+function getClose(){
+ emit('closeDialog', false);
+}
+
+</script>
+<style lang="less" scoped>
+@font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.dialogModal {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .modal-top {
+        position: absolute;
+        left: 32px;
+        top: 15px;
+        height: 30px;
+        line-height: 30px;
+        width: 90%;
+
+        .modal-title {
+            font-size: 14px;
+            font-family: 'douyuFont';
+            color: #fff;
+            margin-left: 10px;
+        }
+
+        .close {
+            position: absolute;
+            right: 12px;
+            color: #2cb6ff;
+            cursor: pointer;
+        }
+    }
+
+    .modal-card {
+        position: absolute;
+        top: 45px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        height: 46px;
+        width: 90%;
+        margin-top: 15px;
+        display: flex;
+        justify-content: space-between;
+        background: url('../../../../../assets/images/company/modal-card.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .card-box {
+            display: flex;
+            flex: 1;
+            height: 100%;
+            justify-content: center;
+            align-items: center;
+
+            &:first-child {
+                margin-left: 15px;
+            }
+
+            &:last-child {
+                margin-right: 10px;
+            }
+
+            .card-pic {
+                margin-right: 10px;
+            }
+
+            .card-content {
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+
+                .content-label {
+                    font-size: 10px;
+                    color: #ccd6df;
+                }
+
+                .content-value {
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #fff;
+                }
+
+            }
+        }
+    }
+
+    .modal-card1 {
+        position: absolute;
+        top: 121px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        height: 110px;
+        width: 90%;
+        padding: 0px 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: url('../../../../../assets/images/company/area3.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .left-modal {
+            position: relative;
+            width: 95px;
+            height: 95px;
+            background: url('../../../../../assets/images/company/zfx.png') no-repeat center;
+            background-size: 100% 100%;
+
+            .value-m {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                font-family: 'douyuFont';
+                font-size: 14px;
+                color: #3df6ff;
+            }
+
+            .label-m {
+                position: absolute;
+                bottom: 2px;
+                width: 100%;
+                font-size: 10px;
+                text-align: center;
+                color: #fff;
+            }
+        }
+
+        .right-modal {
+            width: calc(100% - 105px);
+            height: 95px;
+            margin-left: 10px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .modal-zl {
+                height: 24px;
+                display: flex;
+                justify-content: space-between;
+
+                .left-zl {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    width: calc(80% - 10px);
+                    padding: 0px 10px;
+                    margin-right: 10px;
+                    box-sizing: border-box;
+                    background-color: rgba(6, 57, 97, .3);
+
+                    .label-left {
+                        .pic {
+                            display: inline-block;
+                            width: 6px;
+                            height: 6px;
+                            border-radius: 50%;
+                            margin-right: 5px;
+
+                        }
+
+                        span {
+                            color: #ccd6df;
+                            font-size: 14px;
+                        }
+                    }
+
+                    .value-left {
+                        .text {
+                            font-family: 'douyuFont';
+                            font-size: 14px;
+                            margin-right: 5px;
+                        }
+
+                        span {
+                            font-size: 12px;
+                            color: #ccd6df;
+                        }
+                    }
+
+                }
+
+                &:nth-child(1) .left-zl .pic {
+                    background-color: #51cfff;
+                }
+
+                &:nth-child(2) .left-zl .pic {
+                    background-color: #ffb85b;
+                }
+
+                &:nth-child(3) .left-zl .pic {
+                    background-color: #a091ff;
+                }
+
+                &:nth-child(1) .left-zl .text {
+                    color: #51cfff;
+                }
+
+                &:nth-child(2) .left-zl .text {
+                    color: #ffb85b;
+                }
+
+                &:nth-child(3) .left-zl .text {
+                    color: #a091ff;
+                }
+
+
+                .right-zl {
+                    width: 20%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    background-color: rgba(6, 57, 97, .3);
+
+                    .text {
+                        font-family: 'douyuFont';
+                        font-size: 14px;
+                    }
+
+                    span {
+                        margin-left: 5px;
+                    }
+                }
+
+                &:nth-child(1) .right-zl {
+                    color: #51cfff;
+                }
+
+                &:nth-child(2) .right-zl {
+                    color: #ffb85b;
+                }
+
+                &:nth-child(3) .right-zl {
+                    color: #a091ff;
+                }
+            }
+        }
+    }
+
+    .modal-card2 {
+        position: absolute;
+        top: 231px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        height: 50px;
+        width: 90%;
+        margin: 10px 0px;
+        padding: 0px 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        box-sizing: border-box;
+        background: url('../../../../../assets/images/company/area3.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .modal-wind {
+            position: relative;
+            width: 50%;
+            height: 34px;
+
+            .text {
+                position: absolute;
+                top: 50%;
+                left: 40px;
+                transform: translate(0, -50%);
+                color: #fff;
+                font-size: 14px;
+            }
+
+            .num {
+                position: absolute;
+                top: 50%;
+                right: 58px;
+                transform: translate(0, -50%);
+                color: #fff;
+                font-family: 'douyuFont';
+                font-size: 14px;
+            }
+
+            .dw {
+                position: absolute;
+                top: 50%;
+                right: 12px;
+                transform: translate(0, -50%);
+                color: #fff;
+
+            }
+
+            &:nth-child(1) {
+                background: url('../../../../../assets/images/company/green.png') no-repeat center;
+                background-size: 100% 100%;
+            }
+
+            &:nth-child(2) {
+                background: url('../../../../../assets/images/company/purple.png') no-repeat center;
+                background-size: 100% 100%;
+            }
+
+            &:nth-child(1) .num {
+                color: #31fbcc;
+            }
+
+            &:nth-child(2) .num {
+                color: #97a3fa;
+            }
+        }
+    }
+
+    .modal-card3 {
+        position: absolute;
+        top: 302px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        height: 110px;
+        width: 90%;
+        padding: 0px 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background: url('../../../../../assets/images/company/area3.png') no-repeat center;
+        background-size: 100% 100%;
+
+        .warn-left {
+            position: relative;
+            width: 206px;
+            height: 85px;
+            background: url('../../../../../assets/images/company/warn-left.png') no-repeat center;
+
+            .vent-l {
+                position: absolute;
+                top: 10px;
+                left: 0;
+                width: 80%;
+                display: flex;
+                justify-content: space-around;
+            }
+
+            .gas-l {
+                position: absolute;
+                top: 52px;
+                left: 0;
+                width: 80%;
+                display: flex;
+                justify-content: space-around;
+            }
+
+        }
+
+        .warn-c {
+            width: 90px;
+            height: 92px;
+            background: url('../../../../../assets/images/company/warn-center.png') no-repeat center;
+        }
+
+        .warn-right {
+            position: relative;
+            width: 206px;
+            height: 85px;
+            background: url('../../../../../assets/images/company/warn-right.png') no-repeat center;
+
+            .fire-r {
+                position: absolute;
+                top: 10px;
+                right: 0;
+                width: 80%;
+                display: flex;
+                justify-content: space-around;
+            }
+
+            .dust-r {
+                position: absolute;
+                top: 52px;
+                right: 0;
+                width: 80%;
+                display: flex;
+                justify-content: space-around;
+            }
+        }
+
+        .warn-label {
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: #31fbcc;
+            line-height: 27px;
+        }
+
+        .warn-value {
+            color: #fff;
+            font-size: 14px;
+        }
+    }
+
+
+}
+</style>
+    

src/views/vent/home/clique/components/echart-scene.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="echartScene">
+      <div class="scene" ref="scene"></div>
+      <div class="pic">
+      <img src="../../assets/images/echart-zu.png" alt="" />
+    </div>
+    <div class="percent">
+      <div class="percent-box">{{ `${percent.jf}%` }}</div>
+      <div class="percent-box">{{ `${percent.yf}%` }}</div>
+      <div class="percent-box">{{ `${percent.hf}%` }}</div>
+    </div>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+    import {defineProps,  ref,  nextTick, reactive,  watch,  } from 'vue';
+    import * as echarts from 'echarts';
+    //获取dom元素节点
+    let scene = ref<any>();
+  
+    function getOption() {
+      nextTick(() => {
+        const myChart = echarts.init(scene.value);
+        let option = 
+        myChart.setOption(option);
+        window.onresize = function () {
+          myChart.resize();
+        };
+      });
+    }
+  </script>
+  
+  <style scoped lang="less">
+    .echartScene {
+      width: 100%;
+      height: 100%;
+      .scene{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  </style>
+  

src/views/vent/home/clique/components/file-share.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="fileShare">
+        <div class="file-title">{{ fileTitle }}</div>
+        <div class="file-content">
+            <div class="left-jt">
+                <SvgIcon class="icon" size="24" name="jt2" />
+            </div>
+            <div class="right-jt">
+                <SvgIcon class="icon" size="24" name="jt1" />
+            </div>
+            <div class="file-card">
+                <div class="card-box" v-for="(item, index) in fileData" :key="index">
+                    <div class="box-t">{{ item.title }}</div>
+                    <div class="box-b">
+                        <div class="ite-box">
+                            <img :src="item.imgSrc" alt="">
+                            <div class="content">
+                                <div class="content-label">{{ item.label }}</div>
+                                <div class="content-value">{{ item.value }}</div>
+                            </div>
+                        </div>
+                        <div class="ite-box">
+                            <img :src="item.imgSrc1" alt="">
+                            <div class="content">
+                                <div class="content-label1">{{ item.label1 }}</div>
+                                <div class="content-value1">{{ item.value1 }}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+import { getAssetURL } from '/@/utils/ui';
+
+
+let fileTitle = ref('文件共享中心')
+
+let fileData = reactive([
+    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件数', value: 10, value1: 10 },
+    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件数', value: 10, value1: 10 },
+    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件数', value: 10, value1: 10 },
+    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件数', value: 10, value1: 10 },
+    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件数', value: 10, value1: 10 },
+    { title: "大柳塔井", imgSrc: getAssetURL('company/file2.png'), imgSrc1: getAssetURL('company/file1.png'), label: '文件总数', label1: '待审批文件数', value: 10, value1: 10 }
+])
+
+
+</script>
+<style lang="less" scoped>
+@font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+}
+
+
+.fileShare {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .file-title {
+        position: absolute;
+        left: 54px;
+        top: 12px;
+        color: #fff;
+        font-family: 'douyuFont';
+        font-size: 14px;
+    }
+
+    .file-content {
+        position: relative;
+        height: 100%;
+        padding: 57px 40px 23px 40px;
+        box-sizing: border-box;
+
+        .left-jt {
+            position: absolute;
+            top: 50%;
+            left: 18px;
+            transform: translate(0, -50%);
+        }
+
+        .right-jt {
+            position: absolute;
+            top: 50%;
+            right: 18px;
+            transform: translate(0, -50%);
+        }
+
+        .file-card {
+            height: 100%;
+            padding: 0px 30px;
+            display: flex;
+            justify-content: flex-start;
+            align-items: flex-start;
+            flex-wrap: wrap;
+            box-sizing: border-box;
+
+            .card-box {
+                position: relative;
+                width: 255px;
+                height: 91px;
+                background: url('../../../../../assets/images/company/file-card.png') no-repeat center;
+                background-size: 100% 100%;
+                .box-t{
+                    position: absolute;
+                    left: 12px;
+                    top: 3px;
+                    font-family: 'douyuFont';
+                    font-size: 14px;
+                    color: #fff;
+                }
+                .box-b{
+                    position: absolute;
+                    left: 0;
+                    top: 24px;
+                    width: 100%;
+                    height: 66px;
+                    display: flex;
+                    justify-content: space-between;
+                    .ite-box{
+                        display: flex;
+                        flex: 1;
+                        justify-content: center;
+                        align-items: center;
+                        height: 100%;
+
+                        .content{
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: space-around;
+                            align-items: center;
+                            .content-label{
+                                padding-left: 5px;
+                                font-size: 12px;
+                                color: #fff;
+                                background: linear-gradient(to right, rgba(3, 52, 105,1),rgba(3, 52, 105,.4),transparent);
+                            }
+                            .content-value{
+                                font-size: 16px;
+                                color: #64caff;
+                            }
+                            .content-label1{
+                                padding-left: 5px;
+                                font-size: 12px;
+                                color: #fff;
+                                background: linear-gradient(to right, rgba(3, 73, 104,1),rgba(3, 73, 104,.4),transparent);
+                            }
+                            .content-value1{
+                                font-size: 16px;
+                                color: #3df6ff;
+                            }
+
+                        }
+                    }
+
+                }
+
+                &:nth-child(1) {
+                    margin-bottom: 10px;
+                }
+
+                &:nth-child(2) {
+                    margin: 0px 39px 10px 39px;
+                }
+
+                &:nth-child(3) {
+                    margin-bottom: 10px;
+                }
+
+                &:nth-child(5) {
+                    margin: 0px 39px;
+                }
+            }
+        }
+    }
+
+
+}
+</style>
+  

src/views/vent/home/clique/components/mine-wind.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="mineWind">
+    <div class="mine-title">{{ mineTitle }}</div>
+    <div class="mine-content">
+      <div class="content-label">
+        <div class="label-t" v-for="(ite,ind) in labelList" :key="ind">{{ ite.name }}</div>
+      </div>
+      <div class="content-text">
+        <div class="text" v-for="(item,index) in mineData" :key="index">
+          <span>{{ item.name }}</span>
+          <span>{{ item.jf }}</span>
+          <span>{{ item.hf }}</span>
+          <span>{{ item.xf }}</span>
+          </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref,reactive } from 'vue'
+
+let mineTitle = ref('矿井通风状态监测')
+let labelList=reactive([
+  {name:'矿井名称'},
+  {name:'总进风量'},
+  {name:'总回风量'},
+  {name:'总需风量'}
+])
+let mineData=reactive([
+  {name:'大柳塔井', jf:10215, hf:10198, xf:9810},
+  {name:'大柳塔井', jf:10215, hf:10198, xf:9810},
+  {name:'大柳塔井', jf:10215, hf:10198, xf:9810},
+  {name:'大柳塔井', jf:10215, hf:10198, xf:9810},
+  {name:'大柳塔井', jf:10215, hf:10198, xf:9810},
+  {name:'大柳塔井', jf:10215, hf:10198, xf:9810},
+  {name:'大柳塔井', jf:10215, hf:10198, xf:9810},
+])
+
+</script>
+<style lang="less" scoped>
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.mineWind {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .mine-title {
+    position: absolute;
+    left: 50px;
+    top: 12px;
+    color: #fff;
+    font-family: 'douyuFont';
+    font-size: 14px;
+  }
+
+  .mine-content {
+    height: 100%;
+    padding: 62px 0px 28px 0px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .content-label {
+      width: 366px;
+      height: 32px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: url('../../../../../assets/images/company/content-label.png') no-repeat;
+      .label-t{
+        width: 25%;
+        color: #3df6ff;
+        text-align: center;
+        font-size: 14px;
+      }
+    }
+
+    .content-text {
+      height: calc(100% - 32px);
+      width: 378px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      overflow-y: auto;
+      .text{
+        width: 100%;
+        height: 25px;
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-start;
+        background: url('../../../../../assets/images/company/content-text.png') no-repeat;
+        color: #fff;
+        span{
+          display: inline-block;
+          width: 25%;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>
+  

src/views/vent/home/clique/components/risk-warn.vue

@@ -0,0 +1,634 @@
+<template>
+    <div class="riskWarn">
+        <div class="risk-title">{{ riskTitle }}</div>
+        <div class="risk-content">
+            <div class="center-box">
+                <div class="animation-box">
+                    <canvas class="rain"></canvas>
+
+                    <div class="bottom" :class="{
+                        bottom1: centerData.levels == 101,
+                        bottom2: centerData.levels == 102,
+                        bottom3: centerData.levels == 103,
+                        bottom4: centerData.levels == 104,
+                        bottom5: centerData.levels == 201,
+                    }">
+                        <!-- <div class="animation1">
+                            <div class="ball"></div>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="355.334" height="77.559"
+                                viewBox="0 0 375.334 77.559" style="opacity: 0.5">
+                                <g id="组_14135" data-name="组 14135" transform="translate(-755.058 -139.886)">
+                                    <path id="椭圆_2595" data-name="椭圆 2595"
+                                        d="M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z"
+                                        transform="translate(755.808 140.636)" fill="#28a6ff" opacity="0.7" />
+                                </g>
+                            </svg>
+                        </div>
+                        <div class="animation2">
+                            <div class="ball1"></div>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="414.878" height="91.7"
+                                viewBox="0 0 414.878 91.7">
+                                <g id="组_14136" data-name="组 14136" transform="translate(-721.822 -158.273)">
+                                    <path id="椭圆_2595" data-name="椭圆 2595"
+                                        d="M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z"
+                                        transform="translate(722.572 159.023)" fill="#3dd8ff" opacity="0.5" />
+                                </g>
+                            </svg>
+                        </div> -->
+                        <div class="text-box">
+                            <div class="text1">{{
+                                centerData.levels == 101
+                                ? '正常'
+                                : centerData.levels == 102
+                                    ? '低风险'
+                                    : centerData.levels == 103
+                                        ? '中风险'
+                                        : centerData.levels == 104
+                                            ? '高风险'
+                                            : centerData.levels == 201
+                                                ? '报警'
+                                                : '--'
+                            }}</div>
+                            <div class="text2">风险分析</div>
+                        </div>
+                        <div class="icon-animation"></div>
+                    </div>
+
+                    <div class="total-item-monitor-box">
+                        <div class="item item1">
+                            <div class="icon-box">
+                                <div class="icon"></div>
+                            </div>
+                            <div class="item-monitor-box">
+                                <span class="title">火灾监测</span>
+                                <span class="value value1">{{ centerData.fire }}</span>
+                            </div>
+                        </div>
+                        <div class="item item2">
+                            <div class="icon-box">
+                                <div class="icon"></div>
+                            </div>
+                            <div class="item-monitor-box">
+                                <span class="title">设备监测</span>
+                                <span class="value value">{{ centerData.sb }}</span>
+                            </div>
+                        </div>
+                        <div class="item item3">
+                            <div class="icon-box">
+                                <div class="icon"></div>
+                            </div>
+                            <div class="item-monitor-box">
+                                <span class="title">瓦斯监测</span>
+                                <span class="value">{{ centerData.ws }}</span>
+                                <!-- <div class="">
+                                    <span class="title">矿井瓦斯鉴定等级监测</span>
+                                    <span class="value">低瓦斯</span>
+                                </div> -->
+                            </div>
+                        </div>
+                        <div class="item item4">
+                            <div class="icon-box">
+                                <div class="icon"></div>
+                            </div>
+                            <div class="item-monitor-box">
+                                <span class="title">粉尘监测</span>
+                                <span class="value">{{ centerData.fc }}</span>
+                            </div>
+                        </div>
+                        <div class="item item5">
+                            <div class="icon-box">
+                                <div class="icon"></div>
+                            </div>
+                            <div class="item-monitor-box">
+                                <span class="title">通风监测</span>
+                                <span class="value">{{ centerData.tf }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue'
+import { rainBg } from '/@/utils/ui.js';
+
+let riskTitle = ref('一通三防风险分析与预警')
+let centerData = reactive({
+    levels: 103,
+    fire: '正常',
+    sb: '正常',
+    ws: '异常',
+    fc: '正常',
+    tf: '正常',
+})
+
+onMounted(async () => {
+    rainBg('rain', 'animation-box');
+});
+
+</script>
+<style lang="less" scoped>
+@font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+}
+
+.riskWarn {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    .risk-title {
+        position: absolute;
+        left: 50px;
+        top: 10px;
+        color: #fff;
+        font-family: 'douyuFont';
+        font-size: 14px;
+    }
+
+    .risk-content {
+        height: 100%;
+        padding: 55px 0px 20px 0px;
+        box-sizing: border-box;
+
+        .center-box {
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+
+            .animation-box {
+                height: fit-content;
+                flex: 1;
+                margin-bottom: 10px;
+                background: url('/@/assets/images/vent/alarm/center-bg.png');
+                background-size: contain;
+                background-position: center;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                position: relative;
+                top: 0px;
+
+                .rain {
+                    position: absolute;
+                }
+
+                .bottom {
+                    width: 100%;
+                    height: 90%;
+                    background-repeat: no-repeat;
+                    position: absolute;
+                    z-index: 999;
+
+                    &::before {
+                        content: '';
+                        width: 230px;
+                        height: 234px;
+                        position: absolute;
+                        left: 112px;
+                        top: -19px;
+                        background: url('/@/assets/images/vent/alarm/warning-bg.png') no-repeat;
+                        background-size: 92% 100%;
+                    }
+
+                    .animation1 {
+                        width: 320px;
+                        height: 78px;
+                        position: absolute;
+                        top: 4px;
+                        left: 31px;
+                        z-index: 999;
+
+                        .ball {
+                            position: absolute;
+                            width: 12px;
+                            height: 12px;
+                            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+                            ;
+                            border-radius: 6px;
+                            background-size: cover;
+                            offset-path: path('M186.917-.75c12.711,0,25.415.263,37.757.783,12.03.506,23.863,1.262,35.171,2.245,11.1.966,21.816,2.161,31.835,3.553,9.928,1.379,19.265,2.963,27.751,4.709s16.2,3.668,22.92,5.713A120.653,120.653,0,0,1,359.7,22.825a40.842,40.842,0,0,1,11.018,7.3c2.568,2.581,3.87,5.239,3.87,7.9s-1.3,5.322-3.87,7.9a40.842,40.842,0,0,1-11.018,7.3,120.653,120.653,0,0,1-17.345,6.572c-6.716,2.044-14.428,3.966-22.92,5.713s-17.823,3.329-27.751,4.709c-10.02,1.392-20.731,2.588-31.835,3.553-11.308.984-23.142,1.739-35.171,2.245-12.343.519-25.046.783-37.757.783s-25.415-.263-37.757-.783c-12.03-.506-23.863-1.262-35.171-2.245-11.1-.966-21.816-2.161-31.835-3.553-9.928-1.379-19.265-2.963-27.751-4.709s-16.2-3.668-22.92-5.713a120.652,120.652,0,0,1-17.345-6.572,40.841,40.841,0,0,1-11.018-7.3c-2.568-2.581-3.87-5.239-3.87-7.9s1.3-5.322,3.87-7.9a40.842,40.842,0,0,1,11.018-7.3,120.651,120.651,0,0,1,17.345-6.572C38.2,14.208,45.91,12.286,54.4,10.54S72.225,7.211,82.153,5.831c10.02-1.392,20.731-2.588,31.835-3.553C125.3,1.294,137.13.539,149.16.033,161.5-.487,174.206-.75,186.917-.75Zm0,76.98c49.941,0,96.885-4,132.186-11.257,17.134-3.523,30.578-7.623,39.96-12.184,9.642-4.688,14.53-9.653,14.53-14.759s-4.889-10.072-14.53-14.759c-9.382-4.561-22.826-8.66-39.96-12.184C283.8,3.827,236.858-.171,186.917-.171s-96.885,4-132.186,11.257C37.6,14.61,24.153,18.709,14.771,23.27,5.129,27.958.241,32.923.241,38.029S5.129,48.1,14.771,52.789c9.382,4.561,22.826,8.661,39.96,12.184C90.032,72.232,136.976,76.23,186.917,76.23Z');
+                            animation: 10s linear 0s infinite alternate ball;
+                        }
+                    }
+
+                    .animation2 {
+                        width: 340px;
+                        height: 92px;
+                        position: absolute;
+                        top: 36px;
+                        left: 12px;
+                        z-index: 999;
+
+                        // animation: rotate4 3s linear infinite;
+                        .ball1 {
+                            position: absolute;
+                            width: 12px;
+                            height: 12px;
+                            background: radial-gradient(closest-side, #e1f7f8, #e1f7f800);
+                            ;
+                            border-radius: 6px;
+                            background-size: cover;
+                            offset-path: path('M206.689-.75c14.05,0,28.092.311,41.735.925,13.3.6,26.377,1.492,38.877,2.655,12.275,1.142,24.114,2.555,35.189,4.2,10.974,1.631,21.294,3.5,30.674,5.567s17.91,4.337,25.335,6.754a128.134,128.134,0,0,1,19.172,7.771,45.082,45.082,0,0,1,12.178,8.633c2.838,3.051,4.278,6.195,4.278,9.344s-1.439,6.293-4.278,9.344a45.082,45.082,0,0,1-12.178,8.633A128.134,128.134,0,0,1,378.5,70.847c-7.424,2.417-15.948,4.69-25.335,6.754s-19.7,3.936-30.674,5.567c-11.075,1.646-22.915,3.059-35.189,4.2-12.5,1.163-25.58,2.056-38.877,2.655-13.643.614-27.685.925-41.735.925s-28.092-.311-41.735-.925c-13.3-.6-26.377-1.492-38.877-2.655-12.275-1.142-24.114-2.555-35.189-4.2-10.974-1.631-21.294-3.5-30.674-5.567S42.3,73.265,34.879,70.847a128.133,128.133,0,0,1-19.173-7.771A45.082,45.082,0,0,1,3.528,54.444C.689,51.393-.75,48.249-.75,45.1s1.439-6.293,4.278-9.344a45.083,45.083,0,0,1,12.178-8.633,128.133,128.133,0,0,1,19.173-7.771c7.424-2.417,15.948-4.69,25.335-6.754s19.7-3.936,30.674-5.567c11.075-1.646,22.915-3.059,35.189-4.2,12.5-1.163,25.58-2.056,38.877-2.655C178.6-.439,192.639-.75,206.689-.75Zm0,91.015c55.2,0,107.093-4.727,146.113-13.31,18.939-4.166,33.8-9.012,44.17-14.405,10.657-5.542,16.061-11.413,16.061-17.45s-5.4-11.908-16.061-17.45c-10.37-5.393-25.231-10.24-44.17-14.405C313.782,4.662,261.892-.065,206.689-.065S99.6,4.662,60.576,13.244c-18.939,4.166-33.8,9.012-44.17,14.405C5.749,33.192.345,39.063.345,45.1s5.4,11.908,16.061,17.45c10.37,5.393,25.231,10.24,44.17,14.405C99.6,85.538,151.487,90.265,206.689,90.265Z');
+                            animation: 10s linear 0s infinite alternate ball1;
+                        }
+                    }
+
+                    .text-box {
+                        width: 100%;
+                        display: flex;
+                        flex-direction: column;
+                        color: #fff;
+                        align-items: center;
+                        margin-top: 52px;
+
+                        .text1 {
+                            font-size: 18px;
+                            font-weight: 600;
+                            letter-spacing: 2px;
+                            margin-bottom: 10px;
+                        }
+
+                        .text2 {
+                            font-size: 14px;
+                            color: #ffffffdd;
+                        }
+                    }
+
+                    .icon-animation {
+                        width: 118px;
+                        height: 129px;
+                        margin: 0 auto;
+                        top: -90px;
+                        left: 2px;
+                        position: relative;
+                        animation: .5s linear 0s infinite alternate iconMove;
+                    }
+                }
+
+                .bottom1 {
+                    background-image: url('/@/assets/images/vent/alarm/warning-icon-bg1.png');
+                    background-size: 80% 100%;
+                    background-position: 50% 0%;
+
+                    .icon-animation {
+                        background: url('/@/assets/images/vent/alarm/warning-icon-bg-a1.png');
+                        background-size: 100% 100%;
+                    }
+
+                    .text-box {
+                        .text1 {
+                            color: #00d8ff;
+                        }
+                    }
+                }
+
+                .bottom2 {
+                    background-image: url('/@/assets/images/vent/alarm/warning-icon-bg2.png');
+                    background-size: 80% 100%;
+                    background-position: 50% 0%;
+
+                    .icon-animation {
+                        background: url('/@/assets/images/vent/alarm/warning-icon-bg-a2.png');
+                        background-size: 100% 100%;
+                    }
+
+                    .text-box {
+                        .text1 {
+                            color: #FCFC22;
+                        }
+                    }
+                }
+
+                .bottom3 {
+                    background-image: url('/@/assets/images/vent/alarm/warning-icon-bg3.png');
+                    background-size: 80% 100%;
+                    background-position: 50% 0%;
+
+                    .icon-animation {
+                        background: url('/@/assets/images/vent/alarm/warning-icon-bg-a3.png');
+                        background-size: 100% 100%;
+                    }
+
+                    .text-box {
+                        .text1 {
+                            color: #ff7010;
+                        }
+                    }
+                }
+
+                .bottom4 {
+                    background-image: url('/@/assets/images/vent/alarm/warning-icon-bg4.png');
+                    background-size: 80% 100%;
+                    background-position: 50% 0%;
+
+                    .icon-animation {
+                        background: url('/@/assets/images/vent/alarm/warning-icon-bg-a4.png');
+                        background-size: 100% 100%;
+                    }
+
+                    .text-box {
+                        .text1 {
+                            color: #DF4E43;
+                        }
+                    }
+                }
+
+                .bottom5 {
+                    background-image: url('/@/assets/images/vent/alarm/warning-icon-bg5.png');
+                    background-size: 80% 100%;
+                    background-position: 50% 0%;
+
+                    .icon-animation {
+                        background: url('/@/assets/images/vent/alarm/warning-icon-bg-a5.png');
+                        background-size: 100% 100%;
+                    }
+
+                    .text-box {
+                        .text1 {
+                            color: #ff2313;
+                            // animation: color-blink 1s infinite;
+                        }
+
+                        // @keyframes color-blink {
+                        //   0% { color: red; }
+                        //   50% { color: blue; }
+                        //   100% { color: red; }
+                        // }
+                    }
+                }
+
+                .total-item-monitor-box {
+
+                    width: 66%;
+                    height: 124px;
+                    position: relative;
+
+                    top: 122px;
+                    left: 0;
+                    background: url('/@/assets/images/vent/alarm/bottom1.png') no-repeat;
+
+                    background-size: 100% 100%;
+
+                    &::after {
+                        content: '';
+
+                        width: 400px;
+                        height: 362px;
+                        position: absolute;
+                        transform-style: preserve-3d;
+                        transform: translateX(0%) translateY(0%) rotateX(72deg);
+                        background: url('/@/assets/images/vent/alarm/bottom.png');
+                        background-size: 100% 100%; //lxh
+                        animation: rotate1 3s linear infinite;
+
+                        top: -93px;
+                        left: -52px;
+                    }
+
+                    .item {
+                        position: absolute;
+
+                        // width: 107px;
+                        // height: 107px;
+                        // left: 120px;
+                        // top: 115px;
+                        // animation: red-ball 10s linear infinite;
+                        .icon-box {
+
+                            width: 60px;
+                            height: 60px;
+
+                            position: relative;
+                            z-index: 0;
+
+                            &::before {
+                                position: absolute;
+                                content: '';
+
+                                width: 80px;
+                                height: 42px;
+                                top: 30px;
+                                z-index: -1;
+                                background: url('/@/assets/images/vent/alarm/icon-bg.png') no-repeat;
+                                background-size: 100% 100%;
+                            }
+
+                            &::after {
+                                position: absolute;
+                                content: '';
+                                width: 48px;
+                                height: 48px;
+                                top: 33px;
+                                left: 14px;
+                                z-index: 1;
+                                background: url(/src/assets/images/vent/alarm/icon-animation.png) no-repeat;
+                                background-size: 100% 100%;
+                                transform: translateX(0%) rotateX(70deg);
+                                animation: rotate2 2s linear infinite;
+                            }
+
+                            .icon {
+                                width: 32px;
+                                height: 32px;
+                                background-repeat: no-repeat;
+                                background-position: top center;
+                                position: relative;
+                                top: 27px;
+                                left: 24px;
+                            }
+                        }
+
+                        .item-monitor-box {
+                            width: 112px;
+                            color: #fff;
+                            position: relative;
+                            top: -58px;
+                            left: -16px;
+                            font-weight: 600;
+
+                            padding: 0px 5px 0px 5px;
+
+                            &::before {
+                                position: absolute;
+                                content: '';
+                                width: 112px;
+                                height: 24px;
+                                left: 4px;
+                                top: 0px;
+                                background: url('/@/assets/images/vent/alarm/data-bg.png');
+                                background-size: 100% 100%;
+                            }
+
+                            .value {
+                                color: #2bdcff;
+                                margin-left: 10px;
+                            }
+
+                            .value1 {
+                                font-size: 16px;
+                                font-weight: 800;
+                                margin-top: 6px;
+                                color: #ff0000;
+                                animation: color-blink 1s infinite;
+                            }
+
+                            @keyframes color-blink {
+                                0% {
+                                    color: red;
+                                }
+
+                                50% {
+                                    color: rgb(198, 0, 0);
+                                }
+
+                                100% {
+                                    color: rgb(255, 18, 18);
+                                }
+                            }
+                        }
+                    }
+
+                    .item1 {
+
+                        top: 85px;
+                        left: 100px;
+
+                        .icon {
+                            background-image: url('/@/assets/images/vent/alarm/icon-fire.svg');
+                            background-size: 100% 100%;
+                        }
+                    }
+
+                    .item2 {
+                        top: 68px;
+                        left: -38px;
+
+                        .icon {
+                            background-image: url('/@/assets/images/vent/alarm/icon-device.svg');
+                            background-size: 100% 100%;
+                        }
+                    }
+
+                    .item3 {
+                        top: 68px;
+                        left: 247px;
+
+                        .icon {
+                            background-image: url('/@/assets/images/vent/alarm/icon-gas.svg');
+                            background-size: 100% 100%;
+                        }
+
+                        // .item-monitor-box {
+                        //     top: -155px;
+
+                        //     &::before {
+                        //         top: 10px;
+                        //     }
+                        // }
+                    }
+
+                    .item4 {
+                        top: -5px;
+                        left: 247px;
+
+                        .icon {
+                            background-image: url('/@/assets/images/vent/alarm/icon-dust.svg');
+                            background-size: 100% 100%;
+                        }
+
+                    }
+
+                    .item5 {
+                        top: -5px;
+                        left: -38px;
+
+                        .icon {
+                            background-image: url('/@/assets/images/vent/alarm/icon-vent.svg');
+                            background-size: 100% 100%;
+                        }
+                    }
+
+                }
+
+                @keyframes iconMove {
+                    100% {
+                        opacity: 0;
+                    }
+                }
+
+                @keyframes rotate1 {
+                    0% {
+                        transform: translateX(0%) rotateX(72deg) rotateZ(-360deg);
+                    }
+
+                    100% {
+                        transform: translateX(0%) rotateX(72deg) rotateZ(0);
+                    }
+                }
+
+                @keyframes rotate2 {
+                    0% {
+                        transform: translateX(0%) rotateX(70deg) rotateZ(0);
+                    }
+
+                    100% {
+                        transform: translateX(0%) rotateX(70deg) rotateZ(-360deg);
+                    }
+                }
+
+                @keyframes rotate3 {
+                    0% {
+                        transform: translateX(0%) rotateX(80deg) rotateZ(0);
+                    }
+
+                    100% {
+                        transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+                    }
+                }
+
+                @keyframes rotate4 {
+                    100% {
+                        transform: translateX(0%) rotateX(80deg) rotateZ(0);
+                    }
+
+                    0% {
+                        transform: translateX(0%) rotateX(80deg) rotateZ(-360deg);
+                    }
+                }
+
+                @keyframes ball {
+                    100% {
+                        offset-distance: 100%;
+                    }
+
+                    0% {
+                        offset-distance: 0%;
+                    }
+                }
+
+                @keyframes ball1 {
+                    0% {
+                        offset-distance: 100%;
+                    }
+
+                    100% {
+                        offset-distance: 0%;
+                    }
+                }
+            }
+        }
+
+    }
+
+
+}
+</style>
+    

src/views/vent/home/clique/components/scene-key.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="sceneKey">
+      <div class="scene-title">{{ sceneTitle }}</div>
+      <div class="scene-content">
+       <div class="content-t"></div>
+       <div class="content-c">
+        <echartScene></echartScene>
+       </div>
+       <div class="content-b"></div>
+      </div>
+    </div>
+  </template>
+  <script lang="ts" setup>
+  import { ref,reactive } from 'vue'
+  import echartScene from '../components/echart-scene.vue'
+  
+  let sceneTitle = ref('关键场景通防综合监测')
+  
+ 
+  
+  </script>
+  <style lang="less" scoped>
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+  
+  .sceneKey {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  
+    .scene-title {
+      position: absolute;
+      left: 50px;
+      top: 12px;
+      color: #fff;
+      font-family: 'douyuFont';
+      font-size: 14px;
+    }
+  
+    .scene-content {
+   
+      height: 100%;
+      padding: 62px 20px 28px 20px;
+      box-sizing: border-box;   
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: center;
+      .content-t{
+        width: 100%;
+        height: 30px;
+        background: url('../../../../../assets/images/company/content-label.png') no-repeat center;
+        background-size: 100% 100%;
+      }
+      .content-c{
+        width: 100%;
+        height: calc((100% - 30px) / 2 );
+        background: url('../../../../../assets/images/company/area2.png') no-repeat center;
+        background-size: 100% 100%;
+      }
+      .content-b{
+        width: 100%;
+        height: calc((100% - 30px) / 2);
+        background: url('../../../../../assets/images/company/area1.png') no-repeat center;
+        background-size: 100% 100%;
+      }
+    }
+  }
+  </style>
+    

src/views/vent/home/clique/components/wind-road.vue

@@ -0,0 +1,373 @@
+<template>
+    <div class="windRoad">
+        <div class="road-title">{{ roadTitle }}</div>
+        <div class="road-content">
+            <div class="left-jt">
+                <SvgIcon class="icon" size="24" name="jt2" />
+            </div>
+            <div class="right-jt">
+                <SvgIcon class="icon" size="24" name="jt1" />
+            </div>
+            <div class="road-card">
+                <div class="head-nav">
+                    <span>{{ roadData.label }} : </span>
+                    <span>{{ roadData.value }}</span>
+                </div>
+                <div class="echart-box">
+                    <div ref="road" class="road"></div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, nextTick, onMounted } from 'vue'
+import { SvgIcon } from '/@/components/Icon';
+import { getAssetURL } from '/@/utils/ui';
+import * as echarts from 'echarts';
+
+
+let roadTitle = ref('通风巷道长度统计')
+let road = ref()//获取Dom节点
+let roadData = reactive({
+    label: '通风巷道总长度',
+    value: '1737公里'
+})
+
+let xData = reactive(["宝德", "榆家梁", "锦界", "大柳塔", "哈拉沟"]);
+var yData = reactive([200, 100, 200, 200, 100]);
+var maxData = reactive([300, 200, 300, 300, 200])
+
+function getOption() {
+    nextTick(() => {
+        const myChart = echarts.init(road.value);
+        let option = {
+            grid: {
+                top: '14%',
+                left: '2%',
+                bottom: '4%',
+                right: '2%',
+                containLabel: true,
+            },
+            xAxis: {
+                data: xData,
+                axisTick: {
+                    show: false
+                },
+
+                axisLine: {
+                    lineStyle: {
+                        color: 'rgba(187, 187, 187,.2)',
+                        type: 'dashed',
+                    },
+                },
+                splitLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    interval: 0,
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 14,
+                    },
+                    margin: 20, //刻度标签与轴线之间的距离。
+                },
+
+            },
+
+            yAxis: {
+                max:300,
+                name: '长度(km)',
+                nameTextStyle: {
+                    color: '#3df6ff',
+                    fontSize: 12,
+                    lineHeight: 20,
+                },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(187, 187, 187,.2)',
+                        type: 'dashed',
+                    },
+                },
+                axisTick: {
+                    show: false
+                },
+                axisLine: {
+                    show: false,
+                },
+                axisLabel: {
+                    textStyle: {
+                        color: '#fff',
+                        fontSize: 14,
+                    },
+                }
+            },
+
+            series: [
+                {//三个最低下的圆片
+                    "name": "",
+                    "type": "pictorialBar",
+                    "symbolSize": [30, 10],
+                    "symbolOffset": [0, 7],
+                    "z": 12,
+                    itemStyle: {
+                        opacity: 1,
+                        color: function (params) {
+                            var a = params.name.slice(0, 2);
+                            if (a === '宝德') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#FF9A22' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#FFD56E'// 100% 处的颜色
+                                }], false)
+                            } else if (a === '榆家' || a == '大柳') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#00EC28' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#5DF076'// 100% 处的颜色
+                                }], false)
+                            } else if (a === '锦界' || a == '哈拉') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#12B9DB' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#6F8EF2'// 100% 处的颜色
+                                }], false)
+                            }
+                        }
+                    },
+                    "data": [1, 1, 1, 1, 1]
+
+                },
+
+
+                //下半截柱状图
+                {
+                    name: '2020',
+                    type: 'bar',
+                    barWidth: 30,
+                    barGap: '-100%',
+                    itemStyle: {//lenged文本
+                        opacity: .7,
+                        color: function (params) {
+                            var a = params.name.slice(0, 2);
+                            if (a === '宝德') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#FF9A22' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#FFD56E'// 100% 处的颜色
+                                }], false)
+                            } else if (a === '榆家' || a == '大柳') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#00EC28' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#5DF076'// 100% 处的颜色
+                                }], false)
+                            } else if (a === '锦界' || a == '哈拉') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#12B9DB' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#6F8EF2'// 100% 处的颜色
+                                }], false)
+                            }
+                        }
+                    },
+                    data: yData
+                },
+
+                { // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
+                    type: 'bar',
+                    barWidth: 30,
+                    barGap: '-100%',
+                    stack: '广告',
+                    itemStyle: {
+                        color: 'transparent'
+                    },
+                    data: maxData
+                },
+
+                {
+                    "name": "", //头部
+                    "type": "pictorialBar",
+                    "symbolSize": [30, 10],
+                    "symbolOffset": [0, -7],
+                    "z": 12,
+                    "symbolPosition": "end",
+                    itemStyle: {
+                        color: '#163F7A',
+                        opacity: 1,
+                    },
+                    "data": maxData
+                },
+
+                {
+                    "name": "",
+                    "type": "pictorialBar",
+                    "symbolSize": [30, 10],
+                    "symbolOffset": [0, -7],
+                    "z": 12,
+                    itemStyle: {
+                        opacity: 1,
+                        color: function (params) {
+                            var a = params.name.slice(0, 2);
+                            if (a === '宝德') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#FF9A22' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#FFD56E'// 100% 处的颜色
+                                }], false)
+                            } else if (a === '榆家' || a == '大柳') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#00EC28' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#5DF076'// 100% 处的颜色
+                                }], false)
+                            } else if (a === '锦界' || a == '哈拉') {
+                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: '#12B9DB' // 0% 处的颜色
+                                }, {
+                                    offset: 1,
+                                    color: '#6F8EF2'// 100% 处的颜色
+                                }], false)
+                            }
+                        }
+                    },
+                    "symbolPosition": "end",
+
+                    label: {
+                        normal: {
+                            show: true,
+                            position: 'top',
+                            fontSize: 12,
+                            // fontWeight: 'bold',
+                            color: '#fff',
+                        },
+                    },
+                    "data": yData
+                },
+
+                {
+                    name: '2019',
+                    type: 'bar',
+                    barWidth: 30,
+                    barGap: '-100%',
+                    z: 0,
+                    itemStyle: {
+                        color: '#163F7A',
+                        opacity: .7,
+                    },
+
+                    data: maxData
+                }
+
+
+            ]
+        };
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    });
+}
+
+onMounted(() => {
+    getOption()
+})
+
+
+</script>
+<style lang="less" scoped>
+@font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+}
+
+
+.windRoad {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    .road-title {
+        position: absolute;
+        left: 50px;
+        top: 10px;
+        color: #fff;
+        font-family: 'douyuFont';
+        font-size: 14px;
+    }
+
+    .road-content {
+        position: relative;
+        height: 100%;
+        padding: 52px 40px 23px 40px;
+        box-sizing: border-box;
+
+        .left-jt {
+            position: absolute;
+            top: 50%;
+            left: 18px;
+            transform: translate(0, -50%);
+        }
+
+        .right-jt {
+            position: absolute;
+            top: 50%;
+            right: 18px;
+            transform: translate(0, -50%);
+        }
+
+        .road-card {
+            height: 100%;
+
+            .head-nav {
+                height: 30px;
+                line-height: 30px;
+
+                span {
+                    font-size: 14px;
+
+                    &:nth-child(1) {
+                        color: #fff;
+                    }
+
+                    &:nth-child(2) {
+                        color: #3df6ff;
+                    }
+                }
+            }
+
+            .echart-box {
+                height: calc(100% - 30px);
+
+                .road {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+
+    }
+
+
+}
+</style>
+  

src/views/vent/home/clique/index.vue

@@ -1,25 +1,190 @@
 <template>
- <div class="company-home">
-  <div class="top-bg"></div>
-  <div class="company-content"></div>
- </div>
+  <div class="company-home">
+    <div class="top-bg"></div>
+    <div class="company-content">
+      <div class="main-title">{{ mainTitle }}</div>
+      <div class="area-content">
+        <div class="left-area">
+          <!-- 矿井通风状态监测 -->
+          <div class="area-card">
+              <mineWind></mineWind>
+          </div>
+          <!-- 一通三防风险分析与预警 -->
+          <div class="area-card1">
+            <riskWarn></riskWarn>
+          </div>
+        </div>
+        <div class="center-area">
+          <!-- 榆家梁矿 -->
+          <div class="area-card2" v-if="isShowDialog">
+            <dialogModal @closeDialog="closeDialog"></dialogModal>
+          </div>
+          <!-- 文件共享中心 -->
+          <div class="area-card3">
+            <fileShare></fileShare>
+          </div>
+        </div>
+        <div class="right-area">
+          <!-- 关键场景通防综合监测 -->
+          <div class="area-card">
+            <sceneKey></sceneKey>
+          </div>
+          <!-- 通风巷道长度统计 -->
+          <div class="area-card1">
+            <windRoad></windRoad>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+  </div>
 </template>
 <script lang="ts" setup>
+import { ref } from 'vue'
+import mineWind from './components/mine-wind.vue'
+import riskWarn from './components/risk-warn.vue'
+import dialogModal from './components/dialog-modal.vue'
+import fileShare from './components/file-share.vue'
+import windRoad from './components/wind-road.vue'
+import sceneKey from './components/scene-key.vue'
+
+let mainTitle = ref('国家能源神东煤炭集团')
 
+let isShowDialog=ref(true)
+
+function closeDialog(data){
+  isShowDialog.value=data
+}
 </script>
 <style lang="less" scoped>
-  .company-home{
+@font-face {
+  font-family: 'douyuFont';
+  src: url('../../../../assets/font/douyuFont.otf');
+}
+
+// @font-face {
+//   font-family: 'yjsz';
+//   src: url('../../../../assets/font/yjsz.TTF');
+// }
+.company-home {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .top-bg {
     width: 100%;
-    height: 100px;
-   position: relative;
-   .top-bg{
     height: 97px;
-    background: url('../../../../assets/images/company/top-bg.png') no-repeat;
-   }
-   .company-content{
-    height: calc(100% - 97px);
-    background: url('');
-   }
+    background: url('../../../../assets/images/company/top-bg.png') no-repeat center;
+  }
+
+  .company-content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: url('../../../../assets/images/company/content-bg.png') no-repeat;
+    background-size: 100% 100%;
+
+    .main-title {
+      height: 96px;
+      color: #fff;
+      font-family: 'douyuFont';
+      font-size: 20px;
+      letter-spacing: 2px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .area-content {
+      position: absolute;
+      top: 45px;
+      width: 100%;
+      height: calc(100% - 45px);
+      padding: 0px 20px 20px 20px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
 
+      .left-area {
+        width: 23%;
+        height: 100%;
+        margin-right: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        .area-card {
+          width: 100%;
+          height: calc(60% - 15px);
+          margin-bottom: 15px;
+          background: url('../../../../assets/images/company/area-card.png') no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .area-card1 {
+          width: 100%;
+          height: 40%;
+          background: url('../../../../assets/images/company/area-card1.png') no-repeat;
+          background-size: 100% 100%;
+        }
+
+      }
+
+      .center-area {
+        width: calc(54% - 30px);
+        height: 100%;
+        position: relative;
+
+        .area-card2 {
+          position: absolute;
+          right: 0;
+          top: 62px;
+          width: 568px;
+          height: 437px;
+          background: url('../../../../assets/images/company/area-card2.png') no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .area-card3 {
+          position: absolute;
+          right: 0;
+          bottom: 0px;
+          width: 100%;
+          height: 269px;
+          background: url('../../../../assets/images/company/area-card3.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+
+      .right-area {
+        width: 23%;
+        height: 100%;
+        margin-left: 15px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: center;
+
+        .area-card {
+          width: 100%;
+          height: calc(60% - 15px);
+          margin-bottom: 15px;
+          background: url('../../../../assets/images/company/area-card.png') no-repeat;
+          background-size: 100% 100%;
+        }
+
+        .area-card1 {
+          width: 100%;
+          height: 40%;
+          background: url('../../../../assets/images/company/area-card1.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
   }
-</style>
+
+}</style>

src/views/vent/monitorManager/alarmMonitor/DetailModalFire.vue

@@ -206,7 +206,22 @@ function getSysWarnList(id, type) {
   timer = setInterval(() => {
     sysWarn({ sysid: id, type: type }).then((res) => {
       if (type == 'fire') {
-        listData.bundletube = res.bundletube,
+
+        let data=[
+          {
+            readData:{
+              temperature:10,
+              ch2val:'1.1',
+              chval:'1.1',
+              co2val:'1.1',
+              coval:'1.1',
+              gasval:'1.1'
+            },
+            readTime:'2023-12-22',
+            strinstallpos:'测试'
+          }
+        ]
+        listData.bundletube = data,
           listData.fiber = res.fiber
         listData.fire = res.fire,
           listData.smoke = res.smoke,

src/views/vent/monitorManager/alarmMonitor/fire.data.ts

@@ -149,63 +149,6 @@ export const contentList = [
 
 
 
-//密闭参数列表
-export const mbList = [
-  {
-    label: 'O2',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CO',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CO2',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'CH4',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'C2H2',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-  {
-    label: 'C2H4',
-    label1: '浓度',
-    label2: '时间',
-    label3: '位置',
-    nd: 0,
-    time1: '',
-    address: '',
-  },
-];
 
 //其他工作面table列
 export const columnsOther = [

src/views/vent/monitorManager/alarmMonitor/fire/closeWall.vue

@@ -58,7 +58,6 @@
 
 <script lang="ts" setup>
 import { onMounted, ref, reactive, watch, defineProps } from 'vue';
-import { mbList } from '../fire.data'
 import echartLine1 from './common/echartLine1.vue'
 
 let props = defineProps({
@@ -72,6 +71,66 @@ let topContent = reactive({
     time: '',
     warn: '',
 })
+//密闭参数列表
+let mbList = reactive([
+    {
+        label: 'O2',
+        label1: '浓度',
+        label2: '时间',
+        label3: '位置',
+        nd: 0,
+        time1: '',
+        address: '',
+    },
+    {
+        label: 'CO',
+        label1: '浓度',
+        label2: '时间',
+        label3: '位置',
+        nd: 0,
+        time1: '',
+        address: '',
+    },
+    {
+        label: 'CO2',
+        label1: '浓度',
+        label2: '时间',
+        label3: '位置',
+        nd: 0,
+        time1: '',
+        address: '',
+    },
+    {
+        label: 'CH4',
+        label1: '浓度',
+        label2: '时间',
+        label3: '位置',
+        nd: 0,
+        time1: '',
+        address: '',
+    },
+    {
+        label: 'C2H2',
+        label1: '浓度',
+        label2: '时间',
+        label3: '位置',
+        nd: 0,
+        time1: '',
+        address: '',
+    },
+    {
+        label: 'C2H4',
+        label1: '浓度',
+        label2: '时间',
+        label3: '位置',
+        nd: 0,
+        time1: '',
+        address: '',
+    },
+])
+
+
+
 //当前密闭参数激活选项
 let activeIndex = ref(0)
 //当前激活密闭参数类型
@@ -143,9 +202,10 @@ function onDataChange(value, dateString) {
 }
 
 watch(() => props.listData, (val) => {
+    console.log(val, 'val---')
     if (JSON.stringify(val) != '{}') {
         if (val.bundletube.length != 0) {
-            topContent.temperature = val.temperature[0].readData.temperature
+            // topContent.temperature = val.temperature[0].readData.temperature
             topContent.position = val.bundletube[0].stationname
             topContent.time = val.bundletube[0].warnTime
             topContent.warn = val.bundletube[0].warnLevel == 0 ? '正常' : val.bundletube[0].warnLevel == 101 ? '低风险' : val.bundletube[0].warnLevel == 102 ? '中风险' : val.bundletube[0].warnLevel == 103 ? '高风险' : '报警'
@@ -157,9 +217,10 @@ watch(() => props.listData, (val) => {
             mbList[4].nd = val.bundletube[0].readData.ch2val
             mbList[5].nd = val.bundletube[0].readData.gasval
             mbList.forEach(el => {
-                el.time1 = val.bundletube[0].warnTime
-                el.address = val.bundletube[0].stationname
+                el.time1 = val.bundletube[0].readTime
+                el.address = val.bundletube[0].strinstallpos
             })
+            console.log(mbList, '=====000000')
 
             echartDataSg1.xData.length = 0
             echartDataSg1.yData.length = 0

src/views/vent/monitorManager/alarmMonitor/index.vue

@@ -76,7 +76,7 @@
               <div
                 class="level-text"
                 :class="{
-                  'level-text-1': item.level == 101,
+                  'level-text-1': item.level == 101 || item.level==0,
                   'level-text-2': item.level == 102,
                   'level-text-3': item.level == 103,
                   'level-text-4': item.level == 104,
@@ -84,6 +84,8 @@
                 }"
                 >{{
                   item.level == 101
+                    ? '正常'
+                    :item.level==0 
                     ? '正常'
                     : item.level == 102
                     ? '低风险'
@@ -413,13 +415,18 @@
     centerData.sb = res.info.sysInfo.synthesizeS.status;
     centerData.fc = res.info.sysInfo.dustS.status;
     Object.keys(res.info.sysInfo).forEach((v) => {
-      data.push(res.info.sysInfo[v].maxLevel || 0);
+      if(res.info.sysInfo[v].maxLevel){
+        data.push(res.info.sysInfo[v].maxLevel);
+      }else {
+        data.push(0);
+      }
     });
     data = data.sort((a, b) => b - a);
     centerData.levels = data[0];
     Object.keys(iconsMonitor).forEach((el) => {
       iconsMonitor[el].level = res.info.devicekindInfo[el].maxLevel || 0;
     });
+    console.log(iconsMonitor,'设备监测数据---')
     fireMonitor[0].value = res.info.sysInfo.fireS.summaryInfo.external.temperature.value;
     fireMonitor[1].value = res.info.sysInfo.fireS.summaryInfo.external.coval.value;
     fireMonitor[2].value = res.info.sysInfo.fireS.summaryInfo.external.chval.value;
@@ -431,6 +438,7 @@
     fireMonitor1[2].value = res.info.sysInfo.fireS.summaryInfo.internal.ch2val.value;
     fireMonitor1[3].value = res.info.sysInfo.fireS.summaryInfo.internal.co2val.value;
     fireMonitor1[4].value = res.info.sysInfo.fireS.summaryInfo.internal.o2val.value;
+    console.log(fireMonitor1,'fireMonitor1-------')
   }
 
   onMounted(async () => {