<template>
  <!-- 水灾灾害信息 -->
  <div class="waterdisaster"> 
    <div class="asides_content">
              <div class="jc_content tablecolor">
                <div class="jc_padding">
                  <div class="re_tele">灾害信息展示
                    <div class="btn">生成报告</div>
                  </div >
                  <div class="jiancd">
                  <div class="je_left duijc">
                  <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>
                  </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>
                  </div>
                </div>
                  <!-- 监测点 -->
                  <div class="L_aside ">
                    <div class="hedse jccolor">
                      <el-icon class="iconimg1 Frame3" fit="contain"></el-icon>监测点
                </div>
                <div class="echart echartxian">
                <div id="line2" style="width: 100%; height: 1.25rem;"></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 { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
import bt1 from "@/assets/img/Group1376.png"
import bt2 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',
},

]);
const handleDelete=()=>{

}
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'
          }
            // return value >= 120 ? '#CE0000  ': '#ACD6FF';
        }
         
         }
       }
     }
   ],
   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
           }
         }
       },
       lineStyle: {
                  width: 3, // 设置线条宽度
              },

     }
   ]
 }
 myChart.setOption(option);
 window.onresize = function() {
  // 让图表自适应大小
  myChart.resize();
};


// // 监听窗口大小变化
// myChart.dispatchAction({ //设置激活第一个选项
//      type: 'showTip',
//      seriesIndex: 0,
//      dataIndex: 0
//    });
}
   defineExpose({lineChart});
 </script>
