disaster_web3/src/view/index/first-left.vue

<template>
  <!-- 底部导航栏 -->
  <div class="rightfl"  v-show="firstshow" >
    

    <div class="rightfl_hei">
    <el-aside width="1.7708rem" class="L_aside L_aside1 asideg asidegbg leftbgimg1" v-show="firstshow">
      <div class="demo-collapse jiance asideg1 jc_header collapseeion jianstyle">
        <el-collapse accordion v-model="activeNames">
          <el-collapse-item name="1" class="imgneon">
            <template #title>
              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
              灾害信息展示
            </template>
            <div class="rg_content">
              <div class="rg-padding">
                <div style="display: flex;" >
                  <span class="gaojing">告警：</span>
                <el-switch 
                v-model="valueswitch"
                inline-prompt
                @change="swutchfun($event)"
                style="--el-switch-on-color:#ff4949; --el-switch-off-color: #525050"
                active-text="是"
                inactive-text="否"
              />
            </div>
                <div class="he_pading color1  wusele">
              <el-form-item label="物理量:" v-if="props.classradio == 'Fire'||props.classradio == 'Gass'||props.classradio == 'Gass1'">
                <el-select 
                
                 :disabled="disabledshow"
                  v-model="formInline.region"
                  @change="regionchange($event)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in strResultFormatlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <div class="woter" v-else>
                <span>物理量：</span>
                <span>水位</span>
              </div>
            </div>
              <div class="zongji">
                <!-- <div class="zongjili img1">{{ warnin2 }}<span>个</span></div> -->
                <div class="zongjili img2">{{ warnin}}<span>个</span></div>
                <div class="re_tele1">
            <div class="btn"  @click="downloadImg('')">生成报告</div></div>
              </div>
              <div class="asides_content">
                <div class="jc_content tablecolor">
                  <div class="jc_padding">
                    <div class="xian2 btncolor tablefocus ">
                      <!--  -->
                      <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        :header-cell-style="{ background: 'rgba(13, 22, 57, 0) ' }"
                        @row-click="handleDelete($event)"
                        :highlight-current-row="currentrow1" 
                        :max-height="tableHeight"
                        :fit="true"
                      >
                      <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="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>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 监测点 -->
              <div>
                <div class="hedse">
              <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>{{ jcname }}
            </div>
            <div class="zongji2" v-show="noneshow">
                <div class="Firetile" ><span>温度（℃）：</span><span class="text">{{ c}}</span></div>
                <div class="Firetile"><span>压力（Pa）：</span><span class="text2">{{ pa }}</span></div>
              </div>
            <div class="echart">
            <div id="line" style="width:1.66649rem;rem;height:.9375rem;"></div></div>
            <div class="zongji"  v-if="props.classradio=='Water'" >
                <div class="zongjili img3">{{ heightnum }}<span>m</span></div>
                <div class="zongjili img4">
                  <p class="jcshijian">{{datetime}}</p>
                  <p style="text-align: center;font-size: 15px">{{ maxtime.steptime }}</p></div>
              </div>
            </div>
            </div>
          </div>
            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-aside>
      <!-- 动画 -->
    <el-aside width="1.7708rem" class="L_aside L_aside1 asideg asidegbg leftbgimg1" v-show="firstshow">
      <div class="demo-collapse jiance asideg1 jc_header collapseeion jianstyle">
        <el-collapse accordion v-model="activeNames1" class="bganimation">
          <el-collapse-item name="2" class="imgneon">
            <template #title>
              <el-icon class="iconimg Frame3" fit="contain"></el-icon>
              动画展示
            </template>
            <div class="rg_content">
              <div class="rg-padding">
            
              <div class="animation_s">
              <el-slider
                :max="endtime"
                :min="1"
                v-model="count"
                @change="sliderchange"
              >
              </el-slider>
              <!-- <el-progress type="line" :percentage="percentage" :color="customColor" :stroke-width="4"/> -->
              <div class="tanniu">
                <div><el-image :src="t1" fit="contain" @click="Prev" ></el-image></div>
                <div v-show="suspendshow"><el-image :src="t2" fit="contain"  @click="play(500)" ></el-image></div>
                <div v-show="playshow"><el-image :src="t3" fit="contain"  @click="play(500)" ></el-image></div>
                <div><el-image :src="t4" fit="contain" @click="increment"></el-image></div>
                
              </div>
            </div>
          
            
            </div>
          </div>
            <!-- <div class="mgsnoe" style="height: 200px"></div> -->
          </el-collapse-item>
        </el-collapse>
      </div>
      </el-aside>
    </div>

  </div>
  <div class="timedlgheader"  v-show="firstshow">
    <div class="timedlg" v-show="timeshow">
      <!-- <div class="closeimg" @click="timeshow = false"><el-image :src="closeimg" fit="contain"
         style="margin-top: -10px;"></el-image></div> -->
    <!-- <h4 class="teletdq">指定时间：</h4> -->
    <div class="resultime">
        <div class="time">{{ timeline }}</div>
      </div>
    </div>
    <!-- <el-dialog
      width="200px"
      v-model="timeshow"
      :modal="false"
      ref="dialogRef"
      :close-on-click-modal="false"
      :append-to-body="true"
      draggable
      modal-class="summary-dlg time-dlg"
    
      class=" shubiao log_cla22 tianjia asideg asidegbg leftbgimg1"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 class="teletdq" :id="titleId" :class="titleClass">当前步数的时间：</h4>
        </div>
      </template>
      <div class="resultime">
        <div class="time">{{ timeline }}</div>
      </div>
     
    </el-dialog> -->
 
  <div class="setiao" v-if="valueswitch==true">
    <div class="itemcolor" v-for="(item,index) in itemcolorlist" :key="index" >
      <div class="yansekuang" :style="{ backgroundColor: item.color }"></div>
      <span>{{item.name}} </span>
    </div>
    <!-- <ul>
      <li>
        <div ></div>
      </li>
    </ul> -->
  </div>
