预警管控系统风险等级修改-提交

src/views/vent/gas/gasReportInspect/comment/common/tempUpload.vue

@@ -1,137 +0,0 @@
-<template>
-    <div class="tempUpload">
-        <a-modal v-model:visible="visibleUpload" centered :width="600" title="报表或模板上传" @ok="handleUploadOk"
-            @cancel="handleUploadCancel">
-            <a-form :model="uploadForm" :label-col="{ style: { width: '130px' } }" :wrapper-col="{ span: 16 }">
-                <a-form-item label="文件名称:">
-                    <a-input v-model:value="uploadForm.fileName" placeholder="请输入文件名称..." />
-                </a-form-item>
-                <a-form-item label="业务种类:">
-                    <JDictSelectTag v-model:value="uploadForm.busKind" placeholder="请选择业务种类..." dictCode="reportBusKind"
-                        @change="changeKind" />
-                </a-form-item>
-                <a-form-item label="报表类型:">
-                    <JDictSelectTag v-if="kindType == 'ventSReport'" v-model:value="uploadForm.reportType"
-                        placeholder="请选择报表类型..." dictCode="ventSReport" />
-                    <JDictSelectTag v-if="kindType == 'fireSReport'" v-model:value="uploadForm.reportType"
-                        placeholder="请选择报表类型..." dictCode="fireSReport" />
-                    <JDictSelectTag v-if="kindType == 'dustSReport'" v-model:value="uploadForm.reportType"
-                        placeholder="请选择报表类型..." dictCode="dustSReport" />
-                    <JDictSelectTag v-if="kindType == 'gasSReport'" v-model:value="uploadForm.reportType"
-                        placeholder="请选择报表类型..." dictCode="gasSReport" />
-                </a-form-item>
-                <a-form-item label="模式类型:">
-                    <a-radio-group v-model:value="uploadForm.modelType" name="radioGroup">
-                        <a-radio v-for="item in radioList" :value="item.value">{{ item.label }}</a-radio>
-                    </a-radio-group>
-                </a-form-item>
-                <a-form-item label="文件上传">
-                    <a-upload :before-upload="beforeUpload" @remove="handleRemove" :multiple="false"
-                        :file-list="fileList">
-                        <a-button type="primary" preIcon="ant-design:cloud-upload-outlined">选择文件</a-button>
-                    </a-upload>
-                </a-form-item>
-            </a-form>
-        </a-modal>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { ref, reactive, watch } from 'vue'
-import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-import { getUpload } from '../../gasReportInspect.api'
-import { useMessage } from '/@/hooks/web/useMessage';
-
-let props = defineProps({
-    visibleUp: {
-        type: Number,
-        default: 0
-    }
-})
-
-let visibleUpload = ref(false)
-let uploadForm = reactive({
-    fileName: '',
-    busKind: '',
-    modelType: '',
-    reportType: '',
-})
-//模式类型数据
-let radioList = ref<any[]>([
-    { label: '自动生成', value: 0 },
-    { label: '手动填写', value: 1 },
-    { label: '模板', value: 2 },
-])
-let kindType = ref('ventSReport')
-let fileList = reactive<any[]>([]); //上传文件列表
-const { createMessage } = useMessage();
-let emit = defineEmits(['resetUpload'])
-
-//确认上传
-async function handleUploadOk() {
-    const formData = new FormData();
-    formData.append('file', fileList[0]);
-    formData.append('fileName', uploadForm.fileName);
-    formData.append('busKind', uploadForm.busKind);
-    formData.append('modelType', uploadForm.modelType);
-    formData.append('reportType', uploadForm.reportType);
-    let res = await getUpload(formData)
-    if (res) {
-        visibleUpload.value = false
-        emit('resetUpload')
-    }
-}
-//取消上传
-function handleUploadCancel() {
-    visibleUpload.value = false
-    uploadForm.modelType = ''
-    uploadForm.fileName = ''
-    uploadForm.reportType = ''
-    uploadForm.busKind = ''
-}
-//业务种类下拉选项切换
-function changeKind(val) {
-    kindType.value = `${val}Report`
-}
-//上传文件
-let beforeUpload = (file) => {
-    fileList.length = 0;
-    let index = file.name.indexOf('.');
-    let name = file.name.substring(index + 1);
-    if (name == 'png' || name == 'jpg' || name == 'gif' || name == 'psd' || name == 'webp') {
-        createMessage.warning('禁止上传图片类型的文件!');
-    } else {
-        fileList.push(file);
-    }
-};
-// 文件移除
-let handleRemove = (file) => {
-    const index = fileList.indexOf(file);
-    const newFileList = fileList.slice();
-    newFileList.splice(index, 1);
-    fileList.length = 0;
-};
-
-watch(() => props.visibleUp, (newV, oldV) => {
-    fileList.length = 0
-    visibleUpload.value = !visibleUpload.value
-})
-</script>
-
-<style lang="less" scoped>
-.tempUpload {
-    position: relative;
-    width: 100%;
-    height: 100%;
-
-}
-
-.zxm-form {
-    padding-top: 20px !important;
-    box-sizing: border-box
-}
-
-:deep(.zxm-upload-list-item-name) {
-    color: #fff !important;
-}
-</style>

