<template>
  <!-- 项目监测分析 -->
  <div class="publicContainerA">
    <div class="partTitleHM">项目监测分析</div>
    <div class="ConstrucClass">
      <div class="WaterList">
        <div class="DropdownBox">
          <div class="analysis">
            <img :src="pipefx" alt="" class="ICON_zp" />
            <span @click="areaFX">片区分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="area" style="width: 100%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.area" placeholder="请选择片区分析" @change="changeArea">
                <el-option v-for="item in areaList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </div>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="xmfx" alt="" class="ICON_zp" />
            <span>项目分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="Xm" style="width: 100%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.XmP" placeholder="请选择典型项目分析" @change="changeProject">
                <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <!-- <el-form-item prop="XmA" style="width: 50%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.XmA">
                <el-option v-for="item in XmListA" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item> -->
          </div>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="ssfx" alt="" class="ICON_zp" />
            <span @click="textClick">设施分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="XmQ" style="width: 41%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="queryParams.Xm" placeholder="请选择设施分析" @change="changeSSFX">
                <el-option v-for="item in XmList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item prop="hmssVal" style="width: 50%; margin-left: 10px; margin-top: 18px">
              <el-select v-model="hmssVal" @change="changeHmss" placeholder="请选择监测点">
                <el-option v-for="item in hmssList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 设施分析echarts -->
        <div class="assessment" v-loading="loadingSS">
          <AssessmentEcharts :data="chartDataSS" :refresh="chartDataSS.refresh"></AssessmentEcharts>
        </div>

        <div class="DropdownBox">
          <div class="analysis">
            <img :src="WaterAnalysis_icon" alt="" class="ICON_zp" />
            <span>管网积水分析</span>
          </div>
          <div class="Selectionbox">
            <el-form-item prop="jsdVal" style="width: 220px; margin-left: 60px; margin-top: 18px">
              <el-select v-model="jsdVal" placeholder="请选择积水分析" @change="changeJSD">
                <el-option v-for="item in jsdList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
              </el-select>
            </el-form-item>
          </div>
        </div>
        <!-- 积水分析echarts -->
        <div class="assessment" v-loading="loadingJSD">
          <AssessmentjsEcharts :data="chartDataJSD" :refresh="chartDataJSD.refresh"></AssessmentjsEcharts>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import AssessmentEcharts from '@/views/sponeScreen/Echarts/AssessmentEcharts.vue'; // 设施分析
import AssessmentjsEcharts from '@/views/sponeScreen/Echarts/AssessmentjsEcharts.vue'; //积水分析
import pipefx from '@/assets/newImgs/HMScreen/pipefx.png';
import ssfx from '@/assets/newImgs/HMScreen/ssfx.png';
import xmfx from '@/assets/newImgs/HMScreen/xmfx.png';
import bus from '@/bus';
import WaterAnalysis_icon from '@/assets/newImgs/HMScreen/WaterAnalysis_icon.png';
import { graphicReport } from '@/api/dataAnalysis/syntherticData';
import { listrtuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';

const areaList = ref([
  { name: '古城片区', value: '0', lonlat: [114.35, 34.802] },
  { name: '城东南片区', value: '1', lonlat: [114.37, 34.792] },
  { name: '保税区片区', value: '2', lonlat: [114.209, 34.782] },
  { name: '金明片区', value: '3', lonlat: [114.285, 34.799] },
]);

const XmList = ref([
  { name: '汴京路管网及道路海绵化改造', value: '1' },
  { name: '市民综合体', value: '3' },
]);

const AllData = reactive({
  queryParams: { BODName: '1', area: '0', Xm: '1', XmP: '', XmA: '', XmQ: '1' },
});
const { queryParams } = toRefs(AllData);

const dateRain = ref('');
//海绵设施列表-汴京路
const hmssList = ref([
  { value: '0371000044', label: '工农路与汴京路交叉口' },
  { value: '0371000039', label: '大花园街与汴京路交叉口' },
  { value: '0371000038', label: '劳动路与汴京路交叉口' },
  { value: '0371000037', label: '公园路与汴京路交叉口' },
]);
const hmssVal = ref('');
const loadingSS = ref(true);
const chartDataSS = ref({
  xAxis: [],
  inverse: true,
  yAxis: [], //降雨量
  yAxis2: [], //流量
  yAxis3: [], //ss
  refresh: 1,
});
// 海绵设施监测站点切换
const changeHmss = () => {
  getDataSS();
};
// 海绵设施数据渲染
async function getDataSS() {
  loadingSS.value = true;
  // 关联雨量站是皮革厂雨量站，0371000003
  let params = {
    startTime: dateRain.value,
    endTime: dateRain.value,
    stCode: '0371000003',
  };
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    chartDataSS.value.xAxis = datas.propertyMonitorXList;
    chartDataSS.value.yAxis = nameToData(datas.propertyMonitorList, '5分钟时段降水量');
  }

  // 获取监测值
  let params2 = {
    startTime: dateRain.value,
    endTime: dateRain.value,
    stCode: hmssVal.value,
  };
  let res2 = await graphicReport(params2);
  if (res2 && res2.code == 200) {
    let datas = res2.data;
    chartDataSS.value.yAxis2 = nameToData(datas.propertyMonitorList, '流速'); //流速
    chartDataSS.value.yAxis3 = nameToData(datas.propertyMonitorList, 'SS'); //ss
  }
  chartDataSS.value.refresh = Math.random();
  loadingSS.value = false;
}

