XAMYWXTUI/src/views/business/manage/index.vue

<!--
 * @Title: 
 * @Description:  管理工作台模块
 * @Author: swp
 * @Date: 2022-08-24 10:49:21
 * @LastEditors: 
 * @LastEditTime: 2022-08-24 10:49:21
-->
<template>
    <div>
        <el-row>
            <el-col :span="4">
                <div class="box">
                    <el-scrollbar>
                        <avue-tree :option="treeOption" :data="treeData" @node-click="nodeClick">
                            <span class="el-tree-node__label" slot-scope="{ node, data }">
                                <span>
                                    <i class="el-icon-office-building"></i>
                                    {{ (node || {}).label }}
                                </span>
                            </span>
                        </avue-tree>
                    </el-scrollbar>
                </div>
            </el-col>
            <el-col :span="20">
                <basic-container>
                    <avue-crud :option="option" :table-loading="loading" :page.sync="page" :data="data" ref="crud"
                        v-model="form" :permission="permissionList" @row-del="rowDel" @row-update="rowUpdate"
                        @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset"
                        @selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange"
                        @refresh-change="refreshChange" @on-load="onLoad" @before-open="beforeOpen"
                        @sort-change="sortChange" @cell-click="cellClick">
                        <template slot-scope="scope" slot="menuLeft">
                            <div class="line">
                                <el-button type="primary" icon="el-icon-download" size="small"
                                    @click="openEquipmentListExportDialog">导出测站设备清单</el-button>
                                <div class="lineText">
                                    <div>
                                        <span class="rtuCount">当前行政区测站总数量: </span> <span class="rtuCount"> {{
                                            countInfo.rtuCount
                                        }}</span>
                                    </div>
                                </div>
                                <div class="lineText">
                                    <span class="spliteLine">/</span>
                                </div>
                                <div class="lineText">
                                    <span class="warnRtuCount">当前行政区异常测站总数量: {{
                                        countInfo.warningRtuCount }}</span>
                                </div>

                            </div>
                        </template>
                        <template slot="runStatusId" slot-scope="row">
                            <div v-if="row.row.runStatusId == 0" style="color: blue;">
                                正常
                            </div>
                            <div v-else-if="row.row.runStatusId == 1"
                                style="color: red;cursor:pointer;text-decoration-line: underline;"
                                @click="openWarningInfo(row.row)">
                                设备异常
                            </div>
                            <div v-else>

                            </div>
                        </template>
                        <template slot-scope="{ row, index }" slot="menu">
                            <el-button type="text" size="small" @click="openRtuDetail(row)" icon="el-icon-view">测站信息
                            </el-button>
                            <el-button type="text" size="small" @click="openWarnInfo(row)"
                                icon="el-icon-warning-outline">异常信息
                            </el-button>
                            <el-button type="text" size="small" @click="openOrder(row)" icon="el-icon-edit-outline">维修任务
                            </el-button>
                            <el-button type="text" size="small" @click="openInspection(row)" icon="el-icon-date">设备巡检
                            </el-button>
                            <el-button type="text" size="small" @click="openRealData(row)" icon="el-icon-s-data">实时数据
                            </el-button>
                            <el-button v-if="permission.rtu_manage_btn_order" type="text" size="small"
                                @click="toManageCheckOrder(row)" icon="el-icon-position">人工派单
                            </el-button>
                        </template>
                    </avue-crud>
                </basic-container>
            </el-col>
        </el-row>

        <el-drawer :visible.sync="warnInfoDialog" v-if="warnInfoDialog" title="设备异常信息" direction="rtl" size="50%"
            append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <rtuwarnlist :rtuCode="rtuCode" ref="rtuwarnlist"></rtuwarnlist>
        </el-drawer>

        <el-drawer :visible.sync="warningInfoDialog" v-if="warningInfoDialog" title="设备异常信息" direction="rtl" size="50%"
            append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <rtuwarninglist :rtuCode="rtuCode" ref="rtuwarninglist"></rtuwarninglist>
        </el-drawer>

        <el-drawer :visible.sync="orderDialog" v-if="orderDialog" title="维修任务信息" direction="rtl" size="50%"
            append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <rtucheckorderlist :rtuCode="rtuCode" ref="rtucheckorderlist"></rtucheckorderlist>
        </el-drawer>

        <el-drawer :visible.sync="inspectionDialog" v-if="inspectionDialog" title="测站巡检信息" direction="rtl" size="50%"
            append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <inspectionreport :rtuCode="rtuCode" ref="inspectionreport"></inspectionreport>
        </el-drawer>

        <el-drawer :visible.sync="rtuDetailDialog" v-if="rtuDetailDialog" title="测站基础信息" direction="rtl" size="50%"
            append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <rtudetail :id="id" ref="rtudetail"></rtudetail>
        </el-drawer>

        <el-drawer :visible.sync="realDataDialog" v-if="realDataDialog" title="测站实时数据" direction="rtl" size="50%"
            append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <realdatadetail :rtuCode="rtuCode" :isRain="isRain" :isRiver="isRiver" :isRes="isRes" :isGround="isGround"
                ref="realdatadetail"></realdatadetail>
        </el-drawer>

        <el-drawer :visible.sync="rtureplacelistDialog" v-if="rtureplacelistDialog" title="测站RTU更换信息" direction="rtl"
            size="50%" append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <rtureplacelist :rtuCode="rtuCode" ref="rtureplacelist"></rtureplacelist>
        </el-drawer>

        <el-drawer :visible.sync="rainsensorreplacelistDialog" v-if="rainsensorreplacelistDialog" title="测站雨量计更换信息"
            direction="rtl" size="50%" append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <rainsensorreplacelist :rtuCode="rtuCode" ref="rainsensorreplacelist"></rainsensorreplacelist>
        </el-drawer>

        <el-drawer :visible.sync="watersensorreplacelistDialog" v-if="watersensorreplacelistDialog" title="测站水位计更换信息"
            direction="rtl" size="50%" append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <watersensorreplacelist :rtuCode="rtuCode" ref="watersensorreplacelist"></watersensorreplacelist>
        </el-drawer>


        <el-drawer :visible.sync="groundsensorreplacelistDialog" v-if="groundsensorreplacelistDialog" title="测站墒情计更换信息"
            direction="rtl" size="50%" append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <groundsensorreplacelist :rtuCode="rtuCode" ref="groundsensorreplacelist"></groundsensorreplacelist>
        </el-drawer>

        <el-drawer :visible.sync="batteryreplacelistDialog" v-if="batteryreplacelistDialog" title="测站蓄电池更换信息"
            direction="rtl" size="50%" append-to-body="true">
            <div slot="title" class="header-title">
                <span class="name">{{ dialogTitle }}</span>
            </div>
            <batteryreplacelist :rtuCode="rtuCode" ref="batteryreplacelist"></batteryreplacelist>
        </el-drawer>


        <el-dialog title="人工派单" :visible.sync="addCheckOrderDialog" v-if="addCheckOrderDialog" width="800px"
            :close-on-click-modal="false" append-to-body>
            <avue-form :option="checkOrderOption" v-model="checkOrderForm" @submit="addCheckOrder" />
        </el-dialog>

        <el-dialog title="测站设备数据导出" :visible.sync="exportDialog" v-if="exportDialog" width="800px"
            :close-on-click-modal="false" append-to-body>
            <el-form label-width="160px">
                <el-form-item label="当前行政区划名称">
                    <el-input v-model="adcdName" aria-readonly="true"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="exportDialog = false" size="small">取 消</el-button>
                <el-button type="primary" @click="equipmentListExport" size="small">导 出</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getList, getDetail, add, update, remove, equipmentExport, getCountInfo } from "@/api/business/manage/manage.js";
