fj-dc-ui/.svn/pristine/e7/e71c3ac3fb41298b2eb2f04d3ba1414a38d8941c.svn-base

<template>

    <el-row>

        <el-col :span="3">
            <div>
                <provTreeList :rootCode="rootCode" :rootType="rootType" @provTreeSelectChange="provTreeSelectChangeHandler"
                              :style="{'max-height':dxdcAsideHeight+'px'}"
                >
                </provTreeList>
            </div>
        </el-col>

        <el-col :span="21">
            <el-card class="ducha_form" :body-style="{ 'padding': '20px 5px' }" :style="formStyle">
                <el-form :inline="true" :model="formInline" class="sh-form-inline">
                    <!--<el-form-item label="水库编码" style="margin-left: 5px">-->
                        <!--<el-input v-model="formInline.rsCode" :placeholder="autoInput" clearable></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="水库名称">
                        <el-input v-model="formInline.rsName" :placeholder="autoInput" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="水库类型">
                        <el-select v-model="formInline.rsType" :placeholder="autoSort" clearable >
                            <el-option v-for="item in options"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工程规模">
                        <el-select v-model="formInline.engScal" :placeholder="autoSort" clearable >
                            <el-option v-for="item in engScalOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!--<el-form-item label="水库管理单位代码">-->
                        <!--<el-input v-model="formInline.rsAdmCode" :placeholder="autoInput" clearable></el-input>-->
                    <!--</el-form-item>-->
                    <!--<br/>-->

                    <!--<el-form-item label="水库位置">-->
                        <!--<el-input v-model="formInline.adFullName" :placeholder="autoInput" clearable></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="管理单位名称">-->
                        <!--<el-input v-model="formInline.rsAdmName" :placeholder="autoInput" clearable></el-input>-->
                    <!--</el-form-item>-->
                    <!--<el-form-item label="行政区划">-->
                        <!--<el-input v-model="formInline.addvcd" :placeholder="autoInput" clearable ></el-input>-->
                    <!--</el-form-item>-->

                    <el-form-item style="margin: 0">
                        <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 0 5px">
                        <el-button type="info" plain @click="empty" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="exportExcel" icon="el-icon-sort-up">导出Excel</el-button>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="showDialog(1,null)" icon="el-icon-edit">批量编辑</el-button>
                    </el-form-item>
                    <!-- <el-form-item style="margin: 0 5px" v-if="ownPriv('manage')">
                        <el-button type="info" plain @click="batchImport" icon="el-icon-menu">导入</el-button>
                    </el-form-item> -->
                    <!-- 水库基础信息批量导入弹窗 -->
                    <shui-ku-cha-xun-pl v-if="showShuiKuChaXunPl" @closePlDialog="closePlDialog"
                        :rsNameStr="formInline.rsName"
                        :rsTypeStr="formInline.rsType"
                        :pageStr="page.pageNum"
                        :admDiv="formInline.addvcd"
                    ></shui-ku-cha-xun-pl>
                </el-form>
            </el-card>
            <el-card class="ducha_table"  :body-style="{ 'padding': '0 5px' }">
                <el-main style="padding: 5px!important;">
                    <el-table :data="tableList" style="width: 100%" :row-class-name="tableRowClassName"
                              ref="singleTable"
                              v-loading="tableLoading"
                              border
                              @selection-change="handleSelectionChange"
                              :height="dxdcMainHeight+'px'"
                              :render-header="renderHeader"
                    >
                        <el-table-column
                          type="selection"
                          min-width="55">
                        </el-table-column>
                        <el-table-column type="index" width="70" :index="getIndex" label="序号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rsCode" label="水库编码" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rsName" label="水库名称" min-width="130" show-overflow-tooltip></el-table-column>
                        <!--<el-table-column prop="location" label="水库位置" min-width="180" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="adName" label="水库位置" min-width="180" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="adFullName" label="水库位置" min-width="200" show-overflow-tooltip></el-table-column>-->
                        <el-table-column prop="rsType" label="水库类型" min-min-width="80" :formatter="formatRsType" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rsAdmCode" label="管理单位代码" min-width="120" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="rsAdmName" label="管理单位名称" min-width="180" show-overflow-tooltip></el-table-column>
                        <!--<el-table-column prop="rsAdmDep" label="水库归口管理部门" min-width="150" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="admAttRel" label="管理单位隶属关系" min-width="180" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="longitude" label="经度" min-width="180" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="latitude" label="纬度" min-width="180" show-overflow-tooltip></el-table-column>-->
                        <el-table-column prop="admDiv" label="行政区划" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="provincial" label="是否省属" width="100" >
                          <template slot-scope="scope">
                             <span v-if="scope.row.provincial=='1'">是</span>
                             <span v-if="scope.row.provincial=='2'">否</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="engScal"
                                         label="工程规模"
                                         min-width="130"
                                         :formatter="formatEngScal"
                                         show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column prop="limStag" label="防洪限制水位(米)" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="totCap" label="总库容(万立方米)" min-width="130" show-overflow-tooltip></el-table-column>
                        <!--<el-table-column prop="damTypeMat" label="挡水主坝类型按材料分" min-width="180"></el-table-column>-->
                        <!--<el-table-column prop="damTypeStr" label="挡水主坝类型按结构分" min-width="180"></el-table-column>-->
                        <el-table-column prop="damSizeHig" label="主坝尺寸坝高(米)" min-width="130" show-overflow-tooltip></el-table-column>
                        <!--<el-table-column prop="centerX" label="经度" min-width="180" show-overflow-tooltip></el-table-column>-->
                        <!--<el-table-column prop="centerY" label="纬度" min-width="180" show-overflow-tooltip></el-table-column>-->
                        <el-table-column label="行政责任人信息" align="center">
                            <el-table-column prop="wiunWaoLegPers1" label="责任人姓名" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="wiunWaoLegPersTel1" label="责任人电话" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="wiunWaoLegPersDuty1" label="责任人职务" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                        </el-table-column>
                        <el-table-column label="技术责任人信息" align="center">
                            <el-table-column prop="techPers1" label="责任人姓名" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="techPersTel1" label="责任人电话" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="techPersDuty1" label="责任人职务" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                        </el-table-column>
                        <el-table-column label="巡查责任人信息" align="center">
                            <el-table-column prop="patrolPers1" label="责任人姓名" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="patrolPersTel1" label="责任人电话" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                            <el-table-column prop="patrolPersDuty1" label="责任人职务" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                            <!-- <el-table-column prop="patrolPersDuty"
                                label="责任人身份"
                                min-width="130"
                                show-overflow-tooltip
                                align="center"
                                :formatter="formatPatrolPersDuty"
                            ></el-table-column> -->
                        </el-table-column>
                        <el-table-column label="操作" align="center" fixed="right" min-width="100">
                           <template slot-scope="scope">
                             <el-button type="primary" icon="el-icon-edit" @click="showDialog(0,scope.row)">编辑</el-button>
                           </template>
                        </el-table-column>
                        <el-table-column label="设置监控" align="center" fixed="right" min-width="120" v-if="isFj">
                          <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" v-if="isFj" @click="showDialogView(scope.row)">绑定监控</el-button>
                          </template>
                        </el-table-column>
                    </el-table>
                </el-main>
                <el-footer class="el-footer-style">
                    <el-pagination
                            style="text-align:center;"
                            small
                            background
                            :current-page.sync="page.pageNum"
                            :page-size="page.pageSize"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            layout="sizes, total, prev, pager, next,jumper"
                            :total="showResultCount"
                            @current-change="pageIndexChange"
                            @size-change="handleSizeChange"
                    ></el-pagination>
                </el-footer>
            </el-card>

        </el-col>

      <el-dialog
        class="outerDialog custom_dialog"
        title="编辑是否省属"
        width="400px"
        :visible.sync="isVisible">
        <div style="width: 100%;height:100%;">
          <el-form ref="addForm" label-width="80px">
            <el-form-item label="是否省属" required>
              <el-select v-model="provincial" clearable placeholder="请选择" style="width: 100%;">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: center">
              <el-button  @click="isVisible=false" style="margin-bottom: 30px;">取消</el-button>
              <el-button type="primary" @click="submit" style="margin-bottom: 30px;">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>

      <el-dialog
        class="outerDialog custom_dialog"
        title="绑定监控点"
        width="400px"
        :visible.sync="isVisibleView">
        <div style="width: 100%;height:100%;">
          <el-form ref="addForm" label-width="80px">
            <el-form-item label="监控点" required>
              <el-select v-model="viewList" clearable multiple filterable collapse-tags placeholder="请选择" style="width: 100%;">
                <el-option :label="item.indexName" :value="item.indexCode" v-for="(item,index) in allViewList"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="text-align: center">
              <el-button  @click="isVisibleView=false" style="margin-bottom: 30px;">取消</el-button>
              <el-button type="primary" @click="submitView" style="margin-bottom: 30px;">确定</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </el-row>