</div>
  <htmldialog ref="htmldialogref" :classradio="props.classradio" :isshow='isshow' @funidshow="funidshow"/>
</template>
<script setup>
import { ref, onMounted, reactive, } from "vue";
import { RouterView, RouterLink } from "vue-router"
import { request, uploadFile } from "@/utils/request";
import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import * as echarts from 'echarts'
import { createFireControl } from "@/control/fireControl.js";
import { timestampToTime, timescount } from "@/js/lindex.js";
import { vtkmodel } from "@/control/vtkModel.js";
import vtkDataArray from "@kitware/vtk.js/Common/Core/DataArray.js";
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"
import closeimg from "@/assets/img/colse.png";
import t1 from "@/assets/img/t1.png";
import t2 from "@/assets/img/t2.png";
import t3 from "@/assets/img/t3.png";
import t4 from "@/assets/img/t4.png";
import htmldialog from "./htmldialog.vue"
import VFitColumns from 'v-fit-columns';
import emitter from "@/utils/emitter";
let firstshow = ref(false);
let timeshow=ref(true);
let valueswitch=ref(false);
let disabledshow=ref(false);
let timeline = ref("2024-03-2");
let activeNames = ref(["1"]);
let activeNames1=ref(["2"])
let tableHeight = ref(130);
let playshow=ref(true);
let suspendshow=ref(false);
let showfalse=ref(false);
let c=ref("0");
let htmldialogref=ref();
let pa=ref("30s");
const isstop = ref(false);
let noneshow=ref(false);
const strResultFormatlist = ref([]);
let count=ref(1);
let starttime = ref(1);
let endtime = ref(60);
let timenum = ref(2);
let oldtime = ref('2024-04-25 18:07:08');
let time = ref();
let aid = ref();
let newcount = ref(0);
let timing = ref(null);
let timing3 = ref(null);
let timing2 = ref(null);
let currentrow1 = ref(false);
let steptimes = ref([]);
let series = ref([]);
let heightnum=ref("0");
let maxtime=ref({
  steptime:"03:02"
});

