功能修复/配置修改

.env.development

@@ -1,4 +1,7 @@
-	// development 开发环境
-	NODE_ENV='development'
-	// 下面的为接口地址。此处/api是我经过webpack设置跨域代理之后的地址
-	VUE_APP_BASE_URL='https://qhome.usky.cn/fivapi/'
+#  development 开发环境
+NODE_ENV='development'
+# 下面的为接口地址。此处/api是我经过webpack设置跨域代理之后的地址
+# VUE_APP_BASE_URL='https://qhome.usky.cn/fivapi/'
+VUE_APP_BASE_URL='https://wx.ewoogi.com/api/'
+VUE_APP_FILE_URL='https://qhome.usky.cn/file/'
+VUE_APP_HREF_URL='https://pcdev.ewoogi.com/adminfiv/#/login'

.env.production

@@ -1,4 +1,6 @@
-// production 生产环境
-NODE_ENV = 'production'
-// 下方链接为生产环境接口地址
-VUE_APP_BASE_URL='http://我是生产环境接口地址'
+# production 生产环境
+NODE_ENV='production'
+# 下方链接为生产环境接口地址
+VUE_APP_BASE_URL='https://wx.ewoogi.com/api/'
+VUE_APP_FILE_URL='https://wx.ewoogi.com/file/'
+VUE_APP_HREF_URL='https://wx.ewoogi.com/manage/#/'

.gitignore

@@ -1,8 +1,9 @@
 .DS_Store
-node_modules
-/dist
-.history
-
+node_modules/
+dist/
+history/
+package-lock.json
+yarn.lock
 
 # local env files
 .env.local
@@ -22,3 +23,4 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+*.zip

src/main.js

@@ -34,8 +34,40 @@ app.config.globalProperties.$axios = axios;
 import ECharts from 'vue-echarts';
 app.component('v-chart', ECharts);
 
+
 app.use(router).use(store).use(ElementPlus, { locale }).use(Vuex).use(echarts).use(Antd).mount('#app');
 
+
+///全局注册Tooltip
+import { getStyle } from 'element-plus/lib/utils/dom';
+/**
+ * show-overflow-tooltip for text
+ * 当text没有被折叠时，不显示tooltip
+ */
+const akTooltipAutoShow = {
+    created(el, binding, vnode) {
+        let tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip');
+        if (tooltipNode) {
+            el.addEventListener('mouseenter', (e) => {
+                e
+                tooltipNode.component.props.disabled = true;
+                const range = document.createRange();
+                range.setStart(el, 0);
+                range.setEnd(el, el.childNodes.length);
+                const rangeWidth = Math.round(range.getBoundingClientRect().width);
+                const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);
+                if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {
+                    tooltipNode.component.props.disabled = false;
+                }
+
+                console.log(tooltipNode.component.props.disabled)
+            });
+
+        }
+    }
+};
+app.directive('ak-tooltip-auto-show', akTooltipAutoShow);
+
 store.commit("getTimeAll");
 
 
