Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/views/vent/home/common/danelBd.vue

@@ -1,236 +0,0 @@
-<template>
-    <div class="danelBd">
-        <div v-if="moduleName" class="dane-title"
-            :style="{ 'margin-bottom': contentStyle.contentH == '0px' ? '0px' : '5px' }">
-            <div :class="commonTitle == 'selected' ? 'common-navL' : 'common-navL1'">
-                <img src="../../../../assets/images/fire/firehome/title-2.png" alt="">
-                <span>{{ moduleName }}</span>
-            </div>
-
-            <div :class="commonTitle == 'selected' ? 'common-navR' : 'common-navR1'">
-                <!-- 下拉框 -->
-                <div class="common-navR-select" v-if="commonTitle=='selected'">
-                    <a-select style="width: 140px" v-model="selectVal" size="small" allowClear class="code-mode-select"
-                        placeholder="请选择">
-                        <a-select-option v-for="device in selectList" :key="device.value" :value="device.value">{{
-                            device.label
-                        }}
-                        </a-select-option>
-                    </a-select>
-                </div>
-                <!-- 日期组件 -->
-                <div class="common-navR-date" v-if="commonTitle=='datePikers'">
-                    <a-range-picker size="small" style="width: 100%" :show-time="{ format: 'HH:mm' }"
-                        format="YYYY-MM-DD HH:mm" :placeholder="['开始时间', '结束时间']" @change="onChange" @ok="onOk" />
-                </div>
-                <!-- 开关组件 -->
-                <div class="common-navR-switch" v-if="commonTitle=='switchs'">
-                    <div :class="checked ? 'status-text1' : 'status-text'">风险来源</div>
-                    <a-switch v-model:checked="checked" />
-                    <div :class="checked ? 'status-text' : 'status-text1'">危险位置</div>
-                </div>
-
-            </div>
-        </div>
-        <div v-if="contentStyle.contentH != '0px'" class="dane-content" :style="{ height: contentStyle.contentH, }">
-            <div class="t-line"></div>
-            <slot></slot>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, defineProps } from 'vue'
-
-let props = defineProps({
-    //标题
-    moduleName: {
-        type: String,
-        default: ''
-    },
-    //样式
-    contentStyle: {
-        type: Object,
-        default: () => {
-            return {
-                contentH: '0px',
-            }
-        }
-    },
-
-    commonTitle: {
-        type: String,
-        default: ''
-    }
-})
-
-let selectVal = ref('')
-let selectList = reactive([
-    { label: '全部', value: '全部' }
-])
-
-let checked=ref(false)
-
-//切换时间选项
-function onChange(value, dateString) {
-    console.log('Selected Time: ', value);
-    console.log('Formatted Selected Time: ', dateString);
-}
-function onOk(val) {
-    console.log('onOk: ', val);
-}
-
-
-
-
-
-</script>
-
-<style scoped lang='less'>
-.danelBd {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .dane-title {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        width: 100%;
-        height: 43px;
-        padding: 0px 10px;
-        box-sizing: border-box;
-        background: url('../../../../assets/images/fire/firehome/title-1.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .common-navL {
-            width: 70%;
-            display: flex;
-            align-items: center;
-
-            img {
-                width: 18px;
-                height: 18px;
-            }
-
-            span {
-                font-size: 18px;
-                color: #a1dff8;
-                margin-left: 10px;
-            }
-        }
-
-        .common-navL1 {
-            width: 50%;
-            display: flex;
-            align-items: center;
-
-            img {
-                width: 18px;
-                height: 18px;
-            }
-
-            span {
-                font-size: 18px;
-                color: #a1dff8;
-                margin-left: 10px;
-            }
-        }
-
-        .common-navR {
-            width: 30%;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-        }
-
-        .common-navR1 {
-            width: 50%;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-        }
-        .common-navR-switch{
-            width: 70%;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            .status-text{
-                color: #1fb3f7;
-            }
-            .status-text1{
-                color: #a1dff8;
-            }
-        }
-
-
-    }
-
-    .dane-content {
-        position: relative;
-        width: 100%;
-        padding: 15px;
-        box-sizing: border-box;
-        background: url('../../../../assets/images/fire/firehome/title-3.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .t-line {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 20px;
-            background: url('../../../../assets/images/fire/firehome/title-4.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-    }
-
-}
-
-::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-    background-color: rgba(255, 255, 255, .1);
-    border: none;
-}
-
-::v-deep .zxm-select-selection-item {
-    color: #a1dff8 !important;
-}
-
-::v-deep .zxm-select-arrow {
-    color: #a1dff8 !important;
-}
-
-::v-deep .zxm-select-selection-placeholder {
-    color: #a1dff8 !important;
-}
-
-::v-deep .zxm-picker {
-    background-color: rgba(255, 255, 255, .1) !important;
-    border: 1px solid #a1dff8 !important;
-
-}
-
-::v-deep .zxm-picker-input>input {
-    text-align: center !important;
-    color: #a1dff8 !important;
-}
-::v-deep .zxm-picker-separator{
-    color: #a1dff8 !important;
-}
-::v-deep .zxm-picker-range .zxm-picker-active-bar{
-    display: none !important;
-}
-::v-deep .zxm-picker-suffix{
-    color: #a1dff8 !important;
-}
-::v-deep .zxm-switch{
-    min-width: 55px !important;
-}
-::v-deep .zxm-switch-checked {
-    background-color: rgba(8, 59, 90) !important;
-}
-::v-deep .zxm-switch-handle::before{
-    background-color: rgba(33, 179, 247) !important;
-}
-</style>

src/views/vent/home/dustHome/components/dustFallDevice.vue

@@ -1,268 +0,0 @@
-<template>
-    <div class="dustFallDevice">
-        <div class="fall-left-box">
-            <div class="box-c"></div>
-            <div class="box-left-t">
-                <div class="item-label">设备总数</div>
-                <div class="item-val">10</div>
-            </div>
-            <div class="box-left-b">
-                <div class="item-label">喷雾开启数</div>
-                <div class="item-val">10</div>
-            </div>
-            <div class="box-right-t">
-                <div class="item-label">联网数量</div>
-                <div class="item-val">10</div>
-            </div>
-            <div class="box-right-b">
-                <div class="item-label">断网数量</div>
-                <div class="item-val">10</div>
-            </div>
-        </div>
-        <div class="fall-right-box">
-            <div class="fall-table-head">
-                <div class="fall-head-item" v-for="(item, index) in tabHeadList" :key="index">{{ item.title }}</div>
-            </div>
-            <div class="fall-table-content">
-                <div class="scroll-box">
-                    <div class="fall-content-item" v-for="(item, ind) in tabContentList" :key="ind">
-                        <span class="content-item-val">{{ item.code }}</span>
-                        <span class="content-item-val">{{ item.name }}</span>
-                        <span class="content-item-val">{{ item.ljzt }}</span>
-                        <span class="content-item-val">{{ item.status }}</span>
-                    </div>
-                </div>
-
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
-//table头
-let tabHeadList = reactive([
-    { title: '编号' },
-    { title: '名称' },
-    { title: '连接状态' },
-    { title: '喷雾状态' },
-])
-//table content
-let tabContentList = reactive([
-    { code: 0, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 1, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 2, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 3, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 4, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 5, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 6, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 7, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 0, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 1, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 2, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 3, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 4, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 5, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 6, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-    { code: 7, name: '8号煤联通辅', ljzt: '已连接', status: '开启' },
-])
-
-
-</script>
-
-<style lang="less" scoped>
-.dustFallDevice {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-
-    .fall-left-box {
-        position: relative;
-        width: calc(50% - 15px);
-        height: 100%;
-        margin-right: 15px;
-
-        .box-c {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -45%);
-            width: 224px;
-            height: 203px;
-            background: url('../../../../../assets/images/dust/dusthome/left-box1.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        .box-left-t {
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 80px;
-            height: 81px;
-            align-items: center;
-            background: url('../../../../../assets/images/dust/dusthome/left-box2.png') no-repeat center;
-            background-size: 100% 100%;
-
-
-        }
-
-        .box-left-b {
-            position: absolute;
-            right: 0;
-            top: 0;
-            width: 80px;
-            height: 81px;
-            background: url('../../../../../assets/images/dust/dusthome/left-box3.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        .box-right-t {
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 80px;
-            height: 81px;
-            background: url('../../../../../assets/images/dust/dusthome/left-box4.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        .box-right-b {
-            position: absolute;
-            right: 0;
-            bottom: 0;
-            width: 80px;
-            height: 81px;
-            background: url('../../../../../assets/images/dust/dusthome/left-box5.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        .item-label {
-            width: 100%;
-            position: absolute;
-            top: 2px;
-            text-align: center;
-            font-size: 12px;
-            color: #9da5aa;
-        }
-
-        .item-val {
-            width: 100%;
-            position: absolute;
-            top: 21px;
-            text-align: center;
-            font-family: 'douyuFont';
-            font-size: 12px;
-            color: #1fb3f7;
-        }
-
-
-    }
-
-    .fall-right-box {
-        width: 50%;
-        height: 100%;
-
-        .fall-table-head {
-            width: 100%;
-            height: 32px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            border-bottom: 2px solid #1f8bb2;
-            background: linear-gradient(to bottom, rgba(12, 40, 55, .3), rgba(19, 90, 124, .9));
-
-            .fall-head-item {
-                display: flex;
-                justify-content: center;
-                color: #1fb3f7;
-
-                &:nth-child(1) {
-                    flex: 1;
-                }
-
-                &:nth-child(2) {
-                    flex: 3;
-                }
-
-                &:nth-child(3) {
-                    flex: 2;
-                }
-
-                &:nth-child(4) {
-                    flex: 2;
-                }
-            }
-        }
-
-        .fall-table-content {
-            position: relative;
-            width: 100%;
-            height: calc(100% - 32px);
-            overflow: hidden;
-
-            .scroll-box {
-                width: 100%;
-                -webkit-animation: 10s scrollTop linear infinite normal;
-                animation: 10s scrollTop linear infinite normal;
-
-                @keyframes scrollTop {
-                    0% {
-                        -webkit-transform: translate3d(0, 0, 0);
-                        transform: translate3d(0, 0, 0);
-                    }
-
-                    100% {
-                        -webkit-transform: translate3d(0, -250px, 0);
-                        transform: translate3d(0, -250px, 0);
-                    }
-                }
-
-
-            }
-
-            .fall-content-item {
-                height: 34px;
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-
-                &:nth-child(odd) {
-                    background-color: #0b202e;
-                }
-
-                &:nth-child(even) {
-                    background-color: #0d3144;
-                }
-
-                .content-item-val {
-                    display: flex;
-                    justify-content: center;
-                    color: #fff;
-
-                    &:nth-child(1) {
-                        flex: 1;
-                    }
-
-                    &:nth-child(2) {
-                        flex: 3;
-                    }
-
-                    &:nth-child(3) {
-                        flex: 2;
-                        color: #00ff91;
-                    }
-
-                    &:nth-child(4) {
-                        flex: 2;
-                    }
-
-                }
-
-            }
-        }
-    }
-}
-</style>

src/views/vent/home/dustHome/components/dustGlzb.vue

@@ -1,94 +0,0 @@
-<template>
-    <div class="dustGlzb">
-        <div class="dust-gl-box" v-for="(item, index) in dustZbList" :key="index">
-            <div class="gl-box-content">
-                <span class="gl-label">{{ item.label }}</span>
-                <span class="gl-val">{{ item.val }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { reactive } from 'vue'
-
-let dustZbList = reactive([
-    { id: 0, label: '最高温度(℃)', val: 12 },
-    { id: 1, label: '环境湿度(%)', val: 12 },
-    { id: 2, label: '风速(m/s)', val: 12 },
-    { id: 3, label: '采煤机', val: 12 },
-    { id: 4, label: '水压(Mpa)', val: 12 },
-    { id: 5, label: '水阀', val: 12 },
-])
-
-</script>
-
-<style lang="less" scoped>
-.dustGlzb {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-wrap: wrap;
-
-    .dust-gl-box {
-        width: 50%;
-        height: 66px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .gl-box-content {
-            position: relative;
-            width: 254px;
-            height: 100%;
-            .gl-label{
-                position: absolute;
-                left: 74px;
-                top: 50%;
-                transform: translate(0,-50%);
-                color: #fff;
-            }
-            .gl-val{
-                position: absolute;
-                right: 36px;
-                top: 50%;
-                transform: translate(0,-40%);
-                font-family: 'douyuFont';
-                color: #1fb3f7;
-            }
-        }
-
-        &:nth-child(1) .gl-box-content {
-            background: url('../../../../../assets/images/dust/dusthome/gl-1.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        &:nth-child(2) .gl-box-content {
-            background: url('../../../../../assets/images/dust/dusthome/gl-2.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        &:nth-child(3) .gl-box-content {
-            background: url('../../../../../assets/images/dust/dusthome/gl-3.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        &:nth-child(4) .gl-box-content {
-            background: url('../../../../../assets/images/dust/dusthome/gl-4.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        &:nth-child(5) .gl-box-content {
-            background: url('../../../../../assets/images/dust/dusthome/gl-5.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        &:nth-child(6) .gl-box-content {
-            background: url('../../../../../assets/images/dust/dusthome/gl-6.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-    }
-}</style>

src/views/vent/home/dustHome/components/dustJtzb.vue

@@ -1,59 +0,0 @@
-<template>
-    <div class="dustJtzb">
-        <div class="jtZb-box" v-for="(item, index) in jtzbList" :key="index">
-            <div class="jtZb-content">
-                <div class="jtZb-label">{{ `${item.label}:` }}</div>
-                <div class="jtZb-val">{{ item.val }}</div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive } from 'vue'
-
-let jtzbList = reactive([
-    { id: 0, label: '游离二氧化硅', val: 53535 },
-    { id: 1, label: '分散度', val: 48485 },
-    { id: 2, label: '煤尘爆炸性', val: 48485 },
-    { id: 3, label: '火焰长度', val: 5878 },
-    { id: 4, label: '最低岩粉量', val: 48485 },
-])
-</script>
-
-<style lang="less" scoped>
-.dustJtzb {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: flex-start;
-    align-items: flex-start;
-    flex-wrap: wrap;
-
-    .jtZb-box {
-        width: 33.33%;
-        height: 60px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        .jtZb-content {
-            width: 170px;
-            height: 40px;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-            background: url('../../../../../assets/images/dust/dusthome/jtzb.png') no-repeat center;
-            background-size: 100% 100%;
-
-            .jtZb-label {
-                color: #fff;
-            }
-
-            .jtZb-val {
-                color: #1fb3f7;
-            }
-        }
-    }
-}</style>

src/views/vent/home/dustHome/components/multipleDust.vue

@@ -1,194 +0,0 @@
-<template>
-    <div class="multipleDust">
-        <div class="multiple-box" ref="multiple"></div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, nextTick } from 'vue'
-import * as echarts from 'echarts';
-
-//获取don元素节点
-let multiple = ref()
-
-
-function getOption() {
-    nextTick(() => {
-        let myChart = echarts.init(multiple.value);
-        let option = {
-            grid: {
-                top: '8%',
-                left: '5%',
-                right: '5%',
-                bottom: '8%',
-                // containLabel: true
-            },
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    lineStyle: {
-                        color: {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [{
-                                offset: 0,
-                                color: 'rgba(31, 179, 247,0)'
-                            }, {
-                                offset: 0.5,
-                                color: 'rgba(31, 179, 247,1)',
-                            }, {
-                                offset: 1,
-                                color: 'rgba(31, 179, 247,0)'
-                            }],
-                            global: false
-                        }
-                    },
-                },
-            },
-
-            xAxis: [
-                {
-                    type: 'category',
-                    boundaryGap: false,
-                    axisLine: {
-                        lineStyle: {
-                            color: 'rgba(100, 99, 99,.5)',
-                            type: 'dashed'
-                        },
-                    },
-                    // splitArea: {
-                    //     show: true,
-                    //     color: 'red',
-                    //     lineStyle: {
-                    //         color: 'red'
-                    //     },
-                    // },
-                    axisLabel: {
-                        fontSize: 14,
-                        // margin: 10,
-                        textStyle: {
-                            color: '#b3b8cc',
-                        },
-                    },
-                    splitLine: {
-                        show: false,
-                    },
-                    axisTick: {
-                        show: false,
-                    },
-
-                    data: ['12-01', '12-02', '12-03', '12-04', '12-05', '12-06'],
-
-                }
-            ],
-
-            yAxis: [{
-                type: 'value',
-                min: 0,
-                // max: 140,
-                // splitNumber: 4,
-                splitLine: {
-                    show: true,
-                    lineStyle: {
-                        color: 'rgba(100, 99, 99,.5)',
-                            type: 'dashed'
-                    }
-                },
-                axisLine: {
-                    show: false,
-                },
-                axisLabel: {
-                    show: false,
-                    margin: 20,
-                    textStyle: {
-                        color: '#d1e6eb',
-
-                    },
-                },
-                axisTick: {
-                    show: false,
-                },
-            }],
-            series: [
-                {
-                    name: '粉尘浓度',
-                    type: 'line',
-                    smooth: true, //是否平滑
-                    showAllSymbol: true,
-                    // symbol: 'image://./static/images/guang-circle.png',
-                    symbol: 'circle',
-                    symbolSize: 10,
-                    lineStyle: {
-                        normal: {
-                            color: "#1fb3f7",
-                            shadowColor: 'rgba(0, 0, 0, .3)',
-                            shadowBlur: 0,
-                            shadowOffsetY: 5,
-                            shadowOffsetX: 5,
-                        },
-                    },
-                    label: {
-                        show: true,
-                        position: 'top',
-                        textStyle: {
-                            color: '#1fb3f7',
-                        }
-                    },
-                    itemStyle: {
-                        color: "#1fb3f7",
-                        borderColor: "#fff",
-                        borderWidth: 3,
-                        shadowColor: 'rgba(0, 0, 0, .3)',
-                        shadowBlur: 0,
-                        shadowOffsetY: 2,
-                        shadowOffsetX: 2,
-                    },
-                    tooltip: {
-                        show: false
-                    },
-                    areaStyle: {
-                        normal: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-                                offset: 0,
-                                color: 'rgba(31, 179, 247,0.3)'
-                            },
-                            {
-                                offset: 1,
-                                color: 'rgba(31, 179, 247,0)'
-                            }
-                            ], false),
-                            shadowColor: 'rgba(31, 179, 247, 0.9)',
-                            shadowBlur: 20
-                        }
-                    },
-                    data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02,]
-                },
-            ]
-        };
-        myChart.setOption(option);
-        window.onresize = function () {
-            myChart.resize();
-        };
-    });
-}
-
-onMounted(() => {
-    getOption()
-})
-
-</script>
-
-<style lang="less" scoped>
-.multipleDust {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    .multiple-box {
-        width: 100%;
-        height: 100%;
-       }
-}
-</style>

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

@@ -1,212 +0,0 @@
-<template>
-    <div class="dustHome">
-        <!-- 模型区域 -->
-        <div class="moduleArea"></div>
-        <div class="main-container">
-            <div class="left-area">
-                <!-- 左上区域 -->
-                <div class="left-t">
-                    <div class="tcontent-area">
-                        <div class="tcontent-l">
-                            <div>全矿井</div>
-                            <div>监测区域</div>
-                        </div>
-                        <div class="tcontent-c">
-                            <div style="font-size: 24px; color: #1fb3f7;">低风险</div>
-                        </div>
-                        <div class="tcontent-r">粉尘灾害</div>
-                    </div>
-                </div>
-                <!-- 左中区域 -->
-                <div class="left-c">
-                    <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '606px' }">
-                        <workJc :heightT="'26%'" :heightB="'74%'"></workJc>
-                    </DanelBd>
-                </div>
-                <!-- 左底部区域 -->
-                <div class="left-f">
-                    <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs">
-                    </DanelBd>
-                </div>
-            </div>
-            <div class="center-area">
-                <div class="center-b">
-                    <DanelBd :moduleName="'81202综放工作面粉尘浓度'" :contentStyle="{ contentH: '332px' }" commonTitle="datePikers">
-                        <multipleDust></multipleDust>
-                    </DanelBd>
-                </div>
-            </div>
-            <div class="right-area">
-                <!-- 右上区域 -->
-                <div class="right-t">
-                    <DanelBd :moduleName="'智能喷雾降尘装置'" :contentStyle="{ contentH: '290px' }">
-                        <dustFallDevice></dustFallDevice>
-                    </DanelBd>
-                </div>
-                <!-- 右中区域 -->
-                <div class="right-c">
-                    <DanelBd :moduleName="'粉尘关联指标'" :contentStyle="{ contentH: '230px' }" commonTitle="selected">
-                        <dustGlzb></dustGlzb>
-                    </DanelBd>
-                </div>
-                <!-- 右下区域 -->
-                <div class="right-b">
-                    <DanelBd :moduleName="'粉尘静态指标'" :contentStyle="{ contentH: '150px' }" commonTitle="selected">
-                        <dustJtzb></dustJtzb>
-                    </DanelBd>
-                </div>
-               
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
-import DanelBd from '../common/danelBd.vue'
-import workJc from '../fireHome/components/workJc.vue'
-import multipleDust from './components/multipleDust.vue'
-import dustFallDevice from './components/dustFallDevice.vue'
-import dustGlzb from './components/dustGlzb.vue'
-import dustJtzb from './components/dustJtzb.vue'
-
-</script>
-
-<style lang="less" scoped>
-@font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.dustHome {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .moduleArea {
-        width: 100%;
-        height: calc(100% - 15px);
-        margin-bottom: 15px;
-    }
-
-    .main-container {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: calc(100% - 80px);
-        margin: 15px 0px;
-        display: flex;
-        justify-content: space-between;
-
-        .left-area {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            width: 30%;
-            height: 100%;
-            margin-right: 15px;
-
-            .left-t {
-                position: relative;
-                width: 100%;
-                height: 121px;
-                background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
-                background-size: 100% 100%;
-
-                .tcontent-area {
-                    width: 100%;
-                    height: 90px;
-                    padding: 0px 20px;
-                    box-sizing: border-box;
-                    position: absolute;
-                    top: 50%;
-                    left: 0;
-                    transform: translate(0, -50%);
-                    display: flex;
-                    justify-content: space-around;
-                    align-items: center;
-
-                    .tcontent-l {
-                        height: 100%;
-                        display: flex;
-                        flex-direction: column;
-                        flex: 1;
-                        justify-content: center;
-                        align-items: center;
-                        color: #9da5aa;
-                        font-size: 16px;
-                        letter-spacing: 3px;
-                    }
-
-                    .tcontent-c {
-                        display: flex;
-                        flex-direction: column;
-                        flex: 3;
-                        justify-content: center;
-                        align-items: center;
-                        height: 100%;
-                    }
-
-                    .tcontent-r {
-                        height: 100%;
-                        display: flex;
-                        flex-direction: column;
-                        flex: 1;
-                        justify-content: center;
-                        align-items: center;
-                        color: #9da5aa;
-                        font-size: 16px;
-                        letter-spacing: 3px;
-                    }
-                }
-            }
-
-            .left-c {
-                width: 100%;
-            }
-
-            .left-f {
-                width: 100%;
-            }
-        }
-
-        .center-area {
-            width: calc(40% - 40px);
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            align-items: center;
-
-            .center-b {
-                width: 100%;
-            }
-        }
-
-        .right-area {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            width: 30%;
-            height: 100%;
-            margin-left: 15px;
-
-            .right-t {
-                width: 100%;
-            }
-
-            .right-c {
-                width: 100%;
-            }
-
-            .right-b {
-                width: 100%;
-            }
-
-        }
-    }
-}
-</style>

src/views/vent/home/fireHome/components/emptyJc.vue

@@ -1,259 +0,0 @@
-<template>
-    <div class="emptyJc">
-        <div class="empty-box" v-for="(item, index) in emptyList" :key="index">
-            <div class="empty-label">{{ item.label }}</div>
-            <div class="empty-val">{{ item.val }}</div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
-let emptyList = reactive([
-    { label: '一氧化碳', val: 100 },
-    { label: '风速', val: 1 },
-    { label: '二氧化碳', val: 30 },
-    { label: '温度', val: 91 },
-    { label: '氧气', val: 37 },
-    { label: '环境瓦斯', val: 236 },
-    { label: '馈电器', val: 8 },
-
-])
-
-
-</script>
-
-<style lang="less" scoped>
-.emptyJc {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    .empty-box {
-        position: absolute;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        background: url('../../../../../assets/images/fire/firehome/empty-qp.png') no-repeat center;
-        background-size: 100% 100%;
-       
-        &:nth-child(1) {
-            width: 120px;
-            height: 120px;
-            animation: fdOne 20s linear infinite;
-            @keyframes fdOne {
-                0%{
-                    left: 10%;
-                    top: 0%;
-                }
-                20%{
-                    left: 30%;
-                    top: 10%;
-                }
-                60%{
-                    left: 50%;
-                    top: 20%;
-                }
-                80%{
-                    left: 70%;
-                    top: 30%;
-                }
-                100%{
-                    left: 80%;
-                    top: 15%;
-                }
-                
-            }
-        }
-        &:nth-child(2) {
-            width: 70px;
-            height: 70px;
-            animation: fdTwo 10s linear infinite;
-
-            @keyframes fdTwo {
-                0%{
-                    left: 30%;
-                    top: 0%;
-                }
-                20%{
-                    left: 50%;
-                    top: 20%;
-                }
-                60%{
-                    left: 80%;
-                    top: 60%;
-                }
-                80%{
-                    left: 40%;
-                    top: 40%;
-                }
-                100%{
-                    left: 20%;
-                    top: 10%;
-                }
-                
-            }
-        }
-        &:nth-child(3) {
-            width: 90px;
-            height: 90px;
-            animation: fdThree 13s linear infinite;
-
-            @keyframes fdThree {
-                0%{
-                    left: 45%;
-                    top: 50%;
-                }
-                20%{
-                    left: 20%;
-                    top: 35%;
-                }
-                60%{
-                    left: 50%;
-                    top: 15%;
-                }
-                80%{
-                    left: 70%;
-                    top: 40%;
-                }
-                100%{
-                    left: 90%;
-                    top: 55%;
-                }
-                
-            }
-        }
-
-        &:nth-child(4) {
-            width: 100px;
-            height: 100px;
-            animation: fdFour 16s linear infinite;
-
-            @keyframes fdFour {
-                0%{
-                    left: 50%;
-                    top: 60%;
-                }
-                20%{
-                    left: 35%;
-                    top: 50%;
-                }
-                60%{
-                    left: 20%;
-                    top: 40%;
-                }
-                80%{
-                    left: 0%;
-                    top: 10%;
-                }
-                100%{
-                    left: 50%;
-                    top: 35%;
-                }
-                
-            }
-        }
-
-        &:nth-child(5) {
-            width: 70px;
-            height: 70px;
-            animation: fdFive 10s linear infinite;
-
-            @keyframes fdFive {
-                0%{
-                    left: 70%;
-                    top: 50%;
-                }
-                20%{
-                    left: 85%;
-                    top: 35%;
-                }
-                60%{
-                    left: 65%;
-                    top: 25%;
-                }
-                80%{
-                    left: 20%;
-                    top: 40%;
-                }
-                100%{
-                    left: 50%;
-                    top: 65%;
-                }
-                
-            }
-        }
-
-        &:nth-child(6) {
-            width: 120px;
-            height: 120px;
-            animation: fdSix 20s linear infinite;
-
-            @keyframes fdSix {
-                0%{
-                    left: 15%;
-                    top: 60%;
-                }
-                20%{
-                    left: 30%;
-                    top: 45%;
-                }
-                60%{
-                    left: 45%;
-                    top: 30%;
-                }
-                80%{
-                    left: 60%;
-                    top: 15%;
-                }
-                100%{
-                    left: 40%;
-                    top: 30%;
-                }
-                
-            }
-        }
-
-        &:nth-child(7) {
-            width: 90px;
-            height: 90px;
-            animation: fdSev 13s linear infinite;
-
-            @keyframes fdSev {
-                0%{
-                    left: 80%;
-                    top: 10%;
-                }
-                20%{
-                    left: 65%;
-                    top: 30%;
-                }
-                60%{
-                    left: 50%;
-                    top: 50%;
-                }
-                80%{
-                    left: 35%;
-                    top: 70%;
-                }
-                100%{
-                    left: 20%;
-                    top: 50%;
-                }
-                
-            }
-        }
-
-        .empty-label{
-            color: #9da5aa;
-        }
-        .empty-val{
-            font-size: 18px;
-            color: #fff;
-        }
-    }
-
-}
-</style>

src/views/vent/home/fireHome/components/fiberBunbleJc.vue

@@ -1,114 +0,0 @@
-<template>
-    <div class="fiberBunbleJc">
-        <div class="fiberBunbleJc-box" v-for="(item, index) in fiberBunbleJcList" :key="index">
-            <div class="jc-title"></div>
-            <div class="jc-item">
-                <span class="item-label">{{ `${item.label} : ` }}</span>
-                <span class="item-val">{{ `${item.val}%` }}</span>
-            </div>
-            <div class="jc-item1">
-                <span class="item-label">{{ `${item.label1} : ` }}</span>
-                <span class="item-val">{{ item.val1 }}</span>
-            </div>
-            <div class="jc-item2">
-                <span class="item-label">{{ `${item.label2} : ` }}</span>
-                <span class="item-val">{{ item.val2 }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
-let fiberBunbleJcList = reactive([
-    {  label: '最大浓度', val: 20, label1: '位置', val1: '80212综采工作面', label2: '时间', val2: '2023-11-07 16:53:48', },
-    {  label: '最大浓度', val: 20, label1: '位置', val1: '80212综采工作面', label2: '时间', val2: '2023-11-07 16:53:48', },
-    {  label: '最大浓度', val: 20, label1: '位置', val1: '80212综采工作面', label2: '时间', val2: '2023-11-07 16:53:48', },
-    {  label: '最大浓度', val: 20, label1: '位置', val1: '80212综采工作面', label2: '时间', val2: '2023-11-07 16:53:48', },
-])
-</script>
-
-<style lang="less" scoped>
-.fiberBunbleJc {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: center;
-
-    .fiberBunbleJc-box {
-        position: relative;
-        width: 100%;
-        height: 58px;
-        background: url('../../../../../assets/images/fire/firehome/fiber-jc.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .jc-title {
-            position: absolute;
-        }
-        &:nth-child(1) .jc-title{
-            left: 10%;
-            top: 8%;
-            width: 36px;
-            height: 46px;
-            background: url('../../../../../assets/images/fire/firehome/O₂.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-        &:nth-child(2) .jc-title{
-            left: 9%;
-            top: 9%;
-            width: 56px;
-            height: 46px;
-            background: url('../../../../../assets/images/fire/firehome/CH₄.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-        &:nth-child(3) .jc-title{
-            left: 9%;
-            top: 24%;
-            width: 42px;
-            height: 34px;
-            background: url('../../../../../assets/images/fire/firehome/CO.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-        &:nth-child(4) .jc-title{
-            left: 9%;
-            top: 6%;
-            width: 56px;
-            height: 46px;
-            background: url('../../../../../assets/images/fire/firehome/CO₂.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        .jc-item {
-            position: absolute;
-            left: 30%;
-            top: 10%;
-
-        }
-
-        .jc-item1 {
-            position: absolute;
-            left: 60%;
-            top: 10%;
-
-        }
-
-        .jc-item2 {
-            position: absolute;
-            left: 30%;
-            top: 50%;
-
-        }
-
-        .item-label {
-            color: #9da5aa;
-        }
-
-        .item-val {
-            color: #fff;
-        }
-    }
-}</style>

src/views/vent/home/fireHome/components/outFireJc.vue

@@ -1,100 +0,0 @@
-<template>
-    <div class="outFireJc">
-        <div class="outFire-box" v-for="(item, index) in outFireList" :key="index">
-            <div class="outFire-icon"></div>
-            <div class="outFire-title">{{ item.title }}</div>
-            <div class="outFire-val">
-                <span>{{ item.val }}</span>
-                <span>{{ item.dw }}</span>
-            </div>
-            <div class="outFire-label">{{ item.label }}</div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-
-let outFireList = reactive([
-    { title: '光钎预警', val: 38, dw: '℃', label: "最高温度" },
-    { title: '一氧化碳预警', val: 24, dw: 'ppm', label: "最高浓度" },
-    { title: '烟雾预警', val: '无烟', dw: '', label: "状态" },
-])
-</script>
-
-<style lang="less" scoped>
-.outFireJc {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-
-    .outFire-box {
-        position: relative;
-        width: 157px;
-        height: 160px;
-        background: url('../../../../../assets/images/fire/firehome/miehuo.png') no-repeat center;
-        background-size: 100% 100%;
-
-        .outFire-title {
-            width: 100%;
-            position: absolute;
-            top: 14px;
-            text-align: center;
-            color: #fff;
-        }
-
-        .outFire-val {
-            width: 100%;
-            position: absolute;
-            top: 70px;
-            text-align: center;
-
-            span {
-                font-size: 24px;
-                color: #1fb3f7;
-                font-weight: bold;
-            }
-
-        }
-        .outFire-label{
-            width: 100%;
-            position: absolute;
-            top: 120px;
-            text-align: center;
-            color: #9da5aa;
-        }
-
-        &:nth-child(1) .outFire-icon {
-            position: absolute;
-            left: 54px;
-            top: 64px;
-            width: 53px;
-            height: 77px;
-            background: url('../../../../../assets/images/fire/firehome/temp.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        &:nth-child(2) .outFire-icon {
-            position: absolute;
-            left: 34px;
-            top: 72px;
-            width: 89px;
-            height: 67px;
-            background: url('../../../../../assets/images/fire/firehome/co1.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-
-        &:nth-child(3) .outFire-icon {
-            position: absolute;
-            left: 42px;
-            top: 71px;
-            width: 74px;
-            height: 74px;
-            background: url('../../../../../assets/images/fire/firehome/smoke.png') no-repeat center;
-            background-size: 100% 100%;
-        }
-    }
-}</style>

src/views/vent/home/fireHome/components/safetyJc.vue

@@ -1,170 +0,0 @@
-<template>
-    <div class="safetyJc">
-        <div class="safety-head">
-            <div class="safety-head-item" v-for="(item, index) in safetyHeadList" :key="index">{{ item.label }}</div>
-        </div>
-        <div class="safety-content">
-            <div class="scroll-contents">
-                <div class="safety-content-box" v-for="(ite, ind) in safetyList" :key="ind">
-                    <span class="address-text">{{ ite.address }}</span>
-                    <span class="temp-text">{{ ite.temp }}</span>
-                    <span class="grade-text">{{ ite.grade }}</span>
-                    <span class="time-text">{{ ite.time }}</span>
-                </div>
-            </div>
-        </div>
-
-    </div>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref, } from 'vue'
-
-let safetyHeadList = reactive([
-    { label: '测点位置' },
-    { label: '温度(°C)' },
-    { label: '预警级别' },
-    { label: '时间' },
-])
-
-let safetyList = reactive([
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-    { address: '81202综采工作面', temp: '17.2', grade: '低风险', time: '2023-11-07 16:53:48' },
-
-])
-</script>
-
-<style lang="less" scoped>
-.safetyJc {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-    .safety-head {
-        height: 30px;
-        padding: 0px 7px;
-        box-sizing: border-box;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .safety-head-item {
-            color: #1fb3f7;
-            font-weight: bold;
-
-            &:nth-child(1) {
-                display: flex;
-                flex: 2;
-                justify-content: center;
-                align-items: center;
-            }
-
-            &:nth-child(2) {
-                display: flex;
-                flex: 1;
-                justify-content: center;
-                align-items: center;
-            }
-
-            &:nth-child(3) {
-                display: flex;
-                flex: 1;
-                justify-content: center;
-                align-items: center;
-            }
-
-            &:nth-child(4) {
-                display: flex;
-                flex: 2;
-                justify-content: center;
-                align-items: center;
-            }
-
-        }
-    }
-
-    .safety-content {
-        position: relative;
-        height: calc(100% - 30px);
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        align-items: center;
-        overflow: hidden;
-
-        .scroll-contents {
-            width: 100%;
-            position: absolute;
-            animation: scrollCon 6s linear infinite;
-            @keyframes scrollCon {
-                0% {
-                    left: 0;
-                    top: 0%;
-                }
-
-                50% {
-                    left: 0;
-                    top: -50%;
-                }
-
-                100% {
-                    left: 0;
-                    top: -100%;
-                }
-            }
-
-            .safety-content-box {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                width: 100%;
-                height: 24px;
-                margin-bottom: 10px;
-                padding: 0px 7px;
-                box-sizing: border-box;
-                background: url('../../../../../assets/images/fire/firehome/safety1.png') no-repeat center;
-                background-size: 100% 100%;
-
-                span {
-                    color: #fff;
-                }
-
-                .address-text {
-                    display: flex;
-                    flex: 2;
-                    justify-content: center;
-                    align-items: center;
-                    background: url('../../../../../assets/images/fire/firehome/safety2.png') no-repeat center;
-                    background-size: 100% 100%;
-                }
-
-                .temp-text {
-                    display: flex;
-                    flex: 1;
-                    justify-content: center;
-                    align-items: center;
-                }
-
-                .grade-text {
-                    display: flex;
-                    flex: 1;
-                    justify-content: center;
-                    align-items: center;
-                }
-
-                .time-text {
-                    display: flex;
-                    flex: 2;
-                    justify-content: center;
-                    align-items: center;
-                }
-            }
-        }
-
-
-    }
-}</style>

src/views/vent/home/fireHome/components/substationJc.vue

@@ -1,197 +0,0 @@
-<template>
-    <div class="substationJc">
-        <div class="substation-box" ref="substation"></div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import {ref,onMounted,nextTick} from 'vue'
-import * as echarts from 'echarts';
-
-//获取dom节点
-let substation=ref()
-
-function getOption() {
-  nextTick(() => {
-    const myChart = echarts.init(substation.value);
-    let option = {
-      tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-          type: 'cross',
-        },
-      },
-
-      legend: {
-        align: 'left',
-        right: '4%',
-        top: '0%',
-        type: 'plain',
-        textStyle: {
-          color: '#7ec7ff',
-          fontSize: 14,
-        },
-        // icon:'rect',
-        itemGap: 25,
-        itemWidth: 18,
-        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
-        data: [
-          {
-            name: '实时值',
-          },
-          {
-            name: '监测值',
-          },
-          // {
-          //   name: '工作面需风'
-          // }
-        ],
-      },
-
-      grid: {
-        top: '20%',
-        left: '3%',
-        right: '3%',
-        bottom: '0%',
-        containLabel: true,
-      },
-
-      xAxis: [
-        {
-          type: 'category',
-          // boundaryGap: false,
-          axisLine: {
-            //坐标轴轴线相关设置。数学上的x轴
-            show: true,
-            lineStyle: {
-              color: 'rgba(62, 103, 164)',
-            },
-          },
-          axisLabel: {
-            //坐标轴刻度标签的相关设置
-            textStyle: {
-              color: '#b3b8cc',
-              padding: 0,
-              fontSize: 14,
-            },
-            formatter: function (data) {
-              return data;
-            },
-          },
-          splitLine: {
-            show: false,
-          },
-          axisTick: {
-            show: false,
-          },
-          data: ['15:30','15:31','15:32','15:33','15:34','15:35',],
-        },
-      ],
-
-      yAxis: [
-        {
-          name: 'm³/min',
-          nameTextStyle: {
-            color: '#b3b8cc',
-            fontSize: 12,
-            padding: 0,
-          },
-          min: 0,
-          splitNumber: 3,
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: 'rgba(62, 103, 164,.4)',
-            },
-          },
-          axisLine: {
-            show: false,
-            // lineStyle: {
-            //   color: 'rgba(62, 103, 164)',
-            // },
-          },
-          axisLabel: {
-            show: true,
-            textStyle: {
-              color: '#b3b8cc',
-              padding: 0,
-              fontSize: 14,
-            },
-            formatter: function (value) {
-              if (value === 0) {
-                return value;
-              }
-              return value;
-            },
-          },
-          axisTick: {
-            show: false,
-          },
-        },
-      ],
-      series: [
-        {
-          name: '实时值',
-          type: 'line',
-          yAxisIndex: 0,
-          symbolSize: 6,
-          lineStyle: {
-            normal: {
-              width: 2,
-              color: 'orange', // 线条颜色
-            },
-            borderColor: 'rgba(0,0,0,.4)',
-          },
-          itemStyle: {
-            color: 'orange',
-            borderColor: '#646ace',
-            borderWidth: 0,
-          },
-          data: [100,105,115,130,150,180],
-        },
-        {
-          name: '监测值',
-          type: 'line',
-          yAxisIndex: 0,
-          symbolSize: 6,
-
-          lineStyle: {
-            normal: {
-              width: 2,
-              color: '#1891de', // 线条颜色
-            },
-            borderColor: 'rgba(0,0,0,.4)',
-          },
-          itemStyle: {
-            color: '#1891de',
-            borderColor: '#646ace',
-            borderWidth: 0,
-          },
-          data: [200,195,185,170,150,120],
-        },
-      ],
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
-}
-
-onMounted(()=>{
-    getOption()
-})
-
-</script>
-
-<style lang="less" scoped>
-.substationJc {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    .substation-box{
-        width: 100%;
-        height: 100%;
-    }
-}
-</style>

src/views/vent/home/fireHome/components/systemJc.vue

@@ -1,40 +0,0 @@
-<template>
-    <div class="systemJc">
-        <div class="systemJc-box" v-for="(item,index) in systemJcList" :key="index">
-            <div class="system-label">{{ item.label }}</div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import {ref,reactive} from 'vue'
-let systemJcList=reactive([
-    {label:'智能灌浆系统'},
-    {label:'智能注氮系统'},
-])
-</script>
-
-<style lang="less" scoped>
-.systemJc{
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    .systemJc-box{
-        position: relative;
-        width: 222px;
-        height: 100%;
-        background: url('../../../../../assets/images/fire/firehome/zu-14578.png') no-repeat center;
-        background-size: 100% 100%;
-        .system-label{
-            position: absolute;
-            left: 50%;
-            top: 8px;
-            transform: translate(-50%,0);
-            color: #fff;
-        }
-    }
-}
-</style>

src/views/vent/home/fireHome/components/workJc.vue

@@ -1,418 +0,0 @@
-<template>
-    <div class="workJc">
-        <div class="echart-workJc" :style="{height:heightT}">
-            <div class="workJc-l">
-                <div class="echart-yh"></div>
-                <div class="echart-line"></div>
-                <div class="echart-boxs" ref="ring"></div>
-            </div>
-            <div class="workJc-r">
-                <div class="fx-box" v-for="(item, index) in fxLenged" :key="index">
-                    <div class="fx-label">
-                        <div class="fx-label-l">
-                            <div class="bg-pie"></div>
-                        </div>
-                        <div class="fx-label-r">{{ item.label }}</div>
-                    </div>
-                    <div class="fx-val">{{ item.val }}</div>
-                </div>
-            </div>
-
-        </div>
-        <div class="card-workJc" :style="{height:heightB}">
-            <div class="scroll-card">
-                <div class="card-box" v-for="(ite, ind) in cardList" :key="ind">
-                    <div class="card-l-label">{{ ite.title }}</div>
-                    <div class="card-l-val">{{ ite.val }}</div>
-
-                    <div class="card-r-label">{{ ite.label }}</div>
-                    <div class="card-r-content">
-                        <span>{{ `${ite.title1} : ` }}</span>
-                        <span>{{ `${ite.val1}°C` }}</span>
-                    </div>
-                    <div class="card-r-content1">
-                        <span>{{ `${ite.title2} : ` }}</span>
-                        <span>{{ ite.val2 }}</span>
-                    </div>
-
-
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, onMounted, nextTick,defineProps } from 'vue'
-import * as echarts from 'echarts';
-
-let props=defineProps({
-    heightT:{
-        type:String,
-        default:'0%',
-    },
-    heightB:{
-        type:String,
-        default:'0%'
-    }
-})
-
-//获取dom节点
-let ring = ref()
-
-let fxLenged = reactive([
-    {
-        label: '低风险',
-        val: 1,
-    },
-    {
-        label: '中风险',
-        val: 2,
-    },
-    {
-        label: '高风险',
-        val: 3
-    },
-    {
-        label: '报警',
-        val: 4
-    },
-    {
-        label: '正常',
-        val: 5
-    }
-])
-
-let cardList = reactive([
-    {
-        title: '风险',
-        val: '低',
-        label: '81202综放工作面',
-        title1: '温度最大值',
-        val1: '30',
-        title2: '预测风险区域',
-        val2: '散热带，氧化带，窒息带'
-    },
-    {
-        title: '风险',
-        val: '中',
-        label: '81202综放工作面',
-        title1: '温度最大值',
-        val1: '30',
-        title2: '预测风险区域',
-        val2: '散热带，氧化带，窒息带'
-    },
-    {
-        title: '风险',
-        val: '低',
-        label: '81202综放工作面',
-        title1: '温度最大值',
-        val1: '30',
-        title2: '预测风险区域',
-        val2: '散热带，氧化带，窒息带'
-    },
-    {
-        title: '风险',
-        val: '低',
-        label: '81202综放工作面',
-        title1: '温度最大值',
-        val1: '30',
-        title2: '预测风险区域',
-        val2: '散热带，氧化带，窒息带'
-    },
-    {
-        title: '风险',
-        val: '中',
-        label: '81202综放工作面',
-        title1: '温度最大值',
-        val1: '30',
-        title2: '预测风险区域',
-        val2: '散热带，氧化带，窒息带'
-    },
-    {
-        title: '风险',
-        val: '高',
-        label: '81202综放工作面',
-        title1: '温度最大值',
-        val1: '30',
-        title2: '预测风险区域',
-        val2: '散热带，氧化带，窒息带'
-    },
-])
-
-function getOption() {
-    nextTick(() => {
-        let color = [
-            '#0CD2E6',
-            '#3751E6',
-            '#FFC722',
-            '#886EFF',
-            '#008DEC',
-            '#114C90',
-            '#00BFA5',
-        ];
-
-        let seriesData = [
-            { "name": "低风险", "value": 30 },
-            { "name": "中风险", "value": 10 },
-            { "name": "高风险", "value": 15 },
-            { "name": "报警", "value": 23 },
-            { "name": "正常", "value": 10 },
-        ]
-
-
-        let myChart = echarts.init(ring.value);
-        let option = {
-            color: color,
-            grid: {
-                top: '15%',
-                left: 0,
-                right: '1%',
-                bottom: 5,
-                containLabel: true,
-            },
-
-            series: [{
-                name: '风险占比',
-                type: 'pie',
-                center: ['50%', '50%'],
-                radius: ['65%', '85%'],
-                label: {
-                    normal: {
-                        show: false,
-                        position: 'center',
-                        formatter: '{value|{c}}\n{label|{b}}',
-                        rich: {
-                            value: {
-                                padding: 5,
-                                align: 'center',
-                                verticalAlign: 'middle',
-                                fontSize: 16,
-                            },
-                            label: {
-                                align: 'center',
-                                verticalAlign: 'middle',
-                                fontSize: 14,
-                            },
-                        },
-                    },
-                    emphasis: {
-                        show: true,
-                        textStyle: {
-                            fontSize: '10',
-                        },
-                    },
-                },
-                labelLine: {
-                    show: false,
-                    length: 0,
-                    length2: 0,
-                },
-                data: seriesData,
-            }],
-        };
-        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');
-}
-
-.workJc {
-    width: 100%;
-    height: 100%;
-
-    .echart-workJc {
-        width: 100%;
-        // height: 45%;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .workJc-l {
-            position: relative;
-            width: 180px;
-            height: 100%;
-
-            .echart-yh {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 100px;
-                height: 100px;
-                background: url('../../../../../assets/images/fire/firehome/zu-e.png') no-repeat center;
-                background-size: 100% 100%;
-            }
-
-            .echart-line {
-                position: absolute;
-                top: 8%;
-                left: 15%;
-                width: 125px;
-                height: 125px;
-                background: url('../../../../../assets/images/fire/firehome/ty-e.png') no-repeat center;
-                background-size: 100% 100%;
-                animation: rotationLine 10s linear infinite;
-            }
-
-            @keyframes rotationLine {
-                0% {
-                    transform: rotate(0deg);
-                }
-
-                100% {
-                    transform: rotate(360deg);
-                }
-            }
-
-            .echart-boxs {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                width: 90px;
-                height: 90px;
-            }
-        }
-
-        .workJc-r {
-            width: calc(100% - 180px);
-            height: 100%;
-            display: flex;
-            justify-content: space-around;
-            align-items: center;
-
-            .fx-box {
-                height: 80px;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-around;
-                align-items: center;
-                color: #a1b6c2;
-
-                .fx-label {
-                    height: 28px;
-                    display: flex;
-                    align-items: center;
-
-                    .fx-label-l {
-                        position: relative;
-                        width: 14px;
-                        height: 14px;
-                        padding: 1px;
-                        box-sizing: border-box;
-                        border: 1px solid #1fb3f7;
-                        margin-right: 5px;
-
-                        .bg-pie {
-                            width: 100%;
-                            height: 100%;
-                            border-radius: 50%;
-                            background-color: #1fb3f7;
-                        }
-                    }
-                }
-
-                .fx-val {
-                    font-family: 'douyuFont';
-                    font-size: 18px;
-                }
-            }
-        }
-
-
-    }
-
-    .card-workJc {
-        position: relative;
-        // height: 55%;
-        overflow: hidden;
-
-        // overflow-y: auto;
-        .scroll-card {
-            width: 100%;
-            position: absolute;
-
-            animation: scrollCards 12s linear infinite;
-
-            @keyframes scrollCards {
-                0% {
-                    left: 0;
-                    top: 0%;
-                }
-
-                50% {
-                    left: 0;
-                    top: -50%;
-                }
-
-                100% {
-                    left: 0;
-                    top: -100%;
-                }
-            }
-
-            .card-box {
-                position: relative;
-                width: 100%;
-                height: 100px;
-                background: url('../../../../../assets/images/fire/firehome/work-jc.png') no-repeat center;
-                background-size: 100% 100%;
-
-                .card-l-label {
-                    position: absolute;
-                    left: 6%;
-                    top: 8%;
-                    color: #a1b6c2;
-                    letter-spacing: 2px;
-                }
-
-                .card-l-val {
-                    position: absolute;
-                    left: 7%;
-                    top: 50%;
-                    color: #a3d5e5;
-                    font-size: 18px;
-                }
-
-                .card-r-label {
-                    position: absolute;
-                    left: 20%;
-                    top: 4%;
-                    font-size: 16px;
-                    border-bottom: 1px solid #d0d2d3;
-                    color: #d0d2d3;
-                }
-
-                .card-r-content {
-                    position: absolute;
-                    left: 20%;
-                    top: 42%;
-                    color: #9da5aa;
-                }
-
-                .card-r-content1 {
-                    position: absolute;
-                    left: 20%;
-                    top: 68%;
-                    color: #9da5aa;
-                }
-            }
-        }
-
-
-    }
-}</style>

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

@@ -1,230 +0,0 @@
-<template>
-    <div class="fireHome">
-        <!-- 模型区域 -->
-        <div class="moduleArea"></div>
-        <div class="main-container">
-            <div class="left-area">
-                <!-- 左上区域 -->
-                <div class="left-t">
-                    <div class="tcontent-area">
-                        <div class="tcontent-l">
-                            <div>全矿井</div>
-                            <div>监测区域</div>
-                        </div>
-                        <div class="tcontent-c">
-                            <div style="font-size: 24px; color: #1fb3f7; margin-bottom: 10px">低风险</div>
-                            <div style="font-size: 14px; color: #fff">自燃倾向性等级 : 容易自燃</div>
-                        </div>
-                        <div class="tcontent-r">火灾风险</div>
-                    </div>
-                </div>
-                <!-- 左中区域 -->
-                <div class="left-c">
-                    <DanelBd :moduleName="'工作面风险监测'" :contentStyle="{ contentH: '372px' }">
-                        <workJc :heightT="'45%'" :heightB="'55%'"></workJc>
-                    </DanelBd>
-                </div>
-                <!-- 左下区域 -->
-                <div class="left-b">
-                    <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
-                        <emptyJc></emptyJc>
-                    </DanelBd>
-                </div>
-                <!-- 左底部区域 -->
-                <div class="left-f">
-                    <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }" commonTitle="switchs"> </DanelBd>
-                </div>
-            </div>
-            <div class="center-area">
-                <div class="center-b">
-                    <DanelBd :moduleName="'工作面束管监测 | 工作面光钎监测'" :contentStyle="{ contentH: '332px' }" commonTitle="datePikers">
-                        <fiberBunbleJc></fiberBunbleJc>
-                    </DanelBd>
-                </div>
-            </div>
-            <div class="right-area">
-                <!-- 右上区域 -->
-                <div class="right-t">
-                    <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }">
-                        <systemJc></systemJc>
-                    </DanelBd>
-                </div>
-                <!-- 右中区域 -->
-                <div class="right-c">
-                    <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
-                        <outFireJc></outFireJc>
-                    </DanelBd>
-                </div>
-                <!-- 右下区域 -->
-                <div class="right-b">
-                    <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }" commonTitle="selected">
-                        <substationJc></substationJc>
-                    </DanelBd>
-                </div>
-                <!-- 右底部区域 -->
-                <div class="right-f">
-                    <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }">
-                        <safetyJc></safetyJc>
-                    </DanelBd>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import DanelBd from '../common/danelBd.vue'
-import workJc from './components/workJc.vue'
-import emptyJc from './components/emptyJc.vue'
-import fiberBunbleJc from './components/fiberBunbleJc.vue'
-import systemJc from './components/systemJc.vue'
-import outFireJc from './components/outFireJc.vue'
-import substationJc from './components/substationJc.vue'
-import safetyJc from './components/safetyJc.vue'
-</script>
-
-<style lang="less" scoped>
-@font-face {
-    font-family: 'douyuFont';
-    src: url('../../../../assets/font/douyuFont.otf');
-}
-
-.fireHome {
-    width: 100%;
-    height: 100%;
-    position: relative;
-
-    .moduleArea {
-        width: 100%;
-        height: calc(100% - 15px);
-        margin-bottom: 15px;
-    }
-
-    .main-container {
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 100%;
-        height: calc(100% - 80px);
-        margin: 15px 0px;
-        display: flex;
-        justify-content: space-between;
-
-        .left-area {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            width: 30%;
-            height: 100%;
-            margin-right: 15px;
-
-            .left-t {
-                position: relative;
-                width: 100%;
-                height: 121px;
-                background: url('../../../../assets/images/fire/firehome/qkjaq.png') no-repeat center;
-                background-size: 100% 100%;
-
-                .tcontent-area {
-                    width: 100%;
-                    height: 90px;
-                    padding: 0px 20px;
-                    box-sizing: border-box;
-                    position: absolute;
-                    top: 50%;
-                    left: 0;
-                    transform: translate(0, -50%);
-                    display: flex;
-                    justify-content: space-around;
-                    align-items: center;
-
-                    .tcontent-l {
-                        height: 100%;
-                        display: flex;
-                        flex-direction: column;
-                        flex: 1;
-                        justify-content: center;
-                        align-items: center;
-                        color: #9da5aa;
-                        font-size: 16px;
-                        letter-spacing: 3px;
-                    }
-
-                    .tcontent-c {
-                        display: flex;
-                        flex-direction: column;
-                        flex: 3;
-                        justify-content: center;
-                        align-items: center;
-                        height: 100%;
-                    }
-
-                    .tcontent-r {
-                        height: 100%;
-                        display: flex;
-                        flex-direction: column;
-                        flex: 1;
-                        justify-content: center;
-                        align-items: center;
-                        color: #9da5aa;
-                        font-size: 16px;
-                        letter-spacing: 3px;
-                    }
-                }
-            }
-
-            .left-c {
-                width: 100%;
-            }
-
-            .left-b {
-                width: 100%;
-            }
-
-            .left-f {
-                width: 100%;
-            }
-        }
-
-        .center-area {
-            width: calc(40% - 40px);
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: flex-end;
-            align-items: center;
-
-            .center-b {
-                width: 100%;
-            }
-        }
-
-        .right-area {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            align-items: center;
-            width: 30%;
-            height: 100%;
-            margin-left: 15px;
-
-            .right-t {
-                width: 100%;
-            }
-
-            .right-c {
-                width: 100%;
-            }
-
-            .right-b {
-                width: 100%;
-            }
-
-            .right-f {
-                width: 100%;
-            }
-        }
-    }
-}
-</style>

src/views/vent/home/workPlaceWarn/components/basicCard.vue

@@ -1,86 +0,0 @@
-<template>
-    <div class="basicCard">
-        <div class="card-box" v-for="(item, index) in cardContentLists" :key="index">
-            <img class="card-box-img" :src="item.imgSrc" alt="">
-            <div class="card-box-item">
-                <div class="item-labels">{{ item.label }}</div>
-                <div class="item-vals">{{ item.val }}</div>
-            </div>
-        </div>
-
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive,defineProps,watch } from 'vue'
-
-
-let props=defineProps({
-    cardContentList:{
-        type:Array,
-        default:()=>{
-            return []
-        }
-    }
-})
-let cardContentLists=ref<any[]>([])
-
-
-watch(()=>props.cardContentList,(newV,oldV)=>{
-    console.log(newV,'工作面卡片-----')
-    cardContentLists.value=newV
-    
-},{immediate:true,deep:true})
-</script>
-
-<style lang="less" scoped>
-.basicCard {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: rgba(41, 49, 53, .6);
-    overflow-x: auto;
-
-    .card-box {
-        width: 416px;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-shrink: 0;
-        border-left: 2px solid;
-        border-image: linear-gradient(to bottom, transparent, rgba(2, 70, 136, 1), transparent) 1 1 1;
-
-        &:first-child {
-            border: none;
-        }
-
-        .card-box-img {
-            width: 94px;
-            height: 94px;
-
-        }
-
-        .card-box-item {
-            height: 94px;
-            margin-left: 10px;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-
-            .item-labels {
-                color: #fff
-            }
-
-            .item-vals {
-                font-family: 'douyuFont';
-                font-size: 20px;
-                color: #02bbe9;
-            }
-        }
-
-    }
-}</style>

src/views/vent/home/workPlaceWarn/components/basicTree.vue

@@ -1,89 +0,0 @@
-<template>
-    <div class="basicTree">
-        <a-tree :tree-data="treeDatas" show-icon default-expand-all v-model:selectedKeys="selectedKeys"
-            v-model:expandedKeys="expandedKeys">
-            <template #switcherIcon>
-                <CaretDownOutlined />
-            </template>
-
-        </a-tree>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive, defineProps, watch } from 'vue'
-import { CaretDownOutlined, } from '@ant-design/icons-vue';
-
-let props = defineProps({
-    treeData: {
-        type: Array,
-        default: () => {
-            return []
-        }
-    }
-})
-
-let treeDatas = ref([])//树节点数据
-//默认选中节点
-let selectedKeys = ref(['0-0-0'])
-//默认展开节点
-const expandedKeys = ref<string[]>(['1']);
-
-//递归遍历菜单数据
-function getMenuTree(menuList, pid) {
-    let treeList = [];
-    for (let i = 0; i < menuList.length; i++) {
-        let menu = menuList[i];
-        if (menu.pid === pid) {
-            let tree = {
-                key: menu.id,
-                title: menu.name,
-                children: getMenuTree(menuList, menu.id)
-            };
-            tree.children.length === 0 && delete tree.children;
-            treeList.push(tree);
-        }
-    }
-    return treeList;
-}
-
-watch(() => props.treeData, (newV, oldV) => {
-    treeDatas.value.length = 0
-    treeDatas.value = getMenuTree(newV, null)
-    console.log(treeDatas.value, '树节点数据------')
-
-}, { immediate: true, deep: true })
-
-
-
-
-
-
-
-
-</script>
-
-<style lang="less" scoped>
-.basicTree {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    padding: 15px 10px;
-    box-sizing: border-box;
-}
-
-:deep(.zxm-tree) {
-    color: #fff;
-    background-color: transparent;
-    letter-spacing: 1px;
-}
-
-:deep(.zxm-tree .zxm-tree-node-content-wrapper.zxm-tree-node-selected) {
-    background-color: transparent;
-    color: #02bbe9;
-}
-
-:deep(.zxm-tree .zxm-tree-node-content-wrapper:hover) {
-    background-color: transparent;
-    color: #02bbe9;
-}</style>

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

@@ -1,73 +0,0 @@
-<template>
-    <div class="workPlaceWarn">
-        <div class="work-left-box">
-            <basicTree :treeData="treeData"></basicTree>
-        </div>
-        <div class="work-right-box">
-            <div class="right-box-card">
-                <basicCard :cardContentList="cardContentList"></basicCard>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { ref, reactive } from 'vue'
-import { getAssetURL } from '/@/utils/ui';
-import basicTree from './components/basicTree.vue'
-import basicCard from './components/basicCard.vue'
-
-//数据随便写的，不符合实际情况，因为懒得改
-const treeData = reactive([
-    { name: "81203综放工作面", value: "111", id: '1', pid: null },
-    { name: "束管监测系统", value: "222", id: '1-2', pid: '1' },
-    { name: "81203综放工作面", value: "458", id: '2', pid: null },
-    { name: "束管监测系统", value: "445", id: '2-1', pid: '2' },
-    { name: "束管监测系统", value: "456", id: '2-2', pid: '2' },
-    { name: "束管监测系统", value: "647", id: '2-3', pid: '2' },
-    { name: "81203综放工作面", value: "189", id: '3', pid: null },
-    { name: "束管监测系统", value: "664", id: '3-1', pid: '3' },
-    { name: "束管监测系统", value: "652", id: '3-2', pid: '3' },
-    { name: "束管监测系统", value: "732", id: '3-3', pid: '3' },
-    { name: "束管监测系统", value: "852", id: '3-3-1', pid: '3-3' },
-])
-
-let cardContentList = reactive([
-    { id: 0, imgSrc: getAssetURL('workPlaceWarn/temp.png'), label: '最高温度()', val: '18.1' },
-    { id: 1, imgSrc: getAssetURL('workPlaceWarn/smoke.png'), label: '烟雾', val: '无' },
-    { id: 2, imgSrc: getAssetURL('workPlaceWarn/dsnd.png'), label: '最高CO浓度()', val: '16.3' },
-    { id: 3, imgSrc: getAssetURL('workPlaceWarn/dspl.png'), label: '自动喷淋灭火装置', val: '打开' },
-   
-])
-
-</script>
-
-<style lang="less" scoped>
-.workPlaceWarn {
-    position: relative;
-    width: 100%;
-    height: calc(100% - 50px);
-    display: flex;
-    justify-content: space-between;
-
-    .work-left-box {
-        width: 220px;
-        height: 100%;
-        background-color: rgba(27, 35, 39,.8);
-    }
-
-    .work-right-box {
-        width: calc(100% - 230px);
-        height: 100%;
-        margin-left: 10px;
-        padding: 15px 10px;
-        box-sizing: border-box;
-       background-color: rgba(27, 35, 39,.8);
-       .right-box-card{
-        height: 110px;
-        width: 100%;
-       
-       }
-    }
-}
-</style>