|
|
@@ -12,39 +12,42 @@
|
|
|
<div class="xian2 btncolor tablefocus tablebk">
|
|
|
<!-- -->
|
|
|
<el-table
|
|
|
- :data="tableData"
|
|
|
- style="width: 100%"
|
|
|
- :row-class-name="tableRowClassName"
|
|
|
- :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
|
|
|
- :height="tableHeight"
|
|
|
- class="custom-table"
|
|
|
- @row-click="handleDelete($event)"
|
|
|
- >
|
|
|
- <el-table-column prop="date" label="监测点" />
|
|
|
- <el-table-column prop="name" label="水位（m）" />
|
|
|
- <el-table-column prop="name" label="流量（m³/s）" />
|
|
|
- <el-table-column prop="state" label="预警" >
|
|
|
- <template #default="scope">
|
|
|
- <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
|
|
|
- <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
|
|
|
- <el-image v-if="scope.row.state=='2'" style="height: 100%" :src="bt3" fit="contain"></el-image>
|
|
|
- <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ :data="tableData2"
|
|
|
+ style="width: 100%"
|
|
|
+ :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
|
|
|
+ @row-click="handleDelete($event)"
|
|
|
+ :highlight-current-row="currentrow1"
|
|
|
+ :max-height="tableHeight"
|
|
|
+ >
|
|
|
+ <el-table-column prop="chname" label="监测点" />
|
|
|
+ <el-table-column
|
|
|
+ v-for="(header, index) in dynamicHeaders"
|
|
|
+ :key="index"
|
|
|
+ :prop="header.prop"
|
|
|
+ :label="header.label">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="state" label="预警" >
|
|
|
+ <template #default="scope">
|
|
|
+ <el-image v-if="scope.row.state=='0'" style="height: 100%" :src="bt1" fit="contain"></el-image>
|
|
|
+ <el-image v-if="scope.row.state=='1'" style="height: 100%" :src="bt2" fit="contain"></el-image>
|
|
|
+ <el-image v-if="scope.row.state=='2'" style="height: 100%" :src="bt3" fit="contain"></el-image>
|
|
|
+ <el-image v-if="scope.row.state=='3'" style="height: 100%" :src="bt4" fit="contain"></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="je_right duijc">
|
|
|
<div class="">
|
|
|
- <div class="zongjili img1">1<span>个</span></div>
|
|
|
- <div class="zongjili img2">12<span>个</span></div>
|
|
|
+ <div class="zongjili img1">{{warnin}}<span>个</span></div>
|
|
|
+ <div class="zongjili img2">{{warnin2}}<span>个</span></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 监测点 -->
|
|
|
<div class="L_aside ">
|
|
|
<div class="hedse jccolor">
|
|
|
- <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
|
|
|
+ <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>{{ jcname }}
|
|
|
</div>
|
|
|
<div class="echart echartxian">
|
|
|
<div id="line2" style="width: 100%; height: 1.25rem;"></div></div>
|
|
|
@@ -60,161 +63,268 @@ import { ref, onMounted, reactive, } from "vue";
|
|
|
import {RouterView,RouterLink } from "vue-router"
|
|
|
import { request, uploadFile } from "@/utils/request";
|
|
|
import * as echarts from 'echarts'
|
|
|
+import { createFireControl } from "@/control/fireControl.js";
|
|
|
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
|
|
|
-import bt1 from "@/assets/img/Group1376.png"
|
|
|
-import bt2 from "@/assets/img/Group1377.png"
|
|
|
+import bt4 from "@/assets/img/Group1376.png"
|
|
|
+import bt1 from "@/assets/img/Group1377.png"
|
|
|
import bt3 from "@/assets/img/Group1395.png"
|
|
|
-import bt4 from "@/assets/img/Group1396.png"
|
|
|
-let tableHeight=ref(114)
|
|
|
-const tableData = ref([
|
|
|
-{
|
|
|
- date: '检测点',
|
|
|
- name: '1',
|
|
|
- state: '1',
|
|
|
- city: 'Los Angeles',
|
|
|
- address: 'No. 189, Grove St, Los Angeles',
|
|
|
- zip: 'CA 90036',
|
|
|
- tag: 'Home',
|
|
|
-},
|
|
|
-{
|
|
|
- date: '检测点',
|
|
|
- name: '1',
|
|
|
- state: '2',
|
|
|
- city: 'Los Angeles',
|
|
|
- address: 'No. 189, Grove St, Los Angeles',
|
|
|
- zip: 'CA 90036',
|
|
|
- tag: 'Office',
|
|
|
+import bt2 from "@/assets/img/Group1396.png"
|
|
|
+const props = defineProps({
|
|
|
+ count: {
|
|
|
+ type: Number,
|
|
|
+
|
|
|
},
|
|
|
+});
|
|
|
+let tableHeight=ref(114)
|
|
|
+let aid=ref();
|
|
|
+let currentrow1=ref(false);
|
|
|
+let classradio=ref();
|
|
|
+let warnin=ref(0);
|
|
|
+let warnin2=ref(0);
|
|
|
+let steptimes = ref([]);
|
|
|
+let series = ref([]);
|
|
|
+let jcname=ref("监测点");
|
|
|
+const dynamicHeaders = ref([
|
|
|
|
|
|
]);
|
|
|
-const handleDelete=()=>{
|
|
|
+const tableData2 = ref([
|
|
|
+]);
|
|
|
+// 批量数据
|
|
|
+const handleDelete=(event)=>{
|
|
|
+ jcname.value=event.chname;
|
|
|
+
|
|
|
+ series.value=[];
|
|
|
+ steptimes.value=[];
|
|
|
+ currentrow1.value=true;
|
|
|
+//let arr=[];
|
|
|
+ const params = {
|
|
|
+ transCode: "D10019",
|
|
|
+ aid: aid.value,
|
|
|
+ chname: event.chname,
|
|
|
+ };
|
|
|
+ request(params)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.returnCode == "000000000") {
|
|
|
+ for (let j = 0; j < res.steptimes.length; j++) {
|
|
|
+ steptimes.value.push(Object.values(res.steptimes[j]));
|
|
|
+ }
|
|
|
+ for (let i = 0; i < res.rows.length; i++) {
|
|
|
+ let arr=[];
|
|
|
+ for (let k = 0; k < res.rows[i].data.length; k++) {
|
|
|
+ if(res.rows[i].data[k].val<0){
|
|
|
+
|
|
|
+ }
|
|
|
+ arr.push(res.rows[i].data[k].val);
|
|
|
+ }
|
|
|
+ // var arr = Array.from(Object.values(res.rows[i].data),x=>x);
|
|
|
+ series.value.push({
|
|
|
+ name:res.rows[i].code,
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ smooth: true,
|
|
|
+ data:arr,//res.rows[i].data
|
|
|
+ itemStyle:{
|
|
|
+ normal:{
|
|
|
+ color: {
|
|
|
+ type: 'linear',
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset:1, color: '#ACD6FF ' // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset:0.7, color: '#105CF0 '// 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset:0.66, color: '#FF7A00 '// 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset:0.2, color: '#FF0000 '// 100% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+
|
|
|
+ global: false // 缺省为 false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 3, // 设置线条宽度
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ lineChart();
|
|
|
+ }) .catch((err) => {
|
|
|
+ ElMessage.error(err.returnMsg);
|
|
|
+ });
|
|
|
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
})
|
|
|
-const lineChart=()=>{
|
|
|
-let myChart = echarts.init(document.getElementById('line2'));
|
|
|
-let option = {
|
|
|
- tooltip: {
|
|
|
- trigger: 'axis',
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: '0',
|
|
|
- right: '0',
|
|
|
- bottom: '10',
|
|
|
- top:'20',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: 'category',
|
|
|
- // boundaryGap: false,
|
|
|
- data: [0,10,20,30,40],
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- type: 'solid',
|
|
|
- color: '#E6E7EC',//左边线的颜色
|
|
|
- width:'1'//坐标线的宽度
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- textStyle: {
|
|
|
- color: '#B8CED6',//坐标值得具体的颜色
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ],
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: 'value',
|
|
|
- minInterval:1,
|
|
|
- max: 700,
|
|
|
- splitLine: {
|
|
|
- show: true,
|
|
|
- lineStyle:{
|
|
|
- type:'dashed'
|
|
|
- }
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- type: 'solid',
|
|
|
- color: '#E6E7EC',//左边线的颜色
|
|
|
- width:1 //坐标线的宽度
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- type: 'value',
|
|
|
- // color: '#ACD6FF',
|
|
|
- textStyle: {
|
|
|
- // color: 'red',//坐标值得具体的颜色
|
|
|
- color: function (value, index) {
|
|
|
- if(value >=300){
|
|
|
- return '#CE0000 '
|
|
|
- } else{
|
|
|
- return '#ACD6FF'
|
|
|
+ //父组件调用的init方法
|
|
|
+ function getinit(id,radio) {
|
|
|
+ aid.value=id;
|
|
|
+ console.log(id)
|
|
|
+ console.log(1111551)
|
|
|
+ classradio.value=radio;
|
|
|
+ getdata(props.count);
|
|
|
+ lineChart();
|
|
|
+
|
|
|
+ }
|
|
|
+ const fcon = createFireControl();
|
|
|
+//监测点数据获取
|
|
|
+ function getdata(step) {
|
|
|
+
|
|
|
+const params = {
|
|
|
+ transCode: "D10018",
|
|
|
+ aid: aid.value,
|
|
|
+ step:step,
|
|
|
+};
|
|
|
+console.log( aid.value)
|
|
|
+request(params)
|
|
|
+ .then((res) => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.returnCode == "000000000") {
|
|
|
+ let headertable=[];
|
|
|
+ for (let i = 0; i < res.codes.length; i++) {
|
|
|
+ let num=i+1
|
|
|
+ let newMap = new Map([
|
|
|
+ ["Temperature", "(℃)"],
|
|
|
+ ["Pressure", "(kg/s)"],
|
|
|
+ ["Pressure", "(kg/s)"],
|
|
|
+ ["CO2", "(%)"],
|
|
|
+ ["CO2", "(%)"],
|
|
|
+ ["H2S", "(%)"],
|
|
|
+ ["Flow", "(Pa)"],
|
|
|
+ ["Height", "(m)"],
|
|
|
+ ]);
|
|
|
+ newMap.forEach((value, key) => {
|
|
|
+ if ( key == res.codes[i].code ) {
|
|
|
+ res.codes[i].code = key + value;
|
|
|
}
|
|
|
- // return value >= 120 ? '#CE0000 ': '#ACD6FF';
|
|
|
+ });
|
|
|
+ headertable.push(
|
|
|
+ { prop:'v'+num, label: res.codes[i].code },
|
|
|
+ )
|
|
|
+ }
|
|
|
+
|
|
|
+ dynamicHeaders.value=headertable;
|
|
|
+ let warning=[];//一级警告
|
|
|
+ let warning2=[];//二级警告
|
|
|
+ for (let j = 0; j < res.vals.length; j++) {
|
|
|
+ if(res.vals[j].v1<=1&&res.vals[j].v1<2){
|
|
|
+ res.vals[j].state=0;
|
|
|
+ }else{
|
|
|
+ if(res.vals[j].v1 >= 2&&res.vals[j].v1< 10){
|
|
|
+ res.vals[j].state=1;
|
|
|
+ }else if(res.vals[j].v1>=10&&res.vals[j].v1<120){
|
|
|
+ res.vals[j].state=2;
|
|
|
+ warning2.push(res.vals[j].v1)
|
|
|
+ }else if(res.vals[j].v1>160){
|
|
|
+ warning.push(res.vals[j].v1)
|
|
|
+ res.vals[j].state=3;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
+ }
|
|
|
+
|
|
|
+ warnin2.value=warning2.length;
|
|
|
+ warnin.value=warning.length;
|
|
|
+
|
|
|
+ tableData2.value=res.vals;
|
|
|
+ }
|
|
|
+ }) .catch((err) => {
|
|
|
+ ElMessage.error(err.returnMsg);
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+const lineChart=()=>{
|
|
|
+ // console.log(series.value);
|
|
|
+ let myChart;
|
|
|
+ myChart = echarts.init(document.getElementById('line2'));
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '0',
|
|
|
+ right: '0',
|
|
|
+ bottom: '10',
|
|
|
+ top:'20',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: 'category',
|
|
|
+ data:steptimes.value,
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'solid',
|
|
|
+ color: '#E6E7EC',//左边线的颜色
|
|
|
+ width:'1'//坐标线的宽度
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ textStyle: {
|
|
|
+ color: '#B8CED6',//坐标值得具体的颜色
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- ],
|
|
|
- color: 'rgba(37, 190, 171, 1)',
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: '',
|
|
|
- type: 'line',
|
|
|
- showSymbol: false,
|
|
|
- smooth: true,
|
|
|
- data: [0,60,120,240,360],
|
|
|
- itemStyle:{
|
|
|
- normal:{
|
|
|
- color: {
|
|
|
- type: 'linear',
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset:1, color: '#ACD6FF ' // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset:0.7, color: '#105CF0 '// 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset:0.66, color: '#FF7A00 '// 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset:0.2, color: '#FF0000 '// 100% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset:0, color: '#CE0000' // 0% 处的颜色FF7A00
|
|
|
- },
|
|
|
-
|
|
|
- ],
|
|
|
-
|
|
|
- global: false // 缺省为 false
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: 'value',
|
|
|
+ minInterval:1,
|
|
|
+ max: 700,
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ type:'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'solid',
|
|
|
+ color: '#E6E7EC',//左边线的颜色
|
|
|
+ width:1 //坐标线的宽度
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ type: 'value',
|
|
|
+ textStyle: {
|
|
|
+ color: function (value, index) {
|
|
|
+ if(value >=300){
|
|
|
+ return '#CE0000 '
|
|
|
+ } else{
|
|
|
+ return '#ACD6FF'
|
|
|
+ }
|
|
|
+ // return value >= 120 ? '#CE0000 ': '#ACD6FF';
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- width: 3, // 设置线条宽度
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- myChart.setOption(option);
|
|
|
- window.onresize = function() {
|
|
|
- // 让图表自适应大小
|
|
|
- myChart.resize();
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ color: 'rgba(37, 190, 171, 1)',
|
|
|
+ series:series.value
|
|
|
+ }
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.onresize = function() {
|
|
|
+ // 让图表自适应大小
|
|
|
+ myChart.resize();
|
|
|
};
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
|
|
|
// // 监听窗口大小变化
|
|
|
// myChart.dispatchAction({ //设置激活第一个选项
|
|
|
@@ -223,5 +333,13 @@ let option = {
|
|
|
// dataIndex: 0
|
|
|
// });
|
|
|
}
|
|
|
- defineExpose({lineChart});
|
|
|
+watch(
|
|
|
+ () => [props.count],
|
|
|
+ (newVal, oldVal) => {
|
|
|
+ console.log("监听到了",newVal)
|
|
|
+ getdata(newVal[0]);
|
|
|
+ },
|
|
|
+ { deep: true }
|
|
|
+); //深度监视
|
|
|
+ defineExpose({getinit});
|
|
|
</script>
|