let datetime=ref();
let jcname=ref("监测点");
let danwei=ref();
let state=ref();
let warnin=ref(0);
let warnin2=ref(0);
const min = ref(0);
const max = ref(1);
let selelist=ref();
let jgSelectPointId=ref(0);
let selobj=ref([]);
let isshow=ref(false);
let maxindex=ref();
let wuliname=ref([]);
const dynamicHeaders = ref([

]);
const props = defineProps({
  
  classradio: {
  type: String,
  // default: '',activeIndex
},
})
let itemcolorlist=ref([
  {
  name:'安全区 ',
  color:'#008003'
},
// {
//   name:'感知区 ',
//   color:'#6eaa00'
// },
// {
//   name:'二级警告 ',
//   color:'#d48f00'
// },
{
  name:'警告 ',
  color:'#ff0000'
},
])
let classradio=ref();
const job = ref({
  jid: 0, //	任务ID
  aid: 0, //	事故ID
  starttime: "", //	结束时间
  endtime: "", //	开始时间
  state: "", //	状态
  faildes: "", //	失败原因
  dt: "", //	时间步长
  dx: "", //	空间步长
  reportstep: "", //	输出步长
  interactionstep: "", //	交互步长
  acctime: "", //	事故开始时间
  totaltime: "", //	模拟时长
  coids: "", //	物理属性ID逗号分隔
  cocodes: "", //物理属性code逗号分隔
});
const formInline = ref({
  region: "Temperature",
});

const tableData =ref( [
  // {
  //   date: '检测点',
  //   name: '1',
  //   state: '1',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   v1: 'CA 90036',
  //   v2: 'Home',
  // },
  // {
  //   date: '检测点',
  //   name: '1',
  //   state: '2',
  //   city: 'Los Angeles',
  //   address: 'No. 189, Grove St, Los Angeles',
  //   v1: 'CA 90036',
  //   v2: 'Office',
  // },


])
let myChart;
onMounted(() => {
 // valueswitch.value=false;
  lineChart();
//   window.onresize = function() {
//     // 让图表自适应大小
//     myChart.resize();

// };
fcon.step=count.value;
});
const fcon = createFireControl();
// 检测点的结果获取
// 父组件获取的方法初始化 
const indexinit= (id,radio)=>{
  aid.value=id;
//  classradio.value=radio;
  // fcon.step=count.value;
  // getMonitor();
  // vtkmodel.clearModeAddJg();
  // vtkGridRead()
if(props.classradio=='Fire'||props.classradio=='Gass'||props.classradio=='Gass1'){
  formInline.value.region="Temperature";
}else if(props.classradio=='Water'){
  formInline.value.region="Height";
}
myChart.clear();
 readJob();
}
function regionchange(val) {
  let newMap = new Map([
            ["Temperature", "(℃)"],
            ["Pressure", "(Pa)"],
            ["CO", "(ppm)"],
            ["CO2", "(%)"],
            ["H2S", "(%)"],
            ["HCL", "(ppm)"],
            ["NO2", "(ppm)"],
            ["SO2", "(ppm)"],
            ["Flow", "(Pa)"],
            ["Height", "(m)"],
            ["CH4", "(ppm)"],
  ]);
  newMap.forEach((value, key) => {
    // console.log(key, value);
    if (key == val) {
      danwei.value = key + value;
    }
  });
  //getMonitor();
  vtkShow();
}
//获取任务信息
async function readJob() {
const params = {
  transCode: "D10017",
  aid: aid.value,
};
await request(params)
  .then((res) => {
    if (res.returnCode == "000000000") {
      //成功
      datetime.value=res.endtime.slice(0,10);
      if(res.state=='1'){
      //  vtkmodel.clearModeAddJg(); //隐藏模版显示结果
      job.value = res;
       getMonitor();
      vtkmodel.clearModeAddJg();
      reddate(new Date());
      vtkGridRead();
      jgSelect1();
      firstshow.value=true;
      endtime.value= Number(res.totaltime)/Number(res.reportstep);
      oldtime.value=acctime;
      console.log( oldtime.value)
    }else if(res.state=='-1'){
      firstshow.value=false;
      // ElMessage({
      //   message: " 求解失败",
      //   type: 'error',
      // });
    }else if(res.state=='0'){
      firstshow.value=false;
      // ElMessage({ message: "求解未完成",  type: 'error',
      // });
    }
    } else {
      ElMessage({
        message: res.returnMsg,
        type: "error",
      });
    }
  })
  .catch((err) => {
    if(err.returnMsg=="任务不存在！"){
      monitor.value=false;
      ElMessage({
        message: "未求解",
        type: 'error',
      });
         }
  });
}
//监测点数据获取
 function  renderheader(h, { column, $index }) {
  // console.log(column.label)
    //   return h("div", {}, [
    //     h("div", {}, column.label.split(",")[0]),
    //     h("div", {}, column.label.split(",")[1]),
    //   ]);
     }
