|
@@ -1,426 +1,442 @@
|
|
|
<template>
|
|
|
- <div class="dataFileProcess" :class="!theme ? 'themeDark' : 'themeLight'">
|
|
|
- <div class="dataFileProcessMain">
|
|
|
- <div class="main_top">
|
|
|
- <p class="topPsty">风电数据处理</p>
|
|
|
- <search-cop @submit="funSubmit">
|
|
|
- </search-cop>
|
|
|
- </div>
|
|
|
- <div class="main">
|
|
|
- <div class="treeDataMain">
|
|
|
- <tree-cop :data="treeData" :height="treeHeight" :show-checkbox="true"
|
|
|
- @currentChange="funCurrentChange" @refresh="funGetTree" @checkChange="funTreeCheckChange">
|
|
|
- </tree-cop>
|
|
|
- <tree-cop :data="processTreeData" :height="treeHeight" @currentChange="funProcessCurrentChange"
|
|
|
- @refresh="funGetProcessTree">
|
|
|
- </tree-cop>
|
|
|
- </div>
|
|
|
- <div class="excelDataMain">
|
|
|
- <excel-cop :data="excelList" :showCheckbox="excelCheckboxShow" :height="excelHeight" :theme="theme"
|
|
|
- @excelChange="funExcelChange" @checkChange="funExcelCheckChange" :checkIds="excelCheckIds">
|
|
|
- </excel-cop>
|
|
|
- </div>
|
|
|
- <div class="tableDataMain">
|
|
|
- <table-cop class="" :data="tableData" :column="tableColumn" :loading="tableLoading" :theme="theme"
|
|
|
- :height="tableHeight" :tableId="tableShowId" :tableName="tableName" @export="funExport">
|
|
|
- </table-cop>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="dataFileProcess" :class="!theme ? 'themeDark' : 'themeLight'">
|
|
|
+ <div class="dataFileProcessMain">
|
|
|
+ <div class="main_top">
|
|
|
+ <p class="topPsty">风电数据处理</p>
|
|
|
+ <search-cop @submit="funSubmit"> </search-cop>
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="treeDataMain">
|
|
|
+ <tree-cop
|
|
|
+ :data="treeData"
|
|
|
+ :height="treeHeight"
|
|
|
+ :show-checkbox="true"
|
|
|
+ @currentChange="funCurrentChange"
|
|
|
+ @refresh="funGetTree"
|
|
|
+ @checkChange="funTreeCheckChange"
|
|
|
+ >
|
|
|
+ </tree-cop>
|
|
|
+ <tree-cop
|
|
|
+ :data="processTreeData"
|
|
|
+ :height="treeHeight"
|
|
|
+ @currentChange="
|
|
|
+ (treeItem) => {
|
|
|
+ funProcessCurrentChange(treeItem, true);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ @refresh="funGetProcessTree"
|
|
|
+ >
|
|
|
+ </tree-cop>
|
|
|
</div>
|
|
|
+ <div class="excelDataMain">
|
|
|
+ <excel-cop
|
|
|
+ :data="excelList"
|
|
|
+ :showCheckbox="excelCheckboxShow"
|
|
|
+ :height="excelHeight"
|
|
|
+ :theme="theme"
|
|
|
+ @excelChange="funExcelChange"
|
|
|
+ @checkChange="funExcelCheckChange"
|
|
|
+ :checkIds="excelCheckIds"
|
|
|
+ >
|
|
|
+ </excel-cop>
|
|
|
+ </div>
|
|
|
+ <div class="tableDataMain">
|
|
|
+ <table-cop
|
|
|
+ class=""
|
|
|
+ :data="tableData"
|
|
|
+ :column="tableColumn"
|
|
|
+ :loading="tableLoading"
|
|
|
+ :theme="theme"
|
|
|
+ :height="tableHeight"
|
|
|
+ :tableId="tableShowId"
|
|
|
+ :tableName="tableName"
|
|
|
+ @export="funExport"
|
|
|
+ >
|
|
|
+ </table-cop>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script setup name="prepare">
|
|
|
- import searchCop from './search.vue'
|
|
|
- import excelCop from '@/components/generatingCapacityComponent/excel.vue'
|
|
|
- import treeCop from '@/components/generatingCapacityComponent/tree.vue'
|
|
|
- import tableCop from '@/components/generatingCapacityComponent/table.vue'
|
|
|
- import {
|
|
|
- ref,
|
|
|
- onActivated,
|
|
|
- onMounted,
|
|
|
- watch
|
|
|
- } from 'vue'
|
|
|
- import {
|
|
|
- useStore
|
|
|
- } from 'vuex';
|
|
|
- import httpRequest from '@/utils/request.js'
|
|
|
- // import {
|
|
|
- // baseURL
|
|
|
- // } from '@/api/axios.js'
|
|
|
- import {
|
|
|
- ElMessage
|
|
|
- } from 'element-plus'
|
|
|
- /**配置参数 */
|
|
|
- const treeHeight = ref((window.innerHeight - 120) / 2 + 'px') //tree高度
|
|
|
- const excelHeight = ref(window.innerHeight - 116 + 'px') //excel高度
|
|
|
- const tableHeight = ref(window.innerHeight - 116 + 'px')
|
|
|
- /**excel 开始 */
|
|
|
- const excelCheckboxShow = ref(false)
|
|
|
- const excelCheckIds = ref([])
|
|
|
- const excelList = ref([])
|
|
|
- const funExcelChange = async (obj) => { //点击excel项时
|
|
|
- tableShowId.value = obj.id
|
|
|
- tableName.value = obj.name
|
|
|
- let res = null
|
|
|
- tableLoading.value = true
|
|
|
- if (obj.type === 'prepare') {
|
|
|
- res = await httpRequest.get('/power/prepare/show', {
|
|
|
- params: {
|
|
|
- id: obj.id
|
|
|
- }
|
|
|
- })
|
|
|
- } else if (obj.type === 'process') {
|
|
|
- res = await httpRequest.get('/power/process/show', {
|
|
|
- params: {
|
|
|
- id: obj.id
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- if (res.code === 200) {
|
|
|
- tableColumn.value = res.data.title.map(o => {
|
|
|
- return {
|
|
|
- prop: o.key,
|
|
|
- label: o.des,
|
|
|
- width: o.des === '时间' ? 100 : 70,
|
|
|
- }
|
|
|
- })
|
|
|
- tableData.value = res.data.data
|
|
|
- tableLoading.value = false
|
|
|
- } else {
|
|
|
- tableLoading.value = false
|
|
|
- }
|
|
|
- }
|
|
|
- const funExcelCheckChange = ({
|
|
|
- checkArr,
|
|
|
- data
|
|
|
- }) => { //bug
|
|
|
- excelCheckIds.value = checkArr
|
|
|
- }
|
|
|
- /**prepare tree 开始 */
|
|
|
- const treeData = ref([])
|
|
|
- const funRepeatMap = (arr, type = 'prepare') => {
|
|
|
- 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 () => {
|
|
|
- const res = await httpRequest.get("/power/prepare/tree")
|
|
|
- treeData.value = funRepeatMap(res.data)
|
|
|
- excelList.value = []
|
|
|
- }
|
|
|
- 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 = []
|
|
|
+import searchCop from "./search.vue";
|
|
|
+import excelCop from "@/components/generatingCapacityComponent/excel.vue";
|
|
|
+import treeCop from "@/components/generatingCapacityComponent/tree.vue";
|
|
|
+import tableCop from "@/components/generatingCapacityComponent/table.vue";
|
|
|
+import { ref, onActivated, onMounted, watch } from "vue";
|
|
|
+import { useStore } from "vuex";
|
|
|
+import httpRequest from "@/utils/request.js";
|
|
|
+// import {
|
|
|
+// baseURL
|
|
|
+// } from '@/api/axios.js'
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+/**配置参数 */
|
|
|
+const treeHeight = ref((window.innerHeight - 120) / 2 + "px"); //tree高度
|
|
|
+const excelHeight = ref(window.innerHeight - 116 + "px"); //excel高度
|
|
|
+const tableHeight = ref(window.innerHeight - 116 + "px");
|
|
|
+/**excel 开始 */
|
|
|
+const excelCheckboxShow = ref(false);
|
|
|
+const excelCheckIds = ref([]);
|
|
|
+const excelList = ref([]);
|
|
|
+const funExcelChange = async (obj) => {
|
|
|
+ //点击excel项时
|
|
|
+ tableShowId.value = obj.id;
|
|
|
+ tableName.value = obj.name;
|
|
|
+ let res = null;
|
|
|
+ tableLoading.value = true;
|
|
|
+ if (obj.type === "prepare") {
|
|
|
+ res = await httpRequest.get("/power/prepare/show", {
|
|
|
+ params: {
|
|
|
+ id: obj.id,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else if (obj.type === "process") {
|
|
|
+ res = await httpRequest.get("/power/process/show", {
|
|
|
+ params: {
|
|
|
+ id: obj.id,
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (res.code === 200) {
|
|
|
+ tableColumn.value = res.data.title.map((o) => {
|
|
|
+ return {
|
|
|
+ prop: o.key,
|
|
|
+ label: o.des,
|
|
|
+ width: o.des === "时间" ? 100 : 70,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ tableData.value = res.data.data;
|
|
|
+ tableLoading.value = false;
|
|
|
+ } else {
|
|
|
+ tableLoading.value = false;
|
|
|
+ }
|
|
|
+};
|
|
|
+const funExcelCheckChange = ({ checkArr, data }) => {
|
|
|
+ //bug
|
|
|
+ excelCheckIds.value = checkArr;
|
|
|
+};
|
|
|
+/**prepare tree 开始 */
|
|
|
+const treeData = ref([]);
|
|
|
+const funRepeatMap = (arr, type = "prepare") => {
|
|
|
+ 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;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
- const funTreeCheckChange = ({
|
|
|
- current,
|
|
|
- checkedNodes,
|
|
|
- checkedKeys,
|
|
|
- halfCheckedNodes,
|
|
|
- halfCheckedKeys
|
|
|
- }) => { //tree change -> excel change
|
|
|
- funCurrentChange({
|
|
|
- current,
|
|
|
- currentNode: ''
|
|
|
- })
|
|
|
- const checkIds = []
|
|
|
- if (checkedNodes.checkedNodes.length) {
|
|
|
- let checkArr = checkedNodes.checkedNodes
|
|
|
- checkArr.forEach(it => {
|
|
|
- if (it.childs && it.childs.length) {
|
|
|
- it.childs.forEach(iv => {
|
|
|
- checkIds.push(iv.id)
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- // if (checkedNodes) {
|
|
|
- // let checkArr = [checkedNodes]
|
|
|
- // checkArr.forEach(it => {
|
|
|
- // if (it.childs && it.childs.length) {
|
|
|
- // it.childs.forEach(iv => {
|
|
|
- // checkIds.push(iv.id)
|
|
|
- // })
|
|
|
- // }
|
|
|
- // })
|
|
|
- // }
|
|
|
- excelCheckIds.value = checkIds
|
|
|
+ return {
|
|
|
+ ...o,
|
|
|
+ children: o.children ? funRepeatMap(o.children, type) : [],
|
|
|
+ };
|
|
|
+ });
|
|
|
+};
|
|
|
+const funGetTree = async () => {
|
|
|
+ const res = await httpRequest.get("/power/prepare/tree");
|
|
|
+ treeData.value = funRepeatMap(res.data);
|
|
|
+ excelList.value = [];
|
|
|
+};
|
|
|
+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.checkedNodes.length) {
|
|
|
+ let checkArr = checkedNodes.checkedNodes;
|
|
|
+ checkArr.forEach((it) => {
|
|
|
+ if (it.childs && it.childs.length) {
|
|
|
+ it.childs.forEach((iv) => {
|
|
|
+ checkIds.push(iv.id);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ // if (checkedNodes) {
|
|
|
+ // let checkArr = [checkedNodes]
|
|
|
+ // checkArr.forEach(it => {
|
|
|
+ // if (it.childs && it.childs.length) {
|
|
|
+ // it.childs.forEach(iv => {
|
|
|
+ // checkIds.push(iv.id)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ excelCheckIds.value = checkIds;
|
|
|
+};
|
|
|
+
|
|
|
+/**process tree 开始 */
|
|
|
+const processTreeData = ref([]);
|
|
|
+const actTreeNode = ref(null);
|
|
|
+const funGetProcessTree = async () => {
|
|
|
+ actTreeNode.value = null;
|
|
|
+ const res = await httpRequest.get("/power/process/tree");
|
|
|
+ processTreeData.value = funRepeatMap(res.data, "fitting");
|
|
|
+ excelList.value = [];
|
|
|
+ if (actTreeNode.value) {
|
|
|
+ funProcessCurrentChange({
|
|
|
+ current: actTreeNode.value,
|
|
|
+ currentNode: null,
|
|
|
+ });
|
|
|
+ const child = actTreeNode.value.childs[0];
|
|
|
+ const obj = {
|
|
|
+ id: child.id,
|
|
|
+ interval: child.interval,
|
|
|
+ path: child.path,
|
|
|
+ prepareid: child.prepareid,
|
|
|
+ station: child.station,
|
|
|
+ time: child.time,
|
|
|
+ type: child.type,
|
|
|
+ windturbine: child.windturbine,
|
|
|
+ name: child.path.substring(
|
|
|
+ child.path.indexOf(child.station + "_") + (child.station + "_").length
|
|
|
+ ),
|
|
|
+ };
|
|
|
+ funExcelChange(obj);
|
|
|
+ }
|
|
|
+};
|
|
|
+const funProcessCurrentChange = ({ current, currentNode }, xhrFlg = false) => {
|
|
|
+ excelCheckboxShow.value = false;
|
|
|
+ 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
|
|
|
+ ),
|
|
|
+ };
|
|
|
+ });
|
|
|
+ if (excelList.value.length > 0) {
|
|
|
+ funExcelChange(excelList.value[0]);
|
|
|
}
|
|
|
+ } else {
|
|
|
+ excelList.value = [];
|
|
|
+ }
|
|
|
+ if (xhrFlg) {
|
|
|
+ httpRequest.get(`/report/analysis?id=${current.id}`);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/**table 开始 */
|
|
|
+const tableShowId = ref("");
|
|
|
+const tableColumn = ref([]);
|
|
|
+const tableLoading = ref(false);
|
|
|
+const tableName = ref("");
|
|
|
+const tableData = ref([]);
|
|
|
+const funExport = async () => {
|
|
|
+ const a = document.createElement("a");
|
|
|
+ // a.href = baseURL + '/power/process/download?id=' + tableShowId.value
|
|
|
+ a.href = "/power/process/download?id=" + tableShowId.value;
|
|
|
+ a.download = "";
|
|
|
+ a.click();
|
|
|
+};
|
|
|
+/**table 结束 */
|
|
|
+/**search 开始 */
|
|
|
+const funSubmit = async (query) => {
|
|
|
+ if (!excelCheckIds.value.length) {
|
|
|
+ ElMessage.error("请勾选要预处理的项");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ const params = {
|
|
|
+ ...query,
|
|
|
+ ids: excelCheckIds.value.join(","),
|
|
|
+ };
|
|
|
+ const res = await httpRequest.get("/power/process/data", {
|
|
|
+ params: params,
|
|
|
+ });
|
|
|
+ if (res.code === 200) {
|
|
|
+ ElMessage.success(res.msg);
|
|
|
+ funGetProcessTree();
|
|
|
+ }
|
|
|
+};
|
|
|
+/**created */
|
|
|
+// funGetTree()
|
|
|
+// funGetProcessTree()
|
|
|
+const theme = ref(null);
|
|
|
+const store = useStore();
|
|
|
+watch(
|
|
|
+ () => store.state.theme,
|
|
|
+ async (newVal, oldVal) => {
|
|
|
+ theme.value = newVal;
|
|
|
+ await funGetTree();
|
|
|
+ funGetProcessTree();
|
|
|
+ },
|
|
|
+ {
|
|
|
+ deep: true,
|
|
|
+ }
|
|
|
+);
|
|
|
+/**mounted */
|
|
|
+onMounted(async () => {
|
|
|
+ await funGetTree();
|
|
|
+ funGetProcessTree();
|
|
|
+ theme.value = store.state.theme;
|
|
|
+ tableHeight.value = window.innerHeight - 116 + "px";
|
|
|
+ excelHeight.value = window.innerHeight - 116 + "px";
|
|
|
+ treeHeight.value = (window.innerHeight - 120) / 2 + "px";
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ tableHeight.value = window.innerHeight - 116 + "px";
|
|
|
+ excelHeight.value = window.innerHeight - 116 + "px";
|
|
|
+ treeHeight.value = (window.innerHeight - 120) / 2 + "px";
|
|
|
+ });
|
|
|
+});
|
|
|
+/**activated */
|
|
|
+// onActivated(async () => {
|
|
|
+// await funGetTree()
|
|
|
+// funGetProcessTree()
|
|
|
+// })
|
|
|
+</script>
|
|
|
|
|
|
- /**process tree 开始 */
|
|
|
- const processTreeData = ref([])
|
|
|
- const actTreeNode = ref(null)
|
|
|
- const funGetProcessTree = async () => {
|
|
|
- actTreeNode.value = null
|
|
|
- const res = await httpRequest.get("/power/process/tree")
|
|
|
- processTreeData.value = funRepeatMap(res.data, 'fitting')
|
|
|
- excelList.value = []
|
|
|
- if (actTreeNode.value) {
|
|
|
- funProcessCurrentChange({
|
|
|
- current: actTreeNode.value,
|
|
|
- currentNode: null
|
|
|
- })
|
|
|
- const child = actTreeNode.value.childs[0]
|
|
|
- const obj = {
|
|
|
- id: child.id,
|
|
|
- interval: child.interval,
|
|
|
- path: child.path,
|
|
|
- prepareid: child.prepareid,
|
|
|
- station: child.station,
|
|
|
- time: child.time,
|
|
|
- type: child.type,
|
|
|
- windturbine: child.windturbine,
|
|
|
- name: child.path.substring(child.path.indexOf(child.station + '_') + (child.station + '_')
|
|
|
- .length)
|
|
|
- }
|
|
|
- funExcelChange(obj)
|
|
|
- }
|
|
|
- }
|
|
|
- const funProcessCurrentChange = ({
|
|
|
- current,
|
|
|
- currentNode
|
|
|
- }) => {
|
|
|
- excelCheckboxShow.value = false
|
|
|
- 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)
|
|
|
- }
|
|
|
- })
|
|
|
- if (excelList.value.length > 0) {
|
|
|
- funExcelChange(excelList.value[0])
|
|
|
- }
|
|
|
- } else {
|
|
|
- excelList.value = []
|
|
|
- }
|
|
|
+<style lang="less">
|
|
|
+.dataFileProcess {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .dataFileProcessMain {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .main_top {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .topPsty {
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ padding: 7px 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-left: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- /**table 开始 */
|
|
|
- const tableShowId = ref('')
|
|
|
- const tableColumn = ref([])
|
|
|
- const tableLoading = ref(false)
|
|
|
- const tableName = ref('')
|
|
|
- const tableData = ref([])
|
|
|
- const funExport = async () => {
|
|
|
- const a = document.createElement('a')
|
|
|
- // a.href = baseURL + '/power/process/download?id=' + tableShowId.value
|
|
|
- a.href = '/power/process/download?id=' + tableShowId.value
|
|
|
- a.download = ''
|
|
|
- a.click()
|
|
|
+ .main {
|
|
|
+ display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // width: calc(100% - 50px);
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .treeDataMain,
|
|
|
+ .excelDataMain,
|
|
|
+ .tableDataMain {
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .treeDataMain {
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 10px 0 10px 10px;
|
|
|
+ width: calc(19% - 20px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .excelDataMain {
|
|
|
+ margin-right: 10px;
|
|
|
+ padding: 10px 0 10px 10px;
|
|
|
+ width: calc(15% - 20px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableDataMain {
|
|
|
+ padding: 10px;
|
|
|
+ width: calc(66% - 20px);
|
|
|
+ }
|
|
|
}
|
|
|
- /**table 结束 */
|
|
|
- /**search 开始 */
|
|
|
- const funSubmit = async (query) => {
|
|
|
- if (!excelCheckIds.value.length) {
|
|
|
- ElMessage.error('请勾选要预处理的项')
|
|
|
- return false
|
|
|
- }
|
|
|
- const params = {
|
|
|
- ...query,
|
|
|
- ids: excelCheckIds.value.join(',')
|
|
|
- }
|
|
|
- const res = await httpRequest.get('/power/process/data', {
|
|
|
- params: params
|
|
|
- })
|
|
|
- if (res.code === 200) {
|
|
|
- ElMessage.success(res.msg)
|
|
|
- funGetProcessTree()
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.themeDark {
|
|
|
+ .dataFileProcessMain {
|
|
|
+ .main_top {
|
|
|
+ .topPsty {
|
|
|
+ color: #1c99ff;
|
|
|
+ background: #1e2126;
|
|
|
+ }
|
|
|
}
|
|
|
- /**created */
|
|
|
- // funGetTree()
|
|
|
- // funGetProcessTree()
|
|
|
- const theme = ref(null)
|
|
|
- const store = useStore()
|
|
|
- watch(() => store.state.theme, async (newVal, oldVal) => {
|
|
|
- theme.value = newVal
|
|
|
- await funGetTree()
|
|
|
- funGetProcessTree()
|
|
|
- }, {
|
|
|
- deep: true
|
|
|
- })
|
|
|
- /**mounted */
|
|
|
- onMounted(async () => {
|
|
|
- await funGetTree()
|
|
|
- funGetProcessTree()
|
|
|
- theme.value = store.state.theme
|
|
|
- tableHeight.value = window.innerHeight - 116 + 'px'
|
|
|
- excelHeight.value = window.innerHeight - 116 + 'px'
|
|
|
- treeHeight.value = (window.innerHeight - 120) / 2 + 'px'
|
|
|
- window.addEventListener('resize', () => {
|
|
|
- tableHeight.value = window.innerHeight - 116 + 'px'
|
|
|
- excelHeight.value = window.innerHeight - 116 + 'px'
|
|
|
- treeHeight.value = (window.innerHeight - 120) / 2 + 'px'
|
|
|
- })
|
|
|
- })
|
|
|
- /**activated */
|
|
|
- // onActivated(async () => {
|
|
|
- // await funGetTree()
|
|
|
- // funGetProcessTree()
|
|
|
- // })
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less">
|
|
|
- .dataFileProcess {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .dataFileProcessMain {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .main_top {
|
|
|
- height: 40px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
|
|
|
- .topPsty {
|
|
|
- position: relative;
|
|
|
- top: 5px;
|
|
|
- padding: 7px 20px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 600;
|
|
|
- margin-left: 10px;
|
|
|
- border-radius: 3px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .main {
|
|
|
+ background: #13171e;
|
|
|
|
|
|
- .main {
|
|
|
- display: flex;
|
|
|
- // justify-content: space-between;
|
|
|
- // width: calc(100% - 50px);
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .treeDataMain,
|
|
|
- .excelDataMain,
|
|
|
- .tableDataMain {
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .treeDataMain {
|
|
|
- margin-right: 10px;
|
|
|
- padding: 10px 0 10px 10px;
|
|
|
- width: calc(19% - 20px);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .excelDataMain {
|
|
|
- margin-right: 10px;
|
|
|
- padding: 10px 0 10px 10px;
|
|
|
- width: calc(15% - 20px);
|
|
|
- }
|
|
|
-
|
|
|
- .tableDataMain {
|
|
|
- padding: 10px;
|
|
|
- width: calc(66% - 20px);
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
- }
|
|
|
+ .treeDataMain {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
|
|
|
+ .excelDataMain {
|
|
|
+ background: #313233;
|
|
|
+ }
|
|
|
|
|
|
+ .tableDataMain {
|
|
|
+ margin-top: 5px;
|
|
|
+ background: #212223;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .themeDark {
|
|
|
-
|
|
|
- .dataFileProcessMain {
|
|
|
- .main_top {
|
|
|
-
|
|
|
- .topPsty {
|
|
|
- color: #1C99FF;
|
|
|
- background: #1E2126;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .main {
|
|
|
- background: #13171e;
|
|
|
-
|
|
|
- .treeDataMain {
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .excelDataMain {
|
|
|
- background: #313233;
|
|
|
- }
|
|
|
-
|
|
|
- .tableDataMain {
|
|
|
- margin-top: 5px;
|
|
|
- background: #212223;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.themeLight {
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ .dataFileProcessMain {
|
|
|
+ .main_top {
|
|
|
+ .topPsty {
|
|
|
+ color: #2778ff;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .themeLight {
|
|
|
- padding: 0;
|
|
|
+ .main {
|
|
|
+ background: #e6e8f2;
|
|
|
|
|
|
- .dataFileProcessMain {
|
|
|
- .main_top {
|
|
|
+ .treeDataMain {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
|
|
|
- .topPsty {
|
|
|
- color: #2778FF;
|
|
|
- background: #FFFFFF;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .main {
|
|
|
- background: #E6E8F2;
|
|
|
-
|
|
|
- .treeDataMain {
|
|
|
- background: transparent;
|
|
|
- }
|
|
|
-
|
|
|
- .excelDataMain {
|
|
|
- background: #F4F6FB;
|
|
|
- }
|
|
|
-
|
|
|
- .tableDataMain {
|
|
|
- background: #fff;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ .excelDataMain {
|
|
|
+ background: #f4f6fb;
|
|
|
+ }
|
|
|
|
|
|
+ .tableDataMain {
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|