<script lang="ts">
export default {
    name: "record",
};
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Eldialog from '@/components/seccmsdialog/eldialog.vue'
import Page from '@/components/Pagination/page.vue'
import point from '@/components/IntelligentPoint/point.vue'
import point1 from '@/components/IntelligentPoint/index.vue'
import { ElMessageBox, ElMessage, ElTable, ElProgress } from 'element-plus'
import { downloadFile } from '@/utils/index';
import {
    getTreefirst,
    getDeviceByType
} from '@/api/device';
import {
    getMainDeviceByType,
    getAlgorithmArrangePage,
    saveAlgorithmArrange,
    callAlgorithmArrange,
    getArrangeDeviceById,
    updateAlgorithmArrange,
    saveArrangeDevice,
    getArrangeDeviceInfo,
    createArrangeById,
    downloadArrangeReport,
    deleteAlgorithmArrange
} from '@/api/pointSolution';
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import { useUserStore } from '@/store/modules/user';
import camera from '@/assets/point/1.svg'
import voiceprint from '@/assets/point/2.svg'
import partial from '@/assets/point/3.svg'
import humidity from '@/assets/point/4.svg'
import Viewfile from '@/components/Viewfile/index.vue'
const userStore = useUserStore();
onMounted(() => {
    getType()
    getdata()
})
//获取类型一类
const stationarr: any = ref([])
const businessTypearr: any = ref([])
const stationTypearr: any = ref([])
const EquipmentTypearr: any = ref([])
const arrangeDeviceTypearr: any = ref([])
function currency(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}
function currency1(list: any, itemcode: any) {
    let dictname: any = []
    itemcode = itemcode.split(',')
    list.forEach((element: any) => {
        itemcode.forEach((item: any) => {
            if (element.itemcode == item) {
                dictname.push(element.dictname)
            }
        })
    })
    return dictname.join(',')
}
function getType() {
    getTreefirst().then((res: any) => {
        stationarr.value = res.data
    })
    getDeviceByType({ dictcode: 'businessType' }).then((res: any) => {
        businessTypearr.value = res.data
    })
    getDeviceByType({ dictcode: 'stationType' }).then((res: any) => {
        stationTypearr.value = res.data
    })
    getDeviceByType({ dictcode: 'EquipmentType' }).then((res: any) => {
        EquipmentTypearr.value = res.data
    })
    getDeviceByType({ dictcode: 'arrangeDeviceType' }).then((res: any) => {
        arrangeDeviceTypearr.value = res.data
    })
}


////
const pointbgurl = ref('')
const smallurl: any = ref([

])
//获取图片尺寸
const imgsize: any = ref({})
const getNetworkImageSize = (url: any) => {
    return new Promise((resolve) => {
        const img = new Image();
        img.crossOrigin = "anonymous"; // 处理跨域问题
        img.onload = () => resolve({
            width: img.naturalWidth,
            height: img.naturalHeight
        });
        img.src = url;
    });
};

