| |
---|
| | <span class="tableHeaderList tableList3">设防阈值</span> |
---|
| | <span class="tableHeaderList tableList4">告警时间</span> |
---|
| | </div> |
---|
| | |
---|
| | <Vue3SeamlessScroll :list="FXJCData" :singleHeight="34" :singleWaitTime="1500" :hover="true" class="tableBody"> |
---|
| | <Vue3SeamlessScroll |
---|
| | :list="FXJCData" |
---|
| | :singleHeight="34" |
---|
| | :singleWaitTime="1500" |
---|
| | :hover="true" |
---|
| | class="tableBody" |
---|
| | > |
---|
| | <div class="tableBodyList" v-for="item in FXJCData"> |
---|
| | <span class="tableBodyList_span1">{{ item.zb }}</span> |
---|
| | <span class="tableBodyList_span2"> {{ item.zt }}</span> |
---|
| | <span class="tableBodyList_span3">{{ item.szzt }}</span> |
---|
| |
---|
| | <span style="margin-left: 5px">{{ item.name }}</span> |
---|
| | </div> |
---|
| | <div |
---|
| | class="tabItem_two" |
---|
| | :style="{ color: item.value == 30 ? '#00F294FF' : item.value == 9 ? '#00E7FCFF' : '#FFC30EFF' }" |
---|
| | :style="{ |
---|
| | color: |
---|
| | item.value == 30 |
---|
| | ? '#00F294FF' |
---|
| | : item.value == 9 |
---|
| | ? '#00E7FCFF' |
---|
| | : '#FFC30EFF', |
---|
| | }" |
---|
| | > |
---|
| | {{ item.value }} |
---|
| | </div> |
---|
| | </div> |
---|
| |
---|
| | <div class="problemText"> |
---|
| | <div class="problemTextTop"> |
---|
| | <div class="problemContent">{{ item.remark }}</div> |
---|
| | <div class="problemContent">{{ item.address }}</div> |
---|
| | <div class="problemContent">{{ item.person }}{{ ' ' }}{{ item.phone }}</div> |
---|
| | <div class="problemContent"> |
---|
| | {{ item.person }}{{ " " }}{{ item.phone }} |
---|
| | </div> |
---|
| | </div> |
---|
| | <div class="problemTextBottom"> |
---|
| | <div class="problemContent">上报:{{ item.startTime }}</div> |
---|
| | <div class="problemContent">截止:{{ item.endTime }}</div> |
---|
| |
---|
| | </div> |
---|
| | </div> |
---|
| | </template> |
---|
| | <script setup> |
---|
| | import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'; |
---|
| | import WarningEcharts from '@/views/oneMap/Echarts/WarningEcharts.vue'; |
---|
| | import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'; |
---|
| | import bengzhantingzhi from '@/assets/images/fhpl/bengzhantingzhi.png'; |
---|
| | import bengzhanyunxing from '@/assets/images/fhpl/bengzhanyunxing.png'; |
---|
| | |
---|
| | import clz from '@/assets/images/fhpl/clz.png'; // |
---|
| | import wcl from '@/assets/images/fhpl/wcl.png'; // |
---|
| | import ycl from '@/assets/images/fhpl/ycl.png'; // |
---|
| | import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue"; |
---|
| | import WarningEcharts from "@/views/oneMap/Echarts/WarningEcharts.vue"; |
---|
| | import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; |
---|
| | import bengzhantingzhi from "@/assets/images/fhpl/bengzhantingzhi.png"; |
---|
| | import bengzhanyunxing from "@/assets/images/fhpl/bengzhanyunxing.png"; |
---|
| | |
---|
| | import clz from "@/assets/images/fhpl/clz.png"; // |
---|
| | import wcl from "@/assets/images/fhpl/wcl.png"; // |
---|
| | import ycl from "@/assets/images/fhpl/ycl.png"; // |
---|
| | |
---|
| | const list = [ |
---|
| | { |
---|
| | name: '1#泵', |
---|
| | name: "1#泵", |
---|
| | status: 1, |
---|
| | }, |
---|
| | { |
---|
| | name: '2#泵', |
---|
| | name: "2#泵", |
---|
| | status: 0, |
---|
| | }, |
---|
| | { |
---|
| | name: '3#泵', |
---|
| | name: "3#泵", |
---|
| | status: 0, |
---|
| | }, |
---|
| | |
---|
| | { |
---|
| | name: '4#泵', |
---|
| | name: "4#泵", |
---|
| | status: 1, |
---|
| | }, |
---|
| | ]; |
---|
| | const problemList = ref([ |
---|
| | { |
---|
| | scale: 'Ⅳ', |
---|
| | remark: '污水井盖丢失', |
---|
| | address: '小河沟', |
---|
| | person: '张三', |
---|
| | phone: '13277980987', |
---|
| | startTime: '2022-02-27 10:00', |
---|
| | endTime: '2022-02-28 10:00', |
---|
| | class: 'highProblem', |
---|
| | }, |
---|
| | { |
---|
| | scale: 'Ⅲ', |
---|
| | remark: '污水井盖丢失', |
---|
| | address: '小河沟', |
---|
| | person: '张三', |
---|
| | phone: '13277980987', |
---|
| | startTime: '2022-02-27 10:00', |
---|
| | endTime: '2022-02-28 10:00', |
---|
| | class: 'middleProblem', |
---|
| | }, |
---|
| | { |
---|
| | scale: 'Ⅱ', |
---|
| | remark: '污水井盖丢失', |
---|
| | address: '小河沟', |
---|
| | person: '张三', |
---|
| | phone: '13277980987', |
---|
| | startTime: '2022-02-27 10:00', |
---|
| | endTime: '2022-02-28 10:00', |
---|
| | class: 'lowProblem', |
---|
| | scale: "Ⅳ", |
---|
| | remark: "污水井盖丢失", |
---|
| | address: "小河沟", |
---|
| | person: "张三", |
---|
| | phone: "13277980987", |
---|
| | startTime: "2022-02-27 10:00", |
---|
| | endTime: "2022-02-28 10:00", |
---|
| | class: "highProblem", |
---|
| | }, |
---|
| | { |
---|
| | scale: "Ⅲ", |
---|
| | remark: "污水井盖丢失", |
---|
| | address: "小河沟", |
---|
| | person: "张三", |
---|
| | phone: "13277980987", |
---|
| | startTime: "2022-02-27 10:00", |
---|
| | endTime: "2022-02-28 10:00", |
---|
| | class: "middleProblem", |
---|
| | }, |
---|
| | { |
---|
| | scale: "Ⅱ", |
---|
| | remark: "污水井盖丢失", |
---|
| | address: "小河沟", |
---|
| | person: "张三", |
---|
| | phone: "13277980987", |
---|
| | startTime: "2022-02-27 10:00", |
---|
| | endTime: "2022-02-28 10:00", |
---|
| | class: "lowProblem", |
---|
| | }, |
---|
| | ]); |
---|
| | const ListBox = ref([ |
---|
| | { name: '水雨情', value: 1 }, |
---|
| | { name: '险情', value: 2 }, |
---|
| | { name: '工情', value: 3 }, |
---|
| | { name: "水雨情", value: 1 }, |
---|
| | { name: "险情", value: 2 }, |
---|
| | { name: "工情", value: 3 }, |
---|
| | ]); |
---|
| | const ListBoxJq = ref([ |
---|
| | { name: '值守上报', value: 1 }, |
---|
| | { name: '公众电话', value: 2 }, |
---|
| | { name: "值守上报", value: 1 }, |
---|
| | { name: "公众电话", value: 2 }, |
---|
| | ]); |
---|
| | const activedname = ref('水雨情'); |
---|
| | const activedJq = ref('值守上报'); |
---|
| | const jqdtname = ref('已处理'); |
---|
| | const activedname = ref("水雨情"); |
---|
| | const activedJq = ref("值守上报"); |
---|
| | const jqdtname = ref("已处理"); |
---|
| | |
---|
| | const jqdtList = ref([ |
---|
| | { name: '已处理', value: 30, Imgurl: ycl }, |
---|
| | { name: '未处理', value: 9, Imgurl: wcl }, |
---|
| | { name: '处理中', value: 61, Imgurl: clz }, |
---|
| | { name: "已处理", value: 30, Imgurl: ycl }, |
---|
| | { name: "未处理", value: 9, Imgurl: wcl }, |
---|
| | { name: "处理中", value: 61, Imgurl: clz }, |
---|
| | ]); |
---|
| | |
---|
| | // 点击事件 |
---|
| | function Listclick(val) { |
---|
| | console.log(val, 'val'); |
---|
| | console.log(val, "val"); |
---|
| | activedname.value = val.name; |
---|
| | console.log(activedname.value, ' activedname.value'); |
---|
| | console.log(activedname.value, " activedname.value"); |
---|
| | } |
---|
| | |
---|
| | function jqdtclick(val) { |
---|
| | jqdtname.value = val.name; |
---|
| |
---|
| | |
---|
| | const activeIndex = ref(0); |
---|
| | const munuList = [ |
---|
| | { |
---|
| | name: '管网(29)', |
---|
| | }, |
---|
| | { |
---|
| | name: '积水点(16)', |
---|
| | }, |
---|
| | { |
---|
| | name: '排口(24)', |
---|
| | name: "管网(29)", |
---|
| | }, |
---|
| | { |
---|
| | name: "积水点(16)", |
---|
| | }, |
---|
| | { |
---|
| | name: "排口(24)", |
---|
| | }, |
---|
| | ]; |
---|
| | const chartData1 = ref({ |
---|
| | xAxis: ['1号点', '2号点', '3号点', '4号点', '5号点', '6号点', '7号点', '8号点', '9号点'], |
---|
| | xAxis: [ |
---|
| | "1号点", |
---|
| | "2号点", |
---|
| | "3号点", |
---|
| | "4号点", |
---|
| | "5号点", |
---|
| | "6号点", |
---|
| | "7号点", |
---|
| | "8号点", |
---|
| | "9号点", |
---|
| | ], |
---|
| | yAxis: [1.1, 1.3, 2, 1.25, 1.1, 3, 3.5, 1.3, 3.8, 1.2, 2, 1], //最高流量 |
---|
| | yAxis2: [0.1, 0.2, 0.3, 0.2, 0.1, 0.4, 0.5, 0.23, 0.6, 0.1, 0.2, 0.1], //最高水位 |
---|
| | refresh: 1, |
---|
| | }); |
---|
| | const FXJCData = ref([ |
---|
| | { |
---|
| | zb: '延河西路管网', |
---|
| | sz: '04-15 14:23:12', |
---|
| | szzt: '300mm', |
---|
| | zt: '水深:450mm', |
---|
| | }, |
---|
| | { |
---|
| | zb: '二道街管网', |
---|
| | sz: '04-15 14:23:13', |
---|
| | szzt: '300mm', |
---|
| | zt: '水深:345mm', |
---|
| | }, |
---|
| | { |
---|
| | zb: '王家坪旧址门口', |
---|
| | sz: '04-15 14:23:14', |
---|
| | szzt: '30mm', |
---|
| | zt: '水深:55mm', |
---|
| | }, |
---|
| | { |
---|
| | zb: '东三巷排口', |
---|
| | sz: '04-15 14:23:15', |
---|
| | szzt: '10m³/h', |
---|
| | zt: '流量:43m³/h', |
---|
| | zb: "延河西路管网", |
---|
| | sz: "04-15 14:23:12", |
---|
| | szzt: "300mm", |
---|
| | zt: "水深:450mm", |
---|
| | }, |
---|
| | { |
---|
| | zb: "二道街管网", |
---|
| | sz: "04-15 14:23:13", |
---|
| | szzt: "300mm", |
---|
| | zt: "水深:345mm", |
---|
| | }, |
---|
| | { |
---|
| | zb: "王家坪旧址门口", |
---|
| | sz: "04-15 14:23:14", |
---|
| | szzt: "30mm", |
---|
| | zt: "水深:55mm", |
---|
| | }, |
---|
| | { |
---|
| | zb: "东三巷排口", |
---|
| | sz: "04-15 14:23:15", |
---|
| | szzt: "10m³/h", |
---|
| | zt: "流量:43m³/h", |
---|
| | }, |
---|
| | ]); |
---|
| | </script> |
---|
| | |
---|
| |
---|
| | height: calc(100% - 60px); |
---|
| | .button_box_list { |
---|
| | width: 100%; |
---|
| | height: 40px; |
---|
| | background: url('@/assets/images/fhpl/bj_img.png') no-repeat; |
---|
| | background: url("@/assets/images/fhpl/bj_img.png") no-repeat; |
---|
| | background-size: 100% 100%; |
---|
| | margin-top: 10px; |
---|
| | padding: 0 10px; |
---|
| | .button_box { |
---|
| |
---|
| | margin-right: 9px; |
---|
| | cursor: pointer; |
---|
| | } |
---|
| | .activeClass { |
---|
| | background: url('@/assets/images/fhpl/Select_img.png') no-repeat; |
---|
| | background: url("@/assets/images/fhpl/Select_img.png") no-repeat; |
---|
| | background-size: 100% 100%; |
---|
| | // background: red; |
---|
| | color: #fdffff; |
---|
| | } |
---|
| |
---|
| | .Warning_Box_tp { |
---|
| | margin: 10px auto; |
---|
| | width: 420px; |
---|
| | height: calc(100% - 65px); |
---|
| | background: url('@/assets/images/fhpl/sqjca.png') no-repeat; |
---|
| | background: url("@/assets/images/fhpl/sqjca.png") no-repeat; |
---|
| | background-size: 100% 100%; |
---|
| | } |
---|
| | .Warning_Box_gq { |
---|
| | margin: 5px auto; |
---|
| |
---|
| | } |
---|
| | .info { |
---|
| | color: #fff; |
---|
| | height: 32px; |
---|
| | background: linear-gradient(0deg, rgba(26, 109, 255, 0.2) 0%, rgba(40, 193, 250, 0.2) 100%); |
---|
| | background: linear-gradient( |
---|
| | 0deg, |
---|
| | rgba(26, 109, 255, 0.2) 0%, |
---|
| | rgba(40, 193, 250, 0.2) 100% |
---|
| | ); |
---|
| | border-radius: 3px; |
---|
| | padding: 0 20px; |
---|
| | margin-top: 15px; |
---|
| | line-height: 30px; |
---|
| |
---|
| | height: 100%; |
---|
| | border-radius: 6px; |
---|
| | text-align: center; |
---|
| | cursor: pointer; |
---|
| | font-size: 16px; |
---|
| | // border: 1px solid; |
---|
| | &:nth-of-type(1) { |
---|
| | background: linear-gradient(0deg, #8e1e1e 0%, #420606 100%); |
---|
| | border-image: linear-gradient(0deg, #fd4d62, #ac241a) 10 10; |
---|
| |
---|
| | background: linear-gradient(0deg, #00496f 0%, #001c2a 100%); |
---|
| | border: 1px solid #2cfce9; |
---|
| | font-family: Source Han Sans CN; |
---|
| | font-weight: 400; |
---|
| | font-size: 14px; |
---|
| | font-size: 16px; |
---|
| | color: #d3f6ff; |
---|
| | .tabItem_one { |
---|
| | // background: red; |
---|
| | width: 65%; |
---|
| |
---|
| | .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; |
---|
| |
---|
| | |
|