<!--台区-->
<template>
    <div>
        <el-form :inline="true" :model="ruleForm" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeArea"></Area>
            </el-form-item>

            <el-form-item label="信息查询:">
                <el-input v-model.trim="ruleForm.searchValue" placeholder="请输入台区名称，所属线路" clearable></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-download" class="pms">PMS获取数据</el-button>
                <!-- <el-button type="primary" icon="el-icon-upload2" class="ml10" @click="upload">PMS数据上传</el-button> -->
                <el-button type="primary" class="ml10" icon="el-icon-search" @click="pagArea">查询</el-button>
                <!-- <el-button type="primary" icon="el-icon-refresh-right" @click="Reset"
          >重置</el-button
        > -->
                <el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
            </el-form-item>
        </el-form>

        <template>
            <span>
                <el-button type="primary" size="mini" class="ml10" icon="el-icon-plus" @click="addFn">新增</el-button>
                <el-button type="primary" size="mini" class="ml10" icon="el-icon-edit" @click="modifyFn">
                    修改
                </el-button>
                <el-button type="primary" size="mini" class="ml10" icon="el-icon-delete" @click="deleteFn">
                    删除
                </el-button>
            </span>
            <vxe-table stripe :data="AreaData" :height="height" border :row-config="{ isCurrent: true, isHover: true }"
                size="mini" ref="StationAreaInformation" style="width: 100%" v-loading="isLoading"
                header-cell-class-name="table_header" @checkbox-all="handleSelectionChange"
                @checkbox-change="handleSelectionChange" class="mt10" :cell-style="cellStyle">
                <vxe-table-column align="center" type="checkbox" width="55"></vxe-table-column>

                <vxe-table-column v-for="(item, index) in tableHeaderArea" align="center" :field="item.prop"
                    :title="item.label" :min-width="item.width" :key="index" :formatter="formFilter"
                    :show-overflow="true"></vxe-table-column>
            </vxe-table>
            <el-pagination background align="right" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" :current-page="ruleForm.pageNum"
                :page-sizes="[20, 30, 40, 50, 100]" :page-size="ruleForm.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="total" class="mt10"></el-pagination>
        </template>

        <!-- <PMS_Data
      :PMSobtain="PMSobtain"
      :title="title"
      @Close="Close"
      :Data="AreaData"
      :Name="tableHeaderArea"
    ></PMS_Data> -->

        <!-- 新增/修改 -->
        <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="addinformation"
            :before-close="handleClose" width="50%" height="80%">
            <el-form :inline="true" :model="form" ref="rulesform" label-width="170px" class="form" :rules="rules">
                <el-form-item label="台区编号:" prop="id" class="mt10">
                    <el-input v-model="form.id" placeholder="请输入台区编号" clearable :disabled="disabled"></el-input>
                </el-form-item>
                <el-form-item label="台区名称:" prop="name" class="mt10">
                    <el-input v-model="form.name" clearable placeholder="请输入台区名称"></el-input>
                </el-form-item>
                <el-form-item prop="orgName" class="mt10" label="组织机构名称:" :rules="{
                    required: true,
                    message: '请输入组织机构名称',
                    trigger: 'change'
                }">
                    <Organization @click="handleNodeClick" ref="Organization" :valueTitle="valueTitle"
                        :editCheckCode="editCheckCode"></Organization>
                </el-form-item>
                <el-form-item prop="operationName" class="mt10" label="运维单位名称:" :rules="{
                    required: true,
                    message: '请输入运维单位名称',
                    trigger: 'change'
                }">
                    <Operation @click="handleNodeClick1" ref="Operation" :valueTitle="valueTitle1"
                        :editCheckCode="editCheckCode1"></Operation>
                </el-form-item>
                <el-form-item label="电站名称:" prop="powerStationId" class="mt10">
                    <el-select v-model="form.powerStationId" clearable placeholder="请选择电站名称" @change="changeFn3"
                        filterable>
                        <el-option v-for="item in statationName" :key="item.powerId"
                            :label="item.orgName + '_' + item.powerName" :value="item.powerId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="监测线路名称:" prop="lineId" class="mt10">
                    <el-select v-model="form.lineId" clearable placeholder="请选择监测线路名称" @change="changeFn4" filterable>
                        <el-option v-for="item in Routetable" :key="item.id" :label="item.stationName + '_' + item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="电压等级:" prop="voltageLevel" class="mt10">
                    <el-select v-model="form.voltageLevel" clearable placeholder="请选择电压等级">
                        <el-option v-for="item in voltageLevelList" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="配变容量:" prop="pcapacity" class="mt10">
                    <el-input v-model="form.pcapacity" maxlength="10" clearable placeholder="请输入配变容量"></el-input>
                </el-form-item>
                <el-form-item label="地区特征:" prop="regionalism" class="mt10">
                    <el-select v-model="form.regionalism" clearable placeholder="请选择地区特征">
                        <el-option v-for="item in Regionalcharacteristics" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否农网:" prop="ifRuralPowerGrid" class="mt10">
                    <el-select v-model="form.ifRuralPowerGrid" clearable placeholder="请选择是否农网">
                        <el-option v-for="item in whether1" :key="item.id" :label="item.label"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="使用性质:" prop="natureOfUse" class="mt10">
                    <el-input v-model="form.natureOfUse" clearable placeholder="请输入使用性质"></el-input>
                </el-form-item>
                <el-form-item label="供电半径:" prop="powerSupplyRadius" class="mt10">
                    <el-input v-model="form.powerSupplyRadius" maxlength="10" clearable
                        placeholder="请输入供电半径"></el-input>
                </el-form-item>
                <el-form-item label="供电线路总长度:" prop="lineLength" class="mt10">
                    <el-input v-model="form.lineLength" maxlength="10" clearable placeholder="请输入供电线路总长度"></el-input>
                </el-form-item>
                <el-form-item label="运行状态:" prop="state" class="mt10">
                    <el-select v-model="form.state" clearable placeholder="请选择运行状态">
                        <el-option v-for="item in runningstate" :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分布式光伏用户数:" prop="distributedPhotovoltaicNum" class="mt10">
                    <el-input v-model="form.distributedPhotovoltaicNum" maxlength="10" clearable
                        placeholder="请输入分布式光伏用户数"></el-input>
                </el-form-item>
                <el-form-item label="分布式光伏总装机容量:" prop="photovoltaicCapacity" class="mt10">
                    <el-input v-model="form.photovoltaicCapacity" maxlength="10" clearable
                        placeholder="请输入分布式光伏总装机容量"></el-input>
                </el-form-item>
                <el-form-item label="是否有电动汽车接入:" prop="ifBevAp" class="mt10">
                    <el-select v-model="form.ifBevAp" clearable placeholder="请选择是否有电动汽车接入">
                        <el-option v-for="item in whether2" :key="item.id" :label="item.label"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="接入负荷类型:" prop="apLoadType" class="mt10">
                    <el-input v-model="form.apLoadType" clearable placeholder="请输入接入负荷类型"></el-input>
                </el-form-item>
                <el-form-item label="是否是上送网公司监测点:" prop="isUpToGrid" class="mt10">
                    <el-select v-model="form.isUpToGrid" clearable placeholder="请选择是否是上送网公司监测点">
                        <el-option v-for="item in whether3" :key="item.id" :label="item.label"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleClose">取 消</el-button>
                <el-button v-if="add" type="primary" @click="addinformationFn">确 定</el-button>
                <el-button v-if="modify" type="primary" @click="modifyinformationFn">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import PMS_Data from '@/views/components/Accountinformation/PMS_Data'