function handlePositionChange(val: any, file: any) {
    console.log(val)
    console.log(file)
    const form: any = {
        algorithmArrangeDevice: [],
        arrangeId: '',
    }
    const pintarr: any = []
    val.forEach((item: any) => {
        pintarr.push({
            id: item.id ? item.id : '',
            areaId: item.areaId,
            areaName: item.areaName,
            patroldeviceType: item.patroldeviceType,
            patroldevicePos: JSON.stringify({
                x: item.x,
                y: item.y
            }),
        })
    })
    form.algorithmArrangeDevice = pintarr
    form.arrangeId = budian.value.id
    console.log(form)

    const formData = new FormData();
    formData.append('data', new Blob([JSON.stringify(form)], { type: 'application/json' }));
    formData.append('file', file); // 假设这是用户选择的图片文件
    saveArrangeDevice(formData).then((res: any) => {
        console.log(res)
        if (res.code == 0) {
            ElMessage.success('修改保存成功')
            diatuzhi.value = false
            getcoordinate(false)
            getpointtable()
        }


    })
}
//控制行变色
const tableRowClassName = ({
    row,
    rowIndex,
}: {
    row: any
    rowIndex: number
}) => {
    if (rowIndex % 2 === 0) {
        return 'warning-row'
    } else if (rowIndex % 2 === 1) {
        return 'success-row'
    }
    return ''
}
const rules = ref({
    arrangeName: [
        { required: true, message: '请输入布点方案名称', trigger: 'blur' },
    ],
    stationCode: [
        { required: true, message: '请选择变电站', trigger: 'change' },
    ],
    businessType: [
        { required: true, message: '请选择业务类型', trigger: 'change' },
    ],
    deviceTypeList1: [
        { required: true, message: '请选择主设备类型', trigger: 'change' },
    ],
})
//方案列表
const dataform: any = ref({
    size: 20,
    current: 1,
})
const total = ref(0)
const tableData = ref([{}])
const tablelosading = ref(false)
function getdata() {
    tablelosading.value = true
    getAlgorithmArrangePage(dataform.value).then((res: any) => {
        tablelosading.value = false
        tableData.value = res.data.records
        dataform.value.size = res.data.size
        dataform.value.current = res.data.current
        total.value = res.data.total
    })
}
//查看
const dialogVisible = ref(false)
function lookprogramme(row: any) {

}
function handleClose() {
    dialogVisible.value = false
}
//删除
function delprogramme(row: any) {
    ElMessageBox.confirm('确定要删除此布点方案吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        deleteAlgorithmArrange({ id: row.id }).then((res: any) => {
            ElMessage.success('删除成功')
            getdata()
        })
    })
}
//新增——修改布点设置
const programme = ref(false)
const infoForm = ref()
const schemeform: any = ref({
    arrangeName: '',//布点方案名称
    stationCode: '',//站点id
    stationType: '',//站点类型
    voltLevel: '',//电压等级
    businessType: '',//业务类型；1：远程智能巡视；2：一次设备在线监测；3：智能锁控；4：动环监测
    deviceTypeList1: [],//主设备类型
    deviceTypeList: '',//主设备类型
})
function addprogramme() {
    programme.value = true
    active.value = 1
    reset()

}
function editprogramme(row: any) {
    budian.value = row
    programme.value = true
    active.value = 1
    schemeform.value = row
    schemeform.value.deviceTypeList1 = row.deviceTypeList.split(',')
    if (row.imageUrl) {
        imageUrl.value = userStore.imgUrl + row.imageUrl
    } else {
        imageUrl.value = ''
    }
    // imageUrl.value = userStore.imgUrl + row.imageUrl
    confirmClick()
}
function goprogramme() {
    programme.value = false
    budian.value = ''
    getdata()
}
function typevol() {
    const arr = stationarr.value.find((item: any) => item.stationCode == schemeform.value.stationCode);
    schemeform.value.stationType = arr.stationType
    schemeform.value.voltLevel = arr.voltLevel
    schemeform.value.stationId = arr.stationId
    schemeform.value.stationName = arr.stationName
}
function reset() {
    schemeform.value = {
        arrangeName: '',//布点方案名称
        stationCode: '',//站点id
        stationType: '',//站点类型
        voltLevel: '',//电压等级
        businessType: '',//业务类型；1：远程智能巡视；2：一次设备在线监测；3：智能锁控；4：动环监测
        deviceTypeList1: [],//主设备类型
        deviceTypeList: '',//主设备类型
    }
    if (infoForm.value != null) infoForm.value.resetFields();
    imageUrl.value = ''
    uploadFile.value = null
    numdata.value.length = 0
}
const numdata = ref([])
const numloading = ref(false)
function confirmClick() {
    if (schemeform.value.stationCode) {
        numloading.value = true
        let deviceTypeList = JSON.parse(JSON.stringify(schemeform.value.deviceTypeList1))
        getMainDeviceByType({ stationCode: schemeform.value.stationCode, deviceTypeList: deviceTypeList.join(',') }).then((res: any) => {
            numdata.value = res.data
            numloading.value = false
        })
    } else {
        ElMessage.warning('请先先择变电站');
        (schemeform.value.deviceTypeList1).length = 0
    }

}
const budian: any = ref(null)
function addjilu(formEl: any) {
    formEl.validate((valid: any) => {
        if (valid) {
            schemeform.value.deviceTypeList = JSON.parse(JSON.stringify(schemeform.value.deviceTypeList1)).join(',')
            const files = new FormData()
            files.append('arrangeName', schemeform.value.arrangeName)
            files.append('stationCode', schemeform.value.stationCode)
            files.append('stationName', schemeform.value.stationName)
            files.append('stationId', schemeform.value.stationId)
            files.append('stationType', schemeform.value.stationType)
            files.append('voltLevel', schemeform.value.voltLevel)
            files.append('businessType', schemeform.value.businessType)
            files.append('deviceTypeList', schemeform.value.deviceTypeList)
            if (uploadFile.value) files.append('file', uploadFile.value)
            if (schemeform.value.id) {
                files.append('id', schemeform.value.id)
                updateAlgorithmArrange(files).then((res: any) => {
                    if (res.code == 0) {
                        ElMessage.success('布点方案修改成功')
                    }
                })
            } else {
                saveAlgorithmArrange(files).then((res: any) => {
                    if (res.code == 0) {
                        ElMessage.success('布点方案添加成功')
                        budian.value = res.data
                    }
                })
            }

        }
    })

}
//上传图片
const imageUrl: any = ref('');
const uploadFile = ref(null);

