粉尘首页-矿井通风状态监测前端界面修改提交

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

@@ -0,0 +1,655 @@
+<template>
+    <div class="mineWind">
+        <div class="mine-title">{{ mineTitle }}</div>
+        <div class="mine-content">
+            <div class="content-tabs">
+                <div :class="activeIndex == '1' ? 'tabs-item1' : 'tabs-item'" @click="getChange('1')">信息列表</div>
+                <div :class="activeIndex == '2' ? 'tabs-item1' : 'tabs-item'" @click="getChange('2')">信息统计</div>
+            </div>
+            <!-- 信息列表 -->
+            <div class="content-search" v-if="activeIndex == '1'">
+                <div class="risk-select">
+                    <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select"
+                        @change="changeSelect">
+                        <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{
+                            item.orgname }} </a-select-option>
+                    </a-select>
+                    <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select"
+                        @change="changeSelect">
+                        <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{
+                            item.orgname }} </a-select-option>
+                    </a-select>
+                    <a-select style="width: 120px" v-model:value="selectVal" allowClear class="code-mode-select"
+                        @change="changeSelect">
+                        <a-select-option v-for="item in selectList" :key="item.orgname" :value="item.orgcode">{{
+                            item.orgname }} </a-select-option>
+                    </a-select>
+                </div>
+            </div>
+            <div class="content-table" v-if="activeIndex == '1'">
+                <div class="table-head">
+                    <div class="head-item" v-for="(ite, ind) in headList" :key="ind">{{ ite.label }}</div>
+                </div>
+                <div class="table-cont">
+                    <div class="cont-item" v-for="(item, index) in contList" :key="index">
+                        <div class="item-val">{{ item.id }}</div>
+                        <div class="item-val">{{ item.name }}</div>
+                        <div class="item-val">{{ item.address }}</div>
+                        <div class="item-val">{{ item.smoke }}</div>
+                        <div class="item-val">{{ item.person }}</div>
+                        <div class="item-val">{{ item.br }}</div>
+                        <div class="item-val">{{ item.brz }}</div>
+                    </div>
+                </div>
+            </div>
+            <!-- 统计信息 -->
+            <div class="echart-box" v-if="activeIndex == '2'">
+                <div class="piebox" ref="piebox"></div>
+            </div>
+            <div class="echart-all-box" v-if="activeIndex == '2'">
+                <div class="pieboxall" ref="pieboxall"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, watch, defineProps, nextTick, } from 'vue';
+import * as echarts from 'echarts';
+
+let props = defineProps({
+    airKjStatus: {
+        type: Array,
+        default: () => {
+            return [];
+        },
+    },
+});
+
+let activeIndex = ref('1')
+//获取dom元素节点
+let piebox = ref<any>();
+let pieboxall = ref<any>();
+let mineTitle = ref('矿井通风状态监测');
+let selectVal = ref('');
+let selectList = ref<any>([]);
+let contList = reactive<any[]>([
+    { id: '1', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+    { id: '2', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+    { id: '3', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+    { id: '4', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+    { id: '5', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+    { id: '6', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+    { id: '7', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+    { id: '8', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+    { id: '9', name: 'xx煤矿', address: '陕西省榆林市', smoke: 800, person: 1435, br: 1, brz: 1 },
+])
+let headList = reactive<any>([
+    { label: '序号' },
+    { label: '矿井名称' },
+    { label: '所属地区市/县' },
+    { label: '原煤产量/百万吨' },
+    { label: '从业人数/人' },
+    { label: '尘肺病累计病例/人' },
+    { label: '本年度尘肺病病例/人' },
+])
+
+//tabs选项切换
+function getChange(active) {
+    activeIndex.value = active
+    switch (activeIndex.value) {
+        case '1':
+
+            break;
+        case '2':
+            getOption()
+            getOptionAll()
+            break;
+    }
+}
+//下拉框选项切换
+function changeSelect(val) { }
+function getOption() {
+    nextTick(() => {
+        let myChart = echarts.init(piebox.value);
+        let option = {
+            tooltip: {
+                trigger: 'item',
+                formatter: "{a} <br/>{b} : {c} ({d}%)"
+            },
+            color: ['#faa526', '#d5eb0f', '#afec07', '#f3f720', '#0ee93d', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b',],
+            title: {
+                "text": "陕西省尘肺病地区比例分析",
+                "left": "center",
+                "top": 5,
+                "textStyle": {
+                    "color": "#00d8ff",
+                    fontSize: 14
+                }
+            },
+            legend: {
+                orient: 'vertical',
+                right: 10,
+                align: 'auto',
+                top: 'middle',
+                itemGap: 0.5,
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 10,
+                },
+                icon: 'circle',
+                data: ['西安市', '宝鸡市', '咸阳市', '铜川市', '渭南市', '延安市', '榆林市', '汉中市', '安康市', '商洛市'],
+                // formatter: function (name) {
+                //     var oa = option.series[0].data;
+                //     var num = oa[0].value + oa[1].value + oa[2].value + oa[3].value;
+                //     for (var i = 0; i < option.series[0].data.length; i++) {
+                //         if (name == oa[i].name) {
+                //             return name + '     ' + oa[i].value + '     ' + (oa[i].value / num * 100).toFixed(2) + '%';
+                //         }
+                //     }
+                // }
+            },
+            series: [
+                {
+                    name: '比例分析',
+                    type: 'pie',
+                    radius: '55%',
+                    center: ['48%', '50%'],
+                    data: [
+                        { value: 335, name: '西安市' },
+                        { value: 310, name: '宝鸡市' },
+                        { value: 234, name: '咸阳市' },
+                        { value: 135, name: '铜川市' },
+                        { value: 335, name: '渭南市' },
+                        { value: 310, name: '延安市' },
+                        { value: 234, name: '榆林市' },
+                        { value: 135, name: '汉中市' },
+                        { value: 335, name: '安康市' },
+                        { value: 310, name: '商洛市' },
+
+                    ],
+
+                    itemStyle: {
+                        normal: {
+                            label: {
+                                show: true,
+                                fontSize: 10,
+                                color: '#fff',
+                                formatter: '{b} : {d}%'
+                            }
+                        },
+                        labelLine: {
+                            normal: {
+                                show: true,
+                                length: 50,
+                                length2: 50,
+                                lineStyle: {
+                                    color: '#fff',
+                                    width: 2
+                                }
+                            }
+                        },
+                    }
+                }
+            ]
+        };
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    })
+}
+function getOptionAll() {
+    nextTick(() => {
+        let scaleData = [{
+            'name': '横山区',
+            'value': 10
+        },
+        {
+            'name': '神木市',
+            'value': 10
+        },
+        {
+            'name': '府谷县',
+            'value': 10
+        },
+        {
+            'name': '靖边县',
+            'value': 10
+        },
+        {
+            'name': '定边县',
+            'value': 10
+        },
+        {
+            'name': '绥德县',
+            'value': 10
+        },
+        {
+            'name': '米脂县',
+            'value': 10
+        },
+        {
+            'name': '佳县',
+            'value': 10
+        },
+        {
+            'name': '吴堡县',
+            'value': 10
+        },
+        {
+            'name': '清涧县',
+            'value': 10
+        },
+
+        ];
+        let rich = {
+            white: {
+                color: '#fff',
+                align: 'center',
+                fontSize: 12,
+                padding: [3, 0]
+            }
+        };
+        let placeHolderStyle = {
+            normal: {
+                label: {
+                    show: false
+                },
+                labelLine: {
+                    show: false
+                },
+                color: 'rgba(0, 0, 0, 0)',
+                borderColor: 'rgba(0, 0, 0, 0)',
+                borderWidth: 0
+            }
+        };
+        let data: any[] = [];
+        let color1 = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)', 'rgb(43, 166, 254)', 'rgb(255,222,0)', 'rgb(255,0,0)', '#faa526', '#d5eb0f', '#afec07', '#f3f720', '#0ee93d', '#17d1b2', '#2ae271', '#11bce7', '#c127f0', '#ee125b',];
+
+        for (let i = 0; i < scaleData.length; i++) {
+            data.push({
+                value: scaleData[i].value,
+                name: scaleData[i].name,
+                itemStyle: {
+                    normal: {
+                        borderWidth: 2,
+                        shadowBlur: 0,
+                        borderColor: color1[i],
+                        shadowColor: color1[i],
+                        color: color1[i],
+                        opacity: 1,
+                    }
+                }
+            }, {
+                value: 2,
+                name: '',
+                itemStyle: placeHolderStyle
+            });
+        }
+        let seriesObj = [{
+            name: '',
+            type: 'pie',
+            clockWise: false,
+            radius: [40, 75],
+            center: ['48%', '56%'],
+            hoverAnimation: false,
+            itemStyle: {
+                normal: {
+                    label: {
+                        show: true,
+                        position: 'inner',
+                        fontSize: 10,
+                        color: '#fff',
+                        formatter: function (params) {
+                            let percent: any = 0;
+                            let total = 0;
+                            for (var i = 0; i < scaleData.length; i++) {
+                                total += scaleData[i].value;
+                            }
+                            percent = ((params.value / total) * 100).toFixed(0);
+                            if (params.name !== '') {
+                                return params.name;
+                            } else {
+                                return '';
+                            }
+                        },
+                        rich: rich
+                    },
+                    labelLine: {
+                        show: false,
+                    }
+                }
+            },
+            data: data
+        }];
+        let myChart = echarts.init(pieboxall.value);
+        let option = {
+            tooltip: {
+                trigger: 'item',
+                formatter: "{b} : {c} ({d}%)"
+            },
+            "title": {
+                "text": "榆林市尘肺病比例分析",
+                "left": "center",
+                "top": 0,
+                "textStyle": {
+                    "color": "#00d8ff",
+                    fontSize: 14
+                }
+            },
+            legend: {
+                orient: 'vertical',
+                right: 10,
+                align: 'auto',
+                top: 'middle',
+                itemGap: 0.5,
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 10,
+                },
+                icon: 'circle',
+                data: ['横山区', '神木市', '府谷县', '靖边县', '定边县', '绥德县', '米脂县', '佳县', '吴堡县', '清涧县'],
+
+            },
+            toolbox: {
+                show: false
+            },
+            series: seriesObj
+        }
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    })
+}
+
+watch(
+    () => props.airKjStatus,
+    (newA, oldA) => {
+        console.log(newA, 'airKjStatus-----------');
+    },
+    {
+        immediate: true,
+        deep: true,
+    }
+);
+
+</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: 40px 0px 28px 0px;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .content-tabs {
+            width: 100%;
+            height: 45px;
+            padding: 0px 30px;
+            display: flex;
+            align-items: center;
+
+            .tabs-item {
+                color: #fff;
+                cursor: pointer;
+
+                &:nth-child(1) {
+                    margin-right: 10px;
+                }
+            }
+
+            .tabs-item1 {
+                color: rgba(0, 216, 255, );
+                cursor: pointer;
+                border-bottom: 2px solid;
+                border-image: linear-gradient(to right, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
+                margin-right: 10px;
+            }
+
+        }
+
+        .content-search {
+            position: relative;
+            width: 100%;
+            height: 35px;
+            margin-bottom: 10px;
+            // padding: 0px 30px;
+            display: flex;
+            align-items: center;
+
+            .risk-select {
+                position: absolute;
+                width: 90%;
+                height: 30px;
+                left: 50%;
+                transform: translate(-50%, 0);
+                top: 0px;
+                background: url('../../../../../assets/images/company/content-label.png') no-repeat center;
+                background-size: 100% 100%;
+                z-index: 9999;
+
+                .zxm-select {
+                    position: absolute;
+                    top: 50%;
+                    transform: translate(0, -50%);
+
+                    &:nth-child(1) {
+                        left: 10px;
+                    }
+
+                    &:nth-child(2) {
+                        left: 135px;
+                    }
+
+                    &:nth-child(3) {
+                        left: 260px;
+                    }
+                }
+
+
+            }
+        }
+
+        .content-table {
+
+            position: relative;
+            width: 90%;
+            height: calc(100% - 90px);
+            margin: 0px 30px;
+            border: 1px solid rgba(0, 216, 255, .3);
+
+            .table-head {
+                display: flex;
+                justify-content: space-between;
+                height: 50px;
+                border-bottom: 1px solid rgba(0, 216, 255, .3);
+
+                .head-item {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 100%;
+                    color: rgba(0, 216, 255, );
+                    font-size: 12px;
+                    border-right: 1px solid rgba(0, 216, 255, .1);
+
+                    &:nth-child(1) {
+                        width: 5%;
+                        text-align: center;
+                    }
+
+                    &:nth-child(2) {
+                        width: 10%;
+                        text-align: center;
+                    }
+
+                    &:nth-child(3) {
+                        width: 15%;
+                        text-align: center;
+                    }
+
+                    &:nth-child(4) {
+                        width: 15%;
+                        text-align: center;
+                    }
+
+                    &:nth-child(5) {
+                        width: 15%;
+                        text-align: center;
+                    }
+
+                    &:nth-child(6) {
+                        width: 20%;
+                        text-align: center;
+                    }
+
+                    &:nth-child(7) {
+                        width: 20%;
+                        text-align: center;
+                    }
+
+                }
+            }
+
+            .table-cont {
+                height: calc(100% - 51px);
+
+                .cont-item {
+                    display: flex;
+                    justify-content: space-between;
+                    height: 32.5px;
+                    border-bottom: 1px solid rgba(0, 216, 255, .1);
+
+                    .item-val {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        height: 100%;
+                        font-size: 12px;
+                        border-right: 1px solid rgba(0, 216, 255, .1);
+                        font-size: 12px;
+                        border-right: 1px solid rgba(0, 216, 255, .1);
+                        color: #fff;
+
+                        &:nth-child(1) {
+                            width: 5%;
+                            text-align: center;
+                        }
+
+                        &:nth-child(2) {
+                            width: 10%;
+                            text-align: center;
+                        }
+
+                        &:nth-child(3) {
+                            width: 15%;
+                            text-align: center;
+                        }
+
+                        &:nth-child(4) {
+                            width: 15%;
+                            text-align: center;
+                        }
+
+                        &:nth-child(5) {
+                            width: 15%;
+                            text-align: center;
+                        }
+
+                        &:nth-child(6) {
+                            width: 20%;
+                            text-align: center;
+                        }
+
+                        &:nth-child(7) {
+                            width: 20%;
+                            text-align: center;
+                        }
+                    }
+
+                }
+            }
+
+        }
+
+        .echart-box {
+            width: 100%;
+            height: 205px;
+
+            .piebox {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .echart-all-box {
+            width: 100%;
+            height: calc(100% - 250px);
+
+            .pieboxall {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+}
+
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector {
+    height: 24px;
+}
+
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector .zxm-select-selection-search-input {
+    height: 24px;
+}
+
+::v-deep .zxm-select-selection-placeholder {
+    color: #fff !important;
+    line-height: 22px !important;
+}
+
+::v-deep .zxm-select-single:not(.zxm-select-customize-input) .zxm-select-selector::after {
+    line-height: 24px;
+}
+
+::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    background-color: transparent;
+    border-top: 0px;
+    border-bottom: 0px;
+    border-left: 2px solid;
+    border-right: 2px solid;
+    border-image: linear-gradient(to bottom, transparent, rgba(49, 184, 255, 1), transparent) 1 1 1;
+}
+
+::v-deep .zxm-select-arrow {
+    color: #fff !important;
+}
+
+::v-deep .zxm-select-selection-item {
+    color: #fff !important;
+}
+
+::v-deep .zxm-select-single .zxm-select-selector .zxm-select-selection-item {
+    line-height: 24px !important;
+}
+</style>

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

@@ -8,7 +8,8 @@
         <div class="left-area">
           <!-- 矿井通风状态监测 -->
           <div class="area-card">
-            <mineWind :airKjStatus="airKjStatus" />
+            <!-- <mineWind :airKjStatus="airKjStatus" /> -->
+             <mineWind1 :airKjStatus="airKjStatus"></mineWind1>
           </div>
           <!-- 一通三防风险分析与预警 -->
           <div class="area-card1">
@@ -47,6 +48,7 @@
 <script lang="ts" setup>
   import { ref, reactive, nextTick, onMounted, onUnmounted } from 'vue';
   import mineWind from './dustComponents/mine-wind.vue';
+  import mineWind1 from './components/mine-wind1.vue';
   import riskWarn from './dustComponents/risk-warn.vue';
   // import fileShare from './components/file-share.vue';
   import Billboard from './dustComponents/billboard.vue';