import Organization from './Area/Organization.vue'
import Operation from './Area/Operation.vue'
import {
    getPowerDistributionAreaList,
    addPowerDistributionArea,
    getstatationStatList,
    deletePowerDistributionArea,
    updatePowerDistributionArea,
    getGeneratrixWireList
} from '@/api/hbaccountoperation/StationAreaInformation'
import { deptTree } from '@/api/admin/dept'
import { dicData } from '@/assets/commjs/dictypeData'
import Area from '@/views/components/Area/Area.vue'
export default {
    components: { PMS_Data, Organization, Operation,Area },
    data() {
        return {
            vh: '',
            title: '',
            add: false,
            modify: false,

            // 查询数据
            ruleForm: {
                searchValue: '',
                pageNum: 1,
                pageSize: 20,
                orgId:JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                // orderBy: "",
                // searchBeginTime: "",
                // searchEndTime: "",
                // searchState: 0,
                // sortBy: "",
                // status: 0
            },
            total: 0,
            form: {
                apLoadType: '',
                ditributedPhotovoltaicNum: '',
                id: '',
                ifBevAp: '',
                ifRuralPowerGrid: '',
                isUpToGrid: '',
                lineId: '',
                lineLength: '',
                lineName: '',
                name: '',
                natureOfUse: '',
                operationId: '',
                operationName: '',
                orgId: '',
                orgName: '',
                pcapacity: '',
                photovoltaicCapacity: '',
                powerStationId: '',
                powerSupplyRadius: '',
                powerrName: '',
                regionalism: '',
                state: '',
                voltageLevel: ''
            },
            rules: {
                id: [{ required: true, message: '请输入台区编号', trigger: 'blur' }],
                name: [{ required: true, message: '请输入台区名称', trigger: 'blur' }],
                powerStationId: [{ required: true, message: '请选择电站名称', trigger: 'change' }],
                lineId: [{ required: true, message: '请选择监测线路名称', trigger: 'change' }],
                voltageLevel: [{ required: true, message: '请选择电压等级', trigger: 'change' }],
                regionalism: [{ required: true, message: '请选择地区特征', trigger: 'change' }],
                ifRuralPowerGrid: [{ required: true, message: '请选择是否农网', trigger: 'change' }],
                state: [{ required: true, message: '请选择运行状态', trigger: 'change' }],
                ifBevAp: [
                    {
                        required: true,
                        message: '请选择是否有电动汽车接入',
                        trigger: 'change'
                    }
                ],
                isUpToGrid: [
                    {
                        required: true,
                        message: '请选择是否是上送网公司监测点',
                        trigger: 'change'
                    }
                ],
                natureOfUse: [{ required: true, message: '请输入使用性质', trigger: 'blur' }],
                apLoadType: [{ required: true, message: '请输入接入负荷类型', trigger: 'blur' }],
                pcapacity: [
                    { required: true, message: '请输入配变容量', trigger: 'blur' },
                    { pattern: /^[0-9]*$/, message: '只可以输入数字', trigger: 'blur' }
                ],
                powerSupplyRadius: [
                    { required: true, message: '请输入供电半径', trigger: 'blur' },
                    { pattern: /^[0-9]*$/, message: '只可以输入数字', trigger: 'blur' }
                ],
                lineLength: [
                    { required: true, message: '请输入供电线路总长度', trigger: 'blur' },
                    { pattern: /^[0-9]*$/, message: '只可以输入数字', trigger: 'blur' }
                ],
                distributedPhotovoltaicNum: [
                    {
                        required: true,
                        message: '请输入分布式光伏用户数',
                        trigger: 'blur'
                    },
                    { pattern: /^[0-9]*$/, message: '只可以输入数字', trigger: 'blur' }
                ],
                photovoltaicCapacity: [
                    {
                        required: true,
                        message: '请输入分布式光伏总装机容量',
                        trigger: 'blur'
                    },
                    { pattern: /^[0-9]*$/, message: '只可以输入数字', trigger: 'blur' }
                ]
            },
            height: null,
            height1: null,
            isLoading: false,
            disabled: true,
            disabled1: true,
            multipleSelection: [],
            //台区台账表头
            tableHeaderArea: [
                { prop: 'id', label: '台区编号', width: 120 },
                { prop: 'name', label: '台区名称', width: 220 },
                { prop: 'orgName', label: '组织机构名称', width: 160 },
                // { prop: "orgId", label: "组织机构编号", width:140 },
                { prop: 'operationName', label: '运维单位名称', width: 150 },
                // { prop: "operationId", label: "运维单位编号", width:140 },
                { prop: 'powerrName', label: '变电站名称', width: 180 },
                // { prop: "powerStationId", label: "所属电站编号", width:140 },
                { prop: 'lineName', label: '监测线路名称', width: 180 },
                { prop: 'voltageLevel', label: '电压等级', width: 140 },
                { prop: 'pcapacity', label: '配变容量', width: 100 },
                { prop: 'regionalism', label: '地区特征', width: 120 },
                { prop: 'ifRuralPowerGrid', label: '是否农网', width: 100 },
                { prop: 'natureOfUse', label: '使用性质', width: 100 },
                { prop: 'powerSupplyRadius', label: '供电半径', width: 100 },
                { prop: 'lineLength', label: '供电线路总长度', width: 160 },
                { prop: 'state', label: '运行状态', width: 120 },
                {
                    prop: 'distributedPhotovoltaicNum',
                    label: '分布式光伏用户数',
                    width: 170
                },
                {
                    prop: 'photovoltaicCapacity',
                    label: '分布式光伏总装机容量',
                    width: 190
                },
                { prop: 'ifBevAp', label: '是否有电动汽车接入', width: 150 },
                { prop: 'apLoadType', label: '接入负荷类型', width: 160 },
                { prop: 'isUpToGrid', label: '是否是上送网公司', width: 150 }
                // { prop: "status", label: "数据状态", width:100 },
            ],
            whether1: [
                {
                    id: 0,
                    value: '选项1',
                    label: '否'
                },
                {
                    id: 1,
                    value: '选项2',
                    label: '是'
                }
            ],
            whether2: [
                {
                    id: 0,
                    value: '选项1',
                    label: '否'
                },
                {
                    id: 1,
                    value: '选项2',
                    label: '是'
                }
            ],
            whether3: [
                {
                    id: 0,
                    value: '选项1',
                    label: '否'
                },
                {
                    id: 1,
                    value: '选项2',
                    label: '是'
                }
            ],
            editCheckCode: '',
            valueTitle: '',
            editCheckCode1: '',
            valueTitle1: '',
            AreaData: [],
            Regionalcharacteristics: [], //地区特征
            runningstate: [], //运行状态
            voltageLevelList: [], //电压等级
            device: '',
            statationName: [],
            organization: [],
            operation: [],
            Routetable: [],
            PMSobtain: false,
            information: false, //修改台区信息
            addinformation: false, //新增台区信息
            LoadTypeList: [],
            DeviceUseNaturelList: []
        }
    },
    created() {
        this.getclassificationData()
    },

    mounted() {
        this.device = window.devicePixelRatio

        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.Area()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.height = window.sessionStorage.getItem('appheight') - 205
            this.height1 = window.sessionStorage.getItem('appheight') - 285
        },
        // 切换选项
        handleNodeClick(data) {
            this.form.powerStationId = ''
            this.form.lineId = ''

            if (data.code != null) {
                let form = {
                    deptId: data.id
                }
                // 变电站名称
                getstatationStatList(form).then(res => {
                    this.statationName = res.data
                })
            }
            this.form.orgId = data.code
            this.form.orgName = data.name
        },
        handleNodeClick1(data) {
            this.form.operationId = data.code
            this.form.operationName = data.name
        },

        //电站change事件,加载线路
        changeFn3(val) {
            this.form.lineId = ''

            let form = {
                stationId: val
            }
            getGeneratrixWireList(form).then(res => {
                this.Routetable = res.data
            })
            this.statationName.forEach(item => {
                if (item.powerId == val) {
                    this.form.powerrName = item.powerName
                }
            })

            this.$forceUpdate()
        },

        //
        changeFn4(val) {
            this.Routetable.forEach(item => {
                if (item.id == val) {
                    this.form.lineName = item.name
                }
            })

            this.$forceUpdate()
        },
        //获取类型
        getclassificationData() {
            //地区特征
            var code = 'Area'
            this.Regionalcharacteristics = dicData(code, [])
            //运行状态
            var code1 = 'Line_State'
            this.runningstate = dicData(code1, [])
            //电压等级
            var code3 = 'Dev_Voltage'
            this.voltageLevelList = dicData(code3, [])
            //使用性质
            var code4 = 'Device_UseNature'
            this.DeviceUseNaturelList = dicData(code4, [])
            //接入负荷类型
            var code5 = 'Load_Type'
            this.LoadTypeList = dicData(code5, [])
        },

        //PMS获取数据
        // PMSobtainFn() {
        //   this.PMSobtain = true;
        //   this.title = "线路表";
        // },
        //查询台区信息
        pagArea() {
            this.ruleForm.pageNum = 1
            this.ruleForm.pageSize = 20
            this.Area()
        },
        Area() {
            this.isLoading = true
            getPowerDistributionAreaList(this.ruleForm).then(res => {
                this.isLoading = false
                this.AreaData = res.data.records
                this.total = res.data.total
            })
        },
        // 数据过滤
        formFilter(row, column) {
            if (row.column.property == 'regionalism') {
                let title = ''
                this.Regionalcharacteristics.forEach(item => {
                    if (item.value == row.row.regionalism) {
                        title = item.label
                    }
                })
                return title
            } else if (row.column.property == 'state') {
                let title = ''
                this.runningstate.forEach(item => {
                    if (item.value == row.row.state) {
                        title = item.label
                    }
                })
                return title
            } else if (row.column.property == 'voltageLevel') {
                let title = ''
                this.voltageLevelList.forEach(item => {
                    if (item.value == row.row.voltageLevel) {
                        title = item.label
                    }
                })
                return title
            } else if (row.column.property == 'natureOfUse') {
                let title = ''
                this.DeviceUseNaturelList.forEach(item => {
                    if (item.value == row.row.natureOfUse) {
                        title = item.label
                    }
                })
            } else if (row.column.property == 'apLoadType') {
                let title = ''
                this.LoadTypeList.forEach(item => {
                    if (item.value == row.row.apLoadType) {
                        title = item.label
                    }
                })
            } else {
                return row.row[row.column.property]
            }
        },

        //数据上传
        upload() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择台账!!!',
                    type: 'warning'
                })
                return
            }
            this.$message({
                showClose: true,
                message: '上传成功！！！',
                type: 'success'
            })
        },
        // 重置
        Reset() {
            // 查询数据
            this.ruleForm.searchValue = ''
        },

        //获取数据
        // getData() {
        // getstatationStatList().then((res) => {
        //   // console.log(res);
        //   this.statationName = res.data;
        // });
        // deptTree().then(res=>{
        //   if(res.code=='A0000'){
        //     this.operation=res.data[0].children[0].children
        //     this.organization=res.data[0].children[0].children
        //   }
        // })
        // getGeneratrixWireList().then((res) => {
        //   this.Routetable = res.data;
        // });
        // },
        //新增
        addFn() {
            this.form = {
                apLoadType: '',
                ditributedPhotovoltaicNum: '',
                id: '',
                ifBevAp: '',
                ifRuralPowerGrid: '',
                isUpToGrid: '',
                lineId: '',
                lineLength: '',
                lineName: '',
                name: '',
                natureOfUse: '',
                operationId: '',
                operationName: '',
                orgId: '',
                orgName: '',
                pcapacity: '',
                photovoltaicCapacity: '',
                powerStationId: '',
                powerSupplyRadius: '',
                powerrName: '',
                regionalism: '',
                state: '',
                voltageLevel: ''
            }
            this.disabled = false
            this.modify = false
            this.add = true
            this.title = '新增台区信息'
            this.addinformation = true
            // this.getData();
        },
        //新增台区确定
        addinformationFn() {
            this.$refs.rulesform.validate(value => {
                // console.log(value);
                if (value == true) {
                    this.$confirm('是否确认新增?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            addPowerDistributionArea(this.form).then(res => {
                                if (res.code == 'A0000') {
                                    this.$message({
                                        message: res.message,
                                        type: 'success'
                                    })
                                }
                                this.addinformation = false
                                this.Area()
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消新增'
                            })
                        })
                }
            })
        },
        handleClose() {
            this.addinformation = false
            if (this.title == '新增台区信息') {
                this.$refs.Operation.form.valueTitle = ''
                this.$refs.Organization.form.valueTitle = ''
            }
        },
        //修改数据
        modifyFn() {
            // this.getData();
            this.disabled = true
            this.modify = true
            this.add = false
            this.title = '修改台区信息'
            if (this.multipleSelection.length != 1) {
                this.$message({
                    showClose: true,
                    message: '请选择台账!!!',
                    type: 'warning'
                })
                return
            }

            this.addinformation = true
            this.form = JSON.parse(JSON.stringify(this.multipleSelection[0]))
            this.form.powerrId = this.form.orgName + '_' + this.form.powerrName
            this.valueTitle = this.multipleSelection[0].orgName
            this.editCheckCode = this.multipleSelection[0].orgId
            this.valueTitle1 = this.multipleSelection[0].operationName
            this.editCheckCode1 = this.multipleSelection[0].operationId

            let form = {
                deptCode: this.multipleSelection[0].orgId
            }
            // 变电站名称
            getstatationStatList(form).then(res => {
                this.statationName = res.data
            })

            let formWire = {
                stationId: this.multipleSelection[0].powerStationId
            }
            getGeneratrixWireList(formWire).then(res => {
                this.Routetable = res.data
            })

            if (this.form.ifRuralPowerGrid == '是') {
                this.form.ifRuralPowerGrid = 1
            } else if (this.form.ifRuralPowerGrid == '否') {
                this.form.ifRuralPowerGrid = 0
            }
            if (this.form.ifBevAp == '是') {
                this.form.ifBevAp = 1
            } else if (this.form.ifBevAp == '否') {
                this.form.ifBevAp = 0
            }
            if (this.form.isUpToGrid == '是') {
                this.form.isUpToGrid = 1
            } else if (this.form.isUpToGrid == '否') {
                this.form.isUpToGrid = 0
            }
        },
        //修改台区信息确定
        modifyinformationFn() {
            this.$refs.rulesform.validate(value => {
                // console.log(value);
                if (value == true) {
                    this.$confirm('是否确认修改?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    })
                        .then(() => {
                            updatePowerDistributionArea(this.form).then(res => {
                                if (res.code == 'A0000') {
                                    this.$message({
                                        message: res.message,
                                        type: 'success'
                                    })
                                }
                                this.addinformation = false
                                this.Area()
                            })
                        })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消修改'
                            })
                        })
                }
            })
        },
        // 删除
        deleteFn() {
            if (this.multipleSelection.length == 0) {
                this.$message({
                    showClose: true,
                    message: '请选择台账!!!',
                    type: 'warning'
                })
                return
            }
            this.$confirm('是否确认删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    let id = []
                    this.multipleSelection.forEach(item => {
                        id.push(item.id)
                    })

                    deletePowerDistributionArea(id).then(res => {
                        if ((res.code == 'A0000')) {
                            this.$message({
                                type: 'success',
                                message: res.message
                            })
                        }
                        this.Area()
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },

        // //关闭PMS数据弹框
        // Close() {
        //   this.PMSobtain = false;
        // },

        // 表格多选
        handleSelectionChange(row) {
            this.multipleSelection = row.records
            // console.log(this.multipleSelection);
        },

        //每页条数改变时触发 选择一页显示多少行
        handleSizeChange(val) {
            this.ruleForm.pageSize = val
            this.Area()
        },
        //当前页改变时触发 跳转其他页
        handleCurrentChange(val) {
            this.ruleForm.pageNum = val
            this.Area()
        },
        cellStyle(row) {
            if (row.row.ifRuralPowerGrid == 0 || row.row.ifBevAp == 0 || row.row.isUpToGrid == 0) {
                row.row.ifRuralPowerGrid = '否'
                row.row.ifBevAp = '否'
                row.row.isUpToGrid = '否'
            } else if (row.row.ifRuralPowerGrid == 1 || row.row.ifBevAp == 1 || row.row.isUpToGrid == 1) {
                row.row.ifRuralPowerGrid = '是'
                row.row.ifBevAp = '是'
                row.row.isUpToGrid = '是'
            }
        },

        handleNodeArea(data) {
            this.ruleForm.orgId = data.id
        },

        //导出
        exportEvent() {
            getPowerDistributionAreaList({
                searchValue: this.ruleForm.searchValue,
                pageNum: 1,
                pageSize: this.total
            }).then(res => {
                this.$refs.StationAreaInformation.exportData({
                    filename: '台区信息', // 文件名字
                    sheetName: 'Sheet1',
                    type: 'xlsx', //导出文件类型 xlsx 和 csv
                    useStyle: true,
                    data: res.data.records, // 数据源 // 过滤那个字段导出
                    columnFilterMethod: function (column, $columnIndex) {
                        return !(column.$columnIndex === 0)
                    }
                })
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');

::v-deep .vxe-table .cell {
    text-align: center;
}

::v-deep .el-tabs--border-card>.el-tabs__content {
    padding: 10px;
}

::v-deep .form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-form-item {
        display: flex;
        width: 48%;

        .el-form-item__content {
            flex: 1 !important;

            .el-select {
                width: 100%;
            }

            .el-input__inner {
                width: 100% !important;
            }

            .el-date-editor {
                width: 100%;
            }
        }
    }
}

.pms {
    margin-left: 10px;
}

.obtain {
    margin-left: 1220px;
}
</style>