const handleChange = (file: any) => {
    // 验证文件类型和大小等
    const isJPG = file.raw.type === 'image/jpeg';
    const isPNG = file.raw.type === 'image/png';
    const isLt2M = file.raw.size / 1024 / 1024 < 2;

    if (!isJPG && !isPNG) {
        ElMessage.error('上传图片只能是 JPG/PNG 格式!');
        return false;
    }


    // 预览图片
    const reader = new FileReader();
    reader.onload = (e: any) => {
        imageUrl.value = e.target.result;
    };
    reader.readAsDataURL(file.raw);

    // 保存文件对象用于后续上传
    uploadFile.value = file.raw;
};

const beforeAvatarUpload = (file: any) => {
    // 这里可以做一些上传前的验证
    return true;
};


const active = ref(1)
function activechange() {
    if (active.value == 1) {
        if (schemeform.value.id) {
            if (!budian.value.imageUrl) {
                ElMessageBox.confirm('当前变电站图纸未上传，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    getcoordinate(true)
                    getpointtable()
                    return
                })
            } else {
                getcoordinate(true)
                getpointtable()
            }

        } else {
            if (!budian.value) {
                ElMessage.warning('请先添加布点方案记录后，在进行下一步')
                return
            }
            if (!budian.value.imageUrl) {
                ElMessageBox.confirm('当前变电站图纸未上传，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    getsuanfa()
                    return
                })
            }
            getsuanfa()
        }

    } else if (active.value == 2) {
        createArrangeById({ id: budian.value.id }).then((res: any) => {
            if (res.code == 0) {
                active.value += 1
            }

        })
    } else {
        active.value += 1
    }

    // 
}
//请求算法
const buttonloading = ref(false)
function getsuanfa() {
    buttonloading.value = true
    callAlgorithmArrange({ id: budian.value.id }).then((res: any) => {
        if (res.code == 0) {
            getcoordinate(true)
            getpointtable()
        }
        buttonloading.value = false

    })

}
//获取查询布点区域的设备数量
const pointtable: any = ref([])
const pointloading = ref(false)
function getpointtable() {
    pointloading.value = true
    getArrangeDeviceInfo({ arrangeId: budian.value.id }).then((res: any) => {
        if (res.code == 0) {
            pointtable.value = res.data
            pointloading.value = false
        }
    })
}