</template>

<style>

    .el-table {


    }
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .ducha_form {
        /*width: 100%;*/
        /*height: 70px;*/
    }

    .ducha_form .el-input {
        width: 150px !important;
    }

    .ducha_form label {
        /*margin-left: 15px;*/
    }

    .ducha_table{

    }

    .el-footer-style {
        text-align: center;
        width:100%;
    }

    .sh-form-inline {


    }

</style>

<script>
    // 造数据
    let options = [{
        value: "'1'",
        label: '山丘水库'
    }, {
        value: "'2'",
        label: '平原水库'
    },{
        value: "'3'",
        label: '地下水库'
    }];
    // 工程规模
    let engScalLabels = [ '大(1)型','大(2)型','中型','小(1)型','小(2)型','其他'];
    let engScalValues = ['1','2','3','4','5','9'];
    let engScalOptions = [engScalLabels.length];
    for(let i=0;i<engScalLabels.length;i++){
        engScalOptions[i] = {'label':engScalLabels[i],'value':engScalValues[i]};
    }

    import provTreeList from '../../../widgets/provTreeList';
    import request from '../../../utils/gw_ajax_request.js';
    import shuiKuChaXunPl from './shuiKuChaXun_piliang.vue';
    import { exportModel } from "@util/gw_exportModel";

    export default {
        name: "shuiKuChaXun",
        components:{
            provTreeList: provTreeList,
            shuiKuChaXunPl: shuiKuChaXunPl
        },
        data() {
            return {
                tableLoading:true,
                tableList: [],
                page:{
                    pageNum: 1,
                    pageSize: 20,
                },
                showResultCount: 0,
                options: options,
                engScalOptions: engScalOptions,
                autoSort: '请选择',
                autoInput: '请输入',
                formInline: {
                    rsCode: '',
                    rsName: '',
                    rsType: '',
                    rsAdmCode: '',
                    rsAdmName: '',
                    location: '',
                    adName: '',
                    adFullName: '',
                    addvcd: '',
                    engScal: ''
                },
                rootCode:'000000',
                // rootType:'1',
                rootType:'2',
                formStyle: {
                    width: '100%',
                    height: '70px',

                },
                // dxdcMainHeight: window.innerHeight - 197,
                dxdcMainHeight: window.innerHeight - 200,
                dxdcAsideHeight: window.innerHeight - 90,
                showShuiKuChaXunPl: false,
                multipleSelection:[],
                isVisible:false,
                isVisibleView:false,
                provincial:"",
                isMul:false,
                currentRow:{},
                viewList:[],
                allViewList:[]
            }
        },
        computed: {
            isFj(){
                if(localStorage.getItem('currentRlcode').substring(0,2)=="35"){
                    return true;
                }else{
                    return false;
                }
            }
        },
        mounted() {
            this.getShuiKuList()
        },
        activated(){
            this.getShuiKuList()
        },
        methods: {
            submit(){
               if(!this.provincial){
                   this.$message.warning("请选择是否省属");
                   return false;
               }
               if(this.isMul){
                   var list = [];
                   this.multipleSelection.forEach((item,index)=>{
                       list.push(item.rsCode);
                   })
                   request.put('/dc/insp/rsvrRgstr/attRsBase/provincial',{provincial:this.provincial,rsCodes:list}).then((res)=>{
                       if(res.success){
                           this.multipleSelection = [];
                           this.isVisible = false;
                           this.getShuiKuList();
                       }
                   })
               }else{
                   var params = {
                       rsCodes:[this.currentRow.rsCode],
                       provincial:this.provincial
                   }
                   request.put('/dc/insp/rsvrRgstr/attRsBase/provincial',params).then((res)=>{
                       if(res.success){
                           this.isVisible = false;
                           this.getShuiKuList();
                       }
                   })
               }
            },
            submitView(){
                // //debugger
                let newList = [];
                if(this.viewList && this.viewList.length==0){
                    this.$message.warning("请选择监控点");
                    return false;
                }
                this.allViewList.forEach((item,index)=>{
                    if(this.viewList.indexOf(item.indexCode)>-1){
                        item.rsCode = this.currentRow.rsCode;
                        newList.push(item);
                    }
                })
                request.post('/bis/insp/rsvr/camera/batch ',newList).then((res)=>{
                    if(res.success){
                        this.isVisibleView = false;
                        this.getShuiKuList();
                    }
                })
            },
            getAllViewList(rsName,rsCode){
                const _this = this;
                request.get('/bis/insp/rsvr/camera/selectOptions?rsName='+rsName).then((res)=>{
                    _this.allViewList = res.data;
                    _this.getSelectViewList(rsCode);
                })
            },
            showDialogView(row){
                this.currentRow = row;
                this.isVisibleView = true;
                this.viewList = [];
                this.allViewList = [];
                this.getAllViewList(row.rsName,row.rsCode);
            },
            getSelectViewList(rsCode){
                const _this = this;
                request.get('/bis/insp/rsvr/camera/'+rsCode).then((res)=>{
                    if(res.data){
                        res.data.forEach((item,index)=>{
                            _this.viewList.push(item.indexCode);
                        })
                    }
                })
            },
            showDialog(t,row){
                if(t==1){
                    this.provincial = "";
                    this.isMul = true;
                    if(!this.multipleSelection || this.multipleSelection.length==0){
                        this.$message.warning("请选择数据");
                        return false;
                    }
                }else{
                    this.currentRow = row;
                    this.isMul = false;
                }
                this.isVisible = true;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            empty(){
              this.formInline = {};
            },
            formatRsType(row,column){
                let rsType = row.rsType;
                let _rsType = '其他';
                switch (rsType) {
                    case '1' : _rsType = '山丘水库';break;
                    case '2' : _rsType = '平原水库';break;
                    case '3' : _rsType = '地下水库';break;
                }
                return _rsType;
            },
            formatEngScal(row,column){
                let engScal = row.engScal;
                let _engScal = '其他';
                switch (engScal) {
                    case '1' : _engScal = '大(1)型';break;
                    case '2' : _engScal = '大(2)型';break;
                    case '3' : _engScal = '中型';break;
                    case '4' : _engScal = '小(1)型';break;
                    case '5' : _engScal = '小(2)型';break;
                    case '9' : _engScal = '其他';break;
                }
                return _engScal;
            },
            formatPatrolPersDuty(row,column){
                return row.patorPersDuty == '1' ? '专职' : row.patorPersDuty == '2' ? '兼职' : '';
            },
            provTreeSelectChangeHandler: function(params) {
                // this.formInline.addvcd = params.code;
                this.formInline.addvcd = params.likeCode;
                // this.formInline.rsAdmCode = params.likeCode;
                this.getShuiKuList();
            },
            getIndex(index){
                return (index + this.page.pageSize * (this.page.pageNum - 1)) + 1
            },
            onSearch(){
                this.getShuiKuList();
            },
            pageIndexChange(val){
                this.page.pageNum = val;
                this.getShuiKuList();
            },
            handleSizeChange(val){
              this.page.pageSize = val;
              this.getShuiKuList();
            },
            renderHeader(){

            },
            tableRowClassName({row, rowIndex}) {
                // if (rowIndex === 1) {
                //     return 'warning-row';
                // } else if (rowIndex === 3) {
                //     return 'success-row';
                // }
                return '';
            },
            getShuiKuList(){
                let params = {
                    'pageSize': this.page.pageSize,
                    'pageNum': this.page.pageNum,
                    'rsCode': this.formInline.rsCode,
                    'rsName': this.formInline.rsName,
                    'rsType': this.formInline.rsType,
                    'rsAdmCode': this.formInline.rsAdmCode,
                    'rsAdmName': this.formInline.rsAdmName,
                    'adName': this.formInline.adName,
                    'adFullName': this.formInline.adFullName,
                    'admDiv': this.formInline.addvcd,
                    'engScal': this.formInline.engScal,
                };
                var _self = this;
                request.post('/dc/insp/rsvrRgstr/attRsBase',params).then((res)=>{
                    let data = res.data
                    this.tableList = data.list
                    this.showResultCount = data.total
                    this.tableLoading = false
                    this.$nextTick(()=>{
                        _self.$refs.singleTable.clearSelection();
                    })
                })
                console.log('高度：'+ parseInt(this.formStyle.height.replace('px','')/2) )
            },
            batchImport(){
                this.showShuiKuChaXunPl = true
            },
            closePlDialog(){
                this.showShuiKuChaXunPl = false
            },
            getStrParams(obj) {
                let str = '?';
                for(let key of Object.keys(obj)) {
                    str += `${key}=${obj[key]}&`;
                }
                str = str.slice(0, str.length - 1);
                return str;
            },
            // 导出Excel
            async exportExcel(){
                this.tableLoading = true;
                let type = "get";
                let url = `/pdcApi/dc/export/attRsBase${this.getStrParams(Object.assign(this.formInline, this.page))}`;
                let downloadName =  "Excel.xls";
                await exportModel(type,url,downloadName).catch((err) => {
                    this.$message.error("导出失败");
                    this.tableLoading = false;
                })
                this.$message.success("导出成功");
                this.tableLoading = false;
            }
        },
        watch: {

        },
    }
</script>