//查询物理属性
const wuliget = () => {

const params = {
    transCode: 'D10013',
}
request(params)
    .then((res) => {
      console.log(res.rows)
      wuliname.value=[];
      res.rows.forEach((value, key) => {
        let obj={
          name:value.name,
          code:value.code,
        }
        wuliname.value.push(obj);
      })
    
    })
    .catch((err) => {
        ElMessage.error(err.returnMsg)
    })
}
async  function getMonitor() {
  let cocode;
  let name;
  let v=1;
  newtime();
 // wuliget();
  const params = {
    transCode: "D10018",
    aid: aid.value,
    step: fcon.step,
  };
  request(params)
    .then((res) => {
      if (res.returnCode == "000000000") {
        strResultFormatlist.value = [];
        let headertable=[];
        //let s=0;
        // dynamicHeaders.value=res.codes;
        console.log(res);
        for (let i = 0; i < res.codes.length; i++) {
           cocode = res.codes[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)"],
            ["CH4", "(ppm)"],
          ]);
        //   console.log(cocode);
        //   if(cocode.code=='Temperature'){
        //   let obj={
        //   name:'温度',
        //   code:'Temperature',
        // }
        // wuliname.value.push(obj);
        //   }else if(cocode.code=='Pressure'){
        //     let obj={
        //   name:'压强',
        //   code:'Pressure',
        // }
        //   wuliname.value.push(obj);
        //   }else if(cocode.code=='Flow'){
        //     let obj={
        //   name:'流量',
        //   code:'Flow',
        // }
        //   wuliname.value.push(obj);
        //   }else if(cocode.code=='Height'){
        //     let obj={
        //   name:'水位',
        //   code:'Height',
        // }
        // wuliname.value.push(obj);
        //   }
        // let arr=[... wuliname.value];
        // console.log(arr);
        // arr.forEach((value, key) => {
        //    if(value.code  == res.codes[i].code ){
        //     name = value.name;
        //    }
        //   })
          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=='CH4'){
                key= '甲烷'
              }
              else if(key=='Flow'){
                key= '流量'
              }else{

              }
             // res.codes[i].code = key+value;
             name =  key+'\n'+value
            
            }
          });
          strResultFormatlist.value.push({
            id: i,
            name: name,
            value: cocode.code,
          
          });
          headertable.push(
            { prop:'v'+num, label:name},
          )
        }
        
         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 未完结
          }
        }
        
        
        // for (let j = 0; j < res.vals.length; j++) {
        //   console.log( res.vals[j]);
        //    if(Number(res.vals[j].v1)==0&&Number(res.vals[j].v1)<=0.1){
        //     res.vals[j].state=0;
        //     warning4.push(res.vals[j].v1);
        //   }else if(Number(res.vals[j].v1)>0.1&&Number(res.vals[j].v1)<=0.5){
        //     res.vals[j].state=1;
        //     warning3.push(res.vals[j].v1);
        //   }else if(Number(res.vals[j].v1)>0.5&&Number(res.vals[j].v1)<=1){
        //     res.vals[j].state=2;
        //     warning2.push(res.vals[j].v1);
        //   }else if(Number(res.vals[j].v1)>1.5){
        //     res.vals[j].state=3;
        //     warning.push(res.vals[j].v1);
        //   }
        // }
       warnin2.value=warning2.length;
       warnin.value=warning.length;
       console.log(res.vals);
        tableData.value=res.vals;
      }
    }) .catch((err) => {
      tableData.value=[];
      ElMessage.error(err.returnMsg);
    });
  }
