Bjjs-Cloud/ruoyi-ui/src/views/mapIndex/components/StnmDialog.vue

<template>
  <div class="stnm-diglog" v-drag v-if="props.showStnmDialog">
    <div class="stnm-dialog-title">
      <span>{{dialogTitle}}</span>
      <img src="@/assets/yujing/img/close.png" @click="closeDialog"/>
    </div>
    <el-form ref="stnmDialogFormRef" :model="dialogForm" :inline="true" style="margin-left: 10px;">
      <el-form-item label="时间范围：" 
        v-if="dialogType == 'stnm'"
      >
        <el-date-picker
          v-model="dialogForm.daterange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="监测日期：" 
        v-if="dialogType == 'river'"
      >
        <el-date-picker
          v-model="dialogForm.tm"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="请输入监测日期"
          clearable
          size="small"
        />
      </el-form-item>
      <el-form-item label="监测指标：" 
        v-if="dialogType == 'river'"
      >
        <el-select-v2
          v-model="dialogForm.region"
          placeholder="请选择监测指标"
          :options="regionOptions"
          style="width: 150px;"
          size="small"
        />
      </el-form-item>
      <el-form-item label="编码：" 
        v-if="dialogType == 'river'"
      >
      <el-input v-model="dialogForm.stcd" placeholder="请输入编码" size="small"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
        <el-button type="primary" size="small" @click="handelExport">导出</el-button>
      </el-form-item>
    </el-form>
    <div id="elementChart"></div>
    <div class="stnm-dialog-table">
      <el-table 
      :data="stnmDialogData" 
      border 
      stripe
      style="width: 100%" 
      :height="heightAll" 
      :header-cell-style="{
        background: '#d2eafa !important',
        fontSize: '12px'
      }"
      >
        <el-table-column type="index" width="60" fixed="left" align="center"/>
        <el-table-column prop="tm" label="监测日期" width="120" align="center"/>
        <el-table-column prop="tm" label="溶解氧(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="高锰酸盐指数(mg/L)" width="160" align="center"/>
        <el-table-column prop="tm" label="氨氮(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="总磷(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="总氮(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="二甲基异莰醇(mg/L)" width="160" align="center"/>
        <el-table-column prop="tm" label="氯化物(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="锑(μg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="二氯甲炕(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="蓝藻密度(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="绿藻密度(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="叶绿素a(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="总有机碳(mg/L)" width="120" align="center"/>
        <el-table-column prop="tm" label="水温(mg/L)" width="120" align="center"/>
      </el-table>
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :size="pagination.size"
        :total="pagination.totalCount"
        :disabled=false
        background
        layout="total, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import * as echarts  from "echarts";

const emit = defineEmits(['close-dialog']);
const props = defineProps({
  showStnmDialog:{type: Boolean},
  stnmData:{type:Object},
  closeDialog:{type:Function}
});

const dialogVisible = ref(false);
const dialogTitle = ref("");
const dialogType = ref("");
const dialogForm = ref({
  daterange: [],
  tm: "",
  region: "t",
  stcd:""
})
const regionOptions = [
  {label:"高锰酸盐指数(mg/L)",value:'codmn'},
  {label:"总磷(mg/L)",value:'tp'},
  {label:"总氮(mg/L)",value:'tn'},
  {label:"氨氮(mg/L)",value:'nh4'},
  {label:"溶解氧(mg/L)",value:'cod'},
  {label:"锑(μg/L)",value:'t'},
  {label:"二氯甲炕(mg/L)",value:'cas'},
  {label:"蓝藻数量(万个/L)",value:'algaeDensity'},
  {label:"电导率(μS/cm)",value:'ec'},
  {label:"二甲基异莰醇(mg/L)",value:'methy'},
  {label:"氯化物(mg/L)",value:'na'},
];
const elementChart = ref(null);
const heightAll = 30.8 + 'vh';
const stnmDialogData = ref([]);

const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  totalCount: 0,
});


onMounted(() => {
});

watch(() => props.showStnmDialog, (newVal) => {
  if (newVal) {
    dialogVisible.value = newVal;
    nextTick(() => {
      initZheChart();
    });
  }
});
watch(() => props.stnmData, (newVal) => {
  if (newVal) {
    dialogTitle.value = newVal.type == 'stnm'
      ? `${newVal.stnm}监测数据信息`
      : `${newVal.river}各测站沿程监测数据信息`;
    dialogType.value = newVal.type;
  }
});
// 查询
const handleSearch = () => {};
// 导出
const handelExport = () => {};

// 元素折线图
const initZheChart = () => {
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: 'Email',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Union Ads',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ads',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: 'Direct',
        type: 'line',
        stack: 'Total',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: 'Search Engine',
        type: 'line',
        stack: 'Total',
        data: [820, 932, 901, 934, 1290, 1330, 1320]
      }
    ]
  };
  elementChart.value = echarts.init(document.getElementById('elementChart'));
  elementChart.value.setOption(option);
};

const handleSizeChange = (val) => {
  pagination.value.pageSize = val;
}
const handleCurrentChange = (val) => {
  pagination.value.currentPage = val;
}
const closeDialog = () => {
  dialogVisible.value = false;
  emit('close-dialog', dialogVisible.value);
}
</script>

<style scoped lang="scss">
.stnm-diglog{
  z-index: 999;
  position: absolute;
  top: 10%;
  left: 10%;
  height: 80%;
  width: 80%;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 8px #909399;/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
  .stnm-dialog-title{
    width: 100%;
    height: 32px;
    background: url("@/assets/images/lefttitle-bg.png");
    background-size: 100% 100%;
    border-radius: 5px 5px 0 0;
    position: relative;
    span{
      color: #fff;
      font-size: 14px;
      line-height: 32px;
      margin-left: 20px;
    }
    img{
      height: 18px;
      width: 18px;
      position: absolute;
      top: 7px;
      right: 10px;
      cursor: pointer;
    }
  }
  .shuizhiform-top-left{
    width: 100%;
    display: flex;
  }
}
#elementChart{
  width: 100%;
  height: 40%;
}
.stnm-dialog-table{
  width: 98%;
  margin: 0 auto;
}
</style>