|
|
@@ -0,0 +1,200 @@
|
|
|
+<script setup name="prepare">
|
|
|
+import excelCop from '@/components/excel.vue'
|
|
|
+import treeCop from '@/components/tree.vue'
|
|
|
+import { ref, nextTick, onActivated, onMounted, reactive } from 'vue'
|
|
|
+import request from '@/api/axios.js'
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+import posChart from './components/posChart.vue'
|
|
|
+/**配置参数 */
|
|
|
+const treeHeight = ref(window.innerHeight - 160 + 'px') //tree高度
|
|
|
+const excelHeight = ref(window.innerHeight - 160 + 'px') //excel高度
|
|
|
+const tableHeight = ref(window.innerHeight - 160 + 'px')
|
|
|
+/**excel 开始 */
|
|
|
+const excelCheckboxShow = ref(false)
|
|
|
+const excelCheckIds = ref([])
|
|
|
+const excelList = ref([])
|
|
|
+const funExcelChange = async (obj) => { //点击excel项时
|
|
|
+ return false
|
|
|
+}
|
|
|
+const funExcelCheckChange = ({ checkArr, data }) => { //bug
|
|
|
+ excelCheckIds.value = checkArr
|
|
|
+ funSubmit()
|
|
|
+}
|
|
|
+/**prepare tree 开始 */
|
|
|
+const treeData = ref([])
|
|
|
+const treeCopRef = ref() //treeCop ref
|
|
|
+const actTreeNode = ref(null) //当前激活的treeNode
|
|
|
+const funRepeatMap = (arr, type='fitting') => {
|
|
|
+ return arr.map(o => {
|
|
|
+ if (o.children) {
|
|
|
+ const findIndex = o.children.findIndex(p => !!p.type)
|
|
|
+ if (findIndex !== -1) {
|
|
|
+ o.childs = o.children
|
|
|
+ o.children = []
|
|
|
+ if(!actTreeNode.value && type === 'fitting'){ //判断当且仅有process获取tree时 赋值
|
|
|
+ actTreeNode.value = o
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ ...o,
|
|
|
+ children: o.children ? funRepeatMap(o.children, type) : []
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+const funGetTree = async () => {
|
|
|
+ actTreeNode.value = null
|
|
|
+ const res = await request.get("/power/fitting/tree")
|
|
|
+ treeData.value = funRepeatMap(res.data)
|
|
|
+ excelList.value = []
|
|
|
+ if(actTreeNode.value){
|
|
|
+ funCurrentChange({current: actTreeNode.value, currentNode: null})
|
|
|
+ if(treeCopRef.value){
|
|
|
+ treeCopRef.value.setCheckedKeys([actTreeNode.value.id])
|
|
|
+ excelCheckIds.value = actTreeNode.value.childs.map(o => o.id)
|
|
|
+ funSubmit()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const funCurrentChange = ({ current, currentNode }) => {
|
|
|
+ excelCheckboxShow.value = true
|
|
|
+ if (current.childs) {
|
|
|
+ excelList.value = current.childs.map(o => {
|
|
|
+ return {
|
|
|
+ id: o.id,
|
|
|
+ interval: o.interval,
|
|
|
+ path: o.path,
|
|
|
+ prepareid: o.prepareid,
|
|
|
+ station: o.station,
|
|
|
+ time: o.time,
|
|
|
+ type: o.type,
|
|
|
+ windturbine: o.windturbine,
|
|
|
+ name: o.path.substring(o.path.indexOf(o.station + '_') + (o.station + '_').length)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ excelList.value = []
|
|
|
+ }
|
|
|
+}
|
|
|
+const funTreeCheckChange = ({ current, checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) => { //tree change -> excel change
|
|
|
+ funCurrentChange({ current, currentNode: '' })
|
|
|
+ const checkIds = []
|
|
|
+ if (checkedNodes.length) {
|
|
|
+ for (const node of checkedNodes) {
|
|
|
+ if (node.childs && node.childs.length) {
|
|
|
+ for (const child of node.childs) {
|
|
|
+ checkIds.push(child.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ windList.value = []
|
|
|
+ }
|
|
|
+ excelCheckIds.value = checkIds
|
|
|
+ funSubmit()
|
|
|
+}
|
|
|
+
|
|
|
+/**search 开始 */
|
|
|
+const funSubmit = async () => {
|
|
|
+ // if (!excelCheckIds.value.length) {
|
|
|
+ // ElMessage.error('请勾选要执行的项')
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ const params = {
|
|
|
+ ids: excelCheckIds.value.join(',')
|
|
|
+ }
|
|
|
+ const res = await request.get('/base/location', { params: params })
|
|
|
+ if (res.code === 200) {
|
|
|
+ windList.value = res.data.filter(o => {
|
|
|
+ return !!o.longitude && !!o.latitude
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/**posChart */
|
|
|
+const windList = ref([])
|
|
|
+
|
|
|
+/**mounted */
|
|
|
+onMounted(() => {
|
|
|
+ tableHeight.value = window.innerHeight - 160 + 'px'
|
|
|
+ excelHeight.value = window.innerHeight - 160 + 'px'
|
|
|
+ treeHeight.value = window.innerHeight - 160 + 'px'
|
|
|
+ window.addEventListener('resize', () => {
|
|
|
+ tableHeight.value = window.innerHeight - 160 + 'px'
|
|
|
+ excelHeight.value = window.innerHeight - 160 + 'px'
|
|
|
+ treeHeight.value = window.innerHeight - 160 + 'px'
|
|
|
+ })
|
|
|
+ /**test */
|
|
|
+ // funExcelChange({
|
|
|
+ // id: 1,
|
|
|
+ // name: 'excel',
|
|
|
+ // type: 'fitting',
|
|
|
+ // })
|
|
|
+})
|
|
|
+/**activated */
|
|
|
+onActivated(() => {
|
|
|
+ funGetTree()
|
|
|
+})
|
|
|
+</script>
|
|
|
+<template>
|
|
|
+ <div class="bg-white py-[10px] px-[10px] s-dialog-body">
|
|
|
+ <div
|
|
|
+ class="
|
|
|
+ relative
|
|
|
+ shadow
|
|
|
+ rounded-[6px]
|
|
|
+ shadow-blue-500
|
|
|
+ px-[10px]
|
|
|
+ pt-[20px]
|
|
|
+ pb-[10px]
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="text-[14px] absolute top-[-7px] text-[#838383] left-[20px]">
|
|
|
+ 数据展示
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="5">
|
|
|
+ <tree-cop
|
|
|
+ ref="treeCopRef"
|
|
|
+ :data="treeData"
|
|
|
+ @checkChange="funTreeCheckChange"
|
|
|
+ :show-checkbox="true"
|
|
|
+ :height="treeHeight"
|
|
|
+ @currentChange="funCurrentChange"
|
|
|
+ @refresh="funGetTree"
|
|
|
+ ></tree-cop>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="3">
|
|
|
+ <excel-cop
|
|
|
+ :checkIds="excelCheckIds"
|
|
|
+ :showCheckbox="excelCheckboxShow"
|
|
|
+ :data="excelList"
|
|
|
+ :height="excelHeight"
|
|
|
+ @excelChange="funExcelChange"
|
|
|
+ @checkChange="funExcelCheckChange"
|
|
|
+ ></excel-cop>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div class="shadow rounded-[6px] shadow-blue-500 overflow-hidden">
|
|
|
+ <div
|
|
|
+ :style="{
|
|
|
+ height:
|
|
|
+ typeof tableHeight === 'string'
|
|
|
+ ? tableHeight
|
|
|
+ : tableHeight + 'px',
|
|
|
+ overflow: 'hidden'
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <posChart :height="typeof tableHeight === 'string' ? `calc(${tableHeight})` : tableHeight + 'px'" :windList="windList"></posChart>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<style scoped>
|
|
|
+.s-dialog-body /deep/ .el-dialog__body{
|
|
|
+ padding: 0px 20px;
|
|
|
+}
|
|
|
+</style>
|
moccus