//回到上一页
function Prev() {
  currentrow1.value=false;
  isstop.value = false;
  count.value--;
  fcon.step = count.value;
  newcount.value = count.value;
  newtime();
}
// 时间计算
const newtime = () => {
  timeshow.value=true;
  time.value = null;
  oldtime.value= sessionStorage.getItem('acctime');
  console.log(oldtime.value);
  time.value = (new Date(oldtime.value).getTime()) / 1000;
  if ( count.value == 2) {
    let time2 = (count.value - 1) * 60 + time.value;
    timeline.value = timescount(time2);
  } else {
    let time2 = (count.value) * 60 + time.value;
    timeline.value = timescount(time2);
  }


};
//  下一页
function increment() {
  currentrow1.value=false;
  isstop.value = false;
  if (count.value == endtime.value) {
    return;
  }
  count.value++;
  newcount.value = count.value;
  fcon.step = count.value;
  newtime();
}
// 播放暂停
const play =(time)=>{
  showfalse.value=!showfalse.value;
  currentrow1.value=false;
  if(showfalse.value){
    suspendshow.value=true;
    playshow.value=false;
    isstop.value = true;//播放
  const sleep = (timeout = time) =>
    new Promise((resolve, reject) => {
      setTimeout(resolve, timeout);
    });
  let timer = async (timeout) => {
    while (count.value < endtime.value && isstop.value) {
      if (isstop.value == true) {
        await sleep(time);
        count.value++;
        fcon.step = count.value;
        newcount.value = count.value;
        newtime();
      }
    }
  };

  timer(time); 
  }else{
    isstop.value = false;//暂停
    playshow.value=true;
    suspendshow.value=false;
}
}
function sliderchange(val) {
  suspendshow.value=false;
    playshow.value=true;
  isstop.value = false;
  newcount.value = count.value;
  fcon.step = count.value;

}
const tableRowClassName=()=>{

}
//下载报告
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';
  ElMessage.success('正在下载报告');
  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='+fcon.step;
    console.log( a.href );
    a.download = fileName;
    a.click();
  };
  x.send();
}
}
//获取最大值的下标
function firstOccurrenceOfMax(arr) {
    var max = arr[0];
    //声明了个变量 保存下标值
    var index = 0;
    for (var i = 0; i < arr.length; i++) {
        if (max < arr[i]) {
            max = arr[i];
            index = i;
        }
    }
    maxindex.value=index
    return index;
}

// 随机颜色
const randomColor=()=>{
            var letters = '0123456789ABCDEF';
            var color = '#';
            do {
                for (var i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
            } while (color === '#FFFFFF' || color === '#000000');
          console.log(color);
            return color;
        }
// 批量数据
const handleDelete=(event)=>{
 jcname.value=event.chname;

  currentrow1.value=true;
  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;
            ///console.log(parseFloat(num).toFixed(2))
           // console.log(num.toFixed(2));
            arr.push(Math.abs(parseFloat(num).toFixed(2)));
          }
          // var arr = Array.from(Object.values(res.rows[i].data),x=>x);
          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{

              }
          series.value.push({
         name:res.rows[i].code,
         type: 'line',
         showSymbol: false,
          smooth: true,
          data:arr,//res.rows[i].data
          })
          console.log( arr);
       }
        firstOccurrenceOfMax(series.value[0].data)
        const max = Math.max(...series.value[0].data);
        maxtime.value= res.steptimes[ maxindex.value];
        console.log(maxtime.value);
        heightnum.value=max;
      }
      lineChart();
    }) .catch((err) => {
      ElMessage.error(err.returnMsg);
    });

}
emitter.on('handleSelect',(data)=>{
  firstshow.value=false;
 
  });
const funidshow=(val)=>{
  isshow.value=val;
}

