修改文件夹位置

src/components/echarts/MyEchartMap.vue

@@ -10,7 +10,7 @@
 import { onBeforeUnmount, ref, watch, onMounted, defineEmits } from 'vue'
 import * as echarts from 'echarts4'
 import { useDictData } from '@/stores/dictData'
-const dictData = useDictData()
+const dictData = useDictData()  
 const props = defineProps(['options'])
 const myCharts = ref()
 const showCircle = ref(false)
@@ -56,6 +56,7 @@ const GetEchar = async (name: string) => {
             backgroundColor: 'rgba(0,0,0,0.35)',
             ...(props.options.tooltip || null)
         },
+
         legend: {
             orient: 'vertical',
             left: 26,
@@ -65,6 +66,7 @@ const GetEchar = async (name: string) => {
 
             ...(props.options.legend || null)
         },
+
         color: [
             ...(props.options.color || ''),
             '#07CCCA ',
@@ -78,6 +80,7 @@ const GetEchar = async (name: string) => {
             '#66FFCC',
             '#B3B3B3'
         ],
+
         geo: {
             map: name,
             zoom: 1.2,
@@ -144,7 +147,9 @@ const GetEchar = async (name: string) => {
         },
         ...props.options.options
     }
-
+    if (props.options.visualMap) {
+        option.visualMap = props.options.visualMap
+    }
     myCharts.value.setOption(option)
     window.addEventListener('resize', resizeHandler)
 
@@ -165,8 +170,6 @@ const MapReturn = (name: string) => {
     let flag = true
     for (let i = 0; i < area.length; i++) {
         if (area[i].name == name) {
-            console.log(11111)
-
             list = area[i]
             flag = false
             emit('getRegionByRegion', list)

src/components/table/header/index.vue

@@ -16,7 +16,7 @@
                     :label-width="90"
                 >
                     <el-form-item label="区域" v-if="area">
-                        <Area v-model="tableStore.table.params.deptIndex" />
+                        <Area ref="areaRef" v-model="tableStore.table.params.deptIndex" />
                     </el-form-item>
                     <el-form-item label="日期" v-if="datePicker" style="grid-column: span 2; max-width: unset">
                         <DatePicker ref="datePickerRef"></DatePicker>
@@ -49,6 +49,7 @@ const tableStore = inject('tableStore') as TableStore
 const tableHeader = ref()
 const datePickerRef = ref()
 const dictData = useDictData()
+const areaRef = ref()
 interface Props {
     datePicker?: boolean
     area?: boolean
@@ -114,9 +115,6 @@ const onComSearch = async () => {
         tableStore.table.params.endTime = datePickerRef.value.timeValue[1]
         tableStore.table.params.timeFlag = datePickerRef.value.timeFlag
     }
-    if (props.area) {
-        tableStore.table.params.deptIndex = dictData.state.area[0].id
-    }
 
     await tableStore.onTableAction('search', {})
 }
@@ -127,7 +125,7 @@ const dateChange = () => {
     // tableStore.table.params.searchBeginTime = date.value[0]
     // tableStore.table.params.searchEndTime = date.value[1]
 }
-defineExpose({ onComSearch })
+defineExpose({ onComSearch, areaRef })
 </script>
 
 <style scoped lang="scss">

src/styles/app.scss

@@ -59,6 +59,7 @@ body,
 }
 
 .default-main {
+    position: relative;
   background: #fff;
   margin: var(--ba-main-space) var(--ba-main-space) 0px var(--ba-main-space);
 }

src/views/pms/Event-boot/Region/components/TypeStatistics.vue

@@ -128,7 +128,7 @@ const info = (res: any) => {
 }
 
 defineExpose({ info })
-const layout = mainHeight(170) as any
+const layout = mainHeight(175) as any
 </script>
 
 <style lang="scss" scoped>

src/views/pms/Event-boot/Region/distribution.vue

@@ -1,8 +1,10 @@
 <template>
     <div class="default-main">
-        <TableHeader area>
+        <TableHeader area ref="header">
             <template v-slot:select>
-             
+                <!-- <el-form-item label="区域">
+                    <Area ref="area" v-model="tableStore.table.params.deptIndex" />
+                </el-form-item> -->
                 <el-form-item label="统计类型">
                     <el-select
                         v-model="tableStore.table.params.statisticalType"
@@ -58,7 +60,7 @@
 </template>
 <script setup lang="ts">
 import TableHeader from '@/components/table/header/index.vue'
-import Area from '@/components/form/area/index.vue'
+
 import { useDictData } from '@/stores/dictData'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
@@ -72,27 +74,29 @@ defineOptions({
 const EchartMap = ref()
 const dictData = useDictData()
 const options = dictData.getBasicData('Statistical_Type', ['Report_Type'])
-const echartMapList = ref({})
+const echartMapList:any = ref({})
 const echartList = ref({})
 const titleA = ref('')
+const header = ref()
 const distributionData: any = ref([])
-const area = ref()
+
 const tableStore = new TableStore({
     url: '/event-boot/area/getAreaLineDetail',
     method: 'POST',
     column: [],
     loadCallback: () => {
         titleA.value = tableStore.table.params.statisticalType.name
-        area.value.change()
+        header.value.areaRef.change()
         // 处理地图数据
         map(tableStore.table.data)
         tabulation(tableStore.table.data)
         histogram(tableStore.table.data)
-        EchartMap.value.GetEchar(area.value.areaName)
+        EchartMap.value.GetEchar(header.value.areaRef.areaName)
     }
 })
 provide('tableStore', tableStore)
 
+// tableStore.table.params.deptIndex = dictData.state.area[0].id
 tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Report_Type'])[0]
 tableStore.table.params.monitorFlag = 2
 tableStore.table.params.powerFlag = 2
@@ -149,7 +153,7 @@ const map = (res: any) => {
             series: []
         }
     }
-    let mapList = [[], [], []]
+    let mapList:any = [[], [], []]
     if (res.substationDetailVOList != null) {
         res.substationDetailVOList.forEach((item: any) => {
             if (item.color == 'green') {
@@ -159,7 +163,7 @@ const map = (res: any) => {
             }
         })
     }
-    mapList.forEach((item, ind) => {
+    mapList.forEach((item:any, ind:number) => {
         echartMapList.value.options.series.push({
             type: 'scatter',
             mapName: 'china',
@@ -238,7 +242,7 @@ const histogram = (res: any) => {
                     : titleA.value == '干扰源类型'
                     ? '干扰源类型'
                     : titleA.value == '电网拓扑'
-                    ? area.value.areaName
+                    ? header.value.areaRef.areaName
                     : '' // 给X轴加单位
         },
         tooltip: {

src/views/pms/Event-boot/Region/thermodynamicDiagram.vue

@@ -0,0 +1,354 @@
+<template>
+    <div class="default-main">
+        <TableHeader area date-picker ref="header" />
+        <div v-loading="tableStore.table.loading" class="pr10">
+            <el-row>
+                <el-col :span="12">
+                    <MyEchartMap
+                        ref="EchartMap"
+                        :options="echartMapList"
+                        class="map"
+                        @eliminate="eliminate"
+                        @getRegionByRegion="getRegionByRegion"
+                    />
+                </el-col>
+                <el-col :span="12">
+                    <my-echart class="tall" :options="echartList" />
+                    <div class="tall">
+                        <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
+                            >
+                            <vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
+                            <vxe-column field="ci" title="区域暂降评估">
+                                <template #default="{ row }">
+                                    {{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
+                                </template>
+                            </vxe-column>
+                            <vxe-column sortable field="isCount" title="等级">
+                                <template #default="{ row }">
+                                    <span v-if="row.ci == 0.05">暂无等级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
+                                </template>
+                            </vxe-column>
+                        </vxe-table>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableStore from '@/utils/tableStore'
+import { ref, onMounted, provide } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+defineOptions({
+    name: 'Region/distribution'
+})
+const EchartMap = ref()
+const dictData = useDictData()
+const echartMapList: any = ref({})
+const echartList = ref({})
+const header = ref()
+const distributionData: any = ref([])
+const list: any = ref([])
+const geoCoordMap: any = ref([])
+
+const tableStore = new TableStore({
+    url: '/event-boot/area/getEventHeatMap',
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {},
+    loadCallback: () => {
+        header.value.areaRef.change()
+        // 处理地图数据
+        tableStore.table.data.eventHeatMapValue.forEach(val => {
+            val.forEach(item => {
+                list.value.push(item)
+                geoCoordMap.value.push([item.lng, item.lat, item.tail])
+            })
+        })
+        map(tableStore.table.data)
+        // tabulation(tableStore.table.data)
+        // histogram(tableStore.table.data)
+        EchartMap.value.GetEchar(header.value.areaRef.areaName)
+    }
+})
+
+tableStore.table.params.monitorFlag = 2
+tableStore.table.params.powerFlag = 1
+tableStore.table.params.reportFlag = 3
+tableStore.table.params.statFlag = true
+tableStore.table.params.statisticalType = dictData.getBasicData('Statistical_Type', ['Load_Type'])[3]
+provide('tableStore', tableStore)
+
+// 地图点击事件
+const getRegionByRegion = (list: any) => {
+    tableStore.table.params.deptIndex = list.id
+    tableStore.onTableAction('search', {})
+}
+// 消除点
+const eliminate = (name: string) => {
+    echartMapList.value.options.series = []
+    EchartMap.value.GetEchar(name)
+}
+
+// 地图数处理
+const map = (res: any) => {
+    let areaData: any = []
+
+    if (geoCoordMap.value.lengt > 0) {
+        geoCoordMap.value.map(item => {
+            console.log("🚀 ~ map ~ item:", item)
+            areaData.push(...new Array(3).fill(item))
+        })
+    }
+    let maxNum = 0
+    let minNum = 0
+    let num: any = []
+    console.log('🚀 ~ map ~ areaData:', areaData)
+
+    if (areaData.length > 0) {
+        areaData.forEach(item => {
+            num.push(item[2])
+        })
+        for (let i = 0; i < num.length; i++) {
+            if (num[i] > maxNum) {
+                maxNum = num[i]
+            } else if (num[i] < minNum) {
+                minNum = num[i]
+            }
+        }
+    }
+
+    echartMapList.value = {
+        name: '',
+        title: {
+            text: '区域暂降热力图分布'
+        },
+
+        visualMap: {
+            left: 26,
+            bottom: 40,
+            show: true,
+            color: ['#ff0000', '#37b70c'],
+            min: minNum,
+            max: maxNum,
+            calculable: true,
+            textStyle: {
+                color: '#000',
+                fontSize: 12
+            }
+        },
+
+        options: {
+            series: [
+                {
+                    mapType: 'nanshan',
+                    top: 'center',
+                    left: 'center',
+                    width: '65%',
+                    height: '95%',
+
+                    name: 'AQI',
+                    type: 'heatmap',
+                    coordinateSystem: 'geo',
+                    blurSize: 40,
+                    data: areaData
+                    // 鼠标移入
+                }
+            ]
+        }
+    }
+}
+
+// 表格数据处理
+const tabulation = (res: any) => {
+    distributionData.value = res
+    distributionData.value.forEach((item: any) => {
+        if (item.ci == 0) {
+            item.ci = 0.05
+        }
+    })
+}
+// 柱状图数据处理
+const histogram = (res: any) => {
+    echartList.value = {
+        title: {
+            text: header.value.areaRef.areaName
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                var tips = ''
+                for (var i = 0; i < params.length; i++) {
+                    if (params[i].value == 0.05) {
+                        tips += params[i].name + '</br>'
+                        tips += '评估值:0'
+                    } else {
+                        tips += params[i].name + '</br>'
+                        tips += '评估值:' + params[i].value
+                    }
+                }
+                return tips
+            }
+        },
+
+        xAxis: {
+            name: '(区域)',
+
+            data: res.map((item: any) => item.areaName)
+        },
+        yAxis: {
+            name: ' 等级',
+            min: 0,
+            max: 2,
+            // minInterval: 0.2,
+            axisLabel: {
+                fontSize: 14,
+                // interval: 4,
+                formatter: function (value: any) {
+                    var texts = ''
+                    if (value === 0.4) {
+                        texts = '1级'
+                    } else if (value === 0.8) {
+                        texts = '2级'
+                    } else if (value === 1.2) {
+                        texts = '3级'
+                    } else if (value === 2) {
+                        texts = '4级'
+                    }
+                    return texts
+                }
+            }
+        },
+        options: {
+            series: [
+                //
+                {
+                    name: '',
+                    data: res.map((item: any) => {
+                        if (item.ci == 0) {
+                            return (item.ci = 0.05)
+                        }
+                        return item.ci.toFixed(2)
+                    }),
+
+                    barMaxWidth: 30,
+                    barMinHeight: 1,
+                    type: 'bar',
+                    itemStyle: {
+                        normal: {
+                            color: function (params: any) {
+                                if (params.value > 2 && params.value !== 0.05) {
+                                    return '#339966'
+                                } else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
+                                    return '#3399FF'
+                                } else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
+                                    return '#FF9900'
+                                } else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
+                                    return '#CC0000'
+                                } else if (params.value == 0.05) {
+                                    return '#CC0000'
+                                }
+                            }
+                        }
+                    },
+                    markLine: {
+                        silent: false,
+                        symbol: 'circle',
+                        lineStyle: {
+                            color: 'red',
+                            width: 1
+                        },
+                        emphasis: {
+                            lineStyle: {
+                                width: 1
+                            }
+                        },
+                        data: [
+                            {
+                                name: '',
+                                yAxis: 0.4,
+                                lineStyle: {
+                                    color: '#CC0000'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#CC0000'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 0.8,
+                                lineStyle: {
+                                    color: '#FF9900'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#FF9900'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 1.2,
+                                lineStyle: {
+                                    color: '#3399FF'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#3399FF'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 2,
+                                lineStyle: {
+                                    color: '#339966'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#339966'
+                                    }
+                                }
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+    }
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 10)
+})
+const layout = mainHeight(83) as any
+const layout1 = mainHeight(93) as any
+</script>
+<style lang="scss" scoped>
+.map {
+    height: v-bind('layout.height');
+}
+.tall {
+    height: calc(v-bind('layout1.height') / 2);
+}
+</style>

src/views/pms/Event-boot/Region/transientassessment.vue

@@ -0,0 +1,397 @@
+<template>
+    <div class="default-main">
+        <TableHeader area date-picker ref="header" />
+        <div v-loading="tableStore.table.loading" class="pr10">
+            <el-row>
+                <el-col :span="12">
+                    <MyEchartMap
+                        ref="EchartMap"
+                        :options="echartMapList"
+                        class="map"
+                        @eliminate="eliminate"
+                        @getRegionByRegion="getRegionByRegion"
+                    />
+                </el-col>
+                <el-col :span="12">
+                    <my-echart class="tall" :options="echartList" />
+                    <div class="tall">
+                        <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
+                            >
+                            <vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
+                            <vxe-column field="ci" title="区域暂降评估">
+                                <template #default="{ row }">
+                                    {{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
+                                </template>
+                            </vxe-column>
+                            <vxe-column sortable field="isCount" title="等级">
+                                <template #default="{ row }">
+                                    <span v-if="row.ci == 0.05">暂无等级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
+                                    <span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
+                                </template>
+                            </vxe-column>
+                        </vxe-table>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <div class="dw">
+            <el-popover placement="left" :width="600" trigger="hover">
+                <template #reference>
+                    <span class="level">详细区域暂降评估等级</span>
+                </template>
+                <vxe-table :data="areaData1" v-bind="defaultAttribute">
+                    <vxe-column title="等级" field="level" min-width="90"></vxe-column>
+                    <vxe-column title="1级" field="one" min-width="80"></vxe-column>
+                    <vxe-column title="2级" field="two" min-width="90"></vxe-column>
+                    <vxe-column title="3级" field="three" min-width="90"></vxe-column>
+                    <vxe-column title="4级" field="four" min-width="90"></vxe-column>
+                </vxe-table>
+            </el-popover>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import TableStore from '@/utils/tableStore'
+import { ref, onMounted, provide } from 'vue'
+import { mainHeight } from '@/utils/layout'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+defineOptions({
+    name: 'Region/distribution'
+})
+const EchartMap = ref()
+const dictData = useDictData()
+const echartMapList: any = ref({})
+const echartList = ref({})
+const header = ref()
+const distributionData: any = ref([])
+const areaData1: any = ref([
+    {
+        level: '相对得分',
+        one: '[0,0.4]',
+        two: '(0.4,0.8)',
+        three: '(0.8,1.2)',
+        four: '(1.2,+∞)'
+    }
+])
+
+const tableStore = new TableStore({
+    url: '/advance-boot/balance/getBalanceInfo',
+    method: 'POST',
+    column: [],
+    beforeSearchFun: () => {
+        tableStore.table.params.deptId = tableStore.table.params.deptIndex
+    },
+    loadCallback: () => {
+        header.value.areaRef.change()
+        // 处理地图数据
+        map(tableStore.table.data)
+        tabulation(tableStore.table.data)
+        histogram(tableStore.table.data)
+        EchartMap.value.GetEchar(header.value.areaRef.areaName)
+    }
+})
+provide('tableStore', tableStore)
+
+tableStore.table.params.loadType = null
+tableStore.table.params.deptId = dictData.state.area[0].id
+
+// 地图点击事件
+const getRegionByRegion = (list: any) => {
+    tableStore.table.params.deptIndex = list.id
+    tableStore.onTableAction('search', {})
+}
+// 消除点
+const eliminate = (name: string) => {
+    echartMapList.value.options.series = []
+    EchartMap.value.GetEchar(name)
+}
+
+// 地图数处理
+const map = (res: any) => {
+    let list: any = []
+    res.forEach((item: any) => {
+        list.push({
+            name: item.areaName,
+            value: item.ci
+        })
+    })
+
+    echartMapList.value = {
+        name: '',
+        title: {
+            text: '区域暂降评估'
+        },
+
+        visualMap: {
+            min: 0,
+            max: 2,
+            left: 26,
+            bottom: 20,
+            showLabel: !0,
+
+            pieces: [
+                {
+                    gt: -2,
+                    lte: -1,
+                    label: '无数据'
+                },
+                {
+                    gte: 0,
+                    lte: 0.4,
+                    label: '1级--相对得分 [0,0.4]'
+                },
+                {
+                    gt: 0.4,
+                    lte: 0.9,
+                    label: '2级--得分 (0.4,0.8]'
+                },
+                {
+                    gt: 0.9,
+                    lte: 1.2,
+                    label: '3级--相对得分 (0.8,1.2]'
+                },
+                {
+                    gt: 1.2,
+                    label: '4级--相对得分 (1.2,+∞]'
+                }
+            ],
+            inRange: {
+                color: ['#ccc', '#CC0000', '#FF9900', '#3399CC', '#339966']
+            }
+        },
+
+        options: {
+            series: [
+                {
+                    // type: "scatter",
+                    type: 'map',
+                    mapName: name,
+                    coordinateSystem: 'geo',
+                    geoIndex: 0,
+                    animation: false, //坐标点是否显示动画
+                    roam: true,
+                    selectedMode: 'false', //是否允许选中多个区域
+                    symbol: 'pin',
+                    rippleEffect: {
+                        brushType: 'fill' // stroke|fill
+                    },
+
+                    label: {
+                        normal: {
+                            show: false
+                        },
+                        emphasis: {
+                            label: {
+                                show: true
+                            }
+                        }
+                    },
+                    data: list
+                }
+            ]
+        }
+    }
+}
+
+// 表格数据处理
+const tabulation = (res: any) => {
+    distributionData.value = res
+    distributionData.value.forEach((item: any) => {
+        if (item.ci == 0) {
+            item.ci = 0.05
+        }
+    })
+}
+// 柱状图数据处理
+const histogram = (res: any) => {
+    echartList.value = {
+        title: {
+            text: header.value.areaRef.areaName
+        },
+        tooltip: {
+            formatter: function (params: any) {
+                var tips = ''
+                for (var i = 0; i < params.length; i++) {
+                    if (params[i].value == 0.05) {
+                        tips += params[i].name + '</br>'
+                        tips += '评估值:0'
+                    } else {
+                        tips += params[i].name + '</br>'
+                        tips += '评估值:' + params[i].value
+                    }
+                }
+                return tips
+            }
+        },
+
+        xAxis: {
+            name: '(区域)',
+
+            data: res.map((item: any) => item.areaName)
+        },
+        yAxis: {
+            name: ' 等级',
+            min: 0,
+            max: 2,
+            // minInterval: 0.2,
+            axisLabel: {
+                fontSize: 14,
+                // interval: 4,
+                formatter: function (value: any) {
+                    var texts = ''
+                    if (value === 0.4) {
+                        texts = '1级'
+                    } else if (value === 0.8) {
+                        texts = '2级'
+                    } else if (value === 1.2) {
+                        texts = '3级'
+                    } else if (value === 2) {
+                        texts = '4级'
+                    }
+                    return texts
+                }
+            }
+        },
+        options: {
+            series: [
+                //
+                {
+                    name: '',
+                    data: res.map((item: any) => {
+                        if (item.ci == 0) {
+                            return (item.ci = 0.05)
+                        }
+                        return item.ci.toFixed(2)
+                    }),
+
+                    barMaxWidth: 30,
+                    barMinHeight: 1,
+                    type: 'bar',
+                    itemStyle: {
+                        normal: {
+                            color: function (params: any) {
+                                if (params.value > 2 && params.value !== 0.05) {
+                                    return '#339966'
+                                } else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
+                                    return '#3399FF'
+                                } else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
+                                    return '#FF9900'
+                                } else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
+                                    return '#CC0000'
+                                } else if (params.value == 0.05) {
+                                    return '#CC0000'
+                                }
+                            }
+                        }
+                    },
+                    markLine: {
+                        silent: false,
+                        symbol: 'circle',
+                        lineStyle: {
+                            color: 'red',
+                            width: 1
+                        },
+                        emphasis: {
+                            lineStyle: {
+                                width: 1
+                            }
+                        },
+                        data: [
+                            {
+                                name: '',
+                                yAxis: 0.4,
+                                lineStyle: {
+                                    color: '#CC0000'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#CC0000'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 0.8,
+                                lineStyle: {
+                                    color: '#FF9900'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#FF9900'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 1.2,
+                                lineStyle: {
+                                    color: '#3399FF'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#3399FF'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 2,
+                                lineStyle: {
+                                    color: '#339966'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#339966'
+                                    }
+                                }
+                            }
+                        ]
+                    }
+                }
+            ]
+        }
+    }
+}
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 10)
+})
+const layout = mainHeight(83) as any
+const layout1 = mainHeight(93) as any
+</script>
+<style lang="scss" scoped>
+.map {
+    height: v-bind('layout.height');
+}
+.tall {
+    height: calc(v-bind('layout1.height') / 2);
+}
+.dw {
+    position: absolute;
+    top: 50px;
+    right: 50px;
+    width: 200px;
+    z-index: 2;
+    .level {
+        color: red;
+        cursor: pointer;
+    }
+}
+</style>