//查询坐标
function getcoordinate(val: any) {
    smallurl.value.length = 0
    getArrangeDeviceById({ arrangeId: budian.value.id }).then((res: any) => {
        if (res.code == 0) {
            if (val) {
                active.value += 1
            }

            res.data.forEach((item: any) => {
                let urldata: any = {}
                urldata.id = item.id
                urldata.size = 16
                urldata.x = JSON.parse(item.patroldevicePos).x
                urldata.y = JSON.parse(item.patroldevicePos).y
                urldata.url = gettypearr(arrangeDeviceTypearr.value, item.patroldeviceType)
                urldata.areaId = item.areaId
                urldata.areaName = item.areaName
                urldata.patroldeviceType = item.patroldeviceType
                smallurl.value.push(urldata)
            })
            if (budian.value.imageUrl) {
                pointbgurl.value = userStore.imgUrl + budian.value.imageUrl
                getNetworkImageSize(pointbgurl.value)
                    .then(size => imgsize.value = size);
            } else {
                pointbgurl.value = ''
            }
            console.log(smallurl.value)
        }
    })
}
function gettypearr(list: any, type: any) {
    let urlname = ''
    list.forEach((item: any) => {
        if (item.itemcode == type) {
            if (item.dictname == '摄像机') {
                urlname = camera
            } else if (item.dictname == '声纹传感器') {
                urlname = voiceprint
            } else if (item.dictname == '局放传感器') {
                urlname = partial
            } else if (item.dictname == '温湿度传感器') {
                urlname = humidity
            }

        }
    });
    return urlname
}
function goon() {
    active.value -= 1
}
const diatuzhi = ref(false)
function edittuzhi() {
    diatuzhi.value = true
}
function tuzhiclose() {
    diatuzhi.value = false
    getcoordinate(false)
    getpointtable()
}
//预览pdf
const ViewfileUrl = ref("")
const title1 = ref('')
const isViewfile = ref(false)
function viewReport() {
    title1.value = '布点方案'
    ViewfileUrl.value = userStore.webApiBaseUrl + '/algorithm/algorithm-arrange/downloadArrangeReport?id=' + budian.value.id
    isViewfile.value = true
}
function viewReport1(row: any) {
    if (row.custom2) {
        title1.value = '布点方案'
        ViewfileUrl.value = userStore.webApiBaseUrl + '/algorithm/algorithm-arrange/downloadArrangeReport?id=' + row.id
        isViewfile.value = true
    } else {
        ElMessage.warning('该方案未生成布点方案')
    }

}
function CloseView() {
    isViewfile.value = false
}
function download() {
    downloadArrangeReport({ id: budian.value.id }).then((response: any) => {
        downloadFile(response, '220kV_变电站_一次在线设备在线监测_智能布点方案', 'docx')
    }).catch(() => {
    });
}
</script>

