关联关系静态 反向代理

package.json

@@ -10,6 +10,7 @@
     "axios": "^1.4.0",
     "core-js": "^3.8.3",
     "element-ui": "^2.15.13",
+    "express": "^4.18.2",
     "sm-crypto": "^0.3.12",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",

src/api/common-action.js

@@ -0,0 +1,79 @@
+import request from '@/utils/request'
+
+
+
+// 修改可编辑表格中的某行数据
+export function editRow(editPath, editData) {
+  // console.log('提交修改数据', editData)
+  editData = editData || {}
+  // console.log(editPath)
+  return request({
+    url: editPath,
+    method: 'put',
+    data: editData
+  })
+}
+
+// 获取选择框选项
+export function getOptions(opPath) {
+  return request({
+    url: opPath,
+    method: 'get'
+  })
+}
+
+// 获取 get 请求 数据
+export function httpGet(getPath) {
+  return request({
+    url: getPath,
+    method: 'get'
+  })
+}
+
+// 下载文件
+export function download(getPath) {
+  return request({
+    url: getPath,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+// 下载导出文件
+export async function downloadExport(getPath, fileName) {
+  fileName = fileName || '导出文件.csv'
+  const res = await request({
+    url: getPath,
+    method: 'get',
+    responseType: 'blob'
+  })
+  // console.log('Downres', res)
+  const link = document.createElement('a')
+  const blob = new Blob([res], {
+    type: 'application/vnd.ms-excel;charset=utf-8'
+  })
+  link.style.display = 'none'
+  link.href = URL.createObjectURL(blob)
+  link.setAttribute('download', fileName)
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+}
+
+// 提交 post 数据 postData ，数据类型是 json，如果数据类型是 form 需要另外写函数，或者在这里加个判断
+export function httpPostJson(postPath, postData) {
+  return request({
+    url: postPath,
+    method: 'post',
+    data: postData
+  })
+}
+// 提交 post 数据
+export function postData(postPath, postData) {
+  return request({
+    url: postPath,
+    method: 'post',
+    headers: { 'content-type': 'application/x-www-form-urlencoded' },
+    data: postData
+  })
+}

src/components/bulletBox/index.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="bullet_box" :style="{width:windowWidth,height:windowHeight}">
-
+  <div class="bullet_box" :style="{ width: windowWidth, height: windowHeight }">
+    <QuickFindVue></QuickFindVue>
+    <AssociationVue></AssociationVue>
   </div>
 </template>
 
 <script>
+import QuickFindVue from "@/views/dashboard/components/QuickFind.vue";
+import AssociationVue from "@/views/dashboard/components/Association.vue";
 export default {
-    // 接收传过来的宽高
+  // 接收传过来的宽高
   props: {
     windowWidth: {
       type: String,
@@ -17,6 +20,7 @@ export default {
       default: "",
     },
   },
+  components: { QuickFindVue, AssociationVue },
 
   data() {
     return {};
@@ -30,9 +34,9 @@ export default {
 
 <style lang="scss" scoped>
 .bullet_box {
-    position: absolute;
-    top: 10px;
-    left: 10px;
+  position: absolute;
+  top: 10px;
+  left: 10px;
   box-shadow: 1px 1px 3px 2px #299bff !important;
   background-color: #fff;
   border-radius: 5px;

src/utils/request.js

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { Message } from 'element-ui'
+import { getToken } from '@/utils/auth'
 
 // 请求url
 const service = axios.create({
@@ -25,15 +26,14 @@ service.interceptors.request.use(
 // 响应拦截
 service.interceptors.response.use(
   response => {
-    let res = response.data
+    let res = response
     return res
   },
   error => {
     console.log('request.js err=', error) // for debug
     console.log('request.js err.response=', error.response) // for debug
-    error.response.data.message = error.response.data.message || '未知错误'
     Message({
-      message: '' + error.response.data.message,
+      message: '' + error.message,
       type: 'error',
       duration: 3 * 1000,
       offset: window.screen.height / 3

src/views/dashboard/components/Association.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="association_box">
+    <div class="left_row">
+      <!-- 单个的小终端 -->
+      <div class="small_terminal">
+        <span class="small_icon"></span>
+        <div class="small_terminal_font">
+          <span>MT3501A</span>
+          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+        </div>
+      </div>
+      <div class="small_terminal">
+        <span class="small_icon"></span>
+        <div class="small_terminal_font">
+          <span>MT3501A</span>
+          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+        </div>
+      </div>
+      <div class="small_terminal">
+        <span class="small_icon"></span>
+        <div class="small_terminal_font">
+          <span>MT3501A</span>
+          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+        </div>
+      </div>
+    </div>
+    <!-- 中间的当前终端 -->
+    <div class="center_row">
+      <div class="big_terminal">
+        <span class="big_icon"></span>
+        <div class="big_terminal_font">
+          <span>MT3501A</span>
+          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+        </div>
+      </div>
+    </div>
+    <div class="right_row">
+      <!-- 单个的小终端 -->
+      <div class="small_terminal">
+        <span class="small_icon"></span>
+        <div class="small_terminal_font">
+          <span>MT3501A</span>
+          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+        </div>
+      </div>
+      <div class="small_terminal">
+        <span class="small_icon"></span>
+        <div class="small_terminal_font">
+          <span>MT3501A</span>
+          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+        </div>
+      </div>
+      <div class="small_terminal">
+        <span class="small_icon"></span>
+        <div class="small_terminal_font">
+          <span>MT3501A</span>
+          <span>#1主变中压侧测控PCS-9705A-D-H2</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //模拟数据
+      list: {
+        CE1101: {
+          desc: "110kV母联测控",
+          ied_name: "CE1101",
+          list: [
+            {
+              ied_desc: "110kVⅠ母合并单元",
+              ied_name: "MM1101A",
+              node_id: 8273494,
+              ref_ied_desc: "110kV母联智能终端",
+              ref_ied_id: 8399528,
+              ref_ied_name: "IE1101",
+              ref_type: "1",
+            },
+            {
+              ied_desc: "110kVⅠ母合并单元",
+              ied_name: "MM1101A",
+              node_id: 8273494,
+              ref_ied_desc: "110kV母联智能终端",
+              ref_ied_id: 8399528,
+              ref_ied_name: "IE1101",
+              ref_type: "1",
+            },
+            {
+              ied_desc: "110kVⅠ母合并单元",
+              ied_name: "MM1101A",
+              node_id: 8273494,
+              ref_ied_desc: "110kV母联智能终端",
+              ref_ied_id: 8399528,
+              ref_ied_name: "IE1101",
+              ref_type: "1",
+            },
+            {
+              ied_desc: "110kVⅠ母合并单元",
+              ied_name: "MM1101A",
+              node_id: 8273494,
+              ref_ied_desc: "110kV母联智能终端",
+              ref_ied_id: 8399528,
+              ref_ied_name: "IE1101",
+              ref_type: "1",
+            },
+            {
+              ied_desc: "110kVⅠ母合并单元",
+              ied_name: "MM1101A",
+              node_id: 8273494,
+              ref_ied_desc: "110kV母联智能终端",
+              ref_ied_id: 8399528,
+              ref_ied_name: "IE1101",
+              ref_type: "1",
+            },
+            {
+              ied_desc: "110kVⅠ母合并单元",
+              ied_name: "MM1101A",
+              node_id: 8273494,
+              ref_ied_desc: "110kV母联智能终端",
+              ref_ied_id: 8399528,
+              ref_ied_name: "IE1101",
+              ref_type: "1",
+            },
+            {
+              ied_desc: "110kVⅠ母合并单元",
+              ied_name: "MM1101A",
+              node_id: 8273494,
+              ref_ied_desc: "110kV母联智能终端",
+              ref_ied_id: 8399528,
+              ref_ied_name: "IE1101",
+              ref_type: "1",
+            },
+          ],
+          node_id: 8371048,
+        },
+      },
+    };
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.association_box {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  .small_terminal {
+    width: 100%;
+    height: 10rem;
+    margin-bottom: 2rem;
+    .small_icon {
+      width: 100%;
+      min-height: 7rem;
+      display: inline-block;
+      background-image: url("../../../assets/ied.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: transparent !important;
+    }
+    .small_terminal_font {
+      width: 100%;
+      line-height: 1.6rem;
+      color: #51637f;
+      font-size: 1.16rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+  .big_terminal {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    width: 22rem;
+    .big_icon {
+      width: 100%;
+      min-height: 15rem;
+      display: inline-block;
+      background-image: url("../../../assets/ied.png");
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-color: transparent !important;
+    }
+    .big_terminal_font {
+      width: 100%;
+      font-weight: bold;
+      font-size: 1.5rem;
+      color: rgb(19, 75, 234);
+      margin-top: 2rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+.left_row {
+  width: 22rem;
+  font-size: 1.17rem;
+  line-height: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.center_row {
+  width: 22rem;
+}
+.right_row {
+  width: 22rem;
+  font-size: 1.17rem;
+  line-height: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/dashboard/components/QuickFind.vue

@@ -1,29 +1,50 @@
 <template>
-    <div>
-        
-    </div>
+  <div></div>
 </template>
 
 <script>
+import { httpGet } from "@/api/common-action";
 export default {
-    name: 'ScdProjectQuickFind',
+  data() {
+    return {
+        //模拟数据
+        list:{
+            CE1101:{
+                desc:"110kV母联测控",
+                ied_name:"CE1101",
+                list:[],
+                node_id:8371048
+            },
+              CE1101:{
+                desc:"110kV母联测控",
+                ied_name:"CE1101",
+                list:[],
+                node_id:8371048
+            },
+              CE1101:{
+                desc:"110kV母联测控",
+                ied_name:"CE1101",
+                list:[],
+                node_id:8371048
+            },
+        }
+    };
+  },
 
-    data() {
-        return {
-            
-        };
-    },
+  mounted() {
+    // this.getRelationFn()
+  },
 
-    mounted() {
-        
-    },
-
-    methods: {
-        
-    },
+  methods: {
+    //获取快速查找列表数据
+   async getRelationFn(){
+        const url = '/api/scd/ied/relation'
+        const res = await httpGet(url)
+        console.log('res',res);
+    }
+  },
 };
 </script>
 
 <style lang="scss" scoped>
-
 </style>

src/views/dashboard/index.vue

@@ -7,15 +7,17 @@
         <el-main class="main-cont">Main</el-main>
       </el-container>
     </el-container>
+    <!-- 测试弹窗 注释掉即可隐藏弹窗 -->
+    <BulletBox :windowWidth="'150rem'" :windowHeight="'72rem'"></BulletBox>
   </div>
 </template>
 
 <script>
 import {basicAreaList } from '@/api/dashboard'
+import BulletBox from "@/components/bulletBox/index.vue"
 import TreeList from '@/components/tree-list.vue'
 export default {
-  name: "ScdProjectIndex",
-  components: { TreeList },
+  components: { TreeList, BulletBox},
   data() {
     return {
         treeData:[

vue.config.js

@@ -1,4 +1,37 @@
+// const { defineConfig } = require('@vue/cli-service')
+// module.exports = defineConfig({
+//   // transpileDependencies: true,
+//   devServer: {
+//     open: true,
+//     overlay: {
+//       warnings: false,
+//       errors: true
+//     },
+//     proxy: {
+//       '^/api': {
+//         target: 'http://8.142.173.95:10086',
+//         changeOrigin: true,
+//         pathRewrite: {
+//           '^/api': '/api'
+//         }
+//       }
+//     }
+//   },
+// })
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+
+  devServer: {
+    proxy: {
+      '^/api': {
+        target: 'http://8.142.173.95:10086',
+        changeOrigin: true,
+        pathRewrite: {
+          '^/api': '/api'
+        }
+      }
+    }
+  }
 })
+

yarn.lock

@@ -2892,7 +2892,7 @@
     "signal-exit" "^3.0.3"
     "strip-final-newline" "^2.0.0"
 
-"express@^4.17.3":
+"express@^4.17.3", "express@^4.18.2":
   "integrity" "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ=="
   "resolved" "https://registry.npmmirror.com/express/-/express-4.18.2.tgz"
   "version" "4.18.2"
@@ -3550,6 +3550,11 @@
   "resolved" "https://registry.npmmirror.com/js-tokens/-/js-tokens-4.0.0.tgz"
   "version" "4.0.0"
 
+"jsbn@^1.1.0":
+  "integrity" "sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A=="
+  "resolved" "https://registry.npmmirror.com/jsbn/-/jsbn-1.1.0.tgz"
+  "version" "1.1.0"
+
 "jsesc@^2.5.1":
   "integrity" "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
   "resolved" "https://registry.npmmirror.com/jsesc/-/jsesc-2.5.2.tgz"
@@ -5049,6 +5054,13 @@
   "resolved" "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz"
   "version" "3.0.0"
 
+"sm-crypto@^0.3.12":
+  "integrity" "sha512-272PBzB4PYaBdeGa41TH9ZlMGLPVRmS36Gs4FjmHwXIdihQypAbhhFWZTaa/3de69q2KfMme1M5O2W5+spAdrg=="
+  "resolved" "https://registry.npmmirror.com/sm-crypto/-/sm-crypto-0.3.12.tgz"
+  "version" "0.3.12"
+  dependencies:
+    "jsbn" "^1.1.0"
+
 "sockjs@^0.3.24":
   "integrity" "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ=="
   "resolved" "https://registry.npmmirror.com/sockjs/-/sockjs-0.3.24.tgz"