@@ -49,7 +81,7 @@ router.beforeEach((to, from, next) => {
     if (to.path !== '/') {
         if (localStorage.getItem('accessToken') === null) {
             removeToken() //不用管
-                // if (localStorage.getItem('userInfo') === null) {
+            // if (localStorage.getItem('userInfo') === null) {
 
             // 本地存储的accessToken不存在时，跳转至后台登录页
             // alert('本地存储的accessToken不存在')
@@ -63,12 +95,12 @@ router.beforeEach((to, from, next) => {
             }
 
             document.getElementById('routers').style.display = "none"
-                // setTimeout(() => {
-                //     ElMessage.warning({
-                //         message: '请登录后重试!',
-                //         type: 'warning'
-                //     })
-                // }, 100);
+            // setTimeout(() => {
+            //     ElMessage.warning({
+            //         message: '请登录后重试!',
+            //         type: 'warning'
+            //     })
+            // }, 100);
 
         } else {
             // alert('本地存储的accessToken存在')
@@ -76,7 +108,7 @@ router.beforeEach((to, from, next) => {
         }
     } else {
         document.getElementById('routers').style.display = "block"
-            //路由的next必须存在,否则无法进入下一页
+        //路由的next必须存在,否则无法进入下一页
         if (localStorage.getItem('accessToken') != null) {
             next({ path: '/home' })
         } else {

src/utils/request.js

@@ -1,17 +1,9 @@
 import axios from 'axios'
 import { ElMessage } from 'element-plus'
-// import store from '@/store'
 import { getToken, removeToken } from '@/utils/auth'
 import qs from 'qs'
 import router from '@/router'
 
-// create an axios instance
-
-let baseURL = window.PLATFROM_CONFIG.baseUrl
-// alert(process.env.NODE_ENV)
-// alert(baseURL)
-// alert(process.env.VUE_APP_BASE_URL)
-
 /**
  * @description 处理code异常
  * @param {*} code
@@ -22,14 +14,14 @@ const handleCode = (code, msg) => {
     switch (code) {
         case '401':
             // ElMessage({
-            //     message: '登录失效',0111111111111111111
+            //     message: '登录失效',
             //     type: 'error',
             //     duration: 2 * 1000
             // })
             router
             // router.replace({ path: "/" });
             if (window.location.host.indexOf("localhost") != -1) {
-                localStorage.removeItem('accessToken')
+                localStorage.removeItem('accessToken');
                 router.replace({ path: "/" });
             } else if (window.location.host.indexOf("pcdev.ewoogi.com") != -1) {
                 window.location.href = 'https://pcdev.ewoogi.com/adminfiv/#/login'
@@ -42,33 +34,25 @@ const handleCode = (code, msg) => {
 }
 
 const service = axios.create({
-    baseURL: baseURL,
-    // baseURL: process.env.NODE_ENV !== "development" ? baseURL : process.env.VUE_APP_BASE_URL,
+    // baseURL: window.PLATFROM_CONFIG.baseUrl,
+    baseURL: process.env.VUE_APP_BASE_URL,
     withCredentials: true, // send cookies when cross-domain requests
     timeout: 5000, // request timeout
     headers: {
         'Content-Type': 'application/json;charset=UTF-8',
     },
 })
-// request interceptor
-
 
+// request interceptor
 service.interceptors.request.use(
-
-
     config => {
         // config.headers.accessToken = getToken()
         var tokenInfo = localStorage.getItem('accessToken')
-        // console.log('tokenInfo')
-        // console.log(tokenInfo)
-
+        // console.log('tokenInfo',tokenInfo)
 
         config.headers.accessToken = tokenInfo
-
-        // config.headers.accessToken = getToken()
         getToken()
 
-
         if (
             config.data &&
             config.headers['Content-Type'] ===
@@ -77,9 +61,6 @@ service.interceptors.request.use(
             config.data = qs.stringify(config.data);
         }
 
-
-        // do something before request is sent
-
         // if (store.getters.token) {
         //     // let each request carry token
         //     // ['X-Token'] is a custom headers key
@@ -95,42 +76,23 @@ service.interceptors.request.use(
             }
             config.url += ext_str + obj_val;
         }
-        // return config;
-
-
 
         return config
     },
     error => {
-        // do something with request error
-        console.log(error) // for debug
         return Promise.reject(error)
     }
 )
 
 // response interceptor
 service.interceptors.response.use(
-    /**
-     * If you want to get http information such as headers or status
-     * Please return  response => response
-     */
-
-    /**
-     * Determine the request status by custom code
-     * Here is just an example
-     * You can also judge the status by HTTP Status Code
-     */
     response => {
         const res = response.data
         handleCode(res.code, res.msg)
 
-
-
         return res
-
     },
     error => {
-        // console.log('err' + error.response.data.msg) // for debug
         handleCode(error.code, error.msg)
         ElMessage
         // ElMessage({
@@ -140,7 +102,6 @@ service.interceptors.response.use(
         // })
         return Promise.reject(error)
     }
-
 )
 
 export default service

src/views/CircuitEdit1.vue

@@ -5,85 +5,40 @@
       <a-layout>
         <!-- {{tableDefaultData}} -->
         <a-layout-header>
-          <a-modal
-            v-model:visible="addSvgVisible"
-            title="模拟添加组件"
-            @ok="addSvgHandleOk"
-          >
+          <a-modal v-model:visible="addSvgVisible" title="模拟添加组件" @ok="addSvgHandleOk">
             <a-form layout="horizontal">
               <a-form-item label="类型">
-                <a-input
-                  v-model:value="testAddSvg.type"
-                  placeholder="请输入组件类型"
-                />
+                <a-input v-model:value="testAddSvg.type" placeholder="请输入组件类型" />
               </a-form-item>
               <a-form-item label="标题">
-                <a-input
-                  v-model:value="testAddSvg.title"
-                  placeholder="请输入组件标题"
-                />
+                <a-input v-model:value="testAddSvg.title" placeholder="请输入组件标题" />
               </a-form-item>
               <a-form-item label="svg代码">
-                <a-input
-                  v-model:value="testAddSvg.template"
-                  placeholder="请输入svg代码"
-                />
+                <a-input v-model:value="testAddSvg.template" placeholder="请输入svg代码" />
               </a-form-item>
               <a-form-item label="默认颜色">
                 <input type="color" v-model="testAddSvg.default_attr.color" />
               </a-form-item>
               <a-form-item label="预览图像">
-                <a-input
-                  v-model:value="testAddSvg.priviewImg"
-                  placeholder="请输入预览图像地址"
-                />
+                <a-input v-model:value="testAddSvg.priviewImg" placeholder="请输入预览图像地址" />
               </a-form-item>
             </a-form>
           </a-modal>
 
-          <a-button type="primary" @click="home" style="margin-left: 50px"
-            >返回
-          </a-button>
+          <a-button type="primary" @click="home" style="margin-left: 50px">返回 </a-button>
+          <a-button type="primary" @click="testD" style="margin-left: 100px">保存</a-button>
+          <a-button type="primary" @click="testH" style="margin-left: 20px">预览</a-button>
+          <a-button type="primary" @click="deleteSvg" style="margin-left: 20px">删除元器件</a-button>
 
-          <a-button type="primary" style="margin-left: 100px" @click="testD"
-            >保存</a-button
-          >
-          <a-button type="primary" @click="testH" style="margin-left: 20px"
-            >预览</a-button
-          >
-          <a-button type="primary" style="margin-left: 20px" @click="deleteSvg"
-            >删除元器件</a-button
-          >
-
-          <!-- <a-button type="primary" @click="testA" style="margin-left: 20px"
-            >载入模板</a-button
-          > -->
-
-          <!-- 
-          <a style="margin-left: 20px">
-            <a-button type="primary" @click="showAddSvgModal">
-              添加组件
-            </a-button>
-          </a>
-
-          <a style="margin-left: 20px">
-            <a-button type="primary" @click="exportSvg">导出svg</a-button>
-          </a>
-          <a style="margin-left: 20px">
-            <a-button type="primary" @click="exportData">导出数据</a-button>
-          </a> -->
+          <!-- <a-button type="primary" @click="testA" style="margin-left: 20px">载入模板</a-button>
+            <a-button type="primary" @click="showAddSvgModal" style="margin-left: 20px"> 添加组件 </a-button>
+            <a-button type="primary" @click="exportSvg"  style="margin-left: 20px">导出svg</a-button>
+            <a-button type="primary" @click="exportData"  style="margin-left: 20px">导出数据</a-button> -->
 
           <div class="zoonStyle">
             <div style="text-color: black; display: flex">
               缩放：
-              <a-slider
-                :default-value="1"
-                :min="0.1"
-                :max="2"
-                :step="0.1"
-                @change="scaleValueChange"
-                style="width: 200px"
-              />
+              <a-slider :default-value="1" :min="0.1" :max="2" :step="0.1" @change="scaleValueChange" style="width: 200px" />
             </div>
           </div>
         </a-layout-header>
@@ -104,26 +59,10 @@
               @mousewheel="MouseWheel"
             >
               <!--拖动辅助线-->
-              <div
-                id="guide-x"
-                ref="guidex_dom"
-                :style="'border-top: ' + 1 / scaleValue + 'px dashed #55f'"
-              ></div>
-              <div
-                id="guide-y"
-                ref="guidey_dom"
-                :style="'border-left: ' + 1 / scaleValue + 'px dashed #55f'"
-              ></div>
+              <div id="guide-x" ref="guidex_dom" :style="'border-top: ' + 1 / scaleValue + 'px dashed #55f'"></div>
+              <div id="guide-y" ref="guidey_dom" :style="'border-left: ' + 1 / scaleValue + 'px dashed #55f'"></div>
               <!-- 画布 -->
-              <svg
-                version="1.1"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlns:xlink="http://www.w3.org/1999/xlink"
-                style="background-color: #000000"
-                width="1920"
-                height="1080"
-                id="svgCanvas"
-              >
+              <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color: #000000" width="1920" height="1080" id="svgCanvas">
                 <defs />
                 <filter x="0" y="0" width="1" height="1" id="solid">
                   <feFlood flood-color="rgb(255,255,255)" />
@@ -134,48 +73,18 @@
                   v-for="(item, index) in svgLists"
                   :key="item"
                   :id="item.id"
-                  :class="
-                    selectSvgInfo.id == item.id
-                      ? 'topo-layer-view-selected'
-                      : ''
-                  "
-                  @mousedown="
-                    MousedownSvg(
-                      item.id,
-                      index,
-                      item.svgPositionX,
-                      item.svgPositionY,
-                      $event
-                    )
-                  "
+                  :class="selectSvgInfo.id == item.id ? 'topo-layer-view-selected' : ''"
+                  @mousedown="MousedownSvg(item.id, index, item.svgPositionX, item.svgPositionY, $event)"
                   :title="item.title"
-                  :transform="
-                    'translate(' +
-                    item.svgPositionX +
-                    ',' +
-                    item.svgPositionY +
-                    ')' +
-                    'rotate(' +
-                    item.angle +
-                    ')' +
-                    'scale(' +
-                    item.size +
-                    ')'
-                  "
+                  :transform="'translate(' + item.svgPositionX + ',' + item.svgPositionY + ')' + 'rotate(' + item.angle + ')' + 'scale(' + item.size + ')'"
                 >
-                  <SvgComponents
-                    :component_prop="item"
-                    :svgInfoData="svgInfoData"
-                  ></SvgComponents>
+                  <SvgComponents :component_prop="item" :svgInfoData="svgInfoData"></SvgComponents>
                 </g>
               </svg>
             </div>
           </a-layout-content>
           <a-layout-sider width="300px">
-            <RightToolBar
-              :svgInfo="selectSvgInfo"
-              @setTableAttr="setTableAttr"
-            ></RightToolBar>
+            <RightToolBar :svgInfo="selectSvgInfo" @setTableAttr="setTableAttr"></RightToolBar>
           </a-layout-sider>
         </a-layout>
       </a-layout>
@@ -237,21 +146,17 @@ export default {
       this.svgInfoData[this.svgInfoData.length] = this.testAddSvg;
       this.addSvgVisible = false;
     },
-
     //鼠标移动事件
     MouseMove(e) {
       let _this = this;
 
       if (this.clickType == "draggable") {
-        if (this.mouseStatus == 0) {
-          return;
-        }
+        if (this.mouseStatus == 0) return;
+
         const { clientX, clientY } = e;
-        // console.log(e.offsetX,e.offsetY);
-        // let svgID = this.svgLists[this.selectSvg.Index].id;
         let svgID = this.selectSvg.ID;
         //排除当前元素剩下的所有svg元素的列表
-        let anyPositionList = this.svgLists.filter(function (list) {
+        let anyPositionList = this.svgLists.filter(function(list) {
           return list.id != svgID;
         });
         //将要移动的元素坐标设备为鼠标坐标
@@ -259,24 +164,18 @@ export default {
         let svgPositionY = this.selectSvg.pointY;
         svgPositionX += (clientX - this.selectSvg.mPositionX) / this.scaleValue;
         svgPositionY += (clientY - this.selectSvg.mPositionY) / this.scaleValue;
-        setTimeout(function () {
+        setTimeout(function() {
           //少于十个像素自动吸附
           //从所有的x坐标列表中查与当前坐标少于10个像素的组件是否存在
-          let exitsAdsorbX = anyPositionList.filter(function (list) {
-            return (
-              -10 < list.svgPositionX - svgPositionX &&
-              list.svgPositionX - svgPositionX < 10
-            );
+          let exitsAdsorbX = anyPositionList.filter(function(list) {
+            return -10 < list.svgPositionX - svgPositionX && list.svgPositionX - svgPositionX < 10;
           });
           if (exitsAdsorbX.length > 0) {
             svgPositionX = exitsAdsorbX[0].svgPositionX;
           }
           //y轴相同 横向坐标自动吸附
-          let exitsAdsorbY = anyPositionList.filter(function (list) {
-            return (
-              -10 < list.svgPositionY - svgPositionY &&
-              list.svgPositionY - svgPositionY < 10
-            );
+          let exitsAdsorbY = anyPositionList.filter(function(list) {
+            return -10 < list.svgPositionY - svgPositionY && list.svgPositionY - svgPositionY < 10;
           });
           if (exitsAdsorbY.length > 0) {
             svgPositionY = exitsAdsorbY[0].svgPositionY;
@@ -284,49 +183,36 @@ export default {
           _this.svgLists[_this.selectSvg.Index].svgPositionX = svgPositionX;
           _this.svgLists[_this.selectSvg.Index].svgPositionY = svgPositionY;
           //从所有的x坐标列表中查当前坐标是否存在
-          let exitsNowX = anyPositionList.filter(function (list) {
+          let exitsNowX = anyPositionList.filter(function(list) {
             return list.svgPositionX === svgPositionX;
           });
           if (exitsNowX.length > 0) {
-            _this.$refs.guidey_dom.style.setProperty(
-              "left",
-              svgPositionX - 1 / _this.scaleValue + "px"
-            );
+            _this.$refs.guidey_dom.style.setProperty("left", svgPositionX - 1 / _this.scaleValue + "px");
             _this.$refs.guidey_dom.style.display = "inline";
           } else {
             _this.$refs.guidey_dom.style.display = "none";
           }
           //从所有的y坐标列表中查当前坐标是否存在
-          let exitsNowY = anyPositionList.filter(function (list) {
+          let exitsNowY = anyPositionList.filter(function(list) {
             return list.svgPositionY === svgPositionY;
           });
           if (exitsNowY.length > 0) {
-            _this.$refs.guidex_dom.style.setProperty(
-              "top",
-              svgPositionY - 1 / _this.scaleValue + "px"
-            );
+            _this.$refs.guidex_dom.style.setProperty("top", svgPositionY - 1 / _this.scaleValue + "px");
             _this.$refs.guidex_dom.style.display = "inline";
           } else {
             _this.$refs.guidex_dom.style.display = "none";
           }
         }, 1);
       } else if (this.clickType == "click") {
-        if (this.mouseStatus == 0) {
-          return;
-        }
+        if (this.mouseStatus == 0) return;
         this.selectSvgInfo.mPoint.endX = e.offsetX;
         this.selectSvgInfo.mPoint.endY = e.offsetY;
       }
     },
     //鼠标点击画板事件
     MousedownCanvas(e) {
-      if (this.clickType == "draggable") {
-        return;
-      }
-      if (
-        this.$store.state.CurrentlySelectedToolBar &&
-        this.$store.state.CurrentlySelectedToolBar.CreateType == "click"
-      ) {
+      if (this.clickType == "draggable") return;
+      if (this.$store.state.CurrentlySelectedToolBar && this.$store.state.CurrentlySelectedToolBar.CreateType == "click") {
         this.$store.commit("setSvgItem", {
           uuid: this.$UCore.GenUUid(),
           offsetX: e.offsetX,
@@ -357,9 +243,7 @@ export default {
     },
     //鼠标抬起事件
     MouseupCanvas() {
-      if (this.mouseStatus == 0) {
-        return;
-      }
+      if (this.mouseStatus == 0) return;
       this.$refs.guidex_dom.style.display = "none";
       this.$refs.guidey_dom.style.display = "none";
 
@@ -368,14 +252,9 @@ export default {
         this.clickType = "";
       }
       if (this.clickType == "click") {
-        if (
-          this.selectSvgInfo.mPoint.startX == this.selectSvgInfo.mPoint.endX &&
-          this.selectSvgInfo.mPoint.startY == this.selectSvgInfo.mPoint.endY
-        ) {
+        if (this.selectSvgInfo.mPoint.startX == this.selectSvgInfo.mPoint.endX && this.selectSvgInfo.mPoint.startY == this.selectSvgInfo.mPoint.endY) {
           //根据当前id找到当前元素的index
-          let selectSvgIndex = this.svgLists.indexOf(
-            this.svgLists.filter((f) => f.id == this.selectSvgInfo.id)[0]
-          );
+          let selectSvgIndex = this.svgLists.indexOf(this.svgLists.filter((f) => f.id == this.selectSvgInfo.id)[0]);
           this.svgLists.splice(selectSvgIndex, 1);
           this.selectSvg = {};
           this.selectSvgInfo = {};
@@ -388,15 +267,14 @@ export default {
       let _this = this;
       this.$axios
         .get("/example.json")
-        .then(function (response) {
+        .then(function(response) {
           _this.svgLists = response.data;
           // console.log(response.data);
         })
-        .catch(function (error) {
+        .catch(function(error) {
           console.log(error);
         });
     },
-
     //预览事件
     testH() {
       localStorage.setItem("svginfo", JSON.stringify(this.svgLists));
@@ -405,7 +283,6 @@ export default {
         name: "power_diagram",
       });
     },
-
     //保存事件
     testD() {
       var array = JSON.parse(JSON.stringify(this.svgLists));
@@ -430,22 +307,19 @@ export default {
               ElMessage.error(requset.msg);
             }
           })
-          .catch(function (error) {
+          .catch(function(error) {
             console.log(error);
           });
       } else {
         ElMessage("请先添加元器件!");
       }
     },
-
     //删除元器件事件
     deleteSvg() {
       let _this = this;
       let selectSvgInfo = _this.selectSvgInfo;
       //根据当前id找到当前元素的index
-      let selectSvgIndex = _this.svgLists.indexOf(
-        _this.svgLists.filter((f) => f.id == selectSvgInfo.id)[0]
-      );
+      let selectSvgIndex = _this.svgLists.indexOf(_this.svgLists.filter((f) => f.id == selectSvgInfo.id)[0]);
       _this.svgLists.splice(selectSvgIndex, 1);
       if (_this.svgLists.length <= 0) {
         _this.selectSvgInfo = "";
@@ -459,13 +333,7 @@ export default {
     MouseWheel(e) {
       //获取当前选中组件
       let selectSvgInfo = this.selectSvgInfo;
-      if (
-        selectSvgInfo == undefined ||
-        selectSvgInfo == null ||
-        selectSvgInfo == ""
-      ) {
-        return;
-      }
+      if (selectSvgInfo == undefined || selectSvgInfo == null || selectSvgInfo == "") return;
       e.preventDefault();
       //判断滚轮方向 -100是往上滑 100是下滑
       let svgZoom = e.deltaY < 0 ? 0.1 : -0.1;
@@ -483,9 +351,7 @@ export default {
     //导出svg
     exportSvg() {
       let exportStr = document.querySelector("#svgCanvas").outerHTML;
-      exportStr = exportStr
-        .replace('width="100%"', 'width="1920"')
-        .replace('height="100%"', 'height="1080"');
+      exportStr = exportStr.replace('width="100%"', 'width="1920"').replace('height="100%"', 'height="1080"');
       let datastr = "data:text;charset=utf-8," + encodeURIComponent(exportStr);
       let download = document.createElement("a");
       download.setAttribute("href", datastr);
@@ -497,9 +363,7 @@ export default {
     //导出数据 json文件
     exportData() {
       localStorage.setItem("svginfo", JSON.stringify(this.svgLists));
-      let datastr =
-        "data:text/json;charset=utf-8," +
-        encodeURIComponent(JSON.stringify(this.svgLists));
+      let datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(this.svgLists));
       let download = document.createElement("a");
       download.setAttribute("href", datastr);
       download.setAttribute("download", "download.json");
@@ -507,10 +371,117 @@ export default {
       download.remove();
       console.log(JSON.stringify(this.svgLists));
     },
-    //画布缩放change事件
+    /**
+     * @画布缩放change事件
+     */
     scaleValueChange(newValue) {
       this.scaleValue = newValue;
     },
+    /**
+     * @获取左侧组件数据
+     */
+    GetLeftComponent() {
+      var _this = this;
+
+      if (process.env.NODE_ENV == "development") {
+        //请求接口获取组件
+        this.$axios
+          .get("/InterfaceReturn1.json")
+          .then(function(response) {
+            _this.svgInfoData = response.data;
+          })
+          .catch(function(error) {
+            console.log(error);
+          });
+      } else {
+        //请求接口获取组件---->左侧基础数据
+        api
+          .gethookupComponentBasics()
+          .then((requset) => {
+            if (requset.status === "SUCCESS") {
+              _this.svgInfoData = requset.data;
+            } else {
+              ElMessage.error(requset.msg);
+            }
+          })
+          .catch(function(error) {
+            console.log(error);
+          });
+      }
+    },
+    /**
+     * @获取中心组件数据
+     */
+    GetCenterComponent() {
+      let _this = this;
+      //请求接口获取组件---->list数据
+      setTimeout(() => {
+        api
+          .getHookupComponentComplete({ siteId: this.$store.state.siteId })
+          .then((requset) => {
+            if (requset.data.length > 0) {
+              // console.log(requset);
+              _this.svgLists = requset.data;
+            } else {
+              ElMessage.error(requset.msg);
+            }
+          })
+          .catch(function(error) {
+            console.log(error);
+          });
+      }, 1000);
+    },
+    /**
+     * @页面键盘监听事件
+     */
+    onkeydown() {
+      let _this = this;
+      //当前页面监视键盘输入
+      document.onkeydown = function(e) {
+        //获取当前选中组件
+        let selectSvgInfo = _this.selectSvgInfo;
+        if (selectSvgInfo == undefined || selectSvgInfo == null || selectSvgInfo == "") {
+          return;
+        }
+        //事件对象兼容
+        let e1 = e || window.event || arguments.callee.caller.arguments[0];
+        //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
+        if (e1 && e1.keyCode == 37) {
+          e.preventDefault();
+          selectSvgInfo.svgPositionX -= 1;
+        } else if (e1 && e1.keyCode == 38) {
+          e.preventDefault();
+          selectSvgInfo.svgPositionY -= 1;
+        } else if (e1 && e1.keyCode == 39) {
+          e.preventDefault();
+          selectSvgInfo.svgPositionX += 1;
+        } else if (e1 && e1.keyCode == 40) {
+          e.preventDefault();
+          selectSvgInfo.svgPositionY += 1;
+        }
+        //ctrl  c
+        else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
+          e.preventDefault();
+          let copySvgInfoStr = JSON.stringify(selectSvgInfo);
+          let copySvgInfo = JSON.parse(copySvgInfoStr);
+          copySvgInfo.id = _this.$UCore.GenUUid();
+          copySvgInfo.svgPositionX = selectSvgInfo.svgPositionX + 10;
+          copySvgInfo.svgPositionY = selectSvgInfo.svgPositionY + 10;
+          _this.svgLists.push(copySvgInfo);
+          _this.selectSvgInfo = copySvgInfo;
+        }
+        //deleted
+        else if (e1 && e1.keyCode == 46) {
+          e.preventDefault();
+          //根据当前id找到当前元素的index
+          let selectSvgIndex = _this.svgLists.indexOf(_this.svgLists.filter((f) => f.id == selectSvgInfo.id)[0]);
+          _this.svgLists.splice(selectSvgIndex, 1);
+          if (_this.svgLists.length <= 0) {
+            _this.selectSvgInfo = "";
+          }
+        }
+      };
+    },
   },
   mounted() {
     let _this = this;
@@ -518,22 +489,16 @@ export default {
       let canvasdiv = _this.$refs.canvas;
       canvasdiv.addEventListener(
         "dragover",
-        function (e) {
+        function(e) {
           e.preventDefault();
         },
         false
       );
       canvasdiv.addEventListener(
         "drop",
-        function (e) {
+        function(e) {
           e.preventDefault();
-          if (
-            _this.$store.state.CurrentlySelectedToolBar.Type == "" ||
-            _this.$store.state.CurrentlySelectedToolBar.CreateType !=
-              "draggable"
-          ) {
-            return;
-          }
+          if (_this.$store.state.CurrentlySelectedToolBar.Type == "" || _this.$store.state.CurrentlySelectedToolBar.CreateType != "draggable") return;
 
           _this.$store.commit("setSvgItem", {
             uuid: _this.$UCore.GenUUid(),
@@ -554,100 +519,9 @@ export default {
     window.onbeforeunload = null;
   },
   created() {
-    let _this = this;
-    //当前页面监视键盘输入
-    document.onkeydown = function (e) {
-      //获取当前选中组件
-      let selectSvgInfo = _this.selectSvgInfo;
-      if (
-        selectSvgInfo == undefined ||
-        selectSvgInfo == null ||
-        selectSvgInfo == ""
-      ) {
-        return;
-      }
-      //事件对象兼容
-      let e1 = e || window.event || arguments.callee.caller.arguments[0];
-      //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
-      if (e1 && e1.keyCode == 37) {
-        e.preventDefault();
-        selectSvgInfo.svgPositionX -= 1;
-      } else if (e1 && e1.keyCode == 38) {
-        e.preventDefault();
-        selectSvgInfo.svgPositionY -= 1;
-      } else if (e1 && e1.keyCode == 39) {
-        e.preventDefault();
-        selectSvgInfo.svgPositionX += 1;
-      } else if (e1 && e1.keyCode == 40) {
-        e.preventDefault();
-        selectSvgInfo.svgPositionY += 1;
-      }
-      //ctrl  c
-      else if (e1 && e1.ctrlKey && e1.keyCode == 67) {
-        e.preventDefault();
-        let copySvgInfoStr = JSON.stringify(selectSvgInfo);
-        let copySvgInfo = JSON.parse(copySvgInfoStr);
-        copySvgInfo.id = _this.$UCore.GenUUid();
-        copySvgInfo.svgPositionX = selectSvgInfo.svgPositionX + 10;
-        copySvgInfo.svgPositionY = selectSvgInfo.svgPositionY + 10;
-        _this.svgLists.push(copySvgInfo);
-        _this.selectSvgInfo = copySvgInfo;
-      }
-      //deleted
-      else if (e1 && e1.keyCode == 46) {
-        e.preventDefault();
-        //根据当前id找到当前元素的index
-        let selectSvgIndex = _this.svgLists.indexOf(
-          _this.svgLists.filter((f) => f.id == selectSvgInfo.id)[0]
-        );
-        _this.svgLists.splice(selectSvgIndex, 1);
-        if (_this.svgLists.length <= 0) {
-          _this.selectSvgInfo = "";
-        }
-      }
-    };
-    //请求接口获取组件
-    // this.$axios
-    //   .get("/InterfaceReturn1.json")
-    //   .then(function (response) {
-    //     _this.svgInfoData = response.data;
-    //     // console.log(response.data);
-    //   })
-    //   .catch(function (error) {
-    //     console.log(error);
-    //   });
-
-    //请求接口获取组件---->左侧基础数据
-    api
-      .gethookupComponentBasics()
-      .then((requset) => {
-        if (requset.status === "SUCCESS") {
-          // console.log(requset.data);
-          _this.svgInfoData = requset.data;
-        } else {
-          ElMessage.error(requset.msg);
-        }
-      })
-      .catch(function (error) {
-        console.log(error);
-      });
-
-    //请求接口获取组件---->list数据
-    setTimeout(() => {
-      api
-        .getHookupComponentComplete({ siteId: this.$store.state.siteId })
-        .then((requset) => {
-          if (requset.data.length > 0) {
-            // console.log(requset);
-            _this.svgLists = requset.data;
-          } else {
-            ElMessage.error(requset.msg);
-          }
-        })
-        .catch(function (error) {
-          console.log(error);
-        });
-    }, 1000);
+    this.onkeydown(); //开启键盘监听事件
+    this.GetLeftComponent(); //获取左侧组件数据
+    this.GetCenterComponent(); //获取中心组件数据
   },
   watch: {
     svgLists: {
@@ -660,7 +534,7 @@ export default {
             // console.log(val.length != requset.data.length);
             if (val.length != requset.data.length) {
               //浏览器（刷新、关闭、跳转）
-              window.onbeforeunload = function (e) {
+              window.onbeforeunload = function(e) {
                 e = e || window.event;
                 // 兼容IE8和Firefox 4之前的版本
                 if (e) {
@@ -671,7 +545,7 @@ export default {
               };
             }
           })
-          .catch(function (error) {
+          .catch(function(error) {
             console.log(error);
           });
       },
@@ -679,8 +553,6 @@ export default {
   },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="less">
 ::-webkit-scrollbar {
   width: 8px;
@@ -793,22 +665,7 @@ export default {
   transform-origin: left top;
   overflow: auto;
 
-  background-image: linear-gradient(
-      45deg,
-      #ccc 25%,
-      transparent 25%,
-      transparent 75%,
-      #ccc 75%,
-      #ccc
-    ),
-    linear-gradient(
-      45deg,
-      #ccc 25%,
-      transparent 25%,
-      transparent 75%,
-      #ccc 75%,
-      #ccc
-    );
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc), linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
   background-size: 20px 20px;
   background-position: 0 0, 10px 10px;
 }

src/views/home/index.vue

@@ -3,12 +3,7 @@
     <!-- topBox start -->
     <div class="topBox">
       <div class="column statisSec">
-        <statis-top
-          :falarmCount="alarmCount"
-          :fpersonalCount="personalCount"
-          :fsiteCount="siteCount"
-          :fepLoad="epLoad"
-        ></statis-top>
+        <statis-top :falarmCount="alarmCount" :fpersonalCount="personalCount" :fsiteCount="siteCount" :fepLoad="epLoad"></statis-top>
         <statis-bottom :fhtAnalogData="htAnalogData"></statis-bottom>
       </div>
       <div class="column mapBox" style="position: relative">
@@ -37,20 +32,9 @@
         <div class="panel deviceSum">
           <h2>设备运行状态</h2>
           <div class="filterSec" style="top: 0.7rem">
-            <el-date-picker
-              v-model="dDefaultTime"
-              type="datetimerange"
-              range-separator="~"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              @change="deviceTypeCount_api()"
-            >
-            </el-date-picker>
+            <el-date-picker v-model="dDefaultTime" type="datetimerange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="deviceTypeCount_api()"> </el-date-picker>
           </div>
-          <pie-chart
-            :fdeviceTypeCount="deviceTypeCount"
-            v-if="deviceTypeCount"
-          ></pie-chart>
+          <pie-chart :fdeviceTypeCount="deviceTypeCount" v-if="deviceTypeCount"></pie-chart>
           <div class="panel-footer"></div>
         </div>
         <div class="panel line1 operStatus">
@@ -75,10 +59,7 @@
             </select>
             <!-- <img src="../../assets/images/markIcon.png" alt=""> -->
           </div>
-          <bar-chart
-            :feptrendIco="eptrendIco"
-            v-if="this.eptrendIco[0]"
-          ></bar-chart>
+          <bar-chart :feptrendIco="eptrendIco" v-if="this.eptrendIco[0]"></bar-chart>
           <div class="panel-footer"></div>
         </div>
       </div>
@@ -86,20 +67,9 @@
         <div class="panel currentUsage" style="height: 100%">
           <h2>运维管理</h2>
           <div class="filterSec">
-            <el-date-picker
-              v-model="fDefaultTime"
-              type="datetimerange"
-              range-separator="~"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              @change="trendIcoCount_api()"
-            >
-            </el-date-picker>
+            <el-date-picker v-model="fDefaultTime" type="datetimerange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="trendIcoCount_api()"> </el-date-picker>
           </div>
-          <line-chart
-            :ftrendIcoCount="trendIcoCount"
-            v-if="trendIcoCount[0]"
-          ></line-chart>
+          <line-chart :ftrendIcoCount="trendIcoCount" v-if="trendIcoCount[0]"></line-chart>
           <div class="panel-footer"></div>
         </div>
       </div>
@@ -360,7 +330,7 @@ export default {
                 </div>`;
       var dataList = this.siteList;
 
-      dataList.forEach(function (item) {
+      dataList.forEach(function(item) {
         let conNew = con;
         // console.log(item.siteAddress);
         conNew = conNew.replace(/{siteAddress}/g, item.siteAddress);
@@ -387,6 +357,7 @@ export default {
             id: ind + 1,
           },
         });
+
         marker.on("mouseover", async () => {
           // console.log([val.latitude, val.longitude], null, val);
           await api.siteOne_api({ siteId: val.id }).then((requset) => {
@@ -394,34 +365,19 @@ export default {
           });
 
           if (this.siteOne) {
-            val.content = val.content.replace(
-              /{alarmPowerCount}/g,
-              this.siteOne.alarmPowerCount ? this.siteOne.alarmPowerCount : "0"
-            );
-            val.content = val.content.replace(
-              /{status}/g,
-              this.siteOne.status ? this.siteOne.status : "-"
-            );
-            val.content = val.content.replace(
-              /{deviceCount}/g,
-              this.siteOne.deviceCount ? this.siteOne.deviceCount : "0"
-            );
-            val.content = val.content.replace(
-              /{deviceType}/g,
-              this.siteOne.deviceType ? this.siteOne.deviceType : "-"
-            );
+            val.content = val.content.replace(/{alarmPowerCount}/g, this.siteOne.alarmPowerCount ? this.siteOne.alarmPowerCount : "0");
+            val.content = val.content.replace(/{status}/g, this.siteOne.status ? this.siteOne.status : "-");
+            val.content = val.content.replace(/{deviceCount}/g, this.siteOne.deviceCount ? this.siteOne.deviceCount : "0");
+            val.content = val.content.replace(/{deviceType}/g, this.siteOne.deviceType ? this.siteOne.deviceType : "-");
           }
 
-          await this.addMarkerInfo(
-            [val.longitude, val.latitude],
-            val.content,
-            val
-          );
+          await this.addMarkerInfo([val.longitude, val.latitude], val.content, val);
         });
 
         marker.on("mouseout", async () => {
           this.map.clearInfoWindow();
         });
+
         marker.on("click", async () => {
           // localStorage.clear();
           localStorage.removeItem("Overview");
@@ -497,7 +453,7 @@ export default {
       if (!this.district) {
         //实例化DistrictSearch
         var that = this;
-        AMap.plugin("AMap.DistrictSearch", function () {
+        AMap.plugin("AMap.DistrictSearch", function() {
           that.district = new AMap.DistrictSearch({
             subdistrict: 0, //获取边界不需要返回下级行政区
             extensions: "all", //返回行政区边界坐标组等具体信息
@@ -505,7 +461,7 @@ export default {
           });
 
           //行政区查询
-          that.district.search("嘉定区", function (status, result) {
+          that.district.search("嘉定区", function(status, result) {
             that.map.remove(that.polygons); //清除上次结果
             that.polygons = [];
             var bounds = result.districtList[0].boundaries;
@@ -534,11 +490,6 @@ export default {
 };
 </script>
 
-
-
-
-
-
 <style lang="scss">
 #pickerBox {
   position: absolute;

src/views/login.vue

@@ -4,33 +4,15 @@
       <h2 class="bigTit">智慧用电监控平台</h2>
       <p class="loginTitle">用户登录</p>
 
-      <el-form
-        :label-position="labelPosition"
-        :model="loginForm"
-        :rules="rules"
-        ref="loginForm"
-        class="demo-loginForm"
-      >
+      <el-form :label-position="labelPosition" :model="loginForm" :rules="rules" ref="loginForm" class="demo-loginForm">
         <el-form-item prop="username" class="oneSec">
           <img class="icon" src="../assets/images/userIcon.png" alt="" />
-          <el-input
-            v-model="loginForm.username"
-            max="6"
-            placeholder="请输入登录ID"
-          ></el-input>
+          <el-input v-model="loginForm.username" max="6" placeholder="请输入登录ID"></el-input>
         </el-form-item>
 
         <el-form-item prop="password" class="oneSec">
           <img class="icon" src="../assets/images/passwordIcon.png" alt="" />
-          <el-input
-            v-model="loginForm.password"
-            type="password"
-            placeholder="请输入密码"
-            maxlength="9"
-            auto-complete="new-password"
-            clearable
-            autocomplete="off"
-          ></el-input>
+          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" maxlength="9" auto-complete="new-password" clearable autocomplete="off"></el-input>
         </el-form-item>
         <div class="remember">
           <el-checkbox label="记住密码" v-model="isChecked"></el-checkbox>
@@ -52,30 +34,17 @@ export default {
     return {
       labelPosition: "right",
 
-      loginForm: {
-        username: "",
-        password: "",
-      },
+      loginForm: { username: "", password: "" },
 
       rules: {
         username: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
           { required: true, message: "请输入用户名", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
+          { min: 3, max: 6, message: "用户名长度在 3 到 6 个字符", trigger: "blur" },
         ],
         password: [
           { required: true, message: "请输密码", trigger: "blur" },
-          {
-            min: 3,
-            max: 9,
-            message: "密码长度在 3 到 9 个字符",
-            trigger: "blur",
-          },
+          { min: 3, max: 9, message: "密码长度在 3 到 9 个字符", trigger: "blur" },
         ],
       },
 
@@ -93,10 +62,7 @@ export default {
 
   methods: {
     loginFree() {
-      this.login_api({
-        username: "admin",
-        password: "admin123",
-      });
+      this.login_api({ username: "admin", password: "admin123" });
       localStorage.setItem("userInfo", "admin");
     },
     //登录数据对接
@@ -126,10 +92,7 @@ export default {
           //valid成功为ture，失败为false
           //发送请求 ，调用登录接口
 
-          this.login_api({
-            name: this.loginForm.username,
-            password: this.loginForm.password,
-          });
+          this.login_api(this.loginForm);
           localStorage.setItem("userInfo", this.loginForm.username);
           // alert('submit!');
         } else {
@@ -152,10 +115,8 @@ export default {
       let exdate = new Date(); // 获取时间
       exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays);
       // 字符串拼接cookie
-      window.document.cookie =
-        "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
-      window.document.cookie =
-        "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie = "userName=" + username + ";path=/;expires=" + exdate.toGMTString();
+      window.document.cookie = "userPwd=" + password + ";path=/;expires=" + exdate.toGMTString();
     },
     // 读取Cookie
     getCookie() {
@@ -293,4 +254,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/views/site/Device_motore.vue

@@ -21,42 +21,24 @@
               <div class="model" style="display: flex">
                 <div v-for="(all, index) in 4" :key="index">
                   <div
-                    v-for="arr in model_array.slice(
-                      index == 0 ? 0 : index == 1 ? 20 : index == 2 ? 40 : 60,
-                      index == 0
-                        ? 20
-                        : index == 1
-                        ? 40
-                        : index == 2
-                        ? 60
-                        : model_array.length
-                    )"
+                    v-for="arr in model_array.slice(index == 0 ? 0 : index == 1 ? 20 : index == 2 ? 40 : 60, index == 0 ? 20 : index == 1 ? 40 : index == 2 ? 60 : model_array.length)"
                     :key="arr"
                     class="display"
                   >
-                    <el-tooltip
-                      :disabled="tooltipDisabled"
-                      effect="dark"
-                      :content="arr.name"
-                      placement="top"
-                    >
-                      <div
-                        @mouseenter="spanMouseenter($event)"
-                        @mouseleave="spanMouseenter($event)"
-                      >
+                    <el-tooltip v-model:visible="visible" effect="dark" placement="top">
+                      <template #content>
+                        <span> {{ arr.name }}</span>
+                      </template>
+                      <div @mouseenter="mouseenter($event)" @mouseleave="visible = false">
                         {{ arr.name }}
                       </div>
                     </el-tooltip>
-                    <el-tooltip
-                      :disabled="tooltipDisabled"
-                      effect="dark"
-                      :content="arr.value"
-                      placement="top"
-                    >
-                      <div
-                        @mouseenter="spanMouseenter($event)"
-                        @mouseleave="spanMouseenter($event)"
-                      >
+
+                    <el-tooltip v-model:visible="visible" effect="dark" placement="top">
+                      <template #content>
+                        <span> {{ arr.value }}</span>
+                      </template>
+                      <div @mouseenter="mouseenter($event)" @mouseleave="visible = false">
                         {{ arr.value }}
                       </div>
                     </el-tooltip>
@@ -66,21 +48,9 @@
             </el-tab-pane>
             <el-tab-pane label="状态量" name="states" class="states">
               <div v-for="(all, index) in 2" :key="index">
-                <div
-                  v-for="arr in state_array.slice(
-                    index == 0 ? 0 : state_array.length / 2,
-                    index == 0 ? state_array.length / 2 : state_array.length
-                  )"
-                  :key="arr"
-                  class="display"
-                >
+                <div v-for="arr in state_array.slice(index == 0 ? 0 : state_array.length / 2, index == 0 ? state_array.length / 2 : state_array.length)" :key="arr" class="display">
                   <div style="display: flex">
-                    <el-tooltip
-                      :disabled="arr.name.length > 10 ? false : true"
-                      effect="dark"
-                      :content="arr.name"
-                      placement="top"
-                    >
+                    <el-tooltip :disabled="arr.name.length > 10 ? false : true" effect="dark" :content="arr.name" placement="top">
                       <div :class="index == 0 ? 'name' : 'name1'">
                         {{ arr.name }}
                       </div>
@@ -93,61 +63,18 @@
             </el-tab-pane>
           </el-tabs>
 
-          <div
-            style="
-              position: absolute;
-              top: 0;
-              left: 0;
-              z-index: 10;
-              color: #00f4fd;
-              font-weight: 400;
-              font-size: 0.2rem;
-              height: 34px;
-              line-height: 34px;
-              padding-left: 15px;
-            "
-          >
+          <div style="position: absolute; top: 0; left: 0; z-index: 10; color: #00f4fd; font-weight: 400; font-size: 0.2rem; height: 34px; line-height: 34px; padding-left: 15px">
             <span>当前设备：</span>
-            <el-select
-              v-model="deviceSelectValue"
-              @change="el_select"
-              placeholder="请选择"
-              popper-class="menu_select deviceSelect"
-              id="deviceSelect"
-              filterable
-            >
-              <el-option
-                v-for="(item, index) in deviceSelectOptions"
-                :key="index"
-                :label="item.deviceName"
-                :value="item.deviceCode"
-              >
-              </el-option>
+            <el-select v-model="deviceSelectValue" @change="el_select" placeholder="请选择" popper-class="menu_select deviceSelect" id="deviceSelect" filterable>
+              <el-option v-for="(item, index) in deviceSelectOptions" :key="index" :label="item.deviceName" :value="item.deviceCode"> </el-option>
             </el-select>
           </div>
-          <el-button
-            type="primary"
-            class="primary"
-            @click="If_tabs_api($store.state.siteId)"
-            >刷新</el-button
-          >
+          <el-button type="primary" class="primary" @click="If_tabs_api($store.state.siteId)">刷新</el-button>
         </el-tab-pane>
         <el-tab-pane label="历史趋势" name="second" style="top: 1px">
-          <el-tabs
-            v-model="se_content"
-            @tab-click="handleClick2"
-            class="se-content"
-          >
-            <el-tab-pane
-              v-for="tabs in $store.state.se_tabs"
-              :key="tabs"
-              :label="tabs.label"
-              :name="tabs.name"
-              :class="tabs.name"
-            ></el-tab-pane>
-            <el-button type="primary" class="preservation" @click="preservation"
-              >保存为图片</el-button
-            >
+          <el-tabs v-model="se_content" @tab-click="handleClick2" class="se-content">
+            <el-tab-pane v-for="tabs in $store.state.se_tabs" :key="tabs" :label="tabs.label" :name="tabs.name" :class="tabs.name"></el-tab-pane>
+            <el-button type="primary" class="preservation" @click="preservation">保存为图片</el-button>
           </el-tabs>
 
           <div class="block">
@@ -165,106 +92,32 @@
             </el-date-picker>
 
             <span style="padding-left: 15px">当前设备：</span>
-            <el-select
-              v-model="deviceSelectValue"
-              @change="el_select"
-              placeholder="请选择"
-              popper-class="deviceSelect"
-              id="seDeviceSelect"
-              filterable
-            >
-              <el-option
-                v-for="(item, index) in deviceSelectOptions"
-                :key="index"
-                :label="item.deviceName"
-                :value="item.deviceCode"
-              >
-              </el-option>
+            <el-select v-model="deviceSelectValue" @change="el_select" placeholder="请选择" popper-class="deviceSelect" id="seDeviceSelect" filterable>
+              <el-option v-for="(item, index) in deviceSelectOptions" :key="index" :label="item.deviceName" :value="item.deviceCode"> </el-option>
             </el-select>
           </div>
         </el-tab-pane>
         <el-tab-pane label="数据报表" name="third" style="top: 2px">
           <div class="block">
             <span>选择时间范围 :</span>
-            <el-date-picker
-              v-model="th_defaultTime"
-              type="datetimerange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              range-separator="~"
-              :disabledDate="disabledDate"
-            >
-            </el-date-picker>
+            <el-date-picker v-model="th_defaultTime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="~" :disabledDate="disabledDate"> </el-date-picker>
             <div class="operation">
-              <el-button
-                type="primary"
-                class="query"
-                :disabled="checkedCities.length > 0 ? false : true"
-                @click="Data_report_api($store.state.siteId)"
-                >查询</el-button
-              >
-              <el-button
-                type="primary"
-                class="export"
-                :disabled="
-                  th_tableData.length > 0 && checkedCities.length > 0
-                    ? false
-                    : true
-                "
-                @click="DataReportExport()"
-                >导出</el-button
-              >
+              <el-button type="primary" class="query" :disabled="checkedCities.length > 0 ? false : true" @click="Data_report_api($store.state.siteId)">查询</el-button>
+              <el-button type="primary" class="export" :disabled="th_tableData.length > 0 && checkedCities.length > 0 ? false : true" @click="DataReportExport()">导出</el-button>
             </div>
           </div>
           <div class="box">
-            <el-checkbox
-              :indeterminate="isIndeterminate"
-              v-model="checkAll"
-              @change="handleCheckAllChange"
-              >全选</el-checkbox
-            >
-            <el-checkbox-group
-              v-model="checkedCities"
-              @change="handleCheckedCitiesChange"
-            >
-              <el-checkbox v-for="city in cities" :label="city" :key="city">{{
-                city
-              }}</el-checkbox>
+            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
+            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
+              <el-checkbox v-for="city in cities" :label="city" :key="city">{{ city }}</el-checkbox>
             </el-checkbox-group>
           </div>
           <div class="table">
-            <el-table
-              v-loading="table_loading"
-              empty-text=" "
-              element-loading-text="拼命加载中"
-              class="elTable"
-              :data="th_tableData"
-              style="width: 100%"
-              height="520"
-              show
-            >
-              <el-table-column
-                prop="dataTime"
-                label="时间"
-                :render-header="labelHead"
-                fixed
-              >
-              </el-table-column>
-              <template
-                v-for="(table, index) in $store.state.table_list"
-                :key="index"
-              >
-                <el-table-column
-                  :label="table.name"
-                  v-if="columnHeaders[index].isShow"
-                >
-                  <el-table-column
-                    :render-header="labelHead"
-                    v-for="list in table.list"
-                    :key="list"
-                    :label="list.name"
-                    :prop="list.value"
-                  ></el-table-column>
+            <el-table v-loading="table_loading" empty-text=" " element-loading-text="拼命加载中" class="elTable" :data="th_tableData" style="width: 100%" height="520" show>
+              <el-table-column prop="dataTime" label="时间" :render-header="labelHead" fixed> </el-table-column>
+              <template v-for="(table, index) in $store.state.table_list" :key="index">
+                <el-table-column :label="table.name" v-if="columnHeaders[index].isShow">
+                  <el-table-column :render-header="labelHead" v-for="list in table.list" :key="list" :label="list.name" :prop="list.value"></el-table-column>
                 </el-table-column>
               </template>
 
@@ -277,11 +130,7 @@
             </el-table>
           </div>
         </el-tab-pane>
-        <devicesecond
-          v-if="activeName === 'second'"
-          ref="main"
-          :defaul_tTime="defaultTime"
-        ></devicesecond>
+        <devicesecond v-if="activeName === 'second'" ref="main" :defaul_tTime="defaultTime"></devicesecond>
         <el-tab-pane label="运行状态统计" name="fourth" style="top: 3px">
           <div class="ft_content">
             <div style="display: flex">
@@ -302,9 +151,7 @@
                 <div>本日 OFF 时长</div>
               </div>
               <div>
-                <el-button type="primary" class="primary" @click="preservation"
-                  >下载</el-button
-                >
+                <el-button type="primary" class="primary" @click="preservation">下载</el-button>
               </div>
             </div>
             <div class="ctn_time">
@@ -320,17 +167,10 @@
               >
               </el-date-picker>
             </div>
+
             <div class="ctn_echarts">
-              <devicedistion
-                v-if="activeName === 'fourth'"
-                ref="distion"
-                :defaul_tTime="defaultTime"
-              ></devicedistion>
-              <deviceStateCurve
-                v-if="activeName === 'fourth'"
-                ref="statecurve"
-                :defaul_tTime="defaultTime"
-              ></deviceStateCurve>
+              <devicedistion v-if="activeName === 'fourth'" ref="distion" :defaul_tTime="defaultTime"></devicedistion>
+              <deviceStateCurve v-if="activeName === 'fourth'" ref="statecurve" :defaul_tTime="defaultTime"></deviceStateCurve>
             </div>
           </div>
         </el-tab-pane>
@@ -344,18 +184,7 @@ import devicesecond from "../site_ehcarts/Device_second";
 import devicedistion from "../site_ehcarts/Device_distion";
 import deviceStateCurve from "../site_ehcarts/Device_StateCurve";
 import { ElMessage } from "element-plus";
-const cityOptions = [
-  "电流",
-  "功率",
-  "电度",
-  "电压",
-  "温度",
-  "频率",
-  "功率因数",
-  "谐波电流有效值",
-  "通讯参数",
-  "电压突变",
-];
+const cityOptions = ["电流", "功率", "电度", "电压", "温度", "频率", "功率因数", "谐波电流有效值", "通讯参数", "电压突变"];
 export default {
   name: "site_details",
   components: {
@@ -411,20 +240,19 @@ export default {
       deviceSelectOptions: [],
       deviceSelectValue: "",
 
-      tooltipDisabled: true,
+      visible: false,
     };
   },
   mounted() {},
   methods: {
-    //tooltip提示
-    spanMouseenter(ev) {
+    mouseenter(ev) {
+      console.log(ev.target.clientWidth < ev.target.scrollWidth);
       if (ev.target.clientWidth < ev.target.scrollWidth) {
-        this.tooltipDisabled = false;
+        this.visible = false;
       } else {
-        this.tooltipDisabled = true;
+        this.visible = true;
       }
     },
-
     //最外层tabs切换事件触发
     handleClick(tab, event) {
       this.th_tableData = [];
@@ -460,8 +288,7 @@ export default {
       this.th_tableData = [];
       let checkedCount = value.length;
       this.checkAll = checkedCount === this.cities.length;
-      this.isIndeterminate =
-        checkedCount > 0 && checkedCount < this.cities.length;
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
     },
     //设备下拉change事件
     el_select(val) {
@@ -473,17 +300,15 @@ export default {
      * @设备下拉api请求
      */
     DeviceListTwoApi() {
-      api
-        .deviceListTwo({ siteId: this.$store.state.siteId })
-        .then((requset) => {
-          if (requset.status === "SUCCESS") {
-            this.deviceSelectOptions = requset.data;
-            this.deviceSelectValue = requset.data[0].deviceCode;
-            this.If_tabs_api(this.$store.state.siteId);
-          } else {
-            ElMessage.error(requset.msg);
-          }
-        });
+      api.deviceListTwo({ siteId: this.$store.state.siteId }).then((requset) => {
+        if (requset.status === "SUCCESS") {
+          this.deviceSelectOptions = requset.data;
+          this.deviceSelectValue = requset.data[0].deviceCode;
+          this.If_tabs_api(this.$store.state.siteId);
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
     },
     /**
      * @数据报表api请求
@@ -531,8 +356,7 @@ export default {
         })
         .then((requset) => {
           if (requset.status === "SUCCESS") {
-            window.location.href =
-              window.PLATFROM_CONFIG.fileUrl + requset.data;
+            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data;
           } else {
             ElMessage.error(requset.msg);
           }
@@ -545,31 +369,25 @@ export default {
       var _this = this;
 
       //模拟量api请求
-      api
-        .rtAnalogData({ siteId: siteid, deviceCode: _this.deviceSelectValue })
-        .then((requset) => {
-          if (requset.status === "SUCCESS") {
-            _this.model_array = requset.data;
-          } else {
-            ElMessage.error(requset.msg);
-          }
-        });
+      api.rtAnalogData({ siteId: siteid, deviceCode: _this.deviceSelectValue }).then((requset) => {
+        if (requset.status === "SUCCESS") {
+          _this.model_array = requset.data;
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
 
       //状态量api请求
-      api
-        .rtSwitchData({ siteId: siteid, deviceCode: _this.deviceSelectValue })
-        .then((requset) => {
-          if (requset.status === "SUCCESS") {
-            for (let i in requset.data) {
-              requset.data[i].value == 0
-                ? (requset.data[i].value = "OFF")
-                : (requset.data[i].value = "ON");
-            }
-            _this.state_array = requset.data;
-          } else {
-            ElMessage.error(requset.msg);
+      api.rtSwitchData({ siteId: siteid, deviceCode: _this.deviceSelectValue }).then((requset) => {
+        if (requset.status === "SUCCESS") {
+          for (let i in requset.data) {
+            requset.data[i].value == 0 ? (requset.data[i].value = "OFF") : (requset.data[i].value = "ON");
           }
-        });
+          _this.state_array = requset.data;
+        } else {
+          ElMessage.error(requset.msg);
+        }
+      });
     },
     /**
      * @运行状态统计api请求
@@ -592,16 +410,14 @@ export default {
         });
       }
       async function runStatus() {
-        await api
-          .runStatus({ startTime: time[0], endTime: time[1], siteId: siteid })
-          .then((requset) => {
-            if (requset.status === "SUCCESS") {
-              _this.$store.state.run_off_Status = requset.data;
-              // console.log(requset);
-            } else {
-              ElMessage.error(requset.msg);
-            }
-          });
+        await api.runStatus({ startTime: time[0], endTime: time[1], siteId: siteid }).then((requset) => {
+          if (requset.status === "SUCCESS") {
+            _this.$store.state.run_off_Status = requset.data;
+            // console.log(requset);
+          } else {
+            ElMessage.error(requset.msg);
+          }
+        });
       }
       LoopStatus();
       runStatus();
@@ -647,19 +463,10 @@ export default {
      */
     preservation() {
       if (this.activeName === "second") {
-        this.$store.commit("getConnectedDataURL", [
-          this.$refs.main.chart,
-          this.se_label,
-        ]);
+        this.$store.commit("getConnectedDataURL", [this.$refs.main.chart, this.se_label]);
       } else if (this.activeName === "fourth") {
-        this.$store.commit("getConnectedDataURL", [
-          this.$refs.statecurve.chart,
-          "运行状态曲线",
-        ]);
-        this.$store.commit("getConnectedDataURL", [
-          this.$refs.distion.chart,
-          "OFF次数分布",
-        ]);
+        this.$store.commit("getConnectedDataURL", [this.$refs.statecurve.chart, "运行状态曲线"]);
+        this.$store.commit("getConnectedDataURL", [this.$refs.distion.chart, "OFF次数分布"]);
       }
     },
     /**
@@ -676,11 +483,7 @@ export default {
       } else {
         h.column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
       }
-      return (
-        "div",
-        { class: "table-head", style: { width: "100%" } },
-        [h.column.label]
-      );
+      return "div", { class: "table-head", style: { width: "100%" } }, [h.column.label];
     },
   },
   watch: {
@@ -700,9 +503,7 @@ export default {
     checkedCities(newArrayVal) {
       newArrayVal.length <= 0 ? (this.th_tableData = []) : "";
       // 计算为被选中的列标题数组
-      var nonSelecteds = this.columnHeaders
-        .filter((item) => newArrayVal.indexOf(item.title) == -1)
-        .map((item) => item.title);
+      var nonSelecteds = this.columnHeaders.filter((item) => newArrayVal.indexOf(item.title) == -1).map((item) => item.title);
       // 根据计算结果进行表格重绘
       this.columnHeaders.filter((item) => {
         let isNonSelected = nonSelecteds.indexOf(item.title) != -1;

src/views/site/Event_alarm.vue

@@ -5,38 +5,16 @@
         <div class="back_all Cont_One">
           <div class="Ctn_Time">
             <span>选择时间范围 :</span>
-            <el-date-picker
-              v-model="defaultTime"
-              type="datetimerange"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              range-separator="~"
-              :disabledDate="disabledDate"
-            >
-            </el-date-picker>
+            <el-date-picker v-model="defaultTime" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" range-separator="~" :disabledDate="disabledDate"> </el-date-picker>
           </div>
           <div class="Ctn_Time">
             <span>状态 :</span>
-            <el-select
-              id="state_select"
-              popper-class="state_select"
-              @change="state_select"
-              v-model="value"
-              placeholder="请选择"
-            >
-              <el-option
-                v-for="(item, index) in options"
-                :key="index"
-                :label="item.label"
-                :value="item.value"
-              >
-              </el-option>
+            <el-select id="state_select" popper-class="state_select" @change="state_select" v-model="value" placeholder="请选择">
+              <el-option v-for="(item, index) in options" :key="index" :label="item.label" :value="item.value"> </el-option>
             </el-select>
           </div>
           <div class="Ctn_Time">
-            <el-button type="primary" class="Ctn_btn" @click="Api_all"
-              >查询</el-button
-            >
+            <el-button type="primary" class="Ctn_btn" @click="Api_all">查询</el-button>
           </div>
         </div>
         <div class="back_all Cont_Two">
@@ -56,9 +34,7 @@
             <div class="cont_2">
               未处理告警数: <span>{{ unCount }}</span> 条
             </div>
-            <el-button type="primary" class="Ctn_btn" @click="export_api"
-              >导出</el-button
-            >
+            <el-button type="primary" class="Ctn_btn" @click="export_api">导出</el-button>
           </div>
           <div class="table">
             <el-table
@@ -74,14 +50,7 @@
               @row-dblclick="dblclick"
             >
               <el-table-column type="selection"> </el-table-column>
-              <el-table-column
-                v-for="table in $store.state.trendIco_table"
-                :key="table"
-                :prop="table.porp"
-                :label="table.label"
-                show-overflow-tooltip
-              >
-              </el-table-column>
+              <el-table-column v-for="table in $store.state.trendIco_table" :key="table" :prop="table.porp" :label="table.label" show-overflow-tooltip> </el-table-column>
               <template #empty v-if="table_loading == false">
                 <div class="zwsj">
                   <img src="./../../assets/images/No_data.png" alt="" />
@@ -102,70 +71,36 @@
               >
               </el-pagination>
             </div>
-            <el-dialog
-              title="告警处置"
-              v-model="dialogFormVisible"
-              custom-class="From_table"
-            >
+            <el-dialog title="告警处置" v-model="dialogFormVisible" custom-class="From_table">
               <!-- {label:'处理人',porp:'handler'},
             {label:'处理人时间',porp:'handlingTime'}, -->
               <el-form :model="form">
                 <el-form-item label="发生时间: ">
-                  <el-input
-                    v-model="form.soeTime"
-                    autocomplete="off"
-                    :disabled="true"
-                  ></el-input>
+                  <el-input v-model="form.soeTime" autocomplete="off" :disabled="true"></el-input>
                 </el-form-item>
                 <el-form-item label="告警描述: ">
-                  <el-input
-                    v-model="form.measName"
-                    autocomplete="off"
-                    :disabled="true"
-                  ></el-input>
+                  <el-input v-model="form.measName" autocomplete="off" :disabled="true"></el-input>
                 </el-form-item>
                 <el-form-item label="设备: ">
-                  <el-input
-                    v-model="form.deviceCode"
-                    autocomplete="off"
-                    :disabled="true"
-                  ></el-input>
+                  <el-input v-model="form.deviceCode" autocomplete="off" :disabled="true"></el-input>
                 </el-form-item>
                 <el-form-item label="告警类型: ">
-                  <el-input
-                    v-model="form.alarmName"
-                    autocomplete="off"
-                    :disabled="true"
-                  ></el-input>
+                  <el-input v-model="form.alarmName" autocomplete="off" :disabled="true"></el-input>
                 </el-form-item>
                 <el-form-item label="状态: ">
-                  <el-select
-                    v-model="form.handlingStatus"
-                    placeholder="请选择"
-                    popper-class="state_select"
-                  >
+                  <el-select v-model="form.handlingStatus" placeholder="请选择" popper-class="state_select">
                     <el-option label="已处理" :value="1"></el-option>
                     <el-option label="未处理" :value="0"></el-option>
                   </el-select>
                 </el-form-item>
                 <el-form-item label="描述: ">
-                  <el-input
-                    type="textarea"
-                    v-model="form.describe"
-                    autocomplete="off"
-                    maxlength="30"
-                    show-word-limit
-                  ></el-input>
+                  <el-input type="textarea" v-model="form.describe" autocomplete="off" maxlength="30" show-word-limit></el-input>
                 </el-form-item>
               </el-form>
               <template #footer>
                 <span class="dialog-footer">
-                  <el-button type="primary" @click="dialogFormVisible = false"
-                    >确 定</el-button
-                  >
-                  <el-button @click="dialogFormVisible = false"
-                    >取 消</el-button
-                  >
+                  <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                 </span>
               </template>
             </el-dialog>
@@ -184,17 +119,7 @@ export default {
     return {
       options: [], //状态下拉列表值存储
       value: 0, //状态下拉列表默认值
-      defaultTime: [
-        new Date(
-          this.$store.state.Time_All[0],
-          this.$store.state.Time_All[1],
-          1,
-          0,
-          0,
-          0
-        ),
-        new Date(),
-      ], //时间选择器v-model
+      defaultTime: [new Date(this.$store.state.Time_All[0], this.$store.state.Time_All[1], 1, 0, 0, 0), new Date()], //时间选择器v-model
       disabledDate(date) {
         return date.getTime() > new Date(); //公共时间选择器 控制当前时间之后的时间无法选择
       },
@@ -237,9 +162,7 @@ export default {
       this.form.measName = row.measName;
       this.form.deviceCode = row.deviceCode;
       this.form.alarmName = row.alarmName;
-      row.handlingStatus === "已处理"
-        ? (this.form.handlingStatus = 1)
-        : (this.form.handlingStatus = 0);
+      row.handlingStatus === "已处理" ? (this.form.handlingStatus = 1) : (this.form.handlingStatus = 0);
       this.form.handler = row.handler;
       this.form.handlingTime = row.handlingTime;
     },
@@ -324,9 +247,7 @@ export default {
             _this.tableData = requset.data.records;
             _this.total = requset.data.total;
             _this.tableData.map((val) => {
-              val.handlingStatus == 1
-                ? (val.handlingStatus = "已处理")
-                : (val.handlingStatus = "未处理");
+              val.handlingStatus == 1 ? (val.handlingStatus = "已处理") : (val.handlingStatus = "未处理");
             });
             // console.log(requset);
           } else {
@@ -350,8 +271,7 @@ export default {
         })
         .then((requset) => {
           if (requset.status === "SUCCESS") {
-            window.location.href =
-              window.PLATFROM_CONFIG.fileUrl + requset.data;
+            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data;
           } else {
             ElMessage.error(requset.msg);
           }
@@ -377,7 +297,6 @@ export default {
 };
 </script>
 
-
 <style>
 /**
  * @分页css样式 

src/views/site_ehcarts/Device_second.vue

@@ -280,8 +280,6 @@ export default {
         });
       }
 
-      console.log(JSON.stringify(this.series_all));
-
       option = {
         tooltip: {
           backgroundColor: "rgba(0, 244, 253, 0.1)",

vue.config.js

@@ -7,11 +7,11 @@ function resolve(dir) {
 module.exports = {
     // 打包后路径错误导致的空白页面问题。
     // publicPath: '/vuefiv/',
-    publicPath: '/panel/',
+    publicPath: '/public/',
     outputDir: process.env.outputDir,
     // assetsPublicPath: '/vuefiv/',
     // assetsDir: 'vuefiv',
-    //      *  分别为生成环境和开发环境配置
+    // 分别为生成环境和开发环境配置
     configureWebpack: config => {
         if (process.env.NODE_ENV === 'production') {
             // 为生产环境修改配置...
@@ -50,6 +50,6 @@ module.exports = {
                 }
             }
         },
-        public: 'localhost:8080/vuefiv/'
+        // public: 'localhost:8080/vuefiv/'
     }
 }