火灾监测首页提交

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

@@ -0,0 +1,87 @@
+<template>
+  <div class="danelBd">
+  <div v-if="moduleName" class="dane-title" :style="{'margin-bottom':contentStyle.contentH=='0px' ? '0px' : '5px'}">
+    <img src="../../../../assets/images/fire/firehome/title-2.png" alt="">
+    <span>{{moduleName}}</span>
+  </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>
+export default {
+name:'danelBd',
+props:{
+    //标题
+    moduleName:{
+        type:String,
+        default:''
+    },
+    //样式
+    contentStyle:{
+        type:Object,
+        default:()=>{
+            return {
+                contentH:'0px',
+            }
+        }
+    },
+   
+},
+data(){
+    return {}
+},
+mounted(){},
+methods:{},
+}
+</script>
+
+<style scoped lang='less'>
+.danelBd{
+    width: 100%;
+    height: 100%;
+    position: relative;
+    .dane-title{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 43px;
+        padding: 0px 10px;
+        // margin-bottom: 5px;
+        box-sizing: border-box;
+        background: url('../../../../assets/images/fire/firehome/title-1.png') no-repeat center;
+        background-size: 100% 100%;
+        img{
+            width: 18px;
+            height: 18px;
+        }
+        span{
+            font-size: 20px;
+            color: #a1dff8;
+            margin-left: 10px;
+        }
+    }
+    .dane-content{
+        position: relative;
+        width: 100%;
+        padding: 20px;
+        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%;
+        }
+
+    }
+
+}
+</style>

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

@@ -0,0 +1,15 @@
+<template>
+    <div class="dustHome">
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="less" scoped>
+.dustHome{
+
+}
+</style>

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

@@ -0,0 +1,222 @@
+<template>
+    <div class="workJc">
+        <div class="echart-workJc">
+            <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>
+
+        </div>
+        <div class="card-workJc"></div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {ref,onMounted} from 'vue'
+import * as echarts from 'echarts';
+//获取dom节点
+let ring=ref()
+
+function getOption() {
+    nextTick(() => {
+
+  let  color = [
+    '#0CD2E6',
+    '#3751E6',
+    '#FFC722',
+    '#886EFF',
+    '#008DEC',
+    '#114C90',
+    '#00BFA5',
+];
+
+let title = '自定义legend、默认选中';
+let legend = [
+    'A需求类型',
+    'B需求类型',
+    'C需求类型',
+    'D需求类型',
+    'E需求类型',
+    '其他'
+];
+
+let seriesData = [
+    { "name": "A需求类型", "value": 30 },
+    { "name": "B需求类型", "value": 10 },
+    { "name": "C需求类型", "value": 15 },
+    { "name": "D需求类型", "value": 23 },
+    { "name": "E需求类型", "value": 10 },
+    { "name": "其他", "value": 12 }
+]
+
+
+      let myChart = echarts.init(ring.value);
+      let option = {
+    backgroundColor:'#050e31',
+    color: color,
+    title: {
+        top: 20,
+        text: title,
+        textStyle: {
+            fontSize: 20,
+            color: '#DDEEFF',
+        },
+    },
+    grid: {
+        top: '15%',
+        left: 0,
+        right: '1%',
+        bottom: 5,
+        containLabel: true,
+    },
+    legend: {
+        orient: 'vertical',
+        top: 'center',
+        right: 50,
+        textStyle: {
+            align: 'left',
+            verticalAlign: 'middle',
+            rich: {
+                name: {
+                    color: 'rgba(255,255,255,0.5)',
+                    fontSize: 10,
+                },
+                value: {
+                    color: 'rgba(255,255,255,0.5)',
+                    fontSize: 10,
+                },
+                rate: {
+                    color: 'rgba(255,255,255,0.9)',
+                    fontSize: 10,
+                },
+            },
+        },
+        data: legend,
+        formatter: (name) => {
+            if (seriesData.length) {
+                const item = seriesData.filter((item) => item.name === name)[0];
+                return `{name|${name}：}{value| ${item.value}} {rate| ${item.value}%}`;
+            }
+        },
+    },
+    series: [{
+        name: '需求类型占比',
+        type: 'pie',
+        center: ['50%', '50%'],
+        radius: ['45%', '65%'],
+        label: {
+            normal: {
+                show: false,
+                position: 'center',
+                formatter: '{value|{c}}\n{label|{b}}',
+                rich: {
+                    value: {
+                        padding: 5,
+                        align: 'center',
+                        verticalAlign: 'middle',
+                        fontSize: 32,
+                    },
+                    label: {
+                        align: 'center',
+                        verticalAlign: 'middle',
+                        fontSize: 16,
+                    },
+                },
+            },
+            emphasis: {
+                show: true,
+                textStyle: {
+                    fontSize: '12',
+                },
+            },
+        },
+        labelLine: {
+            show: false,
+            length: 0,
+            length2: 0,
+        },
+        data: seriesData,
+    }],
+};
+      myChart.setOption(option);
+      window.onresize = function () {
+        myChart.resize();
+      };
+    });
+  }
+
+  onMounted(()=>{
+    getOption()
+  })
+
+</script>
+
+<style lang="less" scoped>
+.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{
+                        
+                    }
+
+
+                }
+
+                .card-workJc {
+                    height: 55%;
+                    border: 1px solid #ccc;
+                }
+}
+</style>

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

@@ -0,0 +1,212 @@
+<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></workJc>
+                    </DanelBd>
+                </div>
+                <!-- 左下区域 -->
+                <div class="left-b">
+                    <DanelBd :moduleName="'密闭采空区监测系统'" :contentStyle="{ contentH: '180px' }"> </DanelBd>
+                </div>
+                <!-- 左底部区域 -->
+                <div class="left-f">
+                    <DanelBd :moduleName="'GIS重点区域风险监测'" :contentStyle="{ contentH: '0px' }"> </DanelBd>
+                </div>
+            </div>
+            <div class="center-area">
+                <div class="center-b">
+                    <DanelBd :moduleName="'工作面束管监测 | 工作面光钎监测'" :contentStyle="{ contentH: '372px' }"> </DanelBd>
+                </div>
+            </div>
+            <div class="right-area">
+                <!-- 右上区域 -->
+                <div class="right-t">
+                    <DanelBd :moduleName="''" :contentStyle="{ contentH: '121px' }"> </DanelBd>
+                </div>
+                <!-- 右中区域 -->
+                <div class="right-c">
+                    <DanelBd :moduleName="'带式输送机防灭火监控系统'" :contentStyle="{ contentH: '180px' }"> </DanelBd>
+                </div>
+                <!-- 右下区域 -->
+                <div class="right-b">
+                    <DanelBd :moduleName="'变电硐室防灭火监控系统'" :contentStyle="{ contentH: '180px' }"> </DanelBd>
+                </div>
+                <!-- 右底部区域 -->
+                <div class="right-f">
+                    <DanelBd :moduleName="'安全监控系统'" :contentStyle="{ contentH: '180px' }"> </DanelBd>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import DanelBd from '../common/danelBd.vue'
+import workJc from './components/workJc.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>