fj-dc-ui/.svn/pristine/e5/e58d2871e13ddf1e7b967a522796a51dcf966034.svn-base

<template>
  <div>
    <div class="detailsTop" style="border: 1px dotted skyblue;">
      <div id="fxwt" style="width: 100%;height: 100%;"></div>
    </div>
    <div class="detailsBottom" ref="table">
        <el-table
          border
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
        >
          <el-table-column align="center" label="序号" min-width="50">
            <template slot-scope="scope">{{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            label="类型"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{scope.row.villType | dcType}}
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="nm"
            label="名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="inspPblmName"
            label="问题类别"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="100"
            prop="inspPblmDesc"
            label="问题描述信息"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            min-width="80"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click.stop="lookOver(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 100]"
          :page-size="20"
          :pager-count="3"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="text-align: center;margin-top: 1vh;">
        </el-pagination>
    </div>
    <!-- 发现问题详情 -->
    <el-dialog
      class="outerDialog custom_dialog"
      title="问题详情"
      v-if="supervisionDetailsVisible"
      width="60%"
      :visible.sync="supervisionDetailsVisible"
    >
      <!--水库-->
      <supervision-details :problemId="currentProblemId" v-if="this.villType == '0'"></supervision-details>
      <!--行政村-->
      <xingzhengcun_Details :problemId="currentProblemId" v-if="this.villType == '1'"></xingzhengcun_Details>
      <!--饮水工程-->
      <yinshuigongcheng_Details :problemId="currentProblemId" v-if="this.villType == '2'"></yinshuigongcheng_Details>
      <!--水源地和人饮管理落实-->
      <shuiyuandi_Details :problemId="currentProblemId" v-if="this.villType == '3' || this.villType == '6'"></shuiyuandi_Details>
      <!--水毁-->
      <supervisionDetails_sh :problemId="currentProblemId" v-if="this.villType == '4'"></supervisionDetails_sh>
      <!--地下水-->
      <supervisionDetails_dxs :problemId="currentProblemId" v-if="this.villType == '5'"></supervisionDetails_dxs>
      <!--水闸-->
      <supervision-details :problemId="currentProblemId" :objType="6" v-if="this.villType == '7'"></supervision-details>
      <!--水利工程建设-->
      <el-tabs v-model="activeName" v-if="this.villType == '8'">
        <el-tab-pane label="问题详情" name="problem-detail">
          <problem-detail :problemId="currentProblemId" :projectType="projectType" :reviConc="reviConc"></problem-detail>
        </el-tab-pane>
        <el-tab-pane label="整改详情" name="rectify-detail" v-if="reviConc == '2'">
          <rectify-detail :rectifyId="rectifyId"></rectify-detail>
        </el-tab-pane>
      </el-tabs>
      <!--水利工程运行-->
      <el-tabs v-model="activeName" v-if="this.villType == '9'">
        <el-tab-pane label="问题详情" name="problem-detail">
          <problem-detail :problemId="currentProblemId" :projectType="projectType" :reviConc="reviConc"></problem-detail>
        </el-tab-pane>
        <el-tab-pane label="整改详情" name="rectify-detail" v-if="reviConc == '2'">
          <rectify-detail :rectifyId="rectifyId"></rectify-detail>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer">
        <el-button style="margin-top:5px;" @click="supervisionDetailsVisible = false">返回</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import request from '../../utils/gw_ajax_request';
  import problemDetail from '../duChaTianBao/project/problemDetails.vue'
  import rectifyDetail from '../duChaTianBao/project/rectifyDetails.vue'
  export default {
    name: "FxwtDetails",
    props: ["adCode","requestSttmTime","requestEntmTime","requestOrgId","requestObjectType"],
    components:{
      //水库详情页
      supervisionDetails: resolve => {
        require(["../duChaWenTi/supervisionDetails_shuiku.vue"], resolve);
      },
      //水毁详情页
      supervisionDetails_sh: resolve => {
        require(["../duChaWenTi/supervisionDetails_shuihui.vue"], resolve);
      },

      //行政村详情页
      xingzhengcun_Details: resolve => {
        require(["../duChaWenTi/supervisionDetails_xingzhengcun.vue"], resolve);
      },
      //饮水工程详情页
      yinshuigongcheng_Details: resolve => {
        require(["../duChaWenTi/supervisionDetails_yinshuigongcheng.vue"], resolve);
      },
      //水源地详情页
      shuiyuandi_Details: resolve => {
        require(["../duChaWenTi/supervisionDetails_shuiyuandi.vue"], resolve);
      },
      //水毁详情页
      supervisionDetails_dxs: resolve => {
        require(["../duChaWenTi/supervisionDetails_dxs.vue"], resolve);
      },
      //水利工程建设
      problemDetail: problemDetail,
      rectifyDetail: rectifyDetail,
    },
    data() {
      return {
        tableHeight: 0,
        tableData: [],
        pageNum: 1,
        pageSize: 20,
        total: 0,
        supervisionDetailsVisible: false,
        currentProblemId: '',
        villType: '',
        rectifyId: '',
        projectType: '',
        reviConc: '',
        activeName: 'problem-detail',
        xData: [],
        yData: []
      }
    },
    mounted() {
      this.getEcharts();
      this.getTableData();
      this.init();
    },
    methods:{
      init() {
        this.tableHeight = this.$refs['table'].offsetHeight - 45;
      },
      getTableData(){
        let params = {
          "adCode": this.adCode,
          "pageSize": this.pageSize,
          "pageNum": this.pageNum,
          "startTime": this.requestSttmTime,
          "endTime": this.requestEntmTime,
          "orgIds": this.requestOrgId,
          "pTypes": this.requestObjectType
        }
        this.$nextTick(function () {
          request.post(`/pc/index/findPblmByAdCode`,params).then(res =>{
            if(res.success){
              this.tableData = res.data.list;
              this.total = res.data.total;
              this.initCharts();
            }else{
              this.$message.error(res.message);
            }
          }).catch(err =>{
            this.$message.error(err);
          })
        })
      },
      getEcharts(){
        let params = {
          "adCode": this.adCode,
          "startTime": this.requestSttmTime,
          "endTime": this.requestEntmTime,
          "orgIds": this.requestOrgId,
          "pTypes": this.requestObjectType
        };
        this.$nextTick(function () {
          request.post(`/pc/index/findPblmCountByAdCode`, params).then(res => {
            if(res.success){
              let CountData = res.data;
              let xData = [];
              let yData = [];
              CountData.forEach((item, index) => {
                xData.push(item.name);
                yData.push(item.total);
              });
              this.xData = xData;
              this.yData = yData;
              console.log(this.xData,this.yData);
              this.initCharts();
            }

          }).catch(err => {

          })
        })


      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getTableData();
      },
      //柱状图demo
      initCharts(){
        let me = this;
        me.myChart = echarts.init(document.getElementById('fxwt'));
        me.myChart.setOption({
          grid: {
            left: '7%',
            right: '5%',
            top: '15%',
            bottom: '25%',
          },
          title: {
            show: false
          },
          tooltip : {
            trigger: 'axis',
            label: {
              show: true
            },
            formatter: function (params) {
              return params[0].axisValue + ': ' +params[0].data + '个'
            }
          },
          legend: {
            data: me.xData,
            right: '3%',
            top: '10%',
            itemWidth: 11,
            itemHeight: 11,
            textStyle: {
              color: '#ffffff',
              fontSize: 13
            }
          },
          toolbox: {
            show: false,
          },
          xAxis: [
            {
              type: 'category',
              show: true,
              axisTick: {
                show: false,
                alignWithLabel: true
              },
              axisLabel: {
                rotate: 30,
                color: '#333',
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: 'rgba(63, 158, 255, 1)'
                }
              },
              data: me.xData
            }
          ],
          yAxis: {
            axisLabel:{
              color:'#333'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(63, 158, 255, 1)'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(33,148,246,0.2)'
              }
            },
            axisTick: {
              show: false
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: 'rgba(255,255,255,1)'
              }
            },
            type: 'value',
            max: function(value) {
              return value.max;
            },
            min: function(value) {
              return value.min;
            },
          },
          series: [
            {
              type:'bar',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: '#b87cf6'
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: "#b87cf6" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "#C58DF6" // 100% 处的颜色
                  }], false)
                }
              },
              barWidth: '40%',
              yAxisIndex: 0,
              data: me.yData
            }
          ]
        });
      },
      // 详情接问题查看详情展示
      lookOver(row){
        console.log(row);
        this.villType = row.villType;
        this.currentProblemId = row.pblmId;
        if(row.villType == '8' || row.villType == '9'){
          this.rectifyId = row.guid;
          this.projectType = row.villType == '8' ? '1' : row.villType == '9' ? '2' : '1';
          this.reviConc = row.reviConc;
        }
        this.supervisionDetailsVisible = true;
      }
    },
    watch:{
      adCode(n,o){
        this.adCode = n;
        this.getTableData();
      }
    },
    filters:{
      dcType(val){
        switch (val) {
          case '0':
            return '小水库';
            break;
          case '1':
            return '行政村';
            break;
          case '2':
            return '饮水工程';
            break;
          case '3':
            return '水源地';
            break;
          case '4':
            return '水毁';
            break;
          case '5':
            return '地下水';
            break;
          case '6':
            return '人饮（落实情况）';
            break;
          case '7':
            return '水闸';
            break;
          case '8':
            return '水利工程建设';
            break;
          case '9':
            return '水利工程运行';
            break;
        }
      }
    },

    }
</script>

<style>
  .detailsTop,.detailsBottom{
    width: 100%;
    height: 30vh;
    overflow: auto;
  }
  .detailsBottom{
    margin-top: 2vh;
  }
  .v-modal{z-index: 1999 !important;}
</style>