<template>
  <div class="bbsl-common-page" @click="commonPageClick">
    <div class="bbsl-table-search">
      <el-form v-model="queryParam" :inline="true">
        <el-row :gutter="10">
           <el-col :span="6">
            <el-form-item label="水库名称">
              <el-select
                size="mini"
				filterable
                v-model="queryParam.params.rscd"
                clearable
                placeholder="请选择水库名称"
              >
                <el-option
                  v-for="item in rsnms"
                  :key="item.id"
                  :label="item.rsnm"
                  :value="item.rscd"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="测站名称">
                <el-input placeholder="请输入测站名称" size="mini" v-model="queryParam.params.mpnm"></el-input>
              </el-form-item>
            </el-col>
          <el-col :span="6">
            <el-form-item label="测点">
              <el-select
			  filterable
                size="mini"
                v-model="queryParam.params.stcd"
                clearable
                placeholder="请选择测点"
              >
                <el-option
                  v-for="item in stnms"
                  :key="item.id"
                  :label="item.mpnm"
                  :value="item.mpcd"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="onClickSearch"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
              <el-button type="text" @click.stop="openMore"
                >更多
                <i
                  :class="showMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i
              ></el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="bbsl-search-more" style="width: 600px" v-if="showMore">
          <el-row>
            <el-col :span="12">
              <el-form-item label="在线状态">
                <el-select
                  size="mini"
                  v-model="queryParam.params.wkcn"
                  clearable
                  placeholder="请选择在线状态"
                >
                  <el-option
                    v-for="item in statuss"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
           
          <el-col :span="12">
            <el-form-item label="行政区划">
              <el-cascader
                filterable
                clearable
                size="mini"
                :options="basAdNames"
                v-model="queryParam.params.addvcd"
                :props="setKesLabel"
                @change="onhouChange"
              >
                <template slot-scope="{node, data}">
                  <span>{{ data.name }}</span>
                  <span v-if="!node.isLeaf">
                    ({{ data.children === [] ? '' : data.children.length }})
                  </span>
                </template>
              </el-cascader>
            </el-form-item>
          </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div class="bbsl-table-content" ref="contentPanel">
      <div class="bbsl-btn-content" ref="btnPanel">
      </div>
      <el-table
        stripe
        size="mini"
        :height="tableMaxHeight-50"
        :style="{width: '100%'}"
        ref="multipleSelection"
        v-loading="loading"
        border
        :data="tableData"
        :header-cell-style="{'text-align': 'center'}"
        :cell-style="{'text-align': 'center'}"
      >
        <el-table-column
          fixed
          type="index"
          width="55"
          label="序号"
        ></el-table-column>
        <el-table-column
          fixed
          min-width="100"
          sortable
          prop="mpcd"
          label="测点代码"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="130"
          fixed
          sortable
          prop="mpnm"
          label="测点名称"
          show-overflow-tooltip
        ></el-table-column>
		<el-table-column
		  min-width="150"
		  sortable
		  fixed
		  prop="mstm"
		  label="上报时间"
		  show-overflow-tooltip
		></el-table-column>
        <el-table-column
          min-width="140"
          sortable
          prop="rsnm"
          label="所属水库"
          show-overflow-tooltip
        >
        </el-table-column>
        <!-- <el-table-column
          min-width="180"
          sortable
          prop="areaName"
          label="行政区划"
          show-overflow-tooltip
        ></el-table-column> -->
       
        <el-table-column
          min-width="150"
          sortable
          prop="tm"
          label="温度(℃)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          min-width="150"
          sortable
          prop="spprwl"
          label="渗流压力水位(m)"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          min-width="100"
          sortable
          prop="wkcn"
          label="在线状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <!-- <span v-if="scope.row.wkcn === 1 || scope.row.wkcn === '1'">在线</span>
            <span v-if="scope.row.wkcn === 0 || scope.row.wkcn === '0'">不在线</span> -->
            <span :style="{color:scope.row.wkcn === 1 || scope.row.wkcn === '1'?'#09ef09':'red'}" v-if="scope.row.wkcn === 1 || scope.row.wkcn === '1'"
              >在线</span
            >
            <span :style="{color:scope.row.wkcn === 0 || scope.row.wkcn === '0'?'red':'#09ef09'}"  v-if="scope.row.wkcn === 0 || scope.row.wkcn === '0'"
              >不在线</span
            >
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          min-width="150"
          sortable
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              plain
              @click="openDate(scope.row)"
              >历史数据</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="paginationPanel"
        align="right"
        class="bbsl-pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParam.pageBean.page"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="queryParam.pageBean.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <el-dialog
        title="渗压实时曲线图"
        width="65%"
        top="8vh"
        :before-close="handleClose"
        :visible.sync="showFormDias"
      >
        <div class="serchBlock" style="margin:0 0 10px 0">
          <span>选择日期：</span>
          <el-date-picker
          size="mini"
        style="width:350px"
            @change="changeChart"
            v-model="times"
			format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <div id="echartsBox" style="width: 90%; height: 500px" ref="box"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleClose">退 出</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import gqStqQuery from '@/api/monitor/gqMonitor/gqStqQuery.js'