// 积水分析
const loadingJSD = ref(true);
const rainCode = ref('');
const jsdVal = ref('');
const jsdList = ref([]);
const chartDataJSD = ref({
  xAxis: [],
  yAxis: [], //降雨量
  yAxis2: [], //水深
  refresh: 1,
});
// 积水点点击切换
const changeJSD = () => {
  // 筛选查出对应的关联雨量站
  rainCode.value = jsdList.value.filter(item => item.stCode == jsdVal.value)[0].referRainStCode;
  getDataJSD();
};
// 获取积水点数据
async function getDataJSD() {
  loadingJSD.value = true;
  // 关联雨量站
  let params = {
    startTime: dateRain.value,
    endTime: dateRain.value,
    stCode: rainCode.value,
  };
  let res = await graphicReport(params);
  if (res && res.code == 200) {
    let datas = res.data;
    chartDataJSD.value.xAxis = datas.propertyMonitorXList;
    chartDataJSD.value.yAxis = nameToData(datas.propertyMonitorList, '5分钟时段降水量');
  }

  // 获取监测值
  let params2 = {
    startTime: dateRain.value,
    endTime: dateRain.value,
    stCode: jsdVal.value,
  };
  let res2 = await graphicReport(params2);
  if (res2 && res2.code == 200) {
    let datas = res2.data;
    chartDataJSD.value.yAxis2 = nameToData(datas.propertyMonitorList, '水位');
  }
  chartDataJSD.value.refresh = Math.random();
  loadingJSD.value = false;
}
// 获取积水点列表
function getJSDList() {
  listrtuSiteInfo({ monitorTargetType: 'pipeline' }).then(res => {
    jsdList.value = res.data || [];
    jsdVal.value = res.data[0].stCode; //站点编号
    rainCode.value = res.data[0].referRainStCode; //关联雨量站站点编号
  });
}

// 公共方法，根据监测名称来匹配对应的数值
function nameToData(data, name) {
  let arr = data.filter(item => item.monitorPropertyName == name);
  return arr[0] ? arr[0].ylist : [];
}

// 片区分析点击
function changeArea(val) {
  // bus.emit('checkProjectArea', areaList.value[val]);
  newfiberMapbox.map.easeTo({
    center: areaList.value[val].lonlat,
    zoom: 13.7,
    pitch: 45,
  });
}

// 典型项目点击
function changeProject(val) {
  // bus.emit('checkProjectFX', { project: XmList.value[val] });
  // 渲染点位上图
  bus.emit('setIniteLayer', [
    {
      layername: 'pipeMonitor',
      show: false,
    },
    {
      layername: 'spongeFacility',
      show: false,
    },
  ]);
  newfiberMapbox.map.easeTo({
    center: [114.378601, 34.793947],
    zoom: 15.2,
    pitch: 30,
  });
}

// 项目设施分析点击
function changeSSFX(val) {
  bus.emit('checkSSFX', { project: XmList.value[val] });
  newfiberMapbox.map.easeTo({
    center: [114.381601, 34.793947],
    zoom: 15.9,
    pitch: 30,
  });
}

onMounted(() => {
  hmssVal.value = hmssList.value[0].value; //默认第一个监测点
  getJSDList(); //获取积水点数据
  bus.on('changeRainDate', val => {
    dateRain.value = val;
    changeHmss(); //海绵设施数据加载
    changeJSD(); //积水点数据加载
  });
});
onBeforeUnmount(() => {
  bus.off('changeRainDate');
  bus.emit('setIniteLayer', [
    {
      layername: 'pipeMonitor',
      show: true,
    },
    {
      layername: 'spongeFacility',
      show: true,
    },
  ]);
});
</script>

<style lang="scss" scoped>
.publicContainerA {
  margin-top: 10px;
}
.ConstrucClass {
  width: 460px;
  height: calc(100vh - 220px);
  background: #004565;
  opacity: 0.8;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: -3px;
  .WaterAccumulation {
    width: 95%;
    // height: 270px;
    margin: auto;
    background: yellow;
    .HeadContent {
      width: 100%;
      height: 40px;
      background: #217dc8;
      border: 1px solid #61aff0;
      position: relative;
      top: 2px;
      span {
        position: relative;
        top: 8px;
        left: 15px;
        color: #ffffff;
        font-family: Source Han Sans CN;
        font-weight: 500;
      }
    }
  }
  .WaterList {
    position: relative;
    top: 8px;
    width: 95%;
    // height: calc(100vh - 720px);
    margin: auto;
    // background: yellow;
    .DropdownBox {
      height: 45px;
      background: #217dc8;
      border: 1px solid #61aff0;
      display: flex;
      justify-content: space-around;
      margin: 5px;
      .analysis {
        width: 35%;
        display: flex;
        align-items: center;
        // background: red;
        .ICON_zp {
          width: 28px;
          height: 28px;
          position: relative;
          top: 32x;
        }
      }
      .Selectionbox {
        width: 65%;
        display: flex;
        align-items: center;
        // background: yellowgreen;
      }
    }
    .assessment {
      margin-top: 5px;
      width: 100%;
      height: 260px;
      // background: red;
    }
  }
}
</style>