// 获取点的数据
function jgSelect1(event) {
 // console.log(event.pageX);
  timing2.value = setInterval(() => {
    //定时器

    if (jgSelectPointId.value != vtkmodel.selectJgPointId) {
    // console.log("pointid",vtkmodel.selectJgPointId);//选择的点数据
      //获取点对应的Scalar
      isshow.value=true;
      htmldialogref.value.X=Number(vtkmodel.epageX)+'px';
      htmldialogref.value.Y=Number(vtkmodel.epageY)+'px';
      
       jgSelectPointId.value = vtkmodel.selectJgPointId;
       
      selobj.value = [];
      for (const key of fcon.scalar.keys()) {
        selobj.value.push({
          name: key,
          value: fcon.scalar.get(key)[vtkmodel.selectJgPointId],
        });
      }
      console.log(selobj.value);
      // console.log(window.style.left )
     // msgval.value = selobj.value;
     htmldialogref.value.getdatahtml(selobj.value);
 }
  }, 1000);
}
const linedata=()=>{

}
const lineChart=()=>{
  // console.log(series.value);
  var chartDom = document.getElementById('line');
 myChart = echarts.init(chartDom);
//  myChart = echarts.init(document.getElementById('line'));
 
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;
        }
    // textstyle:{
    //   width:600,
    // align:'left'
    // },
   

  },
  // legend: {
  //   x: 'left',
  // },
  grid: {
    left: '2%',
    right: '2%',
    top:'15%',
    bottom: '3%',
    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);
   window.onresize = function() {
    // 让图表自适应大小
    myChart.resize();
};
}
function reddate(date) {
  //当前时间
  const timestamp = date.getTime();
  // newtime.value = timestampToTime(timestamp);
  const accstamp = Date.parse(job.value.acctime);
  var timeDifference = parseInt((timestamp - accstamp) / 1000);
  fcon.stepsum = parseInt(job.value.totaltime) / parseInt(job.value.reportstep);
  if (timeDifference < parseInt(job.value.totaltime)) {
    //最长时间范围
    fcon.step = parseInt(timeDifference / parseInt(job.value.reportstep));
  } else {
    fcon.step = fcon.stepsum;
  }
  count.value = fcon.step;
  newcount.value = count.value;
}
function velocityRead() {
  // return;
  // clearInterval(arrowtime.value);
   fcon
    .getVelocityByStep(fcon.step)
    .then((result) => {
        vtkmodel.addArrow(fcon.velocitys);
        // arrowtimeStart();
    })
    .catch((err) => {
      console.log(err);
    });
}
function getMinMax(scalars) {
  // console.log("getMinMax:",scalars);
  min.value = Math.min(...scalars);
  max.value =  Math.max(...scalars);
  // for (let index = 0; index <= scalars.length; index++) {
  //   let scalar = scalars[index];
  //   if (min.value > scalar) {
  //     min.value = scalar;
  //   }
  //   if (max.value < scalar) {
  //     max.value = scalar;
  //   }
  // }
  if( min.value== max.value){
     max.value=min.value+1;
  }
  console.log("max，min:", max.value, min.value);
}
function vtkShow() {
  const scalarBarActor = vtkmodel.scalarBarActor;
  const mapper = vtkmodel.jgMapper;
  const actor = vtkmodel.jgActor;
  if (!fcon.scalar) {
    return;
  }
  const scalarArray = fcon.scalar.get(formInline.value.region);
  if (!scalarArray || !fcon.polydata) {
    return;
  }

  console.log("scalarArray:", scalarArray);
  const dataArray = vtkDataArray.newInstance({
    name: formInline.value.region,
    size: fcon.polydata.getNumberOfPoints(),
  });
  console.log("执行了11");
  // console.log(dataArray);
  dataArray.setData(scalarArray);
  fcon.polydata.getPointData().setScalars(dataArray);
  // fcon.polydata.getPointData().setOpacity(dataArray);
  mapper.setInputData(fcon.polydata);
  getMinMax(scalarArray);
  mapper.setScalarRange(
    parseFloat(min.value.toFixed(2)),
    parseFloat(max.value.toFixed(2))
  ); //设置范围
  // actor.setMapper(mapper);
  scalarBarActor.setAxisLabel(formInline.value.region);
  mapper.clearColorArrays(); //强制重建颜色
  actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
  actor.getProperty().setOpacity(0.5);
  // vtkmodel.renderer.resetCamera();
  vtkmodel.clearModeAddJg();
  vtkmodel.renderWindow.render();
  
}
//告警数据渲染
function gjVtkShow() {
   console.log("告警 执行了");
  fcon.intgjScalar(props.classradio);
 
  const scalarBarActor = vtkmodel.gjscalarBarActor;
  const mapper = vtkmodel.gjMapper;
  const actor = vtkmodel.gjActor;
  if (!fcon.scalar) {
    return;
  }
  
  const scalarArray = fcon.gjScalar;
  if (!scalarArray || !fcon.polydata) {
    return;
  }
console.log("告警"+fcon.gjScalar);

  const dataArray = vtkDataArray.newInstance({
    name: "告警",
    size: fcon.polydata.getNumberOfPoints(),
  });

  dataArray.setData(scalarArray);
  fcon.polydata.getPointData().setScalars(dataArray);
  mapper.setInputData(fcon.polydata);
  getMinMax(scalarArray);
  mapper.setScalarRange(
    parseFloat(min.value.toFixed(2)),
    parseFloat(max.value.toFixed(2))
  ); //设置范围
  scalarBarActor.setAxisLabel("告警");
  mapper.clearColorArrays(); //强制重建颜色
  actor.getProperty().setOpacity(count.value); //设置错误的透明度使得页面重新加载  不设置不刷新页面
  actor.getProperty().setOpacity(0.5);
  vtkmodel.clearAllShowGj();
  vtkmodel.renderWindow.render();
}
function vtkGridRead() {
  fcon.aid = aid.value;
  fcon
    .initGemetry()
    .then((result) => {
     vtkScalarRead();
    vtkmodel.renderWindowWith.resize();
    })
    .catch((err) => {});
}
// 告警按钮
function swutchfun(val){

  vtkScalarRead()

}
function vtkScalarRead() {
  fcon
    .getScalrsByStep(fcon.step)
    .then((result) => {
      velocityRead() ;
      if(valueswitch.value==false){
        disabledshow.value=false;
        vtkShow();
      }else{
        disabledshow.value=true;
        gjVtkShow();
      }
      // vtkShow();
     
    })
    .catch((err) => {
    });
}