<template>
    <div style=" padding: 17px 15px 8px 15px;">
        <div class="record-box" v-if="!programme">
            <div class="title_top">
                <div class="screenHomepage">
                    <el-input v-model="dataform.arrangeName" clearable @change="getdata()" placeholder="请输入方案名称"
                        style="margin-right:10px ;width: 180px; ">
                    </el-input>
                    <el-select v-model="dataform.stationCode" placeholder="请选择变电站"
                        style="width: 240px;margin-right:10px" clearable @change="getdata()">
                        <el-option v-for="item in stationarr" :key="item.stationCode" :label="item.stationName"
                            :value="item.stationCode" />
                    </el-select>
                    <el-select v-model="dataform.businessType" placeholder="请选择业务类型"
                        style="width: 240px;margin-right:10px" clearable @change="getdata()">
                        <el-option v-for="item in businessTypearr" :key="item.itemcode" :label="item.dictname"
                            :value="item.itemcode" />
                    </el-select>
                    <el-button class="searchButton" @click="getdata()">搜索</el-button>
                </div>
                <el-button class="searchButton" @click="addprogramme()">新增布点</el-button>
            </div>
            <el-table :data="tableData" :row-class-name="tableRowClassName" class="PatrolMonitoring"
                v-loading="tablelosading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
                style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(72vh); overflow: auto "
                :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                <el-table-column type="index" label="序号" width="40px" align="center" />
                <el-table-column property="arrangeName" width="100px" label="方案名称" align="center" />
                <el-table-column property="stationName" width="100px" label="变电站名称" align="center" />
                <el-table-column property="stationType" width="80px" label="变电站类型" align="center" />
                <el-table-column property="voltLevel" width="80px" label="电压等级" align="center" />
                <el-table-column property="businessType" width="120px" label="业务类型" align="center">
                    <template #default="scope">
                        <span>{{ currency(businessTypearr, scope.row.businessType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="deviceTypeList" label="主设备类型">
                    <template #default="scope">
                        <span v-if="scope.row.deviceTypeList">{{ currency1(EquipmentTypearr, scope.row.deviceTypeList)
                            }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="imageUrl" label="变电站平面图地址" />
                <el-table-column property="lastmodifydate" label="最近修改时间" align="center" />
                <el-table-column property="name" label="操作" align="center" width="80px">
                    <template #default="scope">
                        <div class="operation">
                            <img src="@/assets/point/xiu.png" title="修改" @click="editprogramme(scope.row)" alt="">
                            <img src="@/assets/point/kan.svg" title="查看" @click="viewReport1(scope.row)" alt="">
                            <img src="@/assets/point/shan.svg" title="删除" @click="delprogramme(scope.row)" alt="">
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="width:100%;display:flex;align-items:center;margin-top:10px;">
                <Page style="margin:0 auto ;" :total="total" v-model:size="dataform.size" :jumper="'hide'"
                    v-model:current="dataform.current" @pagination="getdata()"></Page>
            </div>
        </div>
        <div class="record-box" v-else>
            <div class="titleone">
                <div class="title_top">
                    <div class="stationboard-box-title">
                        <img src="@/assets/navigation/ty_bq.png" />
                        <div class="imgname">创建布点方案</div>
                    </div>
                    <el-button class="searchButton" @click="goprogramme()">返回列表</el-button>
                </div>
                <div class="bujv">
                    <el-steps style="width: 900px" :active="active" align-center>
                        <el-step title="1.填写需求">
                            <template v-slot:icon>
                                <img src="@/assets/point/1.svg" alt="">
                            </template>
                        </el-step>
                        <el-step title="2.生成布点方案">
                            <template v-slot:icon>
                                <img v-if="active != 2" src="@/assets/point/3.svg" alt="">
                                <img v-else src="@/assets/point/6.svg" alt="">
                            </template>
                        </el-step>
                        <el-step title="3.完成布点方案">
                            <template v-slot:icon>
                                <img v-if="active != 3" src="@/assets/point/4.svg" alt="">
                                <img v-else src="@/assets/point/7.svg" alt="">
                            </template>
                        </el-step>
                    </el-steps>
                </div>
                <div class="bujv1" v-if="active == 1">
                    <div class="div1">
                        <div>
                            <div class="bujv_title">
                                <div class="qian"></div>
                                <div class="hou">填写变电站信息</div>
                            </div>
                            <!--  -->
                            <el-form ref="infoForm" :model="schemeform" label-width="90px" style="margin-top:30px ;"
                                :rules="rules">
                                <el-form-item label="方案名称" prop="arrangeName">
                                    <el-input v-model="schemeform.arrangeName" placeholder=""></el-input>
                                </el-form-item>
                                <el-form-item label="变电站" prop="stationCode">
                                    <el-select v-model="schemeform.stationCode" placeholder=" " clearable
                                        @change="typevol" style="width: 100%;">
                                        <el-option v-for="item in stationarr" :key="item.stationCode"
                                            :label="item.stationName" :value="item.stationCode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="电站类型">
                                    <el-select v-model="schemeform.stationType" placeholder=" " clearable
                                        style="width: 100%;" disabled>
                                        <el-option v-for="item in stationTypearr" :key="item.itemcode"
                                            :label="item.dictname" :value="item.itemcode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="电压等级">
                                    <el-input v-model="schemeform.voltLevel" placeholder="" disabled></el-input>
                                </el-form-item>
                                <el-form-item label="业务类型" prop="businessType">
                                    <el-select v-model="schemeform.businessType" placeholder=" " clearable
                                        style="width: 100%;">
                                        <el-option v-for="item in businessTypearr" :key="item.itemcode"
                                            :label="item.dictname" :value="item.itemcode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="监测设备" prop="deviceTypeList1">
                                    <el-select v-model="schemeform.deviceTypeList1" placeholder=" " multiple clearable
                                        @change="confirmClick()" style="width: 100%;">
                                        <el-option v-for="item in EquipmentTypearr" :key="item.itemcode"
                                            :label="item.dictname" :value="item.itemcode" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="上传图纸">
                                    <el-upload class="avatar-uploader"
                                        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                                        :show-file-list="false" :auto-upload="false" :on-change="handleChange"
                                        :before-upload="beforeAvatarUpload">
                                        <img v-if="imageUrl" :src="imageUrl" style="width: 148px; height: 118px"
                                            class="avatar" />
                                        <!-- <el-image v-if="imageUrl" style="width: 150px; height: 120px" :src="imageUrl" :zoom-rate="1.2"
                                            :max-scale="7" :min-scale="0.2" :preview-src-list="[imageUrl]" show-progress
                                            :initial-index="4" fit="cover" /> -->
                                        <el-icon v-else class="avatar-uploader-icon">
                                            <Plus />
                                        </el-icon>
                                    </el-upload>
                                </el-form-item>
                            </el-form>
                        </div>

                        <span
                            style="width: 100%;margin: auto; display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin: 10px 0px;">
                            <el-button @click="reset()">重置</el-button>
                            <el-button class="searchButton" @click="addjilu(infoForm)">确定</el-button>
                        </span>
                    </div>
                    <div class="div1">
                        <div class="bujv_title">
                            <div class="qian"></div>
                            <div class="hou">设备数量</div>
                        </div>
                        <el-table :data="numdata" :row-class-name="tableRowClassName" class="PatrolMonitoring"
                            v-loading="numloading" element-loading-background="rgb(11, 40, 34)" highlight-current-row
                            style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(52vh); overflow: auto "
                            :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                            <el-table-column type="index" label="序号" width="40px" align="center" />
                            <el-table-column property="mainDeviceName" label="设备名称" align="center">
                                <template #default="scope">
                                    <span>{{ scope.row.mainDeviceName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column property="arrangeName" label="设备类型" align="center">
                                <template #default="scope">
                                    <span>{{ currency(EquipmentTypearr, scope.row.deviceType) }}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="bujv1" v-if="active == 2">
                    <div class="div1">
                        <div class="bujv_title">
                            <div class="qian"></div>
                            <div class="hou">变电站图纸</div>
                        </div>
                        <div style="height:500px;margin-top: 20px;width: 870px;">
                            <el-scrollbar v-if="pointbgurl">
                                <point v-if="!diatuzhi" ref="canvasRef" :width="imgsize.width" :height="imgsize.height"
                                    :mainImage="pointbgurl" :overlay-images="smallurl" />
                                <div style="display: flex;justify-content: end;">
                                    <el-button @click="edittuzhi" style="margin-top: 10px;">点击修改</el-button>
                                </div>

                            </el-scrollbar>
                            <div v-else
                                style="width: 100%;display: flex;align-items: center;justify-content: center;height: 450px;flex-direction: column;">
                                <img src="@/assets/point/weitu.svg" alt="">
                                <div class="tuzhi">未上传图纸</div>
                            </div>
                        </div>
                    </div>
                    <div class="div1">
                        <div class="bujv_title">
                            <div class="qian"></div>
                            <div class="hou">设备数量</div>
                        </div>
                        <el-table show-summary :data="pointtable" :row-class-name="tableRowClassName"
                            class="PatrolMonitoring" v-loading="pointloading"
                            element-loading-background="rgb(11, 40, 34)" highlight-current-row
                            style="width: 100%;margin:auto;position: relative;margin-top: 15px; height:calc(52vh); overflow: auto "
                            :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px' }">
                            <el-table-column type="index" label="序号" width="40px" align="center" />
                            <el-table-column prop="areaName" label="区域名称" align="center">
                                <template #default="scope">
                                    <span>{{ scope.row.areaName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="1" sortable label="摄像机" align="center">
                            </el-table-column>
                            <el-table-column prop="2" sortable label="声纹传感器" align="center"> </el-table-column>
                            <el-table-column prop="3" sortable label="局放传感器" align="center"></el-table-column>
                            <el-table-column prop="4" sortable label="温湿度传感器" align="center"> </el-table-column>
                            <!-- <el-table-column property="arrangeName" label="设备类型" align="center">
                                <template #default="scope">
                                    <span>{{ currency(EquipmentTypearr, scope.row.deviceType) }}</span>
                                </template>
                            </el-table-column> -->
                        </el-table>
                    </div>
                </div>
                <div v-if="active == 3" class="preview">
                    <div><img src="@/assets/point/success.png" alt=""></div>
                    <div class="butxt">布点方案已完成</div>
                    <div>完成布点方案，您可以下载预览布点方案： <span class="pdfwenjain"
                            @click="viewReport()">220kV_变电站_一次在线设备在线监测_智能布点方案.docx</span> </div>
                    <div style="margin-bottom: 100px;"> <el-button @click="viewReport()">预览</el-button> <el-button
                            @click="download()">下载</el-button></div>
                </div>
                <div class="button">
                    <el-button size="large" v-if="active != 1 && active != 3" @click="goon()">上一步</el-button>
                    <el-button size="large" class="searchButton" @click="activechange()" :loading="buttonloading"
                        v-if="active != 3">下一步</el-button>
                    <el-button size="large" class="searchButton" v-if="active == 3"
                        @click="goprogramme()">完成</el-button>
                </div>


            </div>
        </div>
        <Eldialog v-if="diatuzhi" :title="'修改图纸'" :zIndex="2000" :width="'1800'" @before-close="tuzhiclose">
            <template v-slot:PopFrameContent>
                <div style="height: calc(80vh);margin-top: 20px;">
                    <!-- <el-scrollbar> -->
                    <point1 ref="canvasRef" :width="imgsize.width" :height="imgsize.height" :mainImage="pointbgurl"
                        :overlay-images="smallurl" @position-change="handlePositionChange" />
                    <!-- </el-scrollbar> -->
                </div>

            </template>
        </Eldialog>
        <Viewfile v-if="isViewfile" :showTime="true" :title="title1" :url="ViewfileUrl" :type="'docx'"
            :clientHeight="600" @update="CloseView" />
    </div>
</template>

<style scoped lang="scss">
.tuzhi {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 28px;
    color: #B5D7FF;
    margin-top: 10px;

}

.titleone {
    height: calc(87vh);
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: space-between;
}

.button {
    display: flex;
    align-items: center;
    justify-content: center;
}

.record-box {
    padding: 8px 15px;
    width: 100%;
    height: calc(89vh);
    overflow: auto;
    background-color: #00205a !important;
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    background: url(@/assets/navigation/ty_1614x988.png);
    background-size: 100% 100%;

    .title_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
    }

    .bujv {
        width: 100%;
        display: flex;
        justify-content: center;
        padding: 10px 0px;
    }



    .bujv1 {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px 0px;
        // height: calc(68vh);

        .div1 {
            width: 49%;
            // height: 20px;
            border: 1px solid #00427b;
            border-radius: 4px;
            background-color: #001e55;
            box-sizing: border-box;
            padding: 30px 20px;
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: space-between;
        }

        .bujv_title {
            width: 100%;
            display: flex;
            align-items: center;
            font-family: "Arial Negreta", "Arial Normal", Arial;
            font-weight: 700;
            font-style: normal;
            font-size: 16px;
            color: rgb(0, 204, 255);

            .qian {
                width: 3px;
                height: 12px;
                background-color: #00ffff;
                margin-right: 10px;
            }

        }
    }

    .preview {
        width: 100%;
        height: calc(65vh);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
        color: #FFFFFF;

        div {
            margin-bottom: 20px;
        }

        .butxt {
            font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
            font-weight: 700;
            font-style: normal;
            font-size: 28px;
            color: #FFFFFF;
        }

        .pdfwenjain {
            text-decoration: underline;
            cursor: pointer;
            color: #0099FF;
        }
    }
}



.operation {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
        cursor: pointer;
    }
}

.stationboard-box-title {
    font-family: '阿里妈妈数黑体 Bold', '阿里妈妈数黑体';
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: #ffffff;
    height: 40px;
    display: flex;
    align-items: center;
    // padding-left: 20px;
}

.imgname {
    padding-left: 10px;
}

:deep() {
    .el-step__icon.is-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 50% !important;
    }

    .is-finish {
        color: #00ffff !important;

        .el-step__icon.is-icon {
            background-color: #0099ff;

        }

        // .el-step__title is-finish{

        // }
    }

    .is-process {
        color: #b5d7ff !important;

        .el-step__icon.is-icon {
            background-color: #00397b !important;

        }
    }

    .is-wait {
        color: #b5d7ff !important;

        .el-step__icon.is-icon {
            background-color: #00397b !important;

        }
    }

    .el-step.is-horizontal .el-step__line {
        height: 1px !important;
        top: 20px !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 150px;
        height: 120px;
        text-align: center;
    }

    .el-table tfoot td.el-table__cell {
        color: #fff !important;
    }

    .el-table tfoot tr {
        background-color: #002964 !important;

    }
}
</style>
