disaster_web3/src/view/result/Wdisaster.vue

<template>
  <!-- 水灾灾害信息 -->
  <div class="waterdisaster"> 
    <div class="asides_content baogaoshng">
              <div class="jc_content tablecolor">
                <div class="jc_padding">
                  <div class="re_tele">灾害信息展示
                    <div class="btn"  @click="downloadImg('')">生成报告</div>
                  </div >
                  <div class="jiancd">
                  <div class="je_left duijc">
                  <div class="xian2 btncolor tablefocus  tablebk">
                    <!--  -->
                    <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"
                      >
                      <template v-slot:empty>
                        <p>暂无数据</p>
                    </template>
                      <el-table-column prop="chname" label="监测点"  />
                      <el-table-column
                          v-for="(header, index) in dynamicHeaders"
                          :key="index"
                          :prop="header.prop"
                          :label="header.label" >
                          <template #default="scope">
                            <span>{{Math.abs(Number(scope.row[header.prop]).toFixed(2))}}</span>
                          </template>
                        </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">{{warnin2}}<span>个</span></div> -->
                    <div class="zongjili img2">{{warnin}}<span>个</span></div>
                  </div>
                  </div>
                </div>
                  <!-- 监测点 -->
                  <div class="L_aside ">
                    <div class="hedse jccolor">
                      <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>{{ jcname }}
                </div>
                <div class="echart echartxian">
                <div id="line2" style="width: 100%; height: 0.9375rem;"></div></div>
                </div>
                </div>
              </div>
             </div>
  </div>

   </template>
 <script setup>
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 bt4 from "@/assets/img/Group1376.png"
import bt1 from "@/assets/img/Group1377.png"
import bt3 from "@/assets/img/Group1395.png"
import bt2 from "@/assets/img/Group1396.png"
let emit = defineEmits(['Formatlistinit'])
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("监测点");
let href=ref();
let steps=ref();
const dynamicHeaders = ref([

]);
const tableData2 = ref([
]);
//下载报告
function downloadImg(url, fileName) {
  if(aid.value==null||aid.value==''||aid.value==undefined){
    ElMessage.error('项目不存在');
  }else{
  let href="/TransServlet?channelNo=service&clientToken=e47b87eec69545559d1e81e56626da68&userId=5f06c8bc77234f969d13e160b54c27e3&"
  const x = new window.XMLHttpRequest();
  x.open('GET', url, true);
  x.responseType = 'blob';
  x.onload = () => {
    const url = window.URL.createObjectURL(x.response);
    const a = document.createElement('a');
    a.href =import.meta.env.VITE_BASE_URL+href+'aid='+aid.value+"&transCode=D20013&"+'step='+steps.value;
    console.log( a.href );
    a.download = fileName;
    a.click();
  };
  x.send();
}
}
// 批量数据
const handleDelete=(event)=>{

 jcname.value=event.chname;

  currentrow1.value=true;
//let arr=[];
  const params = {
    transCode: "D10019",
    aid: aid.value,
    chname: event.chname,
  };
  request(params)
    .then((res) => {
      series.value=[];
      steptimes.value=[];
      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){
              
            }
            let num=res.rows[i].data[k].val;
            arr.push(Math.abs(parseFloat(num).toFixed(2)));
          }
          console.log(res.rows[i].code);
          if(res.rows[i].code=='Temperature'){
            res.rows[i].code='温度'
              }else if(res.rows[i].code=='Pressure'){
                res.rows[i].code='压强'
              }else if(res.rows[i].code=='CO'){
                res.rows[i].code= '一氧化碳'
              }else if(res.rows[i].code=='CO2'){
                res.rows[i].code= '二氧化碳'
              }else if(res.rows[i].code=='HCL'){
                res.rows[i].code= '氯化氢'
              }else if(res.rows[i].code=='NO2'){
                res.rows[i].code= '二氧化氮'
              }else if(res.rows[i].code=='SO2'){
                res.rows[i].code= '二氧化硫'
              }else if(res.rows[i].code=='H2S'){
                res.rows[i].code= '硫化氢'
              }else if(res.rows[i].code=='Height'){
                res.rows[i].code= '水位'
              }else if(res.rows[i].code=='Flow'){
                res.rows[i].code= '流量'
              }else{

              }
              
          // 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
          })
        }
      }
     // console.log( series.value);
      lineChart();
    }) .catch((err) => {
      ElMessage.error(err.returnMsg);
    });

}
onMounted(() => {
})
 //父组件调用的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) {
   steps.value=Number(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", "(Pa)"],
            ["CO", "(ppm)"],
            ["CO2", "(%)"],
            ["H2S", "(%)"],
            ["HCL", "(ppm)"],
            ["NO2", "(ppm)"],
            ["SO2", "(ppm)"],
            ["Flow", "(m³/s)"],
            ["Height", "(m)"],
        ]);
        newMap.forEach((value, key) => {
          if ( key  == res.codes[i].code ) {
            if(key=='Temperature'){
                  key='温度'
              }else if(key=='Pressure'){
                key='压强'
              }else if(key=='CO'){
                key= '一氧化碳'
              }else if(key=='CO2'){
                key= '二氧化碳'
              }else if(key=='HCL'){
                key= '氯化氢'
              }else if(key=='NO2'){
                key= '二氧化氮'
              }else if(key=='SO2'){
                key= '二氧化硫'
              }else if(key=='H2S'){
                key= '硫化氢'
              }else if(key=='Height'){
                key= '水位'
              }else if(key=='Flow'){
                key= '流量'
              }else{

              }
            res.codes[i].code = key +"\n"+ value;
          }
        });
        headertable.push(
          { prop:'v'+num, label: res.codes[i].code },
        )
      }
    emit('Formatlistinit',res.codes); 
       dynamicHeaders.value=headertable;
      let warning=[];//一级警告
      let warning2=[];//二级警告
      let warning3=[];//突水发生
      let warning4=[];//安全区域
      if(props.classradio=='Water'){
          for (let j = 0; j < res.vals.length; j++) {
            if(Math.abs(Number(res.vals[j].v1))>1.5){
              res.vals[j].state=3;
              warning.push(res.vals[j].v1)
            }else{
              res.vals[j].state=0;
              warning4.push(res.vals[j].v1);
            }
          }
        }else{
          //v1 温度、v2压强  job.value.codes
          for (let j = 0; j < res.vals.length; j++) {
          
            if(Math.abs(Number(res.vals[j].v1))>40){
              res.vals[j].state=3;
              warning.push(res.vals[j].v1)
            }else{
              res.vals[j].state=0;
              warning4.push(res.vals[j].v1);
            }
            //TODO 未完结
          }
        }
 
     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',
    formatter: function (params) {
            var res = '';
            for (var i = 0, l = params.length; i < l; i++) {
                res += '<div style="text-align: left;">'+'<span style="float: left;">'+params[i].marker+'</span><span   style=" padding-right: 12px;">' + params[i].seriesName + ' : </span><span style="float: right;">' + params[i].value + '</span></div>';
            }
            return res;
        }

  },
  // legend: {
  //   data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  // },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top:'30%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    axisLabel: {
            color: '#fff' // 设置 X 轴字体颜色为红色
        },
    boundaryGap: false,
    data:steptimes.value,
  },
  yAxis: {
    type: 'value',
    axisLabel: {
            color: '#fff' // 设置 X 轴字体颜色为红色
        },
  },
  series: series.value
};
option && myChart.setOption(option,true)
  // myChart.setOption(option);
   window.onresize = function() {
    // 让图表自适应大小
    myChart.resize();
};
 
 

// // 监听窗口大小变化
// myChart.dispatchAction({ //设置激活第一个选项
//      type: 'showTip',
//      seriesIndex: 0,
//      dataIndex: 0
//    });
}
watch(
  () => [props.count],
  (newVal, oldVal) => {
    console.log("监听到了",newVal)
    getdata(newVal[0]);
  },
  { deep: true }
); //深度监视
   defineExpose({getinit});
 </script>