onUnmounted(() =>{
emitter.off('handleSelect')
})
watch(
  //  props.classradio,
  // (newVal, oldVal) => {
  
  // },
  newcount,
  (newVal, oldVal) => {
    fcon.step = newVal;
    getMonitor();
    vtkScalarRead();
 
 //   vtkScalarRead();
if( newVal>=endtime.value){
  playshow.value=true;
  suspendshow.value=false;
   isstop.value = false;
}
  },
 
  { deep: true }
); //深度监视

defineExpose({firstshow,isshow,indexinit});
</script>
<style lang="scss" scoped>
.text{
  color: #fff;       
}
.timedlg{
  .time{
    font-family: Microsoft YaHei UI, Microsoft YaHei UI;
    font-weight: bold;
    font-size:13px;
    color: #ff0f0f;
    line-height:35px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-align: center; 
}
.teletdq{
  color: #fff;
    font-size: 13px;
    text-align: left;
}
.closeimg{
  position: absolute;
    right: 12px;
    top: 21px;
}
}

.el-slider {
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
}

.tanniu{
display: flex;
justify-content:space-between;
align-items: center;

}
</style>
<style>
.el-table .cell {
  white-space:pre-line; 
  text-align: center ;

}
.time-dlg .log_cla22{
  position: absolute;
    right: 1.8229rem;
    top: -65px;

}
.time-dlg  .tianjia .el-dialog__body{
  padding: 10px 20px !important;
}
.timedlg{
  /* width: 200px;
  position: absolute;
  right: 1.8229rem;
  top: 77px;
  z-index: 1111; */
  /* /* background-color: rgba(0, 102, 201, 0.5); */
   border-radius: 10px;
   padding: 10px;
    background-image: url(/src/assets/img/tkb.png) !important;
    background-repeat: no-repeat;
    line-height: 30px;
    background-size: 100% 100%;
    position: relative;
}
.teletdq{
  position: relative;
}
.teletdq::before{
  position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background: linear-gradient( 90deg, rgba(93, 144, 194, 0.1), rgba(93, 144, 194, 1), rgba(93, 144, 194, 0.1) );
}
.gaojing{
  color: #fff;
    font-size: 15px;
    display: inline-block;
    /* height: 30px; */
    line-height: 35px;
    padding-left: 11px
}
.yansekuang{
  width: 100px;
  height: 18px;
 
}
.setiao{
    /* width: 200px;
    position: absolute;
    right: 1.8229rem;
    top: 170px;
    z-index: 1111; */
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 10px;
    margin-top:10px;
}
.timedlgheader{
    width: 200px;
    position: absolute;
    right: 2.0229rem;
    top: 77px;
    z-index: 1111;
}
.el-table .el-table__body-wrapper .el-table__body tbody tr td .cell{
white-space: normal !important;
}
</style>