From d22576ed1352cf5b9046a13ff1be12fb9b15cf2c Mon Sep 17 00:00:00 2001
From: ali <ali9696@163.com>
Date: 星期一, 10 二月 2025 10:20:53 +0800
Subject: [PATCH] svg
---
zhitan-vue/src/components/FileUpload/index.vue | 12
zhitan-vue/src/api/svg/equipmentfile.js | 40 +
zhitan-vue/src/assets/images/login-background.jpg | 0
zhitan-vue/src/views/login.vue | 38
zhitan-vue/src/views/svg/components/configureView.vue | 124 ++++
zhitan-vue/index.html | 385 ++++++------
zhitan-vue/src/views/svg/equipmentfile/index.vue | 243 ++++++++
zhitan-vue/src/views/index.vue | 4
/dev/null | 293 ----------
zhitan-vue/src/views/svg/components/configure.vue | 204 +++++++
zhitan-vue/public/logo.png | 0
zhitan-vue/src/views/svg/equipmentfile/chartView.vue | 314 +++++++++++
zhitan-vue/package.json | 2
13 files changed, 1,150 insertions(+), 509 deletions(-)
diff --git a/zhitan-vue/index.html b/zhitan-vue/index.html
index 3b22332..756ed87 100644
--- a/zhitan-vue/index.html
+++ b/zhitan-vue/index.html
@@ -1,215 +1,214 @@
<!DOCTYPE html>
<html>
-
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
- <link rel="icon" href="/favicon.ico">
- <title>绠＄悊绯荤粺</title>
- <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
- <style>
- html,
- body,
- #app {
- height: 100%;
- margin: 0px;
- padding: 0px;
- }
-
- .chromeframe {
- margin: 0.2em 0;
- background: #ccc;
- color: #000;
- padding: 0.2em 0;
- }
-
- #loader-wrapper {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 999999;
- }
-
- #loader {
- display: block;
- position: relative;
- left: 50%;
- top: 50%;
- width: 150px;
- height: 150px;
- margin: -75px 0 0 -75px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -webkit-animation: spin 2s linear infinite;
- -ms-animation: spin 2s linear infinite;
- -moz-animation: spin 2s linear infinite;
- -o-animation: spin 2s linear infinite;
- animation: spin 2s linear infinite;
- z-index: 1001;
- }
-
- #loader:before {
- content: "";
- position: absolute;
- top: 5px;
- left: 5px;
- right: 5px;
- bottom: 5px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -webkit-animation: spin 3s linear infinite;
- -moz-animation: spin 3s linear infinite;
- -o-animation: spin 3s linear infinite;
- -ms-animation: spin 3s linear infinite;
- animation: spin 3s linear infinite;
- }
-
- #loader:after {
- content: "";
- position: absolute;
- top: 15px;
- left: 15px;
- right: 15px;
- bottom: 15px;
- border-radius: 50%;
- border: 3px solid transparent;
- border-top-color: #FFF;
- -moz-animation: spin 1.5s linear infinite;
- -o-animation: spin 1.5s linear infinite;
- -ms-animation: spin 1.5s linear infinite;
- -webkit-animation: spin 1.5s linear infinite;
- animation: spin 1.5s linear infinite;
- }
-
-
- @-webkit-keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+ <meta name="renderer" content="webkit" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+ <link rel="icon" href="/logo.png" />
+ <title>绠＄悊绯荤粺</title>
+ <!--[if lt IE 11
+ ]><script>
+ window.location.href = "/html/ie.html"
+ </script><!
+ [endif]-->
+ <style>
+ html,
+ body,
+ #app {
+ height: 100%;
+ margin: 0px;
+ padding: 0px;
}
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
-
- @keyframes spin {
- 0% {
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
+ .chromeframe {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: #000;
+ padding: 0.2em 0;
}
- 100% {
- -webkit-transform: rotate(360deg);
- -ms-transform: rotate(360deg);
- transform: rotate(360deg);
+ #loader-wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 999999;
}
- }
+ #loader {
+ display: block;
+ position: relative;
+ left: 50%;
+ top: 50%;
+ width: 150px;
+ height: 150px;
+ margin: -75px 0 0 -75px;
+ border-radius: 50%;
+ border: 3px solid transparent;
+ border-top-color: #fff;
+ -webkit-animation: spin 2s linear infinite;
+ -ms-animation: spin 2s linear infinite;
+ -moz-animation: spin 2s linear infinite;
+ -o-animation: spin 2s linear infinite;
+ animation: spin 2s linear infinite;
+ z-index: 1001;
+ }
- #loader-wrapper .loader-section {
- position: fixed;
- top: 0;
- width: 51%;
- height: 100%;
- background: #7171C6;
- z-index: 1000;
- -webkit-transform: translateX(0);
- -ms-transform: translateX(0);
- transform: translateX(0);
- }
+ #loader:before {
+ content: "";
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ right: 5px;
+ bottom: 5px;
+ border-radius: 50%;
+ border: 3px solid transparent;
+ border-top-color: #fff;
+ -webkit-animation: spin 3s linear infinite;
+ -moz-animation: spin 3s linear infinite;
+ -o-animation: spin 3s linear infinite;
+ -ms-animation: spin 3s linear infinite;
+ animation: spin 3s linear infinite;
+ }
- #loader-wrapper .loader-section.section-left {
- left: 0;
- }
+ #loader:after {
+ content: "";
+ position: absolute;
+ top: 15px;
+ left: 15px;
+ right: 15px;
+ bottom: 15px;
+ border-radius: 50%;
+ border: 3px solid transparent;
+ border-top-color: #fff;
+ -moz-animation: spin 1.5s linear infinite;
+ -o-animation: spin 1.5s linear infinite;
+ -ms-animation: spin 1.5s linear infinite;
+ -webkit-animation: spin 1.5s linear infinite;
+ animation: spin 1.5s linear infinite;
+ }
- #loader-wrapper .loader-section.section-right {
- right: 0;
- }
+ @-webkit-keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
- .loaded #loader-wrapper .loader-section.section-left {
- -webkit-transform: translateX(-100%);
- -ms-transform: translateX(-100%);
- transform: translateX(-100%);
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- }
+ @keyframes spin {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ -ms-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
- .loaded #loader-wrapper .loader-section.section-right {
- -webkit-transform: translateX(100%);
- -ms-transform: translateX(100%);
- transform: translateX(100%);
- -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
- }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ -ms-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
+ }
- .loaded #loader {
- opacity: 0;
- -webkit-transition: all 0.3s ease-out;
- transition: all 0.3s ease-out;
- }
+ #loader-wrapper .loader-section {
+ position: fixed;
+ top: 0;
+ width: 51%;
+ height: 100%;
+ background: #7171c6;
+ z-index: 1000;
+ -webkit-transform: translateX(0);
+ -ms-transform: translateX(0);
+ transform: translateX(0);
+ }
- .loaded #loader-wrapper {
- visibility: hidden;
- -webkit-transform: translateY(-100%);
- -ms-transform: translateY(-100%);
- transform: translateY(-100%);
- -webkit-transition: all 0.3s 1s ease-out;
- transition: all 0.3s 1s ease-out;
- }
+ #loader-wrapper .loader-section.section-left {
+ left: 0;
+ }
- .no-js #loader-wrapper {
- display: none;
- }
+ #loader-wrapper .loader-section.section-right {
+ right: 0;
+ }
- .no-js h1 {
- color: #222222;
- }
+ .loaded #loader-wrapper .loader-section.section-left {
+ -webkit-transform: translateX(-100%);
+ -ms-transform: translateX(-100%);
+ transform: translateX(-100%);
+ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ }
- #loader-wrapper .load_title {
- font-family: 'Open Sans';
- color: #FFF;
- font-size: 19px;
- width: 100%;
- text-align: center;
- z-index: 9999999999999;
- position: absolute;
- top: 60%;
- opacity: 1;
- line-height: 30px;
- }
+ .loaded #loader-wrapper .loader-section.section-right {
+ -webkit-transform: translateX(100%);
+ -ms-transform: translateX(100%);
+ transform: translateX(100%);
+ -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+ }
- #loader-wrapper .load_title span {
- font-weight: normal;
- font-style: italic;
- font-size: 13px;
- color: #FFF;
- opacity: 0.5;
- }
- </style>
-</head>
+ .loaded #loader {
+ opacity: 0;
+ -webkit-transition: all 0.3s ease-out;
+ transition: all 0.3s ease-out;
+ }
-<body>
- <div id="app">
- <div id="loader-wrapper">
- <div id="loader"></div>
- <div class="loader-section section-left"></div>
- <div class="loader-section section-right"></div>
- <div class="load_title">姝ｅ湪鍔犺浇,璇疯�愬績绛夊緟</div>
+ .loaded #loader-wrapper {
+ visibility: hidden;
+ -webkit-transform: translateY(-100%);
+ -ms-transform: translateY(-100%);
+ transform: translateY(-100%);
+ -webkit-transition: all 0.3s 1s ease-out;
+ transition: all 0.3s 1s ease-out;
+ }
+
+ .no-js #loader-wrapper {
+ display: none;
+ }
+
+ .no-js h1 {
+ color: #222222;
+ }
+
+ #loader-wrapper .load_title {
+ font-family: "Open Sans";
+ color: #fff;
+ font-size: 19px;
+ width: 100%;
+ text-align: center;
+ z-index: 9999999999999;
+ position: absolute;
+ top: 60%;
+ opacity: 1;
+ line-height: 30px;
+ }
+
+ #loader-wrapper .load_title span {
+ font-weight: normal;
+ font-style: italic;
+ font-size: 13px;
+ color: #fff;
+ opacity: 0.5;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div id="app">
+ <div id="loader-wrapper">
+ <div id="loader"></div>
+ <div class="loader-section section-left"></div>
+ <div class="loader-section section-right"></div>
+ <div class="load_title">姝ｅ湪鍔犺浇,璇疯�愬績绛夊緟</div>
+ </div>
</div>
- </div>
- <script type="module" src="/src/main.js"></script>
-</body>
-
-</html>
\ No newline at end of file
+ <script type="module" src="/src/main.js"></script>
+ </body>
+</html>
diff --git a/zhitan-vue/package.json b/zhitan-vue/package.json
index c9e26a4..1f3c3cb 100644
--- a/zhitan-vue/package.json
+++ b/zhitan-vue/package.json
@@ -7,7 +7,7 @@
"type": "module",
"scripts": {
"dev": "vite",
- "build:prod": "vite build",
+ "build": "vite build",
"build:stage": "vite build --mode staging",
"preview": "vite preview"
},
diff --git a/zhitan-vue/public/logo.png b/zhitan-vue/public/logo.png
new file mode 100644
index 0000000..2e6aab6
--- /dev/null
+++ b/zhitan-vue/public/logo.png
Binary files differ
diff --git a/zhitan-vue/src/api/svg/equipmentfile.js b/zhitan-vue/src/api/svg/equipmentfile.js
new file mode 100644
index 0000000..ecdeb36
--- /dev/null
+++ b/zhitan-vue/src/api/svg/equipmentfile.js
@@ -0,0 +1,40 @@
+import request from "@/utils/request"
+
+// 淇敼缁勬�佸浘
+export function updateEquipmentfile(data) {
+ return request({
+ url: "/basicSetup/equipmentfile",
+ method: "put",
+ data: data,
+ })
+}
+
+export function getAllCollectTag(data) {
+ return request({
+ url: "/basicsetting/energyindex/filter",
+ method: "get",
+ params: data,
+ })
+}
+
+export function saveSettingApi(nodeId, data) {
+ return request({
+ url: "/basicSetup/equipmentfile/setting/" + nodeId,
+ method: "put",
+ data: data,
+ })
+}
+
+export function getConfigure(nodeId) {
+ return request({
+ url: "/basicSetup/equipmentfile/configure/" + nodeId,
+ method: "get",
+ })
+}
+
+export function getLiveData(tagCodes) {
+ return request({
+ url: "/rtdb/retrieve/" + tagCodes,
+ method: "get",
+ })
+}
diff --git a/zhitan-vue/src/assets/images/login-background.jpg b/zhitan-vue/src/assets/images/login-background.jpg
new file mode 100644
index 0000000..9194e14
--- /dev/null
+++ b/zhitan-vue/src/assets/images/login-background.jpg
Binary files differ
diff --git a/zhitan-vue/src/components/FileUpload/index.vue b/zhitan-vue/src/components/FileUpload/index.vue
index 044aeda..a1746dd 100644
--- a/zhitan-vue/src/components/FileUpload/index.vue
+++ b/zhitan-vue/src/components/FileUpload/index.vue
@@ -13,9 +13,14 @@
:headers="headers"
class="upload-file-uploader"
ref="fileUpload"
+ :drag="draggable"
>
<!-- 涓婁紶鎸夐挳 -->
- <el-button type="primary">閫夊彇鏂囦欢</el-button>
+ <el-button v-if="!draggable" type="primary">閫夊彇鏂囦欢</el-button>
+ <div v-else>
+ <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+ <div class="el-upload__text">灏嗘枃浠舵嫋鍒版澶勶紝鎴�<em>鐐瑰嚮涓婁紶</em></div>
+ </div>
</el-upload>
<!-- 涓婁紶鎻愮ず -->
<div class="el-upload__tip" v-if="showTip">
@@ -66,6 +71,11 @@
type: Boolean,
default: true,
},
+ // 鏄惁鎷栨嫿涓婁紶
+ draggable: {
+ type: Boolean,
+ default: false,
+ },
})
const { proxy } = getCurrentInstance()
diff --git a/zhitan-vue/src/views/index.vue b/zhitan-vue/src/views/index.vue
index 8c988a0..2474cd7 100644
--- a/zhitan-vue/src/views/index.vue
+++ b/zhitan-vue/src/views/index.vue
@@ -379,7 +379,7 @@
right: "5%",
itemWidth: 14,
itemHeight: 14,
- itemGap: 60,
+ itemGap: 16,
textStyle: {
align: "left",
verticalAlign: "middle",
@@ -777,7 +777,7 @@
right: "10%",
itemWidth: 14,
itemHeight: 14,
- itemGap: 50,
+ itemGap: 16,
textStyle: {
align: "left",
verticalAlign: "middle",
diff --git a/zhitan-vue/src/views/login copy.vue b/zhitan-vue/src/views/login copy.vue
deleted file mode 100644
index d9b0c13..0000000
--- a/zhitan-vue/src/views/login copy.vue
+++ /dev/null
@@ -1,293 +0,0 @@
-<template>
- <div class="login">
- <!-- <div
- class="login-logo-bg"
- v-if="systemInfo && systemInfo.homeLogo"
- :style="{ backgroundImage: 'url(' + systemInfo.homeLogo + ')', backgroundSize: '100% 100%' }"
- ></div> -->
- <img v-if="systemInfo && systemInfo.homeLogo" :src="systemInfo.homeLogo" alt="" class="login-logo-img" />
- <div class="login-font" v-else>{{ systemInfo.systemName || "鑳芥簮绠＄悊绯荤粺" }}</div>
- <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
- <!-- <h3 class="title">鍏呯數妗╁悗鍙扮鐞嗙郴缁�</h3> -->
- <el-form-item prop="username">
- <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="璐﹀彿">
- <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- size="large"
- auto-complete="off"
- placeholder="瀵嗙爜"
- show-password
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- size="large"
- auto-complete="off"
- placeholder="楠岃瘉鐮�"
- style="width: 63%"
- @keyup.enter="handleLogin"
- >
- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img" />
- </div>
- </el-form-item>
- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">璁颁綇瀵嗙爜</el-checkbox>
- <el-form-item style="width: 100%">
- <el-button
- :loading="loading"
- size="large"
- type="primary"
- style="width: 100%"
- color="#626aef"
- :dark="isDark"
- @click.prevent="handleLogin"
- >
- <span v-if="!loading">鐧� 褰�</span>
- <span v-else>鐧� 褰� 涓�...</span>
- </el-button>
- </el-form-item>
- </el-form>
- <!-- 搴曢儴 -->
- <div class="el-login-footer">
- <!-- <span>Copyright 漏 2021-2024 ZhiTanCloud All Rights Reserved.</span> -->
- <span>{{ systemInfo.copyRight || "Copyright 漏 2017-2024 ZhiTanCloud All Rights Reserved." }}</span>
- </div>
- </div>
-</template>
-
-<script setup>
-import { getCodeImg } from "@/api/login"
-import Cookies from "js-cookie"
-import { encrypt, decrypt } from "@/utils/jsencrypt"
-import useUserStore from "@/store/modules/user"
-
-const userStore = useUserStore()
-const route = useRoute()
-const router = useRouter()
-const { proxy } = getCurrentInstance()
-const systemInfo1 = JSON.parse(Cookies.get("SystemInfo") || "{}")
-const systemInfo = {
- ...systemInfo1,
- homeLogo: systemInfo1.homeLogo
- ? systemInfo1.homeLogo.includes("http")
- ? systemInfo1.homeLogo
- : "https://demo-ems.zhitancloud.com" + systemInfo1.homeLogo
- : "",
-}
-console.log(systemInfo)
-
-const loginForm = ref({
- username: "admin",
- password: "admin123",
- rememberMe: false,
- code: "",
- uuid: "",
-})
-
-const loginRules = {
- username: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勮处鍙�" }],
- password: [{ required: true, trigger: "blur", message: "璇疯緭鍏ユ偍鐨勫瘑鐮�" }],
- code: [{ required: true, trigger: "change", message: "璇疯緭鍏ラ獙璇佺爜" }],
-}
-
-const codeUrl = ref("")
-const loading = ref(false)
-// 楠岃瘉鐮佸紑鍏�
-const captchaEnabled = ref(true)
-// 娉ㄥ唽寮�鍏�
-const register = ref(false)
-const redirect = ref(undefined)
-
-watch(
- route,
- (newRoute) => {
- redirect.value = newRoute.query && newRoute.query.redirect
- },
- { immediate: true }
-)
-
-function handleLogin() {
- proxy.$refs.loginRef.validate((valid) => {
- if (valid) {
- loading.value = true
- // 鍕鹃�変簡闇�瑕佽浣忓瘑鐮佽缃湪 cookie 涓缃浣忕敤鎴峰悕鍜屽瘑鐮�
- if (loginForm.value.rememberMe) {
- Cookies.set("username", loginForm.value.username, { expires: 30 })
- Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 })
- Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 })
- } else {
- // 鍚﹀垯绉婚櫎
- Cookies.remove("username")
- Cookies.remove("password")
- Cookies.remove("rememberMe")
- }
- // 璋冪敤action鐨勭櫥褰曟柟娉�
- userStore
- .login(loginForm.value)
- .then(() => {
- const query = route.query
- const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
- if (cur !== "redirect") {
- acc[cur] = query[cur]
- }
- return acc
- }, {})
- router.push({ path: redirect.value || "/", query: otherQueryParams })
- })
- .catch(() => {
- loading.value = false
- // 閲嶆柊鑾峰彇楠岃瘉鐮�
- if (captchaEnabled.value) {
- getCode()
- }
- })
- }
- })
-}
-
-function getCode() {
- getCodeImg().then((res) => {
- captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
- if (captchaEnabled.value) {
- codeUrl.value = "data:image/gif;base64," + res.img
- loginForm.value.uuid = res.uuid
- }
- })
-}
-
-function getCookie() {
- const username = Cookies.get("username")
- const password = Cookies.get("password")
- const rememberMe = Cookies.get("rememberMe")
- loginForm.value = {
- username: username === undefined ? loginForm.value.username : username,
- password: password === undefined ? loginForm.value.password : decrypt(password),
- rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
- }
-}
-
-getCode()
-getCookie()
-</script>
-
-<style lang="scss" scoped>
-.login {
- display: flex;
- align-items: center;
- height: 100%;
- background-image: url("@/assets/images/login-bg.jpg");
- background-size: 100% 100%;
- flex-direction: column;
- position: relative;
- min-width: 700px;
- min-height: 700px;
-}
-
-.title {
- margin: 0px auto 30px auto;
- text-align: center;
- color: #707070;
-}
-
-.login-form {
- position: absolute;
- left: 50%;
- top: 60%;
- transform: translate(-50%, -50%);
- border-radius: 6px;
- // background: #ffffff;
- width: 400px;
- padding: 25px 25px 5px 25px;
-
- .el-input {
- height: 40px;
-
- input {
- height: 40px;
- }
- }
-
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 0px;
- }
-}
-
-.login-tip {
- font-size: 13px;
- text-align: center;
- color: #bfbfbf;
-}
-
-.login-code {
- width: 33%;
- height: 40px;
- float: right;
-
- img {
- cursor: pointer;
- vertical-align: middle;
- }
-}
-
-.el-login-footer {
- height: 40px;
- line-height: 40px;
- position: fixed;
- bottom: 0;
- width: 100%;
- text-align: center;
- color: #fff;
- font-family: Arial;
- font-size: 12px;
- letter-spacing: 1px;
-}
-
-.login-code-img {
- height: 40px;
- padding-left: 12px;
-}
-
-.login-logo-bg {
- width: 514px;
- height: 177px;
- // background-image: url('@/assets/images/login-logo.png');
- // background-size: 100% 100%;
- position: absolute;
- left: 50%;
- top: 22%;
- transform: translate(-50%, -50%);
-}
-.login-logo-img {
- // width: 100%;
- // height: 100%;
- // transform: translate(-50%, -50%);
- max-height: 200px;
- margin: 0 auto;
- position: absolute;
- top: 17%;
-}
-
-.login-font {
- font-size: 50px;
- color: #fff;
- top: 32%;
- position: absolute;
- left: 50%;
- width: 514px;
- text-align: center;
- transform: translate(-50%, -50%);
-}
-</style>
diff --git a/zhitan-vue/src/views/login.vue b/zhitan-vue/src/views/login.vue
index 3e8b868..2fe18dd 100644
--- a/zhitan-vue/src/views/login.vue
+++ b/zhitan-vue/src/views/login.vue
@@ -11,8 +11,8 @@
<div class="middle-view">
<div class="left-wrapper">
<div class="login-font">{{ systemInfo.systemName || "" }}</div>
- <img src="@/assets/images/font01.png" alt="" style="width: 406px" />
- <img src="@/assets/images/img_logo.png" alt="" style="width: 200px; margin-top: 20px" />
+ <img src="@/assets/images/font01.png" alt="" style="width: 380px" />
+ <img src="@/assets/images/img_logo.png" alt="" style="width: 180px; margin-top: 20px" />
</div>
<div class="right-wrapper">
<div class="header">
@@ -44,7 +44,7 @@
size="large"
auto-complete="off"
placeholder="楠岃瘉鐮�"
- style="width: 266px"
+ style="width: 230px"
@keyup.enter="handleLogin"
>
<!-- <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template> -->
@@ -202,7 +202,7 @@
display: flex;
align-items: center;
height: 100%;
- background-image: url("@/assets/images/login-background.png");
+ background-image: url("@/assets/images/login-background.jpg");
background-repeat: no-repeat;
background-size: cover;
flex-direction: column;
@@ -223,31 +223,31 @@
flex-direction: column;
}
.login-font {
- font-size: 34px;
+ font-size: 32px;
font-weight: 700;
color: #d5f8ff;
- margin-bottom: 12px;
+ margin-bottom: 10px;
}
}
.right-wrapper {
border-radius: 23px;
background: #ffffff;
- width: 480px;
+ width: 410px;
position: relative;
.header {
- height: 70px;
- line-height: 70px;
+ height: 56px;
+ line-height: 56px;
border-bottom: 1px solid #f1f1f1;
color: #3b3b3b;
- font-size: 22px;
+ font-size: 18px;
margin-bottom: 22px;
span {
display: inline-block;
- height: 70px;
- line-height: 70px;
- border-bottom: 6px solid #3a83fc;
- margin-left: 50px;
+ height: 56px;
+ line-height: 62px;
+ border-bottom: 4px solid #3a83fc;
+ margin-left: 32px;
}
}
}
@@ -277,14 +277,14 @@
}
.login-form {
- padding: 0 50px 30px;
+ padding: 0 32px 20px;
.submit-btn {
- width: 382px;
- height: 54px;
+ width: 360px;
+ height: 44px;
background: #3a83fc;
border-radius: 3px;
- font-size: 20px;
+ font-size: 18px;
box-shadow: 1px 2px 5px #3a83fc;
border: none;
border-radius: 6px;
@@ -342,7 +342,7 @@
text-align: center;
color: #fff;
font-family: Arial;
- font-size: 16px;
+ font-size: 14px;
letter-spacing: 1px;
}
</style>
diff --git a/zhitan-vue/src/views/svg/components/configure.vue b/zhitan-vue/src/views/svg/components/configure.vue
new file mode 100644
index 0000000..7137b94
--- /dev/null
+++ b/zhitan-vue/src/views/svg/components/configure.vue
@@ -0,0 +1,204 @@
+<template>
+ <div>
+ <div slot="header" class="clearfix">
+ <el-button
+ style="float: right; padding: 8px; margin-left: 8px"
+ type="text"
+ icon="el-icon-setting"
+ @click="saveSetting"
+ >
+ 淇濆瓨閰嶇疆
+ </el-button>
+ <el-button
+ style="float: right; padding: 8px; margin-left: 8px"
+ type="text"
+ icon="el-icon-setting"
+ @click="reset()"
+ >
+ 閲嶆柊閫夋嫨搴曞浘
+ </el-button>
+ </div>
+ <el-row>
+ <el-col :span="18">
+ <!-- v-if="filePath === '绌鸿妭鐐�'" -->
+ <div style="text-align: center; margin-left: 12px" v-if="filePath === '绌鸿妭鐐�'">
+ <FileUpload
+ :modelValue="fileList"
+ @update:modelValue="fileUploadChange"
+ :isShowTip="false"
+ :limit="1"
+ :fileSize="20"
+ :fileType="[]"
+ :draggable="true"
+ />
+ </div>
+
+ <div id="svgHtml" v-if="filePath !== '绌鸿妭鐐�'">
+ <div v-html="svgHtml" />
+ </div>
+ </el-col>
+ <el-col :span="6" style="height: calc(100vh - 165px); overflow: auto">
+ <el-table :data="tags" border>
+ <el-table-column label="鍙傛暟" align="center" prop="param" />
+ <el-table-column label="閲囬泦鐐�" align="center" prop="tag">
+ <template #default="scope">
+ <el-autocomplete
+ popper-class="my-autocomplete"
+ v-model="scope.row['tag']"
+ :fetch-suggestions="querySearch"
+ placeholder="璇疯緭鍏ユ寚鏍囩紪鐮�"
+ placement="bottom-end"
+ >
+ <template #default="{ item }">
+ <div class="">{{ item.value }}</div>
+ <span class="" style="color: #409eff; display: block">{{ item.name }}</span>
+ </template>
+ </el-autocomplete>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-col>
+ </el-row>
+ </div>
+</template>
+
+<script setup>
+import { getAllCollectTag, getConfigure, saveSettingApi, updateEquipmentfile } from "@/api/svg/equipmentfile"
+const { proxy } = getCurrentInstance()
+let props = defineProps(["types"])
+const emit = defineEmits(["getList"])
+const currentNode = ref({})
+const filePath = ref("绌鸿妭鐐�")
+const svgHtml = ref("")
+const form = ref({
+ nodeId: "",
+ fileName: "",
+ svgType: "",
+})
+const tags = ref([])
+const fileList = ref([])
+
+function changeModelNode(modelNode) {
+ currentNode.value = modelNode
+ filePath.value = "绌鸿妭鐐�"
+ getConfigure(modelNode.id).then((response) => {
+ tags.value = []
+ svgHtml.value = ""
+ if (response.code === 200) {
+ if (response.data) {
+ filePath.value = response.data.filePath
+ tags.value = response.data.infoList
+ getSvg()
+ }
+ } else {
+ proxy.$modal.msgError(response.msg)
+ }
+ })
+}
+// 鍒濆鍖杝vg
+function getSvg() {
+ /* 鍒涘缓xhr瀵硅薄 */
+ const xhr = new XMLHttpRequest()
+ xhr.open("GET", filePath.value, true)
+ xhr.send()
+ /* 鐩戝惉xhr瀵硅薄 */
+ xhr.addEventListener("load", () => {
+ svgHtml.value = xhr.responseText
+ let values = xhr.responseXML.getElementsByTagName("text")
+ let tagTemps = []
+ for (let i = 0; i < values.length; i++) {
+ if (values[i].getAttribute("id") != undefined)
+ tagTemps.push({
+ param: values[i].textContent,
+ tag: "",
+ tagType: "COLLECT",
+ })
+ }
+ console.log(tags.value.length, tagTemps.length)
+ if (tags.value.length === 0 || tags.value.length != tagTemps.length) {
+ tags.value = []
+ tags.value = tagTemps
+ console.log("222", tags.value.length, tagTemps.length)
+ }
+ })
+}
+//涓婁紶鎴愬姛鍚�
+function fileUploadChange(val) {
+ if (val.length) {
+ // this.$refs.upload.clearFiles()
+ form.value.nodeId = currentNode.value.id
+ form.value.filePath = val[0].fullUrl
+ form.value.svgType = "COLLECT"
+ updateEquipmentfile(form.value).then((result) => {
+ if (result.code === 200) {
+ filePath.value = response.msg
+ tags.value = []
+ getSvg()
+ } else {
+ proxy.$modal.msgError(result.msg)
+ }
+ })
+ } else {
+ proxy.$modal.msgError(response.msg)
+ }
+}
+
+function querySearch(queryString, cb) {
+ if (queryString) {
+ getAllCollectTag({
+ codeOrName: queryString,
+ indexType: "COLLECT",
+ }).then((response) => {
+ // 璋冪敤 callback 杩斿洖寤鸿鍒楄〃鐨勬暟鎹�
+ let result = response.data
+ let values = []
+ result.forEach((item) => {
+ values.push({
+ value: item.code,
+ name: item.name,
+ })
+ })
+ cb(values)
+ })
+ }
+}
+function saveSetting() {
+ saveSettingApi(currentNode.value.id, tags.value).then((response) => {
+ if (response.code === 200) {
+ proxy.$modal.msgSuccess(response.msg)
+ } else {
+ proxy.$modal.msgError(response.msg)
+ }
+ })
+}
+function reset() {
+ filePath.value = "绌鸿妭鐐�"
+}
+
+defineExpose({ changeModelNode })
+</script>
+
+<style lang="scss" scoped>
+.el-autocomplete {
+ width: 100%;
+}
+
+.my-autocomplete li {
+ line-height: normal;
+ padding: 7px;
+}
+
+.my-autocomplete li .name {
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.my-autocomplete li .addr {
+ font-size: 12px;
+ color: #b4b4b4;
+}
+
+.my-autocomplete li .highlighted .addr {
+ color: #ddd;
+}
+</style>
diff --git a/zhitan-vue/src/views/svg/components/configureView.vue b/zhitan-vue/src/views/svg/components/configureView.vue
new file mode 100644
index 0000000..46eed3f
--- /dev/null
+++ b/zhitan-vue/src/views/svg/components/configureView.vue
@@ -0,0 +1,124 @@
+<template>
+ <div>
+ <div v-if="filePath" v-html="svgHtml" />
+ <div v-else>鏆傛湭涓婁紶</div>
+ </div>
+</template>
+
+<script setup>
+import { getConfigure, getLiveData } from "@/api/svg/equipmentfile"
+import { onMounted } from "vue"
+const { proxy } = getCurrentInstance()
+let props = defineProps(["nodeId"])
+const emit = defineEmits(["getList"])
+const currentNode = ref({})
+const filePath = ref("")
+const svgHtml = ref("")
+const form = ref({
+ nodeId: "",
+ fileName: "",
+ svgType: "",
+})
+const tags = ref([])
+const tagCodes = ref([])
+const valueItems = ref(null)
+const timer = ref(null)
+
+function show(nodeId) {
+ console.log(nodeId)
+ tagCodes.value = []
+ filePath.value = ""
+ getConfigure(nodeId).then((response) => {
+ tags.value = []
+ svgHtml.value = ""
+ if (response.code === 200) {
+ if (response.data) {
+ filePath.value = response.data.filePath
+ tags.value = response.data.infoList
+ getSvg()
+ refresh()
+ }
+ } else {
+ proxy.$modal.msgError(response.msg)
+ }
+ })
+}
+
+function refresh() {
+ if (tagCodes.value.length === 0) {
+ return
+ }
+ getLiveData(tagCodes.value).then((response) => {
+ if (response.code === 200) {
+ if (response.data) {
+ response.data.forEach((tagValue) => {
+ let value = ""
+ if (tagValue.value) {
+ value = parseFloat(tagValue.value).toFixed(2)
+ } else {
+ value = "0"
+ }
+
+ let el = document.getElementById(tagValue.tagCode)
+ if (el) {
+ el.textContent = value
+ }
+ })
+ //杩欏潡鏄崟鐙姞鐨� 鐢ㄦ潵澶勭悊 娌℃湁鎸囨爣鎴栬�呮寚鏍囨病鏈夌粨鏋滅殑 閮借缃�0
+ let allText = document.getElementsByTagName("text")
+ for (let i = 0; i < allText.length; i++) {
+ // console.log(i + "textContent=" + allText[i].textContent);
+ if (allText[i].textContent == null || allText[i].textContent == "") {
+ allText[i].textContent = "0"
+ }
+ }
+ }
+ }
+ })
+}
+
+function refreshData() {
+ timer.value = setInterval(() => {
+ refresh()
+ }, 3000)
+}
+
+onMounted(() => {
+ refreshData()
+})
+
+onBeforeUnmount(() => {
+ clearInterval(timer.value)
+})
+
+// 鍒濆鍖杝vg
+function getSvg() {
+ /* 鍒涘缓xhr瀵硅薄 */
+ const xhr = new XMLHttpRequest()
+ xhr.open("GET", filePath.value, true)
+ xhr.send()
+ /* 鐩戝惉xhr瀵硅薄 */
+ xhr.addEventListener("load", () => {
+ const resXML = xhr.responseXML
+ let svgDom = resXML.documentElement.cloneNode(true)
+ let values = svgDom.getElementsByTagName("text")
+ for (let i = 0; i < values.length; i++) {
+ let tag = tags.value.filter((f) => f.param === values[i].textContent)
+ if (tag && tag.length > 0) {
+ let tagCode = tag[0].tag
+ values[i].textContent = ""
+ if (tagCode) {
+ values[i].setAttribute("id", tagCode)
+ tagCodes.value.push(tagCode)
+ }
+ }
+ }
+ let oSerializer = new XMLSerializer()
+ svgHtml.value = oSerializer.serializeToString(svgDom)
+ })
+}
+
+defineExpose({ show })
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/zhitan-vue/src/views/svg/equipmentfile/chartView.vue b/zhitan-vue/src/views/svg/equipmentfile/chartView.vue
new file mode 100644
index 0000000..44c9b44
--- /dev/null
+++ b/zhitan-vue/src/views/svg/equipmentfile/chartView.vue
@@ -0,0 +1,314 @@
+<template>
+ <div class="page">
+ <div class="page-container">
+ <div class="page-container-left">
+ <LeftTree ref="leftTreeRef" @handleNodeClick="handleNodeClick" />
+ </div>
+ <div class="page-container-right">
+ <BaseCard :title="queryParams.nodeName">
+ <ConfigureChartView ref="ConfigureChartViewRef" />
+ </BaseCard>
+ </div>
+ </div>
+ </div>
+</template>
+<script setup name="energy-real-time-monitor">
+import ConfigureChartView from "../components/configureView.vue"
+import { listEnergyRealTimeMonitor } from "@/api/realTimeMonitor/realTimeMonitor"
+import { getConfigure } from "@/api/svg/equipmentfile"
+const { proxy } = getCurrentInstance()
+import { useRoute } from "vue-router"
+import useSettingsStore from "@/store/modules/settings"
+const settingsStore = useSettingsStore()
+watch(
+ () => settingsStore.sideTheme,
+ (val) => {
+ // getList()
+ }
+)
+const loading = ref(false)
+const data = reactive({
+ queryParams: {
+ nodeId: null,
+ nodeName: null,
+ energyType: null,
+ },
+ query: { ...useRoute().query },
+})
+const { queryParams, query } = toRefs(data)
+const ConfigureChartViewRef = ref()
+/** 鑺傜偣鍗曞嚮浜嬩欢 */
+function handleNodeClick(data) {
+ queryParams.value.nodeId = data.id
+ queryParams.value.nodeName = data.label
+ if (!data.id) {
+ return
+ }
+ getConfigure(data.id).then((response) => {
+ if (response.code === 200) {
+ let tagCodes = []
+ if (response.data) {
+ response.data.infoList.forEach((tag) => {
+ tagCodes.push(tag.tag)
+ })
+ } else {
+ tagCodes = []
+ }
+ ConfigureChartViewRef.value.show(data.id)
+ } else {
+ proxy.$modal.msgError(response.msg)
+ }
+ })
+}
+</script>
+<style scoped lang="scss">
+@import "@/assets/styles/page.scss";
+
+.themeDark {
+ .card-box {
+ margin: 0 18px;
+ padding: 10px 18px;
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
+ border-radius: 8px 8px 8px 8px;
+ border: 1px solid #22408c;
+ margin-bottom: 20px;
+
+ &-title {
+ // margin: 10px 0 10px;
+ color: rgba(255, 255, 255, 0.8);
+ text-align: left;
+ font-weight: bold;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 16px;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ &-ul {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ &-li {
+ width: 18%;
+ margin: 1%;
+ border-radius: 5px;
+ border: 1px solid #22408c;
+ margin-bottom: 5px;
+ background: #1a235d;
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
+ border-radius: 8px 8px 8px 8px;
+ padding: 0 10px;
+
+ .title {
+ font-size: 14px;
+ color: rgba(255, 255, 255, 0.8);
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 19px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .num {
+ font-size: 22px;
+ color: #36d3ff;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 800;
+ font-size: 32px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .time {
+ color: rgba(255, 253, 253, 0.7);
+ font-family: Poppins, Poppins;
+ font-weight: 400;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+ }
+
+ dd {
+ padding: 0;
+ margin-left: 5px;
+ margin-bottom: 10px;
+ }
+ }
+
+ .hamburger {
+ display: inline-block;
+ vertical-align: middle;
+ width: 20px;
+ height: 20px;
+ }
+
+ .hamburger.is-active {
+ transform: rotate(180deg);
+ }
+
+ .item-box {
+ display: flex;
+ justify-items: center;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 10px 18px;
+
+ .item-tag {
+ // width: 13%;
+ text-align: center;
+ margin: 5px 8px;
+ border-radius: 8px;
+ padding: 7px 10px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 16px;
+ color: #ffffff;
+ }
+ }
+}
+
+.themeLight {
+ .card-box {
+ margin: 0 18px;
+ padding: 10px 18px;
+ box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
+ border-radius: 8px 8px 8px 8px;
+ margin-bottom: 20px;
+
+ &-title {
+ // margin: 10px 0 10px;
+ text-align: left;
+ font-weight: bold;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 16px;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ &-ul {
+ display: flex;
+ flex-wrap: wrap;
+ }
+
+ &-li {
+ width: 240px;
+ margin-right: 10px;
+ margin-top: 16px;
+ border-radius: 5px;
+ border: 1px solid #ebebeb;
+ margin-bottom: 5px;
+ background: #fff;
+ // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);
+ border-radius: 8px 8px 8px 8px;
+ padding: 0 10px;
+
+ .title {
+ font-size: 14px;
+ color: #676767;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 16px;
+ line-height: 19px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .num {
+ font-size: 22px;
+ color: #3271eb;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 800;
+ font-size: 32px;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+
+ .time {
+ color: #676767;
+ font-family: Poppins, Poppins;
+ font-weight: 400;
+ text-align: left;
+ font-style: normal;
+ text-transform: none;
+ }
+ }
+
+ dd {
+ padding: 0;
+ margin-left: 5px;
+ margin-bottom: 10px;
+ }
+ }
+
+ .hamburger {
+ display: inline-block;
+ vertical-align: middle;
+ width: 20px;
+ height: 20px;
+ }
+
+ .hamburger.is-active {
+ transform: rotate(180deg);
+ }
+
+ .item-box {
+ display: flex;
+ justify-items: center;
+ align-items: center;
+ flex-wrap: wrap;
+ margin: 10px 18px;
+
+ .item-tag {
+ // width: 13%;
+ text-align: center;
+ margin: 5px 8px;
+ border-radius: 8px;
+ padding: 7px 3px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 16px;
+ color: #ffffff;
+ }
+ }
+}
+
+.scrollbar-flex-content {
+ display: flex;
+ margin: 10px 18px;
+}
+.scrollbar-demo-item {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ // width: 100px;
+ // height: 50px;
+ // margin: 10px;
+ text-align: center;
+ border-radius: 4px;
+ background: var(--el-color-danger-light-9);
+ color: var(--el-color-danger);
+}
+
+.item-tag {
+ // width: 13%;
+ text-align: center;
+ margin: 5px 8px;
+ border-radius: 8px;
+ padding: 7px 10px;
+ font-family: OPPOSans, OPPOSans;
+ font-weight: 500;
+ font-size: 16px;
+ color: #ffffff;
+ cursor: pointer;
+}
+</style>
diff --git a/zhitan-vue/src/views/svg/equipmentfile/index.vue b/zhitan-vue/src/views/svg/equipmentfile/index.vue
new file mode 100644
index 0000000..b689a8d
--- /dev/null
+++ b/zhitan-vue/src/views/svg/equipmentfile/index.vue
@@ -0,0 +1,243 @@
+<template>
+ <div class="page">
+ <div class="page-container">
+ <div class="page-container-left">
+ <div class="tree page-box">
+ <div class="select-box mb20">
+ 鏁版嵁妯″瀷锛�
+ <el-select
+ style="width: 180px"
+ v-model="modelData"
+ placeholder="璇烽�夋嫨妯″瀷"
+ filterable
+ @change="changeModel"
+ >
+ <el-option
+ v-for="model in modelInfoOptions"
+ :key="model.modelCode"
+ :label="model.modelName"
+ :value="model.modelCode"
+ />
+ </el-select>
+ </div>
+ <div class="tree-box" v-loading="treeLoading">
+ <el-tree
+ ref="treeRef"
+ :props="defaultProps"
+ :data="treeData"
+ node-key="id"
+ highlight-current
+ :filter-node-method="filterNode"
+ :default-expanded-keys="treeExpandData"
+ :expand-on-click-node="false"
+ @node-click="changeNode"
+ accordion
+ >
+ <template #default="{ node, data }">
+ <span>
+ <el-tooltip
+ v-if="node.label.length > 16"
+ class="item"
+ effect="dark"
+ :content="node.label"
+ placement="top-end"
+ >
+ <span>{{ node.label.slice(0, 16) + "..." }}</span>
+ </el-tooltip>
+ <span v-else id="b">{{ node.label }}</span>
+ </span>
+ </template>
+ </el-tree>
+ </div>
+ </div>
+ </div>
+ <div class="page-container-right">
+ <BaseCard :title="currentNode ? currentNode.label + '--鑺傜偣閰嶇疆' : '鏆傛棤鑺傜偣閰嶇疆'">
+ <div class="content-box">
+ <ConfigureView ref="configureViewRef" />
+ </div>
+ </BaseCard>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { listModel } from "@/api/modelConfiguration/businessModel"
+import { treeList } from "@/api/modelConfiguration/indexWarehouse"
+import ConfigureView from "../components/configure.vue"
+import { nextTick } from "vue"
+import { useRoute } from "vue-router"
+let { proxy } = getCurrentInstance()
+let treeLoading = ref(true)
+let modelData = ref(null)
+let modelInfoOptions = ref([]) //涓嬫媺鍒楄〃
+const configureViewRef = ref()
+//鑾峰彇涓嬫媺鍒楄〃
+function searchList(flag) {
+ listModel({ isShow: 1 }).then((response) => {
+ modelInfoOptions.value = response.data
+ if (flag) {
+ if (modelInfoOptions.value.length > 0) {
+ if (proxy.$route.query.modelCode) {
+ modelData.value = proxy.$route.query.modelCode
+ } else {
+ modelData.value = modelInfoOptions.value[0].modelCode
+ }
+ getTreeList(modelData.value)
+ }
+ }
+ })
+}
+
+searchList(true)
+
+//涓嬫媺閫変腑瑙﹀彂鏍戝垪琛�
+function changeModel(item) {
+ // console.log('changeModel', item)
+ getTreeList(item)
+}
+
+let treeRef = ref(null)
+let treeData = ref([])
+
+const defaultProps = ref({
+ children: "children",
+ label: "label",
+})
+
+//妫�绱㈡爲
+let filterText = ref("")
+
+const filterNode = (value, data) => {
+ if (!value) return true
+ return data.label.includes(value)
+}
+watch(filterText, (val) => {
+ // 妫�鏌reeRef.value鏄惁鏄竴涓湁鏁堢殑ElTree瀹炰緥
+ if (treeRef.value && typeof treeRef.value.filter === "function") {
+ // 璋冪敤filter鏂规硶
+ treeRef.value.filter(val)
+ } else {
+ // treeRef.value鏃犳晥锛屽鐞嗛敊璇�
+ console.error("error")
+ }
+})
+
+let currentNode = ref(null)
+let treeExpandData = ref([])
+let isFirstLeafNode = ref(false)
+let deviceConfigRef = ref(null)
+let collectIndicatorsRef = ref(null)
+let statisticalIndicatorsRef = ref(null)
+
+//鑾峰彇鏍戝垪琛�
+function getTreeList(modelCode) {
+ treeLoading.value = true
+ treeList({ modelCode }).then((res) => {
+ treeLoading.value = false
+ let { data } = res
+ treeData.value = data
+ let chooseNode = null
+ if (data.length > 0) {
+ if (data[0].children && data[0].children.length !== 0 && isFirstLeafNode.value) {
+ if (data[0].children[0].children && data[0].children[0].children.length !== 0) {
+ chooseNode = data[0].children[0].children[0]
+ } else {
+ chooseNode = data[0].children[0]
+ }
+ } else {
+ chooseNode = data[0]
+ }
+ currentNode.value = chooseNode
+ changeNode(currentNode.value)
+ treeExpandData.value.push(chooseNode.id)
+ nextTick(() => {
+ treeRef.value.setCurrentKey(chooseNode.id)
+ })
+ }
+ })
+}
+//鏍戠偣鍑�
+function changeNode(data, node, ev) {
+ console.log("鏍戠偣鍑�", data)
+ currentNode.value = data
+ configureViewRef.value.changeModelNode(data)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/styles/page.scss";
+
+.page-box {
+ height: calc(100vh - 145px);
+ padding-top: 12px;
+
+ .tree-box {
+ height: calc(100% - 70px);
+ overflow-y: auto !important;
+ }
+
+ .select-box {
+ display: flex;
+ align-items: center;
+ color: #3371eb;
+ margin-left: 10px;
+
+ :deep .el-icon {
+ color: #fff;
+ margin: 0 10px 0 15px;
+ font-size: 14px;
+ }
+ }
+
+ .node-opt {
+ flex: 1;
+ text-align: right;
+ margin-right: 5px;
+
+ :deep .el-icon {
+ color: #fff;
+ margin-right: 5px;
+ }
+ }
+}
+
+:deep .el-tabs__nav-wrap:after {
+ background: transparent;
+}
+
+:deep .el-tabs__item {
+ color: #fff;
+ font-size: 20px;
+ padding: 0 20px;
+
+ &.is-active,
+ &:hover {
+ color: #999 !important;
+ }
+}
+
+.tab-box {
+ display: flex;
+ align-items: center;
+ color: #fff;
+ border-bottom: 1px solid #3371eb;
+ margin-right: 20px;
+
+ .tab-li {
+ cursor: pointer;
+ border: 1px solid #3371eb;
+ padding: 10px 25px;
+ border-radius: 5px 5px 0 0;
+ }
+
+ .is-tab {
+ background: #3371eb;
+ }
+}
+
+.content-box {
+ height: calc(100vh - 206px) !important;
+}
+</style>
--
Gitblit v1.9.3