import {TableMixin} from '@/mixins/tableMixin'
import syQuery from '@/api/monitor/gqMonitor/syQuery.js'
import req from '@/request.js'
import * as echarts from 'echarts'
export default {
  name: 'displacement',
  components: {
    // FormDialog,
  },
  mixins: [TableMixin],
  data() {
    return {
      loading: false,
      basAdNames: [], //行政区
      statuss: [
        {name: '在线', value: '1'},
        {name: '不在线', value: '0'},
      ],
      multipleSelection: [], // 复选框
      rsnms: [], //水库下拉，
      stnms: [], //测站下拉
      setKesLabel: {
        value: 'code',
        label: 'name',
        children: 'children',
      },
      queryParam: {
        pageBean: {
          pageSize: 20,
          page: 1,
        },
        params: {
          rscd: null,
          stcd: null,
          addvcd: null,
          wkcn: null,
          mpnm:null
        },
      },
      rwptns:[],//水势
      tableData: [],
      pId: '',
      total: 0,
      showFormDias: false,
      dates: [],//图表日期
      dpztbwl: [],//测压管危险水位(m)
      dspprwl: [],//渗流压力危险水位(m)
      jpztbwl:[],//测压管警戒水位(m)
      jspprwl:[],//渗流压力警戒水位(m)
      pztbwl:[],//测压管水位(m)
      spprwl:[],//渗流压力水位(m)
      echartLiat: [],
      times: [], //选择时间
      query: {
        stcd: null,
        stnm: null,
        startTime: null,
        endTime: null,
      },
    }
  },
  created() {
    this.getSysDict()
  },
  methods: {
    openMore() {
      this.showMore = !this.showMore;
    },
    onhouChange(val) {
      if (val) {
        this.queryParam.params.addvcd = val[val.length - 1]
      } else {
        this.queryParam.params.addvcd = null
      }
    },
    openDate(val) {
      this.showFormDias = true
      this.query.startTime = null //每次打开弹窗时清空上次手动选择的时间
      this.query.endTime = null //每次打开弹窗时清空上次手动选择的时间
      this.times = [] //每次打开弹窗时清空上次手动选择的时间
      this.query.stcd = val.stcd //点击打开曲线图时赋值
      this.query.stnm = val.stnm //点击打开曲线图时赋值
      var moment = require('moment') //打开时默认时间为一天前至获取当前年月日时分秒
      var _today = moment()
      let endTime = moment().format('L') //当前年月日
      let time = moment().format('LTS') //当前时分秒
      endTime = endTime.replace(/\//g, '-')
      endTime = endTime + ' ' + time
      let startTime = _today
        .subtract(1, 'days')
        .format('YYYY-MM-DD') /*前一天的时间*/
      startTime = startTime + ' ' + time
      this.query.startTime = startTime
      this.query.endTime = endTime
	  this.times=[startTime,endTime]
      let data = {
        query: {
          stnm:val.stnm,
          stcd:val.stcd,
          startTime:startTime,
          endTime:endTime,
          sttp:val.sttp
        },
      }
      syQuery.getChartsList(data.query, (res) => {
        this.echartLiat = res.value;
        if (res.value.length) {
          this.dates = this.echartLiat.map((item) => {
            return item.mstm
          })
          this.dpztbwl = this.echartLiat.map((item) => {
            return item.dpztbwl
          })
          this.dspprwl = this.echartLiat.map((item) => {
            return item.dspprwl
          })
          this.jpztbwl = this.echartLiat.map((item) => {
            return item.jpztbwl
          })
          this.jspprwl = this.echartLiat.map((item) => {
            return item.jspprwl
          })
          this.pztbwl = this.echartLiat.map((item) => {
            return item.pztbwl
          })
          this.spprwl = this.echartLiat.map((item) => {
            return item.spprwl
          })
          this.$nextTick(() => {
            this.getCharts()
          })
        } else {
          this.dpztbwl = []
          this.dates = []
          this.dspprwl = []
          this.jpztbwl = []
          this.jspprwl = []
          this.pztbwl = []
          this.spprwl = []
          this.$nextTick(() => {
            this.getCharts()
          })
        }
      })
    },
    changeChart(val) {
      if (val) {
        this.query.startTime = val[0];
        this.query.endTime = val[1];
          this.dpztbwl = []
          this.dspprwl = []
          this.jpztbwl = []
          this.jspprwl = []
          this.pztbwl = []
          this.spprwl = []
        syQuery.getChartsList(this.query, (res) => {
          if (res.value.length) {
            this.echartLiat = res.value;
          this.dates = this.echartLiat.map((item) => {
            return item.mstm
          })
          this.dpztbwl = this.echartLiat.map((item) => {
            return item.dpztbwl
          })
          this.dspprwl = this.echartLiat.map((item) => {
            return item.dspprwl
          })
          this.jpztbwl = this.echartLiat.map((item) => {
            return item.jpztbwl
          })
          this.jspprwl = this.echartLiat.map((item) => {
            return item.jspprwl
          })
          this.pztbwl = this.echartLiat.map((item) => {
            return item.pztbwl
          })
          this.spprwl = this.echartLiat.map((item) => {
            return item.spprwl
          })
         }
		 this.$nextTick(() => {
		   this.getCharts();
		 })
        })
       
      } else {
        this.query.startTime = '';
        this.query.endTime = '';
        this.times = [];
        syQuery.getChartsList(this.query, (res) => {
          if (res.value.length) {
            this.echartLiat = res.value;
          this.dates = this.echartLiat.map((item) => {
            return item.mstm
          })
          this.dpztbwl = this.echartLiat.map((item) => {
            return item.dpztbwl
          })
          this.dspprwl = this.echartLiat.map((item) => {
            return item.dspprwl
          })
          this.jpztbwl = this.echartLiat.map((item) => {
            return item.jpztbwl
          })
          this.jspprwl = this.echartLiat.map((item) => {
            return item.jspprwl
          })
          this.pztbwl = this.echartLiat.map((item) => {
            return item.pztbwl
          })
          this.spprwl = this.echartLiat.map((item) => {
            return item.spprwl
          })
            this.$nextTick(() => {
              this.getCharts()
            })
          }
        })
      }
    },
    getCharts() {
      let chartDom = document.getElementById('echartsBox')
      let myChart = echarts.init(chartDom)
      let option = {
        title: {
          text: '',
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['测压管危险水位(m)', '渗流压力危险水位(m)', '测压管警戒水位(m)', '渗流压力警戒水位(m)', '测压管水位(m)', '渗流压力水位(m)'],
        },
        grid: {
          left: '8%',
          right: '4%',
          bottom: '6%',
          containLabel: true,
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dates,
        },
        yAxis: {
          type: 'value',
		   scale:true
        },
        series: [
          {
            name: '测压管危险水位(m)',
            type: 'line',
			itemStyle : {
					 normal : {  
						 color:'#b22222',  
						 lineStyle:{  
							 color:'#b22222'  
						 }  
					 }  
				 },  
            data: this.dpztbwl, 
          },
          {
            name: '渗流压力危险水位(m)',
            type: 'line',
			itemStyle : {
					 normal : {  
						 color:'#ff0000',  
						 lineStyle:{  
							 color:'#ff0000'  
						 }  
					 }  
				 },  
            data: this.dspprwl,
          },
          {
            name: '测压管警戒水位(m)',
            type: 'line',
			itemStyle : {
					 normal : {  
						 color:'#ff6347',  
						 lineStyle:{  
							 color:'#ff6347'  
						 }  
					 }  
				 },  
            data: this.jpztbwl,
          },
          {
            name: '渗流压力警戒水位(m)',
            type: 'line',
			itemStyle : {
					 normal : {  
						 color:'#ffa500',  
						 lineStyle:{  
							 color:'#ffa500'  
						 }  
					 }  
				 },  
            data: this.jspprwl, 
          },
          {
            name: '测压管水位(m)',
            type: 'line',
			itemStyle : {
					 normal : {  
						 color:'blue',  
						 lineStyle:{  
							 color:'blue'  
						 }  
					 }  
				 },  
            data: this.pztbwl,
          },
          {
            name: '渗流压力水位(m)',
            type: 'line',
			itemStyle : {
					 normal : {  
						 color:'#32cd32',  
						 lineStyle:{  
							 color:'#32cd32'  
						 }  
					 }  
				 },  
            data: this.spprwl,
          }
        ],
      }
      option && myChart.setOption(option)
    },
    handleClose() {
      this.echartLiat = [];
      this.showFormDias = false;
    },
    getDateList() {
      // this.loading = true
      this.tableData = []
	  return
	  // 目前没得接口
      gqStqQuery.GetPressures(this.queryParam, (res) => {
        this.total = res.value.total;
        this.tableData = JSON.parse(JSON.stringify(res.value.rows))
        this.$set(this.tableData)
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.queryParam.pageBean.pageSize = val
      this.getDateList()
    },
    handleCurrentChange(val) {
      this.queryParam.pageBean.page = val
      this.getDateList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => {
        return item.id
      })
    },
    // // 指定一个key标识这一行的数据
    // getRowKey(row) {
    //   return row.id
    // },
    //获取字典数据
    getSysDict() {
      let portal = window.context.portal
      return new Promise((resolve, reject) => {
        req.post(portal + '/sys/sysDictionary/v1/queryAllDictItems').then(
          (response) => {
            resolve(response.data)
            this.rwptns = response.data.ss;//水势
            gqStqQuery.getbasAdName({}, (res) => {
              this.basAdNames = res.value
            })
            gqStqQuery.getRsnm({}, (res) => {
              this.rsnms = res.value
            })
            gqStqQuery.PressuresStnms({}, (res) => {
              this.stnms = res.value
            })
            this.getDateList()
          },
          (error) => {
            reject(error)
          }
        )
      })
    },
    // // 点击查询
    onClickSearch() {
      this.queryParam.pageBean.page = 1
      this.getDateList()
    },
    // 重置
    resetQuery() {
      this.queryParam.params = {}
      this.onClickSearch()
    },
  },
}
</script>
<style lang="scss" scoped>
.btn-content {
  display: flex;
}
.el-select-dropdown__item span {
  color: rgb(51, 51, 51) !important;
}
.el-select-dropdown__item {
  color: #9a9a9a !important;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #f5f7fa;
}
.btn-content :first-child {
  margin: 0 0 0 0 !important;
}
.el-switch__label--left {
  position: relative;
  left: 45px;
  color: #fff;
  z-index: -1111;
}
.el-switch__core {
  width: 50px !important;
}
.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}
.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
.sampling {
  ::v-deep .el-dialog__body {
    padding: 30px 20px 0 20px;
  }
}
::-webkit-scrollbar {
  background: #fff !important;
}
.bbsl-pagination{
  bottom:70px !important;
}
</style>
