| |
---|
| | <div class="middleextA flex"> |
---|
| | <div> |
---|
| | <img :src="item.Imgurl" alt="" /> |
---|
| | </div> |
---|
| | <div style="margin-left: 4px; cursor: pointer" @click="FxClick(item.name)">{{ item.name }}</div> |
---|
| | <div style="margin-left: 4px; cursor: pointer" @click="FxClick(item.name)"> |
---|
| | {{ item.name }} |
---|
| | </div> |
---|
| | </div> |
---|
| | <div class="middleextB flex"> |
---|
| | <div class="BJ_CenBox1" :style="getWidth(item, 1)"></div> |
---|
| | <div |
---|
| |
---|
| | > |
---|
| | {{ item.num }} |
---|
| | </div> |
---|
| | |
---|
| | <div style="font-family: Source Han Sans CN; font-weight: bold; font-size: 13px; color: #34909f"> |
---|
| | <div |
---|
| | style=" |
---|
| | font-family: Source Han Sans CN; |
---|
| | font-weight: bold; |
---|
| | font-size: 13px; |
---|
| | color: #34909f; |
---|
| | " |
---|
| | > |
---|
| | {{ item.dw }} |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| |
---|
| | <div class="below"> |
---|
| | <div class="handIn">{{ item.num }}</div> |
---|
| | <div |
---|
| | class="oflower" |
---|
| | :style="{ color: item.gm == '较多' ? '#FF4D5DFF' : item.gm == '正常' ? '#2BE7ABFF' : '#F8E270FF' }" |
---|
| | :style="{ |
---|
| | color: |
---|
| | item.gm == '较多' |
---|
| | ? '#FF4D5DFF' |
---|
| | : item.gm == '正常' |
---|
| | ? '#2BE7ABFF' |
---|
| | : '#F8E270FF', |
---|
| | }" |
---|
| | > |
---|
| | {{ item.gm }} |
---|
| | </div> |
---|
| | </div> |
---|
| |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| | <div class="WarningEcharts"> |
---|
| | <AssessmentjsEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentjsEcharts> |
---|
| | <AssessmentjsEcharts |
---|
| | :data="chartData2" |
---|
| | :refresh="chartData2.refresh" |
---|
| | ></AssessmentjsEcharts> |
---|
| | </div> |
---|
| | </div> |
---|
| | </template> |
---|
| | |
---|
| | <script setup> |
---|
| | import tslyqk_constituent_3d from '@/views/oneMap/Echarts/tslyqk_constituent_3d.vue'; //3d图例 |
---|
| | import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue'; |
---|
| | |
---|
| | import { ref, reactive, toRefs, onMounted } from 'vue'; |
---|
| | import tslyqk_constituent_3d from "@/views/oneMap/Echarts/tslyqk_constituent_3d.vue"; //3d图例 |
---|
| | import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue"; |
---|
| | |
---|
| | import { ref, reactive, toRefs, onMounted } from "vue"; |
---|
| | const AllData = reactive({}); |
---|
| | import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据 |
---|
| | import czsj from '@/assets/newImgs/czsj.png'; //处置数据 |
---|
| | import czl from '@/assets/newImgs/czl.png'; //处置率 |
---|
| | |
---|
| | import ranqi_icon from '@/assets/newImgs/ranqi_icon.png'; //燃气 |
---|
| | import qiaoliang from '@/assets/newImgs/qiaoliang.png'; //桥梁 |
---|
| | import sd_icon from '@/assets/newImgs/sd_icon.png'; //隧道 |
---|
| | import ps_icon from '@/assets/newImgs/ps_icon.png'; //隧道 |
---|
| | import fxzb from '@/assets/newImgs/fxzb.png'; //风险占比 |
---|
| | import bus from '@/bus'; |
---|
| | import yjsj from "@/assets/newImgs/yjsj.png"; //预警数据 |
---|
| | import czsj from "@/assets/newImgs/czsj.png"; //处置数据 |
---|
| | import czl from "@/assets/newImgs/czl.png"; //处置率 |
---|
| | |
---|
| | import ranqi_icon from "@/assets/newImgs/ranqi_icon.png"; //燃气 |
---|
| | import qiaoliang from "@/assets/newImgs/qiaoliang.png"; //桥梁 |
---|
| | import sd_icon from "@/assets/newImgs/sd_icon.png"; //隧道 |
---|
| | import ps_icon from "@/assets/newImgs/ps_icon.png"; //隧道 |
---|
| | import fxzb from "@/assets/newImgs/fxzb.png"; //风险占比 |
---|
| | import bus from "@/bus"; |
---|
| | const yearList = ref([ |
---|
| | { name: '月', value: 1 }, |
---|
| | { name: '年', value: 2 }, |
---|
| | { name: "月", value: 1 }, |
---|
| | { name: "年", value: 2 }, |
---|
| | ]); |
---|
| | const chartData2 = ref({ |
---|
| | xAxis: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'], |
---|
| | xAxis: ["12/1", "12/2", "12/3", "12/4", "12/5", "12/6"], |
---|
| | refresh: 1, |
---|
| | }); |
---|
| | const riskData = ref([ |
---|
| | { name: '燃气', num: 4549.53, sl: 1922.11, Imgurl: ranqi_icon, dw: '公里' }, |
---|
| | { name: '排水', num: 435.7, sl: 118, Imgurl: ps_icon, dw: '公里' }, |
---|
| | { name: '桥梁', num: 84, sl: 0, Imgurl: qiaoliang, dw: '座' }, |
---|
| | { name: '隧道', num: 1, sl: 0, Imgurl: sd_icon, dw: '座' }, |
---|
| | { name: "燃气", num: 4549.53, sl: 1922.11, Imgurl: ranqi_icon, dw: "公里" }, |
---|
| | { name: "排水", num: 435.7, sl: 118, Imgurl: ps_icon, dw: "公里" }, |
---|
| | { name: "桥梁", num: 84, sl: 0, Imgurl: qiaoliang, dw: "座" }, |
---|
| | { name: "隧道", num: 1, sl: 0, Imgurl: sd_icon, dw: "座" }, |
---|
| | ]); |
---|
| | const tableData = ref([ |
---|
| | { name: '预警数量', num: '60', gm: '较多', Imgurl: yjsj }, |
---|
| | { name: '处置数量', num: '60', gm: '正常', Imgurl: czsj }, |
---|
| | { name: '处置率', num: '75%', gm: '未完成', Imgurl: czl }, |
---|
| | { name: "预警数量", num: "60", gm: "较多", Imgurl: yjsj }, |
---|
| | { name: "处置数量", num: "60", gm: "正常", Imgurl: czsj }, |
---|
| | { name: "处置率", num: "75%", gm: "未完成", Imgurl: czl }, |
---|
| | ]); |
---|
| | |
---|
| | const activedname = ref('月'); |
---|
| | const activedname = ref("月"); |
---|
| | function yearclick(val) { |
---|
| | activedname.value = val.name; |
---|
| | } |
---|
| | // 动态计算盒子的宽度 |
---|
| |
---|
| | return `width:${widthNum}%`; |
---|
| | }; |
---|
| | |
---|
| | // 风险评估点击事件 |
---|
| | const FxClickName = ref('燃气'); |
---|
| | const FxClickName = ref("燃气"); |
---|
| | const obj = ref([ |
---|
| | { |
---|
| | name: '低风险 70% 1345.5', |
---|
| | name: "低风险 70% 1345.5", |
---|
| | value: 1345.5, |
---|
| | itemStyle: { |
---|
| | color: '#2BE7ABFF', |
---|
| | color: "#2BE7ABFF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '一般风险 20% 384.5', |
---|
| | name: "一般风险 20% 384.5", |
---|
| | value: 384.5, |
---|
| | itemStyle: { |
---|
| | color: '#18A7F2FF', |
---|
| | color: "#18A7F2FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '较大风险 5% 91.11', |
---|
| | name: "较大风险 5% 91.11", |
---|
| | value: 91.11, |
---|
| | itemStyle: { |
---|
| | color: '#F8E270FF', |
---|
| | color: "#F8E270FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '重大风险 5% 91', |
---|
| | name: "重大风险 5% 91", |
---|
| | value: 91, |
---|
| | itemStyle: { |
---|
| | color: '#FF5D6CFF', |
---|
| | color: "#FF5D6CFF", |
---|
| | }, |
---|
| | }, |
---|
| | ]); |
---|
| | |
---|
| | function FxClick(val) { |
---|
| | FxClickName.value = val; |
---|
| | if (FxClickName.value == '燃气') { |
---|
| | if (FxClickName.value == "燃气") { |
---|
| | let obj = [ |
---|
| | { |
---|
| | name: '低风险 70% 1345.5', |
---|
| | name: "低风险 70% 1345.5", |
---|
| | value: 1345.5, |
---|
| | itemStyle: { |
---|
| | color: '#2BE7ABFF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '一般风险 20% 384.5', |
---|
| | color: "#2BE7ABFF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "一般风险 20% 384.5", |
---|
| | value: 384.5, |
---|
| | itemStyle: { |
---|
| | color: '#18A7F2FF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '较大风险 5% 91.11', |
---|
| | color: "#18A7F2FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "较大风险 5% 91.11", |
---|
| | value: 91.11, |
---|
| | itemStyle: { |
---|
| | color: '#F8E270FF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '重大风险 5% 91', |
---|
| | color: "#F8E270FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "重大风险 5% 91", |
---|
| | value: 91, |
---|
| | itemStyle: { |
---|
| | color: '#FF5D6CFF', |
---|
| | color: "#FF5D6CFF", |
---|
| | }, |
---|
| | }, |
---|
| | ]; |
---|
| | bus.emit('FxVisible', obj); |
---|
| | } else if (FxClickName.value == '排水') { |
---|
| | bus.emit("FxVisible", obj); |
---|
| | } else if (FxClickName.value == "排水") { |
---|
| | let obj = [ |
---|
| | { |
---|
| | name: '低风险 65% 76.7', |
---|
| | name: "低风险 65% 76.7", |
---|
| | value: 76.7, |
---|
| | itemStyle: { |
---|
| | color: '#2BE7ABFF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '一般风险 20% 23.6', |
---|
| | color: "#2BE7ABFF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "一般风险 20% 23.6", |
---|
| | value: 23.6, |
---|
| | itemStyle: { |
---|
| | color: '#18A7F2FF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '较大风险 10% 11.8', |
---|
| | color: "#18A7F2FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "较大风险 10% 11.8", |
---|
| | value: 11.8, |
---|
| | itemStyle: { |
---|
| | color: '#F8E270FF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '重大风险 5% 5.9', |
---|
| | color: "#F8E270FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "重大风险 5% 5.9", |
---|
| | value: 5.9, |
---|
| | itemStyle: { |
---|
| | color: '#FF5D6CFF', |
---|
| | color: "#FF5D6CFF", |
---|
| | }, |
---|
| | }, |
---|
| | ]; |
---|
| | bus.emit('FxVisible', obj); |
---|
| | } else if (FxClickName.value == '桥梁') { |
---|
| | bus.emit("FxVisible", obj); |
---|
| | } else if (FxClickName.value == "桥梁") { |
---|
| | let obj = [ |
---|
| | { |
---|
| | name: '低风险 0% 0', |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: '#2BE7ABFF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '一般风险 0% 0', |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: '#18A7F2FF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '较大风险 0% 0', |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: '#F8E270FF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '重大风险 0% 0', |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: '#FF5D6CFF', |
---|
| | name: "低风险 0% 0", |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: "#2BE7ABFF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "一般风险 0% 0", |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: "#18A7F2FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "较大风险 0% 0", |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: "#F8E270FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "重大风险 0% 0", |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: "#FF5D6CFF", |
---|
| | }, |
---|
| | }, |
---|
| | ]; |
---|
| | bus.emit('FxVisible', obj); |
---|
| | bus.emit("FxVisible", obj); |
---|
| | } else { |
---|
| | let obj = [ |
---|
| | { |
---|
| | name: '低风险 0% 0', |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: '#2BE7ABFF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '一般风险 0% 0', |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: '#18A7F2FF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '较大风险 0% 0', |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: '#F8E270FF', |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: '重大风险 0% 0', |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: '#FF5D6CFF', |
---|
| | name: "低风险 0% 0", |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: "#2BE7ABFF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "一般风险 0% 0", |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: "#18A7F2FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "较大风险 0% 0", |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: "#F8E270FF", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | name: "重大风险 0% 0", |
---|
| | value: 0, |
---|
| | itemStyle: { |
---|
| | color: "#FF5D6CFF", |
---|
| | }, |
---|
| | }, |
---|
| | ]; |
---|
| | bus.emit('FxVisible', obj); |
---|
| | bus.emit("FxVisible", obj); |
---|
| | } |
---|
| | } |
---|
| | |
---|
| | const showPanel = ref(true); //面板展开收起 |
---|
| |
---|
| | }, |
---|
| | { immediate: true } |
---|
| | ); |
---|
| | onMounted(() => { |
---|
| | bus.emit('FxVisible', obj.value); |
---|
| | bus.emit("FxVisible", obj.value); |
---|
| | }); |
---|
| | </script> |
---|
| | |
---|
| | <style lang="scss" scoped> |
---|
| |
---|
| | .middleextB { |
---|
| | height: 14px; |
---|
| | width: 58%; |
---|
| | margin-top: 8px; |
---|
| | background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%); |
---|
| | background: linear-gradient( |
---|
| | 0deg, |
---|
| | rgba(0, 43, 67, 0.8) 0%, |
---|
| | rgba(0, 76, 118, 0.8) 100% |
---|
| | ); |
---|
| | border-radius: 16px; |
---|
| | border: 1px solid #15d2fd; |
---|
| | // background: yellow; |
---|
| | .BJ_CenBox1 { |
---|
| |
---|
| | margin-top: 5px; |
---|
| | .part { |
---|
| | width: 130px; |
---|
| | height: 160px; |
---|
| | background: url('@/assets/newImgs/iSpt.png') no-repeat; |
---|
| | background: url("@/assets/newImgs/iSpt.png") no-repeat; |
---|
| | background-size: 100% 100%; |
---|
| | .parttop { |
---|
| | height: 160px; |
---|
| | .upper { |
---|
| |
---|
| | top: 8px; |
---|
| | position: relative; |
---|
| | width: 408px; |
---|
| | height: 44px; |
---|
| | background: url('@/assets/newImgs/partBg.png') no-repeat; |
---|
| | background: url("@/assets/newImgs/partBg.png") no-repeat; |
---|
| | background-size: 100% 100%; |
---|
| | font-family: PangMenZhengDao; |
---|
| | font-weight: 400; |
---|
| | font-size: 23px; |
---|
| |
---|
| | .icon { |
---|
| | margin-left: 5px; |
---|
| | width: 25px; |
---|
| | height: 25px; |
---|
| | background: url('@/assets/newImgs/xtb_img.png') no-repeat; |
---|
| | background: url("@/assets/newImgs/xtb_img.png") no-repeat; |
---|
| | } |
---|
| | .text { |
---|
| | font-family: Source Han Sans CN; |
---|
| | font-weight: bold; |
---|
| | font-size: 14px; |
---|
| | font-size: 16px; |
---|
| | color: #ebfeff; |
---|
| | line-height: 25px; |
---|
| | padding-left: 5px; |
---|
| | background: linear-gradient(0deg, rgba(0, 242, 255, 0.5) 0%, rgba(0, 242, 255, 0) 100%); |
---|
| | background: linear-gradient( |
---|
| | 0deg, |
---|
| | rgba(0, 242, 255, 0.5) 0%, |
---|
| | rgba(0, 242, 255, 0) 100% |
---|
| | ); |
---|
| | height: 10px; |
---|
| | line-height: 0px; |
---|
| | margin-top: 10px; |
---|
| | } |
---|
| |
---|
| | .text { |
---|
| | padding: 0 10px 0 6px; |
---|
| | font-family: Source Han Sans CN; |
---|
| | font-weight: 500; |
---|
| | font-size: 14px; |
---|
| | font-size: 16px; |
---|
| | color: #c1d3d4; |
---|
| | } |
---|
| | } |
---|
| | } |
---|
| |
---|
| | .ListBoxHeader { |
---|
| | height: 44px; |
---|
| | line-height: 50px; |
---|
| | width: 98%; |
---|
| | background: url('@/assets/newImgs/partBg.png') no-repeat; |
---|
| | background: url("@/assets/newImgs/partBg.png") no-repeat; |
---|
| | background-size: 100% 100%; |
---|
| | display: flex; |
---|
| | align-items: center; |
---|
| | justify-content: space-between; |
---|
| |
---|
| | |
|