src/views/vent/monitorManager/alarmMonitor/common/warnGradeEchart.vue

@@ -0,0 +1,132 @@
+<template>
+    <div class="echartBar">
+        <div class="bar" ref="bar"></div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, ref, nextTick, reactive, watch } from 'vue';
+import * as echarts from 'echarts';
+
+let props = defineProps({
+
+    echartData: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+});
+//获取dom元素节点
+let bar = ref<any>();
+let echartDatas = ref<any[]>([])
+watch(
+    () => props.echartData,
+    (newV, oldV) => {
+        let data:any[]=[]
+        Object.keys(newV).forEach(el => {
+            if (el == 'dust') {
+                data.push({ name: '粉尘', value: newV[el] })
+            } else if (el == 'fire') {
+                data.push({ name: '火灾', value: newV[el] })
+            } else if (el == 'gas') {
+                data.push({ name: '瓦斯', value: newV[el] })
+            } else if (el == 'vent') {
+               data.push({ name: '通风', value: newV[el] })
+            }
+        })
+        echartDatas.value=data
+        getOption();
+    },
+    { deep : true, }
+);
+
+function getOption() {
+    nextTick(() => {
+        let myChart = echarts.init(bar.value);
+        let option = {
+            title: {
+                text: '风险比例分析',
+                left: '20%',
+                top: 5,
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 14,
+                }
+            },
+            tooltip: {
+                trigger: 'item',
+                formatter: "{b} : {c} ({d}%)",
+                backgroundColor: 'rgba(0, 0, 0, .6)',
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 12,
+                },
+            },
+            series: [{
+                name: '',
+                type: 'pie',
+                radius: '50%',
+                center: ['32%', '50%'],
+                color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
+                data: echartDatas.value.sort(function (a, b) {
+                    return a.value - b.value
+                }),
+                roseType: 'radius',
+
+                label: {
+                    normal: {
+                        formatter: ['{d|{d}%}', '{b|{b}}'].join('\n'),
+                        rich: {
+                            d: {
+                                color: '#00d8ff',
+                                fontSize: 14,
+                                fontWeight: 'bold',
+                                lineHeight: 5
+                            },
+                            b: {
+                                color: '#fff',
+                                fontSize: 12,
+                                height: 40
+                            },
+                        },
+                    }
+                },
+                labelLine: {
+                    normal: {
+                        lineStyle: {
+                            color: 'rgb(98,137,169)',
+                        },
+                        smooth: 0.2,
+                        length: 10,
+                        length2: 15,
+
+                    }
+                },
+                itemStyle: {
+                    normal: {
+                        shadowColor: 'rgba(0, 0, 0, 0.8)',
+                        shadowBlur: 50,
+                    }
+                }
+            }]
+        };
+        myChart.setOption(option);
+        window.onresize = function () {
+            myChart.resize();
+        };
+    });
+}
+</script>
+
+<style scoped lang="less">
+.echartBar {
+    width: 100%;
+    height: 100%;
+
+    .bar {
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/views/vent/monitorManager/alarmMonitor/common/warnGradeInfo.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="warn-grade-info">
+        <a-table :columns="columns" size="small" :data-source="tableData" :scroll="{ y: 500 }" class="tableW"
+            :pagination="false"></a-table>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+
+let columns = ref < any[] > ([
+    {
+        title: '序号',
+        width: 60,
+        align: 'center',
+        customRender: ({ index }: { index: number }) => `${index + 1}`
+    },
+    {
+        title: '得分',
+        dataIndex: 'df',
+        key: 'df',
+        align: 'center',
+    },
+    {
+        title: '等级',
+        dataIndex: 'grade',
+        key: 'grade',
+        align: 'center',
+    },
+])
+let tableData = ref < any[] > ([
+    { df: '0<A<=1', grade: '低风险' },
+    { df: '1<A<=2', grade: '一般风险' },
+    { df: '2<A<=3', grade: '较大风险' },
+    { df: '3<A<=4', grade: '重大风险' },
+])
+</script>
+
+<style lang="less" scoped>
+.warn-grade-info {
+    position: relative;
+    padding: 10px;
+    box-sizing: border-box;
+}
+</style>

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

@@ -88,6 +88,12 @@
       </ventBox1>
     </div>
     <div class="center-box">
+      <div class="echart-warn-grade">
+        <warnGradeEchart :echartData="Levels"></warnGradeEchart>
+      </div>
+      <div class="btn-warn-grade">
+        <a-button type="primary" size="small" @click="warnGradeClick">风险等级</a-button>
+      </div>
       <div class="animation-box">
         <canvas class="rain"></canvas>
         <div class="bottom" :class="{
@@ -151,7 +157,7 @@
                 centerData.fire
                   == 101 ? '低风险' : centerData.fire == 102 ? '一般风险' : centerData.fire == 103 ? '较大风险' : centerData.fire ==
                     104
-                ? '重大风险' :centerData.fire == 201 ? '报警' : centerData.fire }}</span>
+                    ? '重大风险' : centerData.fire == 201 ? '报警' : centerData.fire }}</span>
             </div>
           </div>
           <div class="item item2">
