fj-dc-ui/.svn/pristine/60/60a7b1f2f5eca4dfeec2e8fab9eb15770bd889ed.svn-base

<template>
  <div style="height:100%;width:100%;" class="dctb_dxs">
    <el-container style="height:100%;width:100%;">
      <el-aside width="260px"  style="border-right:2px solid #d5d5ff;float:left" :style="{'max-height':testHeight+'px','height':testHeight+'px'}">
        <el-button size="mini" :class="tabType==1 ? 'skactive' : 'sknormal'" @click="tabChange('1')">当前数据</el-button>
<!--        <el-button size="mini" :class="tabType==2 ? 'skactive' : 'sknormal'" @click="tabChange('2')">历史数据</el-button>-->
        <el-button size="mini" :class="tabType==0 ? 'skactive' : 'sknormal'" @click="tabChange('0')">全部数据</el-button>
        <div class="tree" style="
          height: calc(100% - 50px);
          width: 100%;
          overflow: auto;
          display: inline-flex;">
          <el-tree
            :highlight-current="true"
            style="height:100%;"
            :data="treeData"
            node-key="id"
            :expand-on-click-node="false"
            @node-click = 'treeNodeClickHandler'
            ref="jigou_tree"
          >
            <div class="custom-tree-node" slot-scope="{ node, data }">
                      <span style="float:left;">{{ data.pnm}}

                      </span>
            </div>
          </el-tree>
        </div>
        </el-aside>
      <!-- <el-container> -->
      <el-main id="dxdcListMainsk" style="padding:5px 20px;">
        <div>
          <h3 style="text-align: center; margin: 10px 0;">地下水督查情况</h3>
        </div>
        <el-table
          :data="dxsDataList"
          style="width: 100%"
          :height="dxdcMainHeight"
          >
          <el-table-column
            prop="stnm"
            label="测站名称"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="stcd"
            label="测站编码"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="sttpNm"
            min-width="120"
            label="测站类别">
              <!-- <template  slot-scope="scope">
                <span>{{ formatSttp(scope.row.sttp) }}</span>
              </template> -->
            </el-table-column>
            <el-table-column
            prop="stlc"
            min-width="180"
            label="测站地址">
          </el-table-column>
            <el-table-column
            prop="allScore"
            min-width="80"
            label="得分合计">
          </el-table-column>
          <el-table-column
            prop="inspState"
            label="督查状态"
            align="center"
            min-width="130">
            <template slot-scope="scope">
               <span
                style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                v-if="scope.row.inspState == 0"
               >未督查</span>
                <span
                  style="padding: 3px 10px;background:#FBB56D;border-radius:15px;color:rgba(255,255,255,1)"
                  v-if="scope.row.inspState == 1"
                >督查中</span>
                <span
                  style="padding: 3px 10px;background:#63C25E;border-radius:15px;color:rgba(255,255,255,1)"
                  v-if="scope.row.inspState == 2"
                >已督查</span>
          </template>
          </el-table-column>
          <el-table-column
            prop="maintainStatus"
            label="测站维护管理状态"
             align="center"
            min-width="130">
             <template slot-scope="scope">
                  <p style="cursor:pointer;color:#67C23A" v-if="scope.row.maintainStatus == '2' || (scope.row.maintainStatus == '1' && scope.row.inspState == '2')">已完成</p>
                  <p style="cursor:pointer;color:#67C23A" v-if="scope.row.maintainStatus == '1' && scope.row.inspState != '2'">已填报</p>
                  <p style="cursor:pointer;color:#F56C6C;" v-if="!scope.row.maintainStatus || scope.row.maintainStatus == '0'">未填报</p>
              </template>
          </el-table-column>
          <el-table-column
            prop="percentageStatus"
            label="监测数据质量和到报率状态"
             align="center"
            min-width="130">
             <template slot-scope="scope">
                <p style="cursor:pointer;color:#67C23A" v-if="scope.row.percentageStatus == '2' || (scope.row.percentageStatus == '1' && scope.row.inspState == '2')">已完成</p>
                <p style="cursor:pointer;color:#67C23A" v-if="scope.row.percentageStatus == '1' && scope.row.inspState != '2'">已填报</p>
                <p style="cursor:pointer;color:#F56C6C;" v-if="!scope.row.percentageStatus || scope.row.percentageStatus == '0'">未填报</p>
              </template>
          </el-table-column>
          <el-table-column
            prop="checkComment"
            label="检查人员评价"
             align="center"
            min-width="130">
             <template slot-scope="scope">
                <p style="cursor:pointer;color:#67C23A" v-if="scope.row.inspState == '2' && scope.row.checkComment">已完成</p>
                <p style="cursor:pointer;color:#67C23A" v-if="scope.row.checkComment && scope.row.checkComment != '' && scope.row.inspState !== '2'">已填报</p>
                <p style="cursor:pointer;color:#F56C6C;" v-if="!scope.row.checkComment || scope.row.checkComment == ''">未填报</p>
              </template>
          </el-table-column>
          <el-table-column
            prop="uptm"
            label="更新时间"
            align="center"
            min-width="160">
          </el-table-column>
          <el-table-column align="center" show-overflow-tooltip label="操作" min-width="160" fixed="right" v-if="ownPriv('manage')">
              <template slot-scope="scope">
                  <el-button type="success" plain @click="toAddMember('填报',scope.row)" :disabled="scope.row.inspState == 2">填报</el-button>
                  <el-button type="danger" plain @click="submitHandler(scope.row)">提 交</el-button>
                  <!-- <el-button type="danger" plain @click="deleteMember(scope.row)">删除</el-button> -->
              </template>
          </el-table-column>
        </el-table>
        <el-pagination background  :pager-count="5" :current-page="pageIndex"
          :page-size="pageSize" :page-sizes="[10, 20, 30, 40, 50, 100]"
                       layout="sizes, total, prev, pager, next" :total="total"
          @current-change="pageIndexChange" @size-change="handleSizeChange"
          ></el-pagination>
      </el-main>
      <!-- </el-container> -->
      <dxsTianBao v-if="showShuDxsTianBao" :currentObjectRgstrId="currentObjectRgstrId"
        :currentGrwCode="currentGrwCode" :currentObjectId="currentObjectId"
        :currentObjectName="currentGrwName"
        :currentGrwName="currentGrwName"
        :currentSttp="currentSttp"
        :stationType="stationType"
        :staType="staType"
        :frequency="frequency"
         @cancelHandler="cancelHandler" @addShuiKuSuccess="addShuiKuSuccess"></dxsTianBao>
    </el-container>
    <!-- 选择测站类型弹窗 -->
    <el-dialog :title="currentGrwName + '测站类型'" :visible.sync="typeDialog">
      <el-form label-width="120px">
        <el-form-item label="测站类型" required>
          <el-select v-model="staType" :disabled="btnType == 'submit'" placeholder="请选择">
            <el-option label="省级自动监测站" value="PROVAUTO"></el-option>
            <el-option label="省级人工监测站" value="PROVHAND"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监测频次" required v-if="staType == 'PROVHAND'">
          <el-select v-model="frequency" placeholder="请选择">
            <el-option label="逐日" value="DAY"></el-option>
            <el-option label="五日" value="FDAY"></el-option>
            <el-option label="其它" value="OTHER"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="typeDialog = false">取 消</el-button>
        <el-button type="primary" @click="selectType">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from '../../utils/gw_ajax_request.js'
