<template>
  <!-- 基本信息查看更多 -->
  <div class="stationBase">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td rowspan="3">基础信息</td>
        <td>
          <p><span>名称</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>站点编号</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>安装地址</span><span class="value">野湖监测点</span></p>
        </td>
      </tr>
      <tr>
        <td>
          <p><span>安装类型</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>关联对象</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>安装时间</span><span class="value">野湖监测点</span></p>
        </td>
      </tr>
      <tr>
        <td>
          <p><span>经纬度</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>坐标系</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>所属水系</span><span class="value">野湖监测点</span></p>
        </td>
      </tr>
      <tr>
        <td rowspan="2">监测配置</td>
        <td>
          <p><span>监测高程</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>安装高度</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>监测指标</span><span class="value">野湖监测点</span></p>
        </td>
      </tr>
      <tr>
        <td>
          <p><span>预警值</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>报警值</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>数据完整率</span><span class="value">野湖监测点</span></p>
        </td>
      </tr>
      <tr>
        <td rowspan="2" style="border-bottom: 1px solid #d8ddef">运维相关</td>
        <td>
          <p><span>截止时间</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>责任人</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>运维单位</span><span class="value">野湖监测点</span></p>
        </td>
      </tr>
      <tr>
        <td>
          <p><span>年故障数</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>年运维数</span><span class="value">野湖监测点</span></p>
        </td>
        <td>
          <p><span>联系人</span><span class="value">野湖监测点</span></p>
        </td>
      </tr>
    </table>
    <div class="title">现场照片</div>
    <div class="xcImage">
      <el-image src="http://localhost:8081/src/assets/icons/monitor/all_icon.png"></el-image>
      <el-image src="http://localhost:8081/src/assets/icons/monitor/all_icon.png"></el-image>
    </div>
    <div class="title">运维事件</div>
    <div id="baseEchart"></div>
  </div>
</template>
<script setup>
import {} from '@/api/dataAnalysis/syntherticData';

const { proxy } = getCurrentInstance();
const myChart = shallowRef(null);
//自适应
function resizeTheChart() {
  if (myChart.value) {
    myChart.value.resize();
  }
}
function intChart() {
  myChart.value = proxy.echarts.init(document.getElementById('baseEchart'));
  // 绘制图表
  myChart.value.setOption({
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '15%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'none',
      },
    },
    legend: {
      data: ['巡查次数', '巡查次数2'],
      top: 0,
    },
    xAxis: {
      type: 'category',
      data: ['01:00', '02:00', '03:00'],
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      axisLabel: {
        color: '#545E75', //字体颜色
        fontSize: 16, //字体大小
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true, // 显示网格线
        lineStyle: {
          type: 'dashed',
        },
      },
    },
    series: [
      {
        name: '巡查次数',
        type: 'bar',
        barWidth: 20,
        data: [12, 13, 24],
      },
      {
        name: '巡查次数2',
        type: 'bar',
        barWidth: 20,
        data: [11, 16, 28],
      },
    ],
  });
}
onMounted(() => {
  setTimeout(() => {
    intChart();
  });
  window.addEventListener('resize', resizeTheChart);
});
</script>
<style lang="scss">
.stationBase {
  width: 100%;
  padding-bottom: 50px;
  table {
    width: 100%;
    tr {
      td:nth-of-type(1) {
        border-left: 1px solid #d8ddef;
      }
    }
    tr:last-child {
      td {
        border-bottom: 1px solid #d8ddef;
      }
    }
    td {
      border-top: 1px solid #d8ddef;
      border-right: 1px solid #d8ddef;
      text-align: center;
      p {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        .value {
          font-weight: bold;
          color: #000;
          max-width: 200px;
        }
      }
    }
  }
  .title {
    font-weight: bold;
    color: #000;
    margin: 10px 0px;
  }
  #baseEchart {
    width: 100%;
    height: 300px;
  }
}
</style>