@@ -313,6 +319,10 @@
         </template>
       </ventBox1>
     </div>
+    <!-- 风险等级弹窗 -->
+    <a-modal v-model:visible="visibleGrade" width="850px" :footer="null" :title="titleGrade" centered destroyOnClose>
+      <warnGradeInfo></warnGradeInfo>
+    </a-modal>
   </div>
 </template>
 
@@ -322,16 +332,19 @@ import { useRouter } from 'vue-router';
 import { rainBg } from '/@/utils/ui.js';
 import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
 import { useGlobSetting } from '/@/hooks/setting';
+import { getDisasterProportion } from '../../deviceManager/riskSetting/riskSetting.api'
+import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
+import { getTotalList, sysTypeWarnList } from './alarm.api';
 import customHeader from '/@/components/vent/customHeader.vue';
 import ventBox1 from '/@/components/vent/ventBox1.vue';
 import BarSingle from '../../../../components/chart/BarSingle.vue';
-import { getTotalList, sysTypeWarnList } from './alarm.api';
-import { getDisasterProportion } from '../../deviceManager/riskSetting/riskSetting.api'
-import { iconsMonitor, chartsColumns, xAxisData, option, colors, fontColor, fireMonitor } from './alarm.data';
+import warnGradeEchart from './common/warnGradeEchart.vue'
+import warnGradeInfo from './common/warnGradeInfo.vue'
+
 
 let router = useRouter();
 let warnLevels = ref('');
-
+let Levels = reactive({})
 const warnNumMap = new Map([
   ['fire', 0],
   ['dust', 0],
@@ -368,7 +381,14 @@ let gasData = {
 };
 
 let fireMonitor1 = reactive<any[]>([]);
+let visibleGrade = ref(false)//控制风险等级弹窗显示与隐藏
+let titleGrade = ref('')//风险等级弹窗标题
 
+//风险等级点击
+let warnGradeClick = () => {
+  visibleGrade.value = true
+  titleGrade.value = '风险等级信息'
+}
 //跳转详情
 function showModal(data) {
   switch (data) {
@@ -425,8 +445,8 @@ async function getList() {
   centerData.ws = res.info.sysInfo.gasS.maxLevel;
   centerData.sb = res.info.deviceWarnInfo.maxLevel;
   centerData.fc = res.info.sysInfo.dustS.maxLevel;
-  let Levels = await getDisasterProportion()
-  console.log(Levels, '综合风险等级')
+  Levels = await getDisasterProportion()
+
   centerData.levels = 0 < Levels.level <= 1 ? 101 : 1 < Levels.level <= 2 ? 102 : 2 < Levels.level <= 3 ? 103 : 3 < Levels.level <= 4 ? 104 : 0
 
   Object.keys(iconsMonitor).forEach((el) => {
@@ -575,6 +595,8 @@ onUnmounted(() => {
 
   .sensor-container {
     .center-box {
+      position: relative;
+
       .fire-monitor {
         border: 1px solid #3a4b5f;
         border-radius: 10px;
@@ -837,6 +859,7 @@ onUnmounted(() => {
   }
 
   .center-box {
+    position: relative;
     width: calc(100% - 710px);
     // background-color: #ffffff10;
     margin: 0 8px;
@@ -844,6 +867,20 @@ onUnmounted(() => {
     flex-direction: column;
     justify-content: flex-end;
 
+    .echart-warn-grade {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 400px;
+      height: 200px;
+    }
+
+    .btn-warn-grade {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
     .fire-monitor {
       display: flex;
       flex-direction: column;