import {dateFormat} from '../../utils/gw_date.js'
import provTreeList from "../../widgets/provTreeList.vue";
import dxsTianBao from "../duChaTianBao/dxsTianBao.vue"

export default {
  components: {
    provTreeList: provTreeList,
   dxsTianBao:dxsTianBao,

  },
  props: [],

  data() {
    return {
      tabType:"0",//0全部数据，1当前数据，2历史数据
      treeData:[],
      dxdcMainHeight: window.innerHeight - 197,
      testHeight: window.innerHeight - 111,
      // stationType: 'artiStation',
      stationType: 'autoStation',
      dxsDataList: [],
      pageIndex:1,
      pageSize:20,
      total:0,
      tableHeight:0,
      currentGrwCode:'',
      currentGrwName:'',
      currentObjectId:'',
      currentObjectRgstrId:'',
      currentSttp: '',
      currentObjectInfoObject:null,
      showShuDxsTianBao:false,
      currentAdCode:'',
      currentNodeId:'',//没有初始值。
      typeDialog: false,
      staType: '',
      frequency: '',
      btnType: '',
      submitRow: null,

    };
  },
  computed: {
    persId() {
      return localStorage.getItem("userid")
        ? localStorage.getItem("userid")
        : "1098101939614724096";
    },
    recPersName(){
      return localStorage.getItem("account")? localStorage.getItem("account"): ''
    }
  },
  mounted() {
    this.getLeftTreeData();

    let h = document.getElementById('dxdcListMainsk').offsetHeight;
    this.tableHeight = h - 100;
    console.log('tableHeight'+this.tableHeight);
  },
  activated(){
    this.getLeftTreeData();
    this.currentNodeId = "";
    // this.getDXSDataList();
  },

  watch: {
    currentNodeId(n,o){
      if(n&&n!=''){
        this.getDXSDataList();
      }
    }
  },

  methods: {
    tabChange(tabType){
        this.tabType = tabType;
        this.currentNodeId = "";
        this.getLeftTreeData();
        this.getDXSDataList();
    },
    getLeftTreeData(){
      var _self = this;
      request.get('/dc/organization/base/getAllNode',{params:{'userId':this.persId,'orgType':'005',"tabType":this.tabType}}).then((res)=>{
          let data = res.data
          data.forEach(ele => {
              if(ele.pid == null || ele.pid == ''){
                  ele.pid = '001'
              }
          });
          data = _self.getTrees(data);
          _self.currentNodeId = data[0].id;
          _self.getDXSDataList();
          _self.treeData = data;
          // _self.duChaType = _self.treeData[0].id.substring(2,3);
      })
    },
    //格式化树形数据
    getTrees(list) {
      //@wxcwater重写方法 适应多个树
      let highLevelLength = 99;//预设最大节点id长度，目前最大应该为12，所以设置为99保证正常
      let _self =this;
      list.forEach((item,index)=>{
        item['pidLength'] = item.pid&&item.pid!=''?item.pid.length:0;
        if(highLevelLength>item.pidLength){
          highLevelLength = item.pidLength;
        }
      });
      console.log(highLevelLength);
      let heightLevelNode = [];
        list.forEach((item,index)=>{

        if(highLevelLength>=item.pidLength){
          heightLevelNode.push(item);
        }
      });

        list.forEach((item,index)=>{
          heightLevelNode.forEach((pItem)=>{
            _self.addTreeNode(pItem,item);
          });

        });
        console.log(heightLevelNode);
        return heightLevelNode;
      },

    addTreeNode:function(treeNode,leafNode){
        let _self = this;
        if(!treeNode.hasOwnProperty('children')){
            treeNode['children'] = [];
        }
        if(leafNode.pid == treeNode.id){
            treeNode.children.push(leafNode);
            return;
        }
        treeNode.children.forEach((item) => {
            _self.addTreeNode(item,leafNode);
        });
    },
    treeNodeClickHandler(data,node,tree){
        this.currentNodeId = data.id;
    },
    provTreeSelectChangeHandler:function(params){
      this.currentAdCode = params.likeCode;
      this.getDXSDataList();
    },
    formatDate(row,column){
      if(row.uptm){
        return (dateFormat(row.uptm,'yyyy-MM-dd'));
      }
    },
    getDXSDataList(){
      request.post(`/dc/insp/grw/queryDetailListWithPblm`,{'nodeId':this.currentNodeId,'pageSize':this.pageSize,'pageNum': this.pageIndex,'tabType':this.tabType}).then((res) => {
          console.log(res)
          if(res.success){
            this.dxsDataList = res.data.list;
            this.total = res.data.total;
          }
        }
      );
    },
    selectType(){
      if(!this.staType){
        this.$message.warning('请选择测站类型')
        return
      }
      if(this.staType == 'PROVHAND' && !this.frequency){
        this.$message.warning('请选择监测频率')
        return
      }
      if(this.staType == 'PROVAUTO'){
        this.stationType = 'autoStation'
        this.currentSttp = 'PROVAUTO'
      }else{
        this.stationType = 'artiStation'
        this.currentSttp = 'PROVHAND'
      }
      let formObj = {
        "id":this.currentObjectRgstrId,
        "checkPid": this.persId,
        "checkPname": this.recPersName,
        "sttp": this.currentSttp
      }
      if(this.btnType == 'add'){
        request.post(`/dc/insp/grw/setProvSttp`,formObj).then(res=>{
          if(res.success){
            this.typeDialog = false
            this.showShuDxsTianBao = true;
            this.getDXSDataList()
          }else{
            this.$message.warning(res.message)
          }
        })
      }else if(this.btnType == 'submit'){
        this.typeDialog = false
        this.submitRow.monitorRate = this.frequency
        this.submitHandler(this.submitRow)
      }

    },
    toAddMember(type,rowData){
      this.btnType = 'add'

      var _self = this;

      request.post(`/dc/insp/grw/getBy`,{'objId':rowData.objId,'stcd':rowData.stcd}).then((res) =>{
          console.log(res);
          if(res.success){
            _self.currentGrwCode = res.data.stcd;
            _self.currentObjectId = res.data.objId;
            _self.currentObjectRgstrId = res.data.id;
            _self.currentGrwName = res.data.stnm;
            _self.currentSttp = res.data.sttp;
            if(_self.currentSttp == 'PROV' || !_self.currentSttp){
              _self.staType = ''
              _self.frequency = ''
              _self.typeDialog = true
            }else if(_self.currentSttp == 'PROVHAND'){
              _self.stationType = 'artiStation'
              _self.showShuDxsTianBao = true;
            }else{
              _self.stationType = 'autoStation'
              _self.showShuDxsTianBao = true;
            }
          }
          // 获取完成
        },
        (err) =>{

        }
      );
    },
    cancelHandler(){
      this.showShuDxsTianBao = false;
    },
    addShuiKuSuccess(){
      this.getDXSDataList();
      // this.showShuDxsTianBao = false;
    },
    deleteMember(obj){
      // /dc/insp/rsvrRgstr/delete/{id}
      deleteXSKByObjId(obj.rgstrId).then((res)=>{
          this.pageIndexChange();
      });
    },
     pageIndexChange(val){
      console.log(val);
      this.pageIndex = val;
      this.getDXSDataList();
    },
    handleSizeChange(val){
      this.pageSize = val;
      this.getDXSDataList();
    },
    formatSttp(val){
      let sttp = val ? val.toUpperCase() : ''
      if(sttp == 'NATIONAL'){
        return '国家级'
      }else if(sttp == 'PROVAUTO'){
        return '省级自动站'
      }else if(sttp == 'PROVHAND'){
        return '省级手动站'
      }
    },
    submitHandler(row){
      this.submitRow = row
      this.btnType = 'submit'
      var _self = this;
      request.post(`/dc/insp/grw/getBy`,{'objId':row.objId,'stcd':row.stcd}).then(
        (res) =>{
            if(res.data.maintainStatus=='0' || !res.data.maintainStatus){
              this.$message({
                message: '请填写测站维护管理！',
                type: 'warning'
              });
              return
            }else if(res.data.percentageStatus=='0' || !res.data.percentageStatus){
              this.$message({
                message: '请填写监测数据质量和到报率',
                type: 'warning'
              });
              return
            }else if(!res.data.checkComment){
              this.$message({
                message: '请填写检查人员评价！',
                type: 'warning'
              });
              return
            }
            if(res.data.sttp == 'PROVHAND' && !row.monitorRate){
              this.$message.warning('请选择监测频率')
              this.staType = res.data.sttp
              this.typeDialog = true
              return
            }
            this.$confirm('请确认所有信息填报完毕？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                let formObj = {
                  "id":row.id,
                  "checkPid": this.persId,
                  "checkPname": this.recPersName,
                  "monitorRate": this.frequency,
                  "sttp": row.sttp
                }
                request.post('/dc/insp/grw/submitData', formObj).then((res) => {
                      if (res.success) {
                          _self.$emit("addShuiKuSuccess");
                          _self.$message.success("提交成功");
                          this.getDXSDataList()
                      } else {
                          _self.$message.error(res.message);
                          // _self.$emit('cancelHandler');
                      }
                  });
              }).catch(() => {
                _self.$message.error(res.message);
              });
        },(err) =>{

        });

    },
    },

};
</script>

<style>
  .skactive{
    background: #3f8eff !important;
    color:white !important;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 7px 12px !important;
  }
  .sknormal{
    background: white;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 7px 12px !important;
  }
 .dctb_dxs .el-table .warning-row {
    background: oldlace;
  }

 .dctb_dxs .el-table .success-row {
    background: #f0f9eb;
  }
</style>