import { manuallyOrder } from "@/api/business/order/order.js";
import { getTree } from "@/api/baseinfo/region.js";
import rtuwarninglist from "../warning/rtuwarninglist.vue";
import rtuwarnlist from "../warning/rtuwarnlist.vue";
import rtucheckorderlist from "../order/rtucheckorderlist.vue";
import rtudetail from "./rtudetail.vue";
import inspectionreport from "./inspectionreport.vue";
import realdatadetail from "./realdatadetail.vue";
import rtureplacelist from "./rtureplacelist.vue";
import rainsensorreplacelist from "./rainsensorreplacelist.vue";
import watersensorreplacelist from "./watersensorreplacelist.vue";
import groundsensorreplacelist from "./groundsensorreplacelist.vue";
import batteryreplacelist from "./batteryreplacelist.vue";
import { mapGetters } from "vuex";
export default {
    components: {
        rtuwarnlist,
        rtuwarninglist,
        rtucheckorderlist,
        rtudetail,
        inspectionreport,
        realdatadetail,
        rtureplacelist,
        rainsensorreplacelist,
        watersensorreplacelist,
        groundsensorreplacelist,
        batteryreplacelist
    },
    data() {
        return {
            id: "",
            orderDialog: false,
            warnInfoDialog: false,
            warningInfoDialog: false,
            exportDialog: false,
            rtuDetailDialog: false,
            inspectionDialog: false,
            realDataDialog: false,
            addCheckOrderDialog: false,
            rtureplacelistDialog: false,
            rainsensorreplacelistDialog: false,
            watersensorreplacelistDialog: false,
            groundsensorreplacelistDialog: false,
            batteryreplacelistDialog: false,
            dialogTitle: "",
            rtuCode: '',
            isRain: '',
            isRiver: '',
            isRes: '',
            isGround: '',
            checked: true,
            countInfo: {
                rtuCount: 0,
                warnRtuCount: 0,
            },
            checkOrderForm: {
                id: '',
                rtuName: '',
                rtuCode: '',
                orderDesc: '',
            },
            checkOrderOption: {
                labelWidth: 100,
                emptyBtn: false,
                column: [
                    {
                        label: "id",
                        prop: "id",
                        span: 24,
                        display: false,
                        type: 'input'
                    },
                    {
                        label: "测站编码",
                        prop: "rtuCode",
                        span: 24,
                        readonly: true,
                        clearable: false,
                        rules: [{
                            required: true,
                            message: "请输入测站编码",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "测站名称",
                        prop: "rtuName",
                        span: 24,
                        readonly: true,
                        clearable: false,
                        rules: [{
                            required: true,
                            message: "请输入测站名称",
                            trigger: "blur"
                        }]
                    },
                    {
                        label: "任务说明",
                        prop: "orderDesc",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入任务说明",
                            trigger: "blur"
                        }]
                    },
                ]
            },
            form: {},
            selectionList: [],
            query: {},
            sort: {},
            loading: true,
            page: {
                pageSize: 10,
                currentPage: 1,
                total: 0,
            },
            treeCode: '',
            treeParentCode: '',
            adcdName: '',
            treeData: [],
            treeOption: {
                nodeKey: "id",
                defaultExpandedKeys: [],
                lazy: false,
                addBtn: false,
                menu: true,
                size: "small",
                props: {
                    labelText: "标题",
                    label: "title",
                    value: "value",
                    children: "children",
                },
            },
            option: {
                labelWidth: 140,
                viewLabelWidth: 140,
                searchlabelWidth: 140,
                height: "auto",
                calcHeight: 80,
                align: "center",
                headerAlign: "center",
                tip: false,
                simplePage: true,
                searchShow: true,
                searchMenuSpan: 6,
                tree: true,
                border: true,
                index: true,
                selection: false,
                viewBtn: false,
                editBtn: false,
                delBtn: false,
                addBtn: false,
                menuWidth: 300,
                dialogType: "drawer",
                dialogClickModal: false,
                columnBtn: false,
                column: [
                    {
                        label: "测站编码",
                        prop: "rtuCode",
                        span: 6,
                        width: 120,
                        search: true,
                        searchSpan: 5,
                    },
                    {
                        label: "测站名称",
                        prop: "rtuName",
                        search: true,
                        searchSpan: 5,
                        span: 6,
                        width: 120,
                        // html: true,
                        // formatter: (val) => {
                        //     if (val.rtuName) {
                        //         return '<b>' + val.rtuName + '</b>/' + '<b style="color:grey">' + val.rtuCode + '</b>'
                        //     } else {
                        //         return '<b style="color:grey">' + val.rtuName + '</b>'
                        //     }
                        // }
                    },
                    {
                        label: "运行状态",
                        prop: "runStatusId",
                        span: 24,
                        width: 100,
                        //html:true,
                        // formatter:(val)=>{
                        //   if(val.runStatusId==0){

                        //     return '<b style="color:blue">正常</b>'
                        //   }else{

                        //     return '<b style="color:orangered">预警</b>'
                        //   }    
                        //    }
                    },
                    {
                        label: "最后上线时间",
                        prop: "lastUpTime",
                        span: 24,
                        width: 160,
                        sortable: 'custom',
                    },
                    {
                        label: "实时数据",
                        prop: "isRain",
                        span: 24,
                        width: 160,
                        overHidden: true,
                        html: true,
                        formatter: (val) => {
                            let htmltext = '';
                            if (val.isRain == 1 && val.drp) {
                                htmltext = htmltext + '<b style="color:grey">降水：' + val.drp + '</b>';
                            }
                            if (val.isRiver == 1 && val.z) {
                                if (htmltext.length > 0) {
                                    htmltext = htmltext + '/';
                                }
                                htmltext = htmltext + '<b style="color:grey">水位：' + val.z + '</b>';
                            }
                            else if (val.isRes == 1 && val.rz) {
                                if (htmltext.length > 0) {
                                    htmltext = htmltext + '/';
                                }
                                htmltext = htmltext + '<b style="color:grey">水位：' + val.rz + '</b>';
                            }
                            if (val.isGround == 1 && val.ground) {
                                if (htmltext.length > 0) {
                                    htmltext = htmltext + '/';
                                }
                                htmltext = htmltext + '<b style="color:grey">墒情含水层：' + val.ground + '</b>';
                            }
                            return htmltext;
                        }
                    },
                    {
                        label: "测站类型",
                        prop: "rtuKindDesc",
                        span: 24,
                        width: 160
                    },
                    {
                        label: '测站类型',
                        prop: 'rtuKind',
                        type: 'select',
                        width: 100,
                        hide: true,
                        editDisplay: false,
                        addDisplay: false,
                        search: true,
                        searchSpan: 5,
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        span: 6,
                        dicData: [{
                            name: '雨量站',
                            code: 1
                        }, {
                            name: '水位站',
                            code: 2
                        }, {
                            name: '墒情站',
                            code: 3
                        }, {
                            name: '视频站',
                            code: 4
                        }]
                    },
                    {
                        label: '异常类型',
                        prop: 'warnKind',
                        type: 'select',
                        width: 100,
                        hide: true,
                        editDisplay: false,
                        addDisplay: false,
                        search: true,
                        searchSpan: 5,
                        props: {
                            label: 'name',
                            value: 'code'
                        },
                        span: 6,
                        dicData: [{
                            name: '测站离线',
                            code: 1
                        }, {
                            name: '测站时钟异常',
                            code: 2
                        }, {
                            name: '测站雨量小时报漏报',
                            code: 3
                        }, {
                            name: '测站水位小时报漏报',
                            code: 4
                        }, {
                            name: '雨量5分钟上报延时',
                            code: 5
                        }, {
                            name: '雨量站小时上报延时',
                            code: 6
                        }, {
                            name: '水位站小时上报延时',
                            code: 7
                        }, {
                            name: '雨量疑似异常值',
                            code: 8
                        }]
                    },
                    {
                        label: "行政区",
                        prop: "areaName",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "测站位置",
                        prop: "locationDesc",
                        span: 24,
                        width: 180,
                        editDisplay: false,
                        addDisplay: false,
                        overHidden: true,
                    },
                    {
                        label: "经度",
                        prop: "lng",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "纬度",
                        prop: "lat",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "RTU品牌",
                        prop: "rtuBrand",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "RTU型号",
                        prop: "rtuModel",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "RTU更换时间",
                        prop: "rtuReplaceDate",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                        html: true,
                        formatter: (val) => {
                            if (val.rtuReplaceDate) {
                                let htmltext = '<b style="cursor:pointer;text-decoration-line: underline;color:blue">' + val.rtuReplaceDate + '</b>';
                                return htmltext;
                            }
                        }
                    },
                    {
                        label: "雨量计品牌",
                        prop: "rainSensorBrand",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "雨量计型号",
                        prop: "rainSensorModel",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "雨量计更换时间",
                        prop: "rainSensorReplaceDate",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                        html: true,
                        formatter: (val) => {
                            if (val.rainSensorReplaceDate) {
                                let htmltext = '<b style="cursor:pointer;text-decoration-line: underline;color:blue">' + val.rainSensorReplaceDate + '</b>';
                                return htmltext;
                            }
                        }
                    },
                    {
                        label: "水位计品牌",
                        prop: "waterSensorBrand",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "水位计型号",
                        prop: "waterSensorModel",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "水位计更换时间",
                        prop: "waterSensorReplaceDate",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                        html: true,
                        formatter: (val) => {
                            if (val.waterSensorReplaceDate) {
                                let htmltext = '<b style="cursor:pointer;text-decoration-line: underline;color:blue">' + val.waterSensorReplaceDate + '</b>';
                                return htmltext;
                            }
                        }
                    },
                    {
                        label: "墒情计品牌",
                        prop: "groundSensorBrand",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "墒情计型号",
                        prop: "groundSensorModel",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    },
                    {
                        label: "墒情计更换时间",
                        prop: "groundSensorReplaceDate",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                        html: true,
                        formatter: (val) => {
                            if (val.groundSensorReplaceDate) {
                                let htmltext = '<b style="cursor:pointer;text-decoration-line: underline;color:blue">' + val.groundSensorReplaceDate + '</b>';
                                return htmltext;
                            }
                        }
                    }, {
                        label: "蓄电池容量",
                        prop: "batteryModel",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    }, {
                        label: "蓄电池更换时间",
                        prop: "batteryReplaceDate",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                        html: true,
                        formatter: (val) => {
                            if (val.batteryReplaceDate) {
                                let htmltext = '<b style="cursor:pointer;text-decoration-line: underline;color:blue">' + val.batteryReplaceDate + '</b>';
                                return htmltext;
                            }
                        }
                    }, {
                        label: "太阳能板",
                        prop: "sunPowerModel",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    }, {
                        label: "SIM卡号",
                        prop: "networkSimId",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    }, {
                        label: "SIM卡开卡单位",
                        prop: "networkPayer",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                    }, {
                        label: "SIM卡缴费截止时间",
                        prop: "networkPayEndDate",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                        html: true,
                        formatter: (val) => {
                            if (val.networkPayEndDate) {
                                let htmltext = '<b style="color:grey">' + val.networkPayEndDate + '</b>';
                                return htmltext;
                            }
                        }
                    }, {
                        label: "是否卫星通讯",
                        prop: "isSatellite",
                        span: 24,
                        width: 120,
                        editDisplay: false,
                        addDisplay: false,
                        html: true,
                        formatter: (val) => {
                            let htmltext = '';
                            if (val.isSatellite !== null) {
                                if (val.isSatellite === 0) {
                                    htmltext = htmltext + '<b style="color:grey">否</b>';
                                } else {
                                    htmltext = htmltext + '<b style="color:grey">是</b>';
                                }
                            }
                            return htmltext;
                        }
                    },
                ],
            },
            data: [],
        };
    },
    computed: {
        ...mapGetters(["userInfo", "permission"]),
        permissionList() {
            return {
                addBtn: false,
                viewBtn: false,
                delBtn: false,
                editBtn: false,
            };
        },
        ids() {
            let ids = [];
            this.selectionList.forEach((ele) => {
                ids.push(ele.id);
            });
            return ids.join(",");
        },
    },
    mounted() { },
    created() {
        this.initTree();
    },
    methods: {
        initTree() {
            this.treeData = [];
            getTree().then(res => {
                this.treeData = res.data.data.map(item => {
                    return {
                        ...item,
                        leaf: !item.hasChildren
                    }
                })
                this.treeOption.defaultExpandedKeys.push(this.treeData[0].id);
                this.treeCode = this.treeData[0].id;
                this.query = {};
                this.query['adCode'] = this.treeCode;
                this.adcdName = this.treeData[0].title;
                this.getCountInfo(this.treeCode);
            });
        },
        toOss(path) {
            return this.website.ossServer + path;
        },
        nodeClick(data) {
            this.treeCode = data.id;
            this.adcdName = data.title;
            this.treeParentCode = data.parentId;
            this.query = {};
            this.query['adCode'] = this.treeCode;
            this.page.currentPage = 1;
            var params = {};
            this.onLoad(this.page, params);
            this.getCountInfo(this.treeCode);
        },
        sortChange(val) {
            console.log(JSON.stringify(val))
            //prop":"tm","order":"ascending"  descending
            let prop = val.prop;
            if (prop === 'lastUpTime') {
                this.page.currentPage = 1;
                var params = {};
                let order = val.order;
                if (order) {
                    params['order'] = order;
                    params['prop'] = prop;
                    this.sort = {};
                    Object.assign(this.sort, params)
                } else {
                    this.sort = {};
                }
                this.onLoad(this.page);
            }
        },
        cellClick(row, column, cell, event) {
            if (event.isTrusted) {
                this.rtuCode = row.rtuCode;
                if (column.label === 'RTU更换时间') {
                    if (row.rtuReplaceDate) {
                        this.dialogTitle = row.rtuName + 'RTU更换信息';
                        this.rtureplacelistDialog = true;
                        this.$nextTick(() => {
                            this.$refs["rtureplacelist"].init();
                        });
                    }
                } else if (column.label === '雨量计更换时间') {
                    if (row.rainSensorReplaceDate) {
                        this.dialogTitle = row.rtuName + '雨量计更换信息';
                        this.rainsensorreplacelistDialog = true;
                        this.$nextTick(() => {
                            this.$refs["rainsensorreplacelist"].init();
                        });
                    }
                } else if (column.label === '水位计更换时间') {
                    if (row.waterSensorReplaceDate) {
                        this.dialogTitle = row.rtuName + '水位计更换信息';
                        this.watersensorreplacelistDialog = true;
                        this.$nextTick(() => {
                            this.$refs["watersensorreplacelist"].init();
                        });
                    }
                } else if (column.label === '墒情计更换时间') {
                    if (row.groundSensorReplaceDate) {
                        this.dialogTitle = row.rtuName + '墒情计更换信息';
                        this.groundsensorreplacelistDialog = true;
                        this.$nextTick(() => {
                            this.$refs["groundsensorreplacelist"].init();
                        });
                    }
                } else if (column.label === '蓄电池更换时间') {
                    if (row.batteryReplaceDate) {
                        this.dialogTitle = row.rtuName + '蓄电池更换信息';
                        this.batteryreplacelistDialog = true;
                        this.$nextTick(() => {
                            this.$refs["batteryreplacelist"].init();
                        });
                    }
                }
            }
        },
        getCountInfo(adCode) {
            getCountInfo(adCode
            ).then((res) => {
                this.countInfo = res.data.data;
            });
        },
        addCheckOrder(form, done) {
            manuallyOrder(form
            ).then((res) => {
                console.log(res)
                this.$message({
                    type: "success",
                    message: "提交成功",
                });
                this.addCheckOrderDialog = false;
                done();
            }, (error) => {
                console.log(error)
                this.addCheckOrderDialog = false;
                done();
            });
        },
        openWarnInfo(item) {
            window.console.log(JSON.stringify(item));
            this.rtuCode = item.rtuCode;
            this.dialogTitle = "异常信息[" + item.rtuName + item.rtuCode + "]";
            this.warnInfoDialog = true;
            this.$nextTick(() => {
                this.$refs["rtuwarnlist"].init();
            });
        },
        openWarningInfo(item) {
            window.console.log(JSON.stringify(item));
            this.rtuCode = item.rtuCode;
            this.dialogTitle = "设备异常信息[" + item.rtuName + item.rtuCode + "]";
            this.warningInfoDialog = true;
            this.$nextTick(() => {
                this.$refs["rtuwarninglist"].init();
            });
        },
        openOrder(item) {
            this.rtuCode = item.rtuCode;
            this.dialogTitle = "维修任务[" + item.rtuName + item.rtuCode + "]";
            this.orderDialog = true;
            this.$nextTick(() => {
                this.$refs["rtucheckorderlist"].init();
            });
        },
        openInspection(item) {
            this.rtuCode = item.rtuCode;
            this.dialogTitle = "巡检信息[" + item.rtuName + item.rtuCode + "]";
            this.inspectionDialog = true;
            this.$nextTick(() => {
                this.$refs["inspectionreport"].init();
            });
        },
        openRtuDetail(item) {
            this.id = item.id;
            this.dialogTitle = "测站设备[" + item.rtuName + item.rtuCode + "]";
            this.rtuDetailDialog = true;
            this.$nextTick(() => {
                this.$refs["rtudetail"].init();
            });
        },
        openRealData(item) {
            this.rtuCode = item.rtuCode;
            this.isRain = item.isRain;
            this.isRiver = item.isRiver;
            this.isRes = item.isRes;
            this.isGround = item.isGround;
            this.dialogTitle = "实时数据[" + item.rtuName + item.rtuCode + "]";
            this.realDataDialog = true;
            this.$nextTick(() => {
                this.$refs["realdatadetail"].init();
            });
        },
        toManageCheckOrder(item) {
            this.id = item.id;
            this.dialogTitle = "人工派单[" + item.rtuName + item.rtuCode + "]";
            this.checkOrderForm.id = this.id;
            this.checkOrderForm.rtuCode = item.rtuCode;
            this.checkOrderForm.rtuName = item.rtuName;
            this.checkOrderForm.orderDesc = '';
            this.addCheckOrderDialog = true;
        },
        openEquipmentListExportDialog() {
            this.exportDialog = true;
        },
        getBlob(url) {
            return new Promise(resolve => {
                const xhr = new XMLHttpRequest();
                xhr.open("GET", url, true);
                xhr.responseType = "blob";
                xhr.crossOrigin = "*";
                xhr.onload = () => {
                    if (xhr.status === 200) {
                        resolve(xhr.response);
                    }
                };
                xhr.send();
            })
        },
        saveAs(blob, filename) {
            // if (window.navigator.msSaveOrOpenBlob) {
            //     navigator.msSaveBlob(blob, filename);
            // } else {
            const link = document.createElement('a');
            const body = document.querySelector("body");
            link.href = window.URL.createObjectURL(blob);
            link.download = filename;
            link.style.display = "none";
            body.appendChild(link);
            //var event = new MouseEvent('click') 
            //link.dispatchEvent(event)
            link.click();
            body.removeChild(link);
            window.URL.revokeObjectURL(link.href);
            // }
        },
        equipmentListExport() {
            let that = this;
            equipmentExport(this.treeCode, this.adcdName).then(
                (res) => {
                    window.console.log(JSON.stringify(res));
                    that.exportDialog = false;
                    if (res.data.data.status == 1) {
                        this.$message({
                            type: "success",
                            message: "导出成功!",
                        });
                        var url = res.data.data.url;
                        var filename = res.data.data.filename;
                        this.getBlob(this.toOss(url)).then(res => {
                            this.saveAs(res, filename + ".xlsx");
                        });
                    } else {
                        this.$message({
                            type: "fail",
                            message: "操作失败!",
                        });
                    }

                },
                (error) => {
                    that.exportDialog = false;
                    window.console.log(error);
                    this.$message({
                        type: "fail",
                        message: "操作失败!",
                    });

                }
            );
        },
        rowSave(row, done, loading) {
            add(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
        },
        rowUpdate(row, index, done, loading) {
            update(row).then(
                () => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    done();
                },
                (error) => {
                    window.console.log(error);
                    loading();
                }
            );
        },
        rowDel(row) {
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(row.id);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                });
        },
        searchReset() {
            this.query = {};
            this.query['adCode'] = this.treeCode;
            this.page.currentPage = 1;
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = {};
            this.query['adCode'] = this.treeCode;
            Object.assign(this.query, params)
            this.page.currentPage = 1;
            this.onLoad(this.page, params);
            done();
        },
        selectionChange(list) {
            this.selectionList = list;
        },
        selectionClear() {
            this.selectionList = [];
            this.$refs.crud.toggleSelection();
        },
        handleDelete() {
            if (this.selectionList.length === 0) {
                this.$message.warning("请选择至少一条数据");
                return;
            }
            this.$confirm("确定将选择数据删除?", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return remove(this.ids);
                })
                .then(() => {
                    this.onLoad(this.page);
                    this.$message({
                        type: "success",
                        message: "操作成功!",
                    });
                    this.$refs.crud.toggleSelection();
                });
        },
        beforeOpen(done, type) {
            if (["edit", "view"].includes(type)) {
                getDetail(this.form.id).then((res) => {
                    this.form = res.data.data;
                });
            }
            done();
        },
        currentChange(currentPage) {
            this.page.currentPage = currentPage;
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize;
        },
        refreshChange() {
            var params = {};
            this.onLoad(this.page, params);
        },
        onLoad(page, params = {}) {
            this.loading = true;
            getList(
                page.currentPage,
                page.pageSize,
                Object.assign(params, this.sort, this.query)
            ).then((res) => {
                const data = res.data.data;
                console.log(JSON.stringify(data))
                this.page.total = data.total;
                this.data = data.records;
                this.loading = false;
                this.selectionClear();
            });
        },
    },
};
</script>

<style  lang="scss" scoped>
.cell-click-line {
    text-decoration-line: underline;
}

.line {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.line .lineText {
    margin-left: 10px;
    margin-right: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.line .lineText .spliteLine {
    color: gray;
    font-size: 0.8rem;
}

.line .lineText .adname {
    color: dodgerblue;
    font-size: 0.8rem;
}

.line .lineText .rtuCount {
    color: darkcyan;
    font-size: 0.8rem;
}

.line .lineText .warnRtuCount {
    color: lightcoral;
    font-size: 0.8rem;
}
</style>