| | <template> |
---|
| | <div id="ZHHM"> |
---|
| | <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']"> |
---|
| | <div |
---|
| | :class="[ |
---|
| | 'LeftBox', |
---|
| | 'animate__animated', |
---|
| | showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft', |
---|
| | ]" |
---|
| | > |
---|
| | <div class="ComBox LeftBox1_1"> |
---|
| | <div class="Box_header" style="cursor: pointer" @click="TuChengMoRenClick('00')"> |
---|
| | 空间格局 <span class="Box_header_miniFont">(一心三轴多组团)</span> |
---|
| | </div> |
---|
| |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| | <div class="Box_Body"> |
---|
| | <div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现,且降雨量变化幅度大</div> |
---|
| | <div class="HeadContent" v-if="activedname == '年际降雨变化'"> |
---|
| | 丰、枯年交替出现,且降雨量变化幅度大 |
---|
| | </div> |
---|
| | <div class="HeadContent" v-else>年内降雨量分配不均匀,冬季干旱,雨雪稀少</div> |
---|
| | <div class="box-body"> |
---|
| | <div style="height: 100%"> |
---|
| | <RainfallEcharts |
---|
| | :data="chartData2" |
---|
| | :refresh="chartData2.refresh" |
---|
| | v-if="activedname == '年际降雨变化'" |
---|
| | ></RainfallEcharts> |
---|
| | <RainfallLegend :data="chartData3" :refresh1="chartData3.refresh1" v-else></RainfallLegend> |
---|
| | <RainfallLegend |
---|
| | :data="chartData3" |
---|
| | :refresh1="chartData3.refresh1" |
---|
| | v-else |
---|
| | ></RainfallLegend> |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| | <div class="ComBox LeftBox1_3"> |
---|
| | <div class="Box_header" style="cursor: pointer" @click="AllData.WTShow = !AllData.WTShow"> |
---|
| | <div |
---|
| | class="Box_header" |
---|
| | style="cursor: pointer" |
---|
| | @click="AllData.WTShow = !AllData.WTShow" |
---|
| | > |
---|
| | 问题识别 |
---|
| | <!-- <img |
---|
| | class="Box_headerIcon" |
---|
| | src="@/assets/images/Sponge_screen/HaiMian/HaiMian_FangAn.png" |
---|
| |
---|
| | @click="AllData.WTShow = !AllData.WTShow" |
---|
| | /> --> |
---|
| | </div> |
---|
| | <div class="Box_Body"> |
---|
| | <div class="WTSBList" v-for="item in AllData.WTSBData" @click="TuChengMoRenClick(item.num)"> |
---|
| | <div |
---|
| | class="WTSBList" |
---|
| | v-for="item in AllData.WTSBData" |
---|
| | @click="TuChengMoRenClick(item.num)" |
---|
| | > |
---|
| | <div class="WTSBList_num">{{ item.num }}</div> |
---|
| | <div class="WTSBList_font">{{ item.font }}</div> |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| | <div :class="['RightBox', 'animate__animated', showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight']"> |
---|
| | <div |
---|
| | :class="[ |
---|
| | 'RightBox', |
---|
| | 'animate__animated', |
---|
| | showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight', |
---|
| | ]" |
---|
| | > |
---|
| | <div class="ComBox RightBox1_1"> |
---|
| | <div class="Box_header">城市排涝体系提升</div> |
---|
| | <div class="Box_Body"> |
---|
| | <div class="SCPLTX_changeBox"> |
---|
| |
---|
| | </div> |
---|
| | </div> |
---|
| | |
---|
| | <div class="CSPLTXBox" id="CSPLTXBox1" v-if="AllData.SCPLTX_changeId == 1"> |
---|
| | <img class="SCPLTXImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu2.png" alt="" /> |
---|
| | <img |
---|
| | class="SCPLTXImg" |
---|
| | src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu2.png" |
---|
| | alt="" |
---|
| | /> |
---|
| | <div class="ClickDiv ClickDiv1" @click="ClickDiv(1)"></div> |
---|
| | <div class="ClickDiv ClickDiv2" @click="ClickDiv(2)"></div> |
---|
| | <div class="ClickDiv ClickDiv3" @click="ClickDiv(3)"></div> |
---|
| | <div class="ClickDiv ClickDiv4" @click="ClickDiv(4)"></div> |
---|
| | <div class="ClickDiv ClickDiv5" @click="ClickDiv(5)"></div> |
---|
| | </div> |
---|
| | <div class="CSPLTXBox" id="CSPLTXBox2" v-if="AllData.SCPLTX_changeId == 2"></div> |
---|
| | <div |
---|
| | class="CSPLTXBox" |
---|
| | id="CSPLTXBox2" |
---|
| | v-if="AllData.SCPLTX_changeId == 2" |
---|
| | ></div> |
---|
| | <div class="CSPLTXBox" v-if="AllData.SCPLTX_changeId == 3"> |
---|
| | <div id="CSPLTXBox3"></div> |
---|
| | <div id="lengedBox"> |
---|
| | <div class="LengedList" v-for="(item, index) in AllData.Echarts3Data"> |
---|
| |
---|
| | </div> |
---|
| | <div class="ComBox RightBox1_2"> |
---|
| | <div class="Box_header">城市排涝保障提升</div> |
---|
| | <div class="Box_Body"> |
---|
| | <div id="CSPLBZTS"></div> |
---|
| | <!-- <div class="SCPLBZ_changeBox"> |
---|
| | <div |
---|
| | class="SCPLBZ_changeBox_List" |
---|
| | :class="AllData.SCPLBZ_changeId == item.id ? 'SCPLBZ_changeBox_Check' : ''" |
---|
| |
---|
| | > |
---|
| | {{ item.name }} |
---|
| | </div> |
---|
| | </div> --> |
---|
| | <img class="SCPBZXImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu1.png" alt="" /> |
---|
| | <!-- <img |
---|
| | class="SCPBZXImg" |
---|
| | src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu1.png" |
---|
| | alt="" |
---|
| | /> |
---|
| | <div class="ClickDiv_2 ClickDiv_21" @click="ClickDiv(21)"></div> |
---|
| | <div class="ClickDiv_2 ClickDiv_22" @click="ClickDiv(22)"></div> |
---|
| | <div class="ClickDiv_2 ClickDiv_23" @click="ClickDiv(23)"></div> |
---|
| | <div class="ClickDiv_2 ClickDiv_24" @click="ClickDiv(24)"></div> |
---|
| | <div class="ClickDiv_2 ClickDiv_25" @click="ClickDiv(25)"></div> |
---|
| | <div class="ClickDiv_2 ClickDiv_25" @click="ClickDiv(25)"></div> --> |
---|
| | </div> |
---|
| | </div> |
---|
| | <div class="ComBox RightBox1_3"> |
---|
| | <div class="Box_header">水环境改善提升</div> |
---|
| | <div class="Box_Body SHJGS"> |
---|
| | <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu5.png" alt="" /> |
---|
| | <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu6.png" alt="" /> |
---|
| | <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu4.png" alt="" /> |
---|
| | <img |
---|
| | class="SHJGSImg" |
---|
| | src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu5.png" |
---|
| | alt="" |
---|
| | /> |
---|
| | <img |
---|
| | class="SHJGSImg" |
---|
| | src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu6.png" |
---|
| | alt="" |
---|
| | /> |
---|
| | <img |
---|
| | class="SHJGSImg" |
---|
| | src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu4.png" |
---|
| | alt="" |
---|
| | /> |
---|
| | </div> |
---|
| | </div> |
---|
| | </div> |
---|
| | <Transition name="slideWT"> |
---|
| | <div class="XFK" v-show="AllData.WTShow"> |
---|
| | <img class="XFKImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu3.png" alt="" /> |
---|
| | <img |
---|
| | class="XFKImg" |
---|
| | src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu3.png" |
---|
| | alt="" |
---|
| | /> |
---|
| | </div> |
---|
| | </Transition> |
---|
| | </div> |
---|
| | </template> |
---|
| | |
---|
| | <script setup name="ZHHM"> |
---|
| | import { ref, reactive, toRefs, onMounted, nextTick } from 'vue'; |
---|
| | import * as echarts from 'echarts'; |
---|
| | import { ref, reactive, toRefs, onMounted, nextTick } from "vue"; |
---|
| | import * as echarts from "echarts"; |
---|
| | const AllData = reactive({ |
---|
| | // 问题识别 |
---|
| | WTSBData: [ |
---|
| | { |
---|
| | num: '01', |
---|
| | font: '新区雨水入老城,雨季内涝积水频发', |
---|
| | }, |
---|
| | { |
---|
| | num: '02', |
---|
| | font: '水资源严重短缺,雨水资源利用难度大', |
---|
| | }, |
---|
| | { |
---|
| | num: '03', |
---|
| | font: '排水系统不完善,雨季延河水质不稳定', |
---|
| | }, |
---|
| | { |
---|
| | num: '04', |
---|
| | font: '山体沟道人居环境较差,局部存在安全隐患', |
---|
| | num: "01", |
---|
| | font: "新区雨水入老城,雨季内涝积水频发", |
---|
| | }, |
---|
| | { |
---|
| | num: "02", |
---|
| | font: "水资源严重短缺,雨水资源利用难度大", |
---|
| | }, |
---|
| | { |
---|
| | num: "03", |
---|
| | font: "排水系统不完善,雨季延河水质不稳定", |
---|
| | }, |
---|
| | { |
---|
| | num: "04", |
---|
| | font: "山体沟道人居环境较差,局部存在安全隐患", |
---|
| | }, |
---|
| | // { |
---|
| | // num: '05', |
---|
| | // font: '湖泊面积萎缩,城市海绵体受损', |
---|
| |
---|
| | // 城市排涝体系提升 |
---|
| | SCPLTX_changeData: [ |
---|
| | { |
---|
| | id: 1, |
---|
| | name: '源头减排', |
---|
| | name: "源头减排", |
---|
| | }, |
---|
| | { |
---|
| | id: 2, |
---|
| | name: '过程控制', |
---|
| | name: "过程控制", |
---|
| | }, |
---|
| | { |
---|
| | id: 3, |
---|
| | name: '系统治理', |
---|
| | name: "系统治理", |
---|
| | }, |
---|
| | ], |
---|
| | SCPLTX_changeId: 1, |
---|
| | Charts1: null, |
---|
| | Charts2: null, |
---|
| | Charts3: null, |
---|
| | Echarts3Data: [ |
---|
| | { value: 48, name: '沿河' }, |
---|
| | { value: 22, name: '西川河' }, |
---|
| | { value: 13, name: '王瑶水库' }, |
---|
| | { value: 10, name: '杜甫川河' }, |
---|
| | { value: 7, name: '南川河' }, |
---|
| | { value: 48, name: "沿河" }, |
---|
| | { value: 22, name: "西川河" }, |
---|
| | { value: 13, name: "王瑶水库" }, |
---|
| | { value: 10, name: "杜甫川河" }, |
---|
| | { value: 7, name: "南川河" }, |
---|
| | ], |
---|
| | // 城市排涝保障提升 |
---|
| | SCPLBZ_changeData: [ |
---|
| | { |
---|
| | id: 1, |
---|
| | name: '上栏', |
---|
| | name: "上栏", |
---|
| | }, |
---|
| | { |
---|
| | id: 2, |
---|
| | name: '中滞', |
---|
| | name: "中滞", |
---|
| | }, |
---|
| | { |
---|
| | id: 3, |
---|
| | name: '下排', |
---|
| | name: "下排", |
---|
| | }, |
---|
| | ], |
---|
| | SCPLBZ_changeId: 1, |
---|
| | Charts4: null, |
---|
| | // 问题识别弹窗 |
---|
| | WTShow: false, |
---|
| | }); |
---|
| | const showPanel = ref(true); //面板展开收起 |
---|
| |
---|
| | yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203], |
---|
| | refresh: 1, |
---|
| | }); |
---|
| | const chartData3 = ref({ |
---|
| | XName: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], |
---|
| | XName: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"], |
---|
| | data1: [8, 15, 24, 36, 58, 63, 165, 125, 72, 30, 23, 10], |
---|
| | data: [ |
---|
| | { |
---|
| | coords: [ |
---|
| | ['1', 8], |
---|
| | ['2', 15], |
---|
| | ['3', 24], |
---|
| | ['4', 36], |
---|
| | ['5', 58], |
---|
| | ['6', 63], |
---|
| | ['7', 165], |
---|
| | ['8', 125], |
---|
| | ['9', 72], |
---|
| | ['10', 30], |
---|
| | ['11', 23], |
---|
| | ['12', 10], |
---|
| | ["1", 8], |
---|
| | ["2", 15], |
---|
| | ["3", 24], |
---|
| | ["4", 36], |
---|
| | ["5", 58], |
---|
| | ["6", 63], |
---|
| | ["7", 165], |
---|
| | ["8", 125], |
---|
| | ["9", 72], |
---|
| | ["10", 30], |
---|
| | ["11", 23], |
---|
| | ["12", 10], |
---|
| | ], |
---|
| | }, |
---|
| | ], |
---|
| | refresh1: 1, |
---|
| | }); |
---|
| | const activedname = ref('年际降雨变化'); |
---|
| | const activedname = ref("年际降雨变化"); |
---|
| | const weatherTimer = ref(null); |
---|
| | const yearList = ref([ |
---|
| | { name: '年际降雨变化', value: 1 }, |
---|
| | { name: '年内降雨量', value: 2 }, |
---|
| | { name: "年际降雨变化", value: 1 }, |
---|
| | { name: "年内降雨量", value: 2 }, |
---|
| | ]); |
---|
| | import RainfallEcharts from '@/views/oneMap/Echarts/RainfallEcharts.vue'; //年际降雨变化 |
---|
| | import RainfallLegend from '@/views/oneMap/Echarts/RainfallLegend.vue'; //年内降雨量 |
---|
| | import { onBeforeUnmount } from 'vue'; |
---|
| | import bus from '@/bus'; |
---|
| | import yanAnProjection from '@/assets/yanAnProjection.json'; |
---|
| | import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js'; |
---|
| | import RainfallEcharts from "@/views/oneMap/Echarts/RainfallEcharts.vue"; //年际降雨变化 |
---|
| | import RainfallLegend from "@/views/oneMap/Echarts/RainfallLegend.vue"; //年内降雨量 |
---|
| | import { onBeforeUnmount } from "vue"; |
---|
| | import bus from "@/bus"; |
---|
| | import yanAnProjection from "@/assets/yanAnProjection.json"; |
---|
| | import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js"; |
---|
| | // 面板内容展开收起控制 |
---|
| | const props = defineProps({ |
---|
| | showPanel: { |
---|
| | type: Boolean, |
---|
| |
---|
| | //添加海绵项目 |
---|
| | const addProjectionLayer = () => { |
---|
| | let projectionList = [ |
---|
| | { |
---|
| | layername: 'HMJZYSQ', |
---|
| | data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('建筑'))), |
---|
| | }, |
---|
| | { |
---|
| | layername: 'HMXGYLD', |
---|
| | data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('公园'))), |
---|
| | }, |
---|
| | { |
---|
| | layername: 'HMXDLGC', |
---|
| | data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('道路'))), |
---|
| | }, |
---|
| | { |
---|
| | layername: 'HMXSX', |
---|
| | data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('水系'))), |
---|
| | }, |
---|
| | { |
---|
| | layername: 'GWPCYXF', |
---|
| | data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('管网'))), |
---|
| | layername: "HMJZYSQ", |
---|
| | data: turf.featureCollection( |
---|
| | yanAnProjection.features.filter((i) => |
---|
| | i.properties.projectionType.includes("建筑") |
---|
| | ) |
---|
| | ), |
---|
| | }, |
---|
| | { |
---|
| | layername: "HMXGYLD", |
---|
| | data: turf.featureCollection( |
---|
| | yanAnProjection.features.filter((i) => |
---|
| | i.properties.projectionType.includes("公园") |
---|
| | ) |
---|
| | ), |
---|
| | }, |
---|
| | { |
---|
| | layername: "HMXDLGC", |
---|
| | data: turf.featureCollection( |
---|
| | yanAnProjection.features.filter((i) => |
---|
| | i.properties.projectionType.includes("道路") |
---|
| | ) |
---|
| | ), |
---|
| | }, |
---|
| | { |
---|
| | layername: "HMXSX", |
---|
| | data: turf.featureCollection( |
---|
| | yanAnProjection.features.filter((i) => |
---|
| | i.properties.projectionType.includes("水系") |
---|
| | ) |
---|
| | ), |
---|
| | }, |
---|
| | { |
---|
| | layername: "GWPCYXF", |
---|
| | data: turf.featureCollection( |
---|
| | yanAnProjection.features.filter((i) => |
---|
| | i.properties.projectionType.includes("管网") |
---|
| | ) |
---|
| | ), |
---|
| | }, |
---|
| | // 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other' |
---|
| | ]; |
---|
| | console.log('projectionList---', projectionList); |
---|
| | projectionList.forEach(item => { |
---|
| | bus.emit('setGeoJSON', { json: item.data, key: item.layername }); |
---|
| | console.log("projectionList---", projectionList); |
---|
| | projectionList.forEach((item) => { |
---|
| | bus.emit("setGeoJSON", { json: item.data, key: item.layername }); |
---|
| | }); |
---|
| | //bus.emit('setLegendData', projectionList); |
---|
| | }; |
---|
| | const yearclick = val => { |
---|
| | const yearclick = (val) => { |
---|
| | activedname.value = val.name; |
---|
| | bus.emit('checkRainL', val.value); |
---|
| | bus.emit("checkRainL", val.value); |
---|
| | // bus.emit("checkLandXDM", false); |
---|
| | }; |
---|
| | |
---|
| | const TuChengMoRenClick = num => { |
---|
| | const TuChengMoRenClick = (num) => { |
---|
| | newfiberMapbox.map.easeTo({ |
---|
| | center: [109.488, 36.596], |
---|
| | zoom: 12, |
---|
| | pitch: 55, |
---|
| | }); |
---|
| | // 先清空 |
---|
| | bus.emit('clearAllLayer'); |
---|
| | let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF']; |
---|
| | removedLayer.forEach(layer => { |
---|
| | bus.emit('setLayerVisible', { layername: layer, isCheck: false }); |
---|
| | bus.emit("clearAllLayer"); |
---|
| | let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"]; |
---|
| | removedLayer.forEach((layer) => { |
---|
| | bus.emit("setLayerVisible", { layername: layer, isCheck: false }); |
---|
| | }); |
---|
| | switch (num) { |
---|
| | case '00': |
---|
| | case "00": |
---|
| | // 再显示 |
---|
| | bus.emit('SetLayerShow', ['空间格局']); |
---|
| | bus.emit("SetLayerShow", ["空间格局"]); |
---|
| | break; |
---|
| | case '01': |
---|
| | case "01": |
---|
| | // 再显示 |
---|
| | bus.emit('SetLayerShow', ['雨水分区', '中心城区']); |
---|
| | bus.emit("SetLayerShow", ["雨水分区", "中心城区"]); |
---|
| | break; |
---|
| | case '02': |
---|
| | case "02": |
---|
| | // 再显示 |
---|
| | bus.emit('SetLayerShow', ['河流水系']); |
---|
| | bus.emit("SetLayerShow", ["河流水系"]); |
---|
| | break; |
---|
| | case '03': |
---|
| | case "03": |
---|
| | // 再显示 |
---|
| | bus.emit('SetLayerShow', ['河流水系', '排水分区']); |
---|
| | bus.emit("SetLayerShow", ["河流水系", "排水分区"]); |
---|
| | break; |
---|
| | case '04': |
---|
| | case "04": |
---|
| | // 再显示 |
---|
| | bus.emit('SetLayerShow', ['山体修复']); |
---|
| | bus.emit("SetLayerShow", ["山体修复"]); |
---|
| | break; |
---|
| | } |
---|
| | }; |
---|
| | const ClickDiv = num => { |
---|
| | const ClickDiv = (num) => { |
---|
| | newfiberMapbox.map.easeTo({ |
---|
| | center: [109.488, 36.596], |
---|
| | zoom: 12, |
---|
| | pitch: 55, |
---|
| | }); |
---|
| | // 先清空 |
---|
| | bus.emit('clearAllLayer'); |
---|
| | let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF']; |
---|
| | removedLayer.forEach(layer => { |
---|
| | bus.emit('setLayerVisible', { layername: layer, isCheck: false }); |
---|
| | bus.emit("clearAllLayer"); |
---|
| | let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"]; |
---|
| | removedLayer.forEach((layer) => { |
---|
| | bus.emit("setLayerVisible", { layername: layer, isCheck: false }); |
---|
| | }); |
---|
| | switch (num) { |
---|
| | case 1: |
---|
| | bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: true }); //建筑 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园 |
---|
| | bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系 |
---|
| | bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: true }); //建筑 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园 |
---|
| | bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系 |
---|
| | break; |
---|
| | case 2: |
---|
| | bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: true }); //道路 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园 |
---|
| | bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系 |
---|
| | bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: true }); //道路 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园 |
---|
| | bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系 |
---|
| | break; |
---|
| | case 3: |
---|
| | bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: true }); //公园 |
---|
| | bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系 |
---|
| | bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: true }); //公园 |
---|
| | bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系 |
---|
| | break; |
---|
| | case 4: |
---|
| | bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园 |
---|
| | bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: true }); //管网 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系 |
---|
| | bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园 |
---|
| | bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: true }); //管网 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系 |
---|
| | break; |
---|
| | case 5: |
---|
| | bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园 |
---|
| | bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: true }); //水系 |
---|
| | bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园 |
---|
| | bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: true }); //水系 |
---|
| | break; |
---|
| | case 21: |
---|
| | bus.emit('SetLayerShow', ['防洪河道']); |
---|
| | bus.emit("SetLayerShow", ["防洪河道"]); |
---|
| | break; |
---|
| | case 22: |
---|
| | bus.emit('SetLayerShow', ['河堤加固']); |
---|
| | bus.emit("SetLayerShow", ["河堤加固"]); |
---|
| | break; |
---|
| | case 23: |
---|
| | bus.emit('SetLayerShow', ['河堤治理']); |
---|
| | bus.emit("SetLayerShow", ["河堤治理"]); |
---|
| | break; |
---|
| | case 24: |
---|
| | bus.emit('SetLayerShow', ['河堤疏浚']); |
---|
| | bus.emit("SetLayerShow", ["河堤疏浚"]); |
---|
| | break; |
---|
| | case 25: |
---|
| | break; |
---|
| | } |
---|
| | }; |
---|
| | const SCPLTX_change = item => { |
---|
| | const SCPLTX_change = (item) => { |
---|
| | AllData.SCPLTX_changeId = item.id; |
---|
| | if (AllData.SCPLTX_changeId == 1) { |
---|
| | bus.emit("clearAllLayer"); |
---|
| | let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"]; |
---|
| | removedLayer.forEach((layer) => { |
---|
| | bus.emit("setLayerVisible", { layername: layer, isCheck: true }); |
---|
| | }); |
---|
| | } else if (AllData.SCPLTX_changeId == 2) { |
---|
| | ClearAllProjectMap(); |
---|
| | nextTick(() => { |
---|
| | initEcharts2(); |
---|
| |
---|
| | zoom: 12, |
---|
| | pitch: 55, |
---|
| | }); |
---|
| | // 先清空 |
---|
| | bus.emit('clearAllLayer'); |
---|
| | let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF']; |
---|
| | removedLayer.forEach(layer => { |
---|
| | bus.emit('setLayerVisible', { layername: layer, isCheck: false }); |
---|
| | bus.emit("clearAllLayer"); |
---|
| | let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"]; |
---|
| | removedLayer.forEach((layer) => { |
---|
| | bus.emit("setLayerVisible", { layername: layer, isCheck: false }); |
---|
| | }); |
---|
| | bus.emit('SetLayerShow', ['雨水管网', '污水管网', '雨水分区']); |
---|
| | bus.emit("SetLayerShow", ["雨水管网", "污水管网", "雨水分区"]); |
---|
| | } else { |
---|
| | newfiberMapbox.map.easeTo({ |
---|
| | center: [109.488, 36.596], |
---|
| | zoom: 12, |
---|
| | pitch: 55, |
---|
| | }); |
---|
| | // 先清空 |
---|
| | bus.emit('clearAllLayer'); |
---|
| | let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF']; |
---|
| | removedLayer.forEach(layer => { |
---|
| | bus.emit('setLayerVisible', { layername: layer, isCheck: false }); |
---|
| | bus.emit("clearAllLayer"); |
---|
| | let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"]; |
---|
| | removedLayer.forEach((layer) => { |
---|
| | bus.emit("setLayerVisible", { layername: layer, isCheck: false }); |
---|
| | }); |
---|
| | bus.emit('SetLayerShow', ['河流水系']); |
---|
| | bus.emit("SetLayerShow", ["河流水系"]); |
---|
| | ClearAllProjectMap(); |
---|
| | nextTick(() => { |
---|
| | initEcharts3(); |
---|
| | }); |
---|
| |
---|
| | const initEcharts2 = () => { |
---|
| | if (!!AllData.Charts2) { |
---|
| | AllData.Charts2.dispose(); |
---|
| | } |
---|
| | AllData.Charts2 = echarts.init(document.getElementById('CSPLTXBox2')); |
---|
| | AllData.Charts2 = echarts.init(document.getElementById("CSPLTXBox2")); |
---|
| | // AllData.Charts2.value.off("click"); |
---|
| | AllData.Charts2.setOption({ |
---|
| | color: ['#00F2FF'], |
---|
| | color: ["#00F2FF"], |
---|
| | tooltip: { |
---|
| | trigger: 'axis', |
---|
| | trigger: "axis", |
---|
| | axisPointer: { |
---|
| | type: 'shadow', |
---|
| | type: "shadow", |
---|
| | }, |
---|
| | }, |
---|
| | legend: {}, |
---|
| | grid: { |
---|
| | left: '3%', |
---|
| | right: '4%', |
---|
| | bottom: '3%', |
---|
| | top: '5%', |
---|
| | left: "3%", |
---|
| | right: "4%", |
---|
| | bottom: "3%", |
---|
| | top: "5%", |
---|
| | containLabel: true, |
---|
| | }, |
---|
| | xAxis: { |
---|
| | type: 'value', |
---|
| | type: "value", |
---|
| | max: 120, |
---|
| | axisPointer: { |
---|
| | type: 'shadow', |
---|
| | type: "shadow", |
---|
| | }, |
---|
| | textStyle: { |
---|
| | color: 'aqua', |
---|
| | color: "aqua", |
---|
| | }, |
---|
| | axisLine: { |
---|
| | lineStyle: { |
---|
| | color: 'aqua', |
---|
| | type: 'dashed', |
---|
| | color: "aqua", |
---|
| | type: "dashed", |
---|
| | }, |
---|
| | }, |
---|
| | }, |
---|
| | yAxis: { |
---|
| | type: 'category', |
---|
| | data: ['沿河北岸', '沿河南岸', '水库水面', '南川河西岸', '杜甫川河', '李渠-姚店'], |
---|
| | type: "category", |
---|
| | data: ["沿河北岸", "沿河南岸", "水库水面", "南川河西岸", "杜甫川河", "李渠-姚店"], |
---|
| | |
---|
| | axisLabel: { |
---|
| | formatter: '{value}', |
---|
| | formatter: "{value}", |
---|
| | }, |
---|
| | axisLine: { |
---|
| | lineStyle: { |
---|
| | color: 'white', |
---|
| | color: "white", |
---|
| | }, |
---|
| | }, |
---|
| | splitLine: { |
---|
| | lineStyle: { |
---|
| | // 使用深浅的间隔色 |
---|
| | color: ['#184E5A'], |
---|
| | color: ["#184E5A"], |
---|
| | }, |
---|
| | }, |
---|
| | }, |
---|
| | series: [ |
---|
| | { |
---|
| | type: 'bar', |
---|
| | type: "bar", |
---|
| | data: [90, 78, 50, 42, 68, 61], |
---|
| | barWidth: '12px', |
---|
| | barWidth: "12px", |
---|
| | showBackground: true, |
---|
| | itemStyle: { |
---|
| | // borderRadius: 10, // 统一设置四个角的圆角大小 |
---|
| | borderRadius: [10, 10, 10, 10], //(顺时针左上,右上,右下,左下) |
---|
| |
---|
| | const initEcharts3 = () => { |
---|
| | if (!!AllData.Charts3) { |
---|
| | AllData.Charts3.dispose(); |
---|
| | } |
---|
| | AllData.Charts3 = echarts.init(document.getElementById('CSPLTXBox3')); |
---|
| | AllData.Charts3 = echarts.init(document.getElementById("CSPLTXBox3")); |
---|
| | // AllData.Charts3.value.off("click"); |
---|
| | AllData.Charts3.setOption({ |
---|
| | color: ['#159AFF', '#34FFBD', '#68BEFF', '#BC6DFF', '#F17777'], |
---|
| | color: ["#159AFF", "#34FFBD", "#68BEFF", "#BC6DFF", "#F17777"], |
---|
| | // tooltip: { |
---|
| | // trigger: "item", |
---|
| | // }, |
---|
| | legend: { |
---|
| | type: 'scroll', |
---|
| | orient: 'vertical', |
---|
| | type: "scroll", |
---|
| | orient: "vertical", |
---|
| | right: 10, |
---|
| | top: 20, |
---|
| | bottom: 20, |
---|
| | textStyle: { |
---|
| | color: '#fffd', // 图例文字颜色 |
---|
| | color: "#fffd", // 图例文字颜色 |
---|
| | }, |
---|
| | show: false, |
---|
| | }, |
---|
| | series: [ |
---|
| | { |
---|
| | type: 'pie', |
---|
| | radius: ['70%', '90%'], |
---|
| | center: ['30%', '50%'], |
---|
| | type: "pie", |
---|
| | radius: ["70%", "90%"], |
---|
| | center: ["30%", "50%"], |
---|
| | avoidLabelOverlap: false, |
---|
| | itemStyle: { |
---|
| | borderRadius: 10, |
---|
| | borderColor: '#fff', |
---|
| | borderColor: "#fff", |
---|
| | borderWidth: 0, |
---|
| | }, |
---|
| | label: { |
---|
| | show: false, |
---|
| | position: 'center', |
---|
| | position: "center", |
---|
| | }, |
---|
| | emphasis: { |
---|
| | label: { |
---|
| | show: true, |
---|
| | fontSize: 40, |
---|
| | fontWeight: 'bold', |
---|
| | fontWeight: "bold", |
---|
| | }, |
---|
| | }, |
---|
| | labelLine: { |
---|
| | show: false, |
---|
| |
---|
| | // }; |
---|
| | // bus.emit("publicDialog", data); |
---|
| | // }); |
---|
| | }; |
---|
| | const initEcharts4 = () => { |
---|
| | if (!!AllData.Charts4) { |
---|
| | AllData.Charts4.dispose(); |
---|
| | } |
---|
| | AllData.Charts4 = echarts.init(document.getElementById("CSPLBZTS")); |
---|
| | AllData.Charts4.setOption({ |
---|
| | tooltip: { |
---|
| | trigger: "axis", |
---|
| | axisPointer: { |
---|
| | type: "shadow", |
---|
| | }, |
---|
| | }, |
---|
| | tooltip: { |
---|
| | trigger: "axis", |
---|
| | formatter: (params) => { |
---|
| | // console.log(params); |
---|
| | var relVal = "" + params[0].name; |
---|
| | for (var i = 0, l = params.length; i < l; i++) { |
---|
| | if (params[i].seriesName) { |
---|
| | let unit = params[i].seriesName == "年降雨量" ? "mm" : "天"; |
---|
| | relVal += |
---|
| | "<br/>" + |
---|
| | params[i].marker + |
---|
| | params[i].seriesName + |
---|
| | " " + |
---|
| | params[i].value + |
---|
| | unit; |
---|
| | } |
---|
| | } |
---|
| | return relVal; |
---|
| | }, |
---|
| | }, |
---|
| | grid: { |
---|
| | left: "3%", |
---|
| | right: "4%", |
---|
| | bottom: "3%", |
---|
| | top: "10%", |
---|
| | containLabel: true, |
---|
| | }, |
---|
| | xAxis: { |
---|
| | type: "category", |
---|
| | data: ["防洪河道", "河堤加固", "河堤治理", "河堤疏浚", "截洪渠"], |
---|
| | |
---|
| | axisLine: { |
---|
| | lineStyle: { |
---|
| | color: "white", |
---|
| | }, |
---|
| | }, |
---|
| | }, |
---|
| | yAxis: { |
---|
| | type: "value", |
---|
| | axisLabel: { |
---|
| | formatter: "{value}Km", |
---|
| | }, |
---|
| | max: 60, |
---|
| | axisPointer: { |
---|
| | type: "shadow", |
---|
| | }, |
---|
| | axisLine: { |
---|
| | lineStyle: { |
---|
| | color: "aqua", |
---|
| | type: "dashed", |
---|
| | }, |
---|
| | }, |
---|
| | splitLine: { |
---|
| | lineStyle: { |
---|
| | // 使用深浅的间隔色 |
---|
| | color: ["#184E5A"], |
---|
| | }, |
---|
| | }, |
---|
| | }, |
---|
| | series: [ |
---|
| | { |
---|
| | type: "bar", |
---|
| | showBackground: true, |
---|
| | barWidth: "12px", |
---|
| | itemStyle: { |
---|
| | borderRadius: [10, 10, 0, 0], //(顺时针左上,右上,右下,左下) |
---|
| | }, |
---|
| | backgroundStyle: { |
---|
| | // color: "red", |
---|
| | shadowBlur: 10, |
---|
| | borderRadius: [10, 10, 0, 0], //(顺时针左上,右上,右下,左下) |
---|
| | }, |
---|
| | data: [ |
---|
| | { |
---|
| | value: 22, |
---|
| | itemStyle: { |
---|
| | color: "#FE7285", |
---|
| | shadowColor: "#FE7285", |
---|
| | borderType: "dashed", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | value: 33, |
---|
| | itemStyle: { |
---|
| | color: "#1F93FF", |
---|
| | shadowColor: "#1F93FF", |
---|
| | borderType: "dashed", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | value: 14, |
---|
| | itemStyle: { |
---|
| | color: "#31E1AD", |
---|
| | shadowColor: "#31E1AD", |
---|
| | borderType: "dashed", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | value: 33, |
---|
| | itemStyle: { |
---|
| | color: "#E4CD61", |
---|
| | shadowColor: "#E4CD61", |
---|
| | borderType: "dashed", |
---|
| | }, |
---|
| | }, |
---|
| | { |
---|
| | value: 39, |
---|
| | itemStyle: { |
---|
| | color: "#12F9FF", |
---|
| | shadowColor: "#12F9FF", |
---|
| | borderType: "dashed", |
---|
| | }, |
---|
| | }, |
---|
| | ], |
---|
| | }, |
---|
| | ], |
---|
| | }); |
---|
| | AllData.Charts4.on("click", (param) => { |
---|
| | console.log(param); |
---|
| | let data = [ |
---|
| | { |
---|
| | name: "防洪河道", |
---|
| | num: 21, |
---|
| | }, |
---|
| | { |
---|
| | name: "河堤加固", |
---|
| | num: 22, |
---|
| | }, |
---|
| | { |
---|
| | name: "河堤治理", |
---|
| | num: 23, |
---|
| | }, |
---|
| | { |
---|
| | name: "河堤疏浚", |
---|
| | num: 24, |
---|
| | }, |
---|
| | ]; |
---|
| | data.forEach((element) => { |
---|
| | if (element.name == param.name) { |
---|
| | ClickDiv(element.num); |
---|
| | } |
---|
| | }); |
---|
| | }); |
---|
| | }; |
---|
| | // 清除地图上所有的海绵项目 |
---|
| | const ClearAllProjectMap = () => { |
---|
| | bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园 |
---|
| | bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网 |
---|
| | bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系 |
---|
| | bus.emit("setLayerVisible", { layername: "HMJZYSQ", isCheck: false }); //建筑 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXDLGC", isCheck: false }); //道路 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXGYLD", isCheck: false }); //公园 |
---|
| | bus.emit("setLayerVisible", { layername: "GWPCYXF", isCheck: false }); //管网 |
---|
| | bus.emit("setLayerVisible", { layername: "HMXSX", isCheck: false }); //水系 |
---|
| | }; |
---|
| | onMounted(() => { |
---|
| | addProjectionLayer(); |
---|
| | newfiberMapbox.map.easeTo({ |
---|
| | center: [109.488, 36.596], |
---|
| | zoom: 13, |
---|
| | pitch: 55, |
---|
| | }); |
---|
| | initEcharts4(); |
---|
| | window.addEventListener("resize", initEcharts4); |
---|
| | //mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea); |
---|
| | }); |
---|
| | |
---|
| | onBeforeUnmount(() => { |
---|
| |
---|
| | center: [109.488, 36.596], |
---|
| | zoom: 12, |
---|
| | pitch: 55, |
---|
| | }); |
---|
| | bus.emit('SetLayerShow', ['蓝色地图']); |
---|
| | bus.emit("SetLayerShow", ["蓝色地图"]); |
---|
| | // 先清空 |
---|
| | bus.emit('clearAllLayer'); |
---|
| | let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF']; |
---|
| | removedLayer.forEach(layer => { |
---|
| | bus.emit('setLayerVisible', { layername: layer, isCheck: false }); |
---|
| | bus.emit("clearAllLayer"); |
---|
| | let removedLayer = ["HMJZYSQ", "HMXGYLD", "HMXDLGC", "HMXSX", "GWPCYXF"]; |
---|
| | removedLayer.forEach((layer) => { |
---|
| | bus.emit("setLayerVisible", { layername: layer, isCheck: false }); |
---|
| | }); |
---|
| | // mapBoxVectorLayer.removeByIds(['yanAnPaiShuiArea', 'yanAnPaiShuiArea__label']); |
---|
| | }); |
---|
| | </script> |
---|
| |
---|
| | height: calc(100% - 98px); |
---|
| | position: absolute; |
---|
| | left: 10px; |
---|
| | top: 70px; |
---|
| | background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%); |
---|
| | background: linear-gradient( |
---|
| | 0deg, |
---|
| | rgba(0, 43, 67, 0.8) 0%, |
---|
| | rgba(0, 69, 108, 0.8) 100% |
---|
| | ); |
---|
| | border-radius: 6px; |
---|
| | border: 1px solid #47eef3; |
---|
| | box-sizing: border-box; |
---|
| | padding: 10px; |
---|
| |
---|
| | height: 348px; |
---|
| | .KJGJ_List1 { |
---|
| | width: 100%; |
---|
| | height: 36px; |
---|
| | background: linear-gradient(0deg, rgba(0, 180, 255, 0.2) 0%, rgba(0, 180, 255, 0) 100%); |
---|
| | background: linear-gradient( |
---|
| | 0deg, |
---|
| | rgba(0, 180, 255, 0.2) 0%, |
---|
| | rgba(0, 180, 255, 0) 100% |
---|
| | ); |
---|
| | margin-top: 10px; |
---|
| | display: flex; |
---|
| | .KJGJ_List1_List { |
---|
| | width: 50%; |
---|
| |
---|
| | color: #d1dff7; |
---|
| | text-align: center; |
---|
| | float: left; |
---|
| | box-sizing: border-box; |
---|
| | background: url('@/assets/images/Sponge_screen/HaiMian/HaiMian_hezi.png') no-repeat center; |
---|
| | background: url("@/assets/images/Sponge_screen/HaiMian/HaiMian_hezi.png") |
---|
| | no-repeat center; |
---|
| | } |
---|
| | .KJGJ_List2_WFont { |
---|
| | float: left; |
---|
| | font-family: Source Han Sans CN; |
---|
| |
---|
| | |
---|
| | .WTSBList { |
---|
| | width: 100%; |
---|
| | height: 44px; |
---|
| | background: url('@/assets/images/Sponge_screen/HaiMian/HaiMian_ListBack.png'); |
---|
| | background: url("@/assets/images/Sponge_screen/HaiMian/HaiMian_ListBack.png"); |
---|
| | margin-top: 9px; |
---|
| | cursor: pointer; |
---|
| | |
---|
| | .WTSBList_num { |
---|
| |
---|
| | height: calc(100% - 98px); |
---|
| | position: absolute; |
---|
| | right: 10px; |
---|
| | top: 70px; |
---|
| | background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 69, 108, 0.8) 100%); |
---|
| | background: linear-gradient( |
---|
| | 0deg, |
---|
| | rgba(0, 43, 67, 0.8) 0%, |
---|
| | rgba(0, 69, 108, 0.8) 100% |
---|
| | ); |
---|
| | border-radius: 6px; |
---|
| | border: 1px solid #47eef3; |
---|
| | box-sizing: border-box; |
---|
| | padding: 10px; |
---|
| |
---|
| | // font-size: 14px; |
---|
| | // color: #ebfeff; |
---|
| | // } |
---|
| | // } |
---|
| | #CSPLBZTS { |
---|
| | width: 100%; |
---|
| | height: 100%; |
---|
| | } |
---|
| | .SCPBZXImg { |
---|
| | width: 100%; |
---|
| | height: calc(100% - 10px); |
---|
| | margin-top: 5px; |
---|
| |
---|
| | box-sizing: border-box; |
---|
| | .Box_header { |
---|
| | width: 100%; |
---|
| | height: 43px; |
---|
| | background: url('@/assets/images/Sponge_screen/Box_HeaderBackground.png') no-repeat center; |
---|
| | background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat |
---|
| | center; |
---|
| | background-size: cover; |
---|
| | font-family: PangMenZhengDao; |
---|
| | font-weight: 400; |
---|
| | font-size: 23px; |
---|
| |
---|
| | |
|