first commit

.env.development

@@ -0,0 +1 @@
+VUE_APP_API_URL=http://192.168.10.151:8082

package-lock.json

@@ -2402,6 +2402,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2441,6 +2449,11 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.2.1",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.1.tgz?cache=0&sync_timestamp=1605043056908&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.1.tgz",
@@ -2463,6 +2476,27 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1607215997560&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -4119,8 +4153,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4564,6 +4597,19 @@
       "integrity": "sha1-j3VwGJAqthkDI6jF9hJNhUiTo1s=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.14.1.tgz",
+      "integrity": "sha1-i1dFxzZsHBpgO7bAIShupxh+KqI=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.3",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.3.tgz?cache=0&sync_timestamp=1592492754083&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.3.tgz",
@@ -7438,6 +7484,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -9161,6 +9212,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.19.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.19.0.tgz?cache=0&sync_timestamp=1605051977498&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.19.0.tgz",
@@ -10429,6 +10485,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through2": {
       "version": "2.0.5",
       "resolved": "https://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz?cache=0&sync_timestamp=1593478628425&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrough2%2Fdownload%2Fthrough2-2.0.5.tgz",
@@ -10933,6 +10994,12 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz",
       "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
     },
+    "vue-cli-plugin-element": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/vue-cli-plugin-element/download/vue-cli-plugin-element-1.0.1.tgz",
+      "integrity": "sha1-NOWPtls2z1mvrxT1AyiOXleLFVQ=",
+      "dev": true
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "vuecli4demo",
+  "name": "sis",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -7,9 +7,13 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "echarts": "^5.0.0",
+    "element-ui": "^2.4.5",
     "vue": "^2.6.11",
-    "vue-router": "^3.2.0"
+    "vue-router": "^3.2.0",
+    "vuex": "^3.6.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
@@ -17,6 +21,7 @@
     "@vue/cli-service": "~4.5.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.2",
+    "vue-cli-plugin-element": "~1.0.1",
     "vue-template-compiler": "^2.6.11"
   },
   "browserslist": [

public/websocket.js

@@ -0,0 +1,39 @@
+import Stomp from "stompjs";
+import store from '../src/store/index'
+var projectconfig = 'ws://192.168.10.151:8082/gyee-websocket'
+// ============================一般使用的变量============================
+let number = 0;
+export const datainit = initialize;
+// ============================  大函数体   ============================
+function initialize() {
+  let adpClient = null;
+  var url = projectconfig;
+  adpClient = Stomp.client(url);
+  adpClient.debug = null;
+  adpClient.connect({}, adpClient => connectCallBackSubscribe(adpClient), error => reconnect(error, adpClient));
+}
+// 断线重连
+function reconnect(error, adpClient) {
+  //连接失败时再次调用函数
+  number++;
+  adpClient.connected = false;
+  clearTimeout(setTimeout(initialize(), 1000 * 5));
+  debugX("DataAdapter reconnect:" + number + " 次");
+  return;
+}
+// ============================  订阅函数体  ============================
+function connectCallBackSubscribe(adpClient) {
+  number = 0;
+  adpClient.connected = true;
+  adpClient.subscribe('topic/popup', stompMessage => reflexWindturbineBasicInformation(stompMessage));
+}
+// ============================  解析函数体  ============================
+function reflexWindturbineBasicInformation(stompMessage) {
+  var newdata = JSON.parse(stompMessage.body);
+  store.dispatch('getupdate', newdata);
+  console.log(newdata)
+}
+// ============================  其他  ============================
+function debugX(text) {
+  console.log(text);
+}

src/App.vue

@@ -1,32 +1,124 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
-    <router-view/>
+    <el-container style="width: 100%">
+      <el-header>
+        <el-menu
+          :default-active="activeIndex"
+          class="el-menu-demo"
+          mode="horizontal"
+          @select="handleSelect"
+          background-color="#545c64"
+          text-color="#fff"
+          active-text-color="#ffd04b"
+          router
+        >
+          <el-menu-item index="/">首页</el-menu-item>
+          <el-submenu index="2">
+            <template slot="title">实时监视</template>
+            <el-menu-item index="/about">状态监视</el-menu-item>
+            <el-submenu index="2-4">
+              <template slot="title">矩阵监视</template>
+              <el-menu-item index="2-4-1">选项1</el-menu-item>
+              <el-menu-item index="2-4-2">选项2</el-menu-item>
+              <el-menu-item index="2-4-3">选项3</el-menu-item>
+            </el-submenu>
+          </el-submenu>
+          <el-submenu index="3">
+            <template slot="title">性能分析</template></el-submenu
+          >
+          <el-submenu index="4">
+            <template slot="title">对标管理</template>
+          </el-submenu>
+          <el-submenu index="5">
+            <template slot="title">健康管理</template>
+          </el-submenu>
+          <el-submenu index="6">
+            <template slot="title">智能报警</template>
+          </el-submenu>
+          <el-submenu index="7">
+            <template slot="title">安全管控</template>
+            <el-menu-item index="/about">人员矩阵</el-menu-item>
+            <el-menu-item index="/about">全局监视</el-menu-item>
+          </el-submenu>
+          <el-submenu index="8">
+            <template slot="title">报表管理</template>
+          </el-submenu>
+        </el-menu>
+      </el-header>
+      <el-main>
+        <router-view></router-view>
+      </el-main>
+      <el-footer>GYEE </el-footer>
+    </el-container>
   </div>
 </template>
 
-<style lang="scss">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
+<script>
+import { datainit } from "../public/websocket";
+export default {
+  data() {
+    return {
+      activeIndex: "/index",
+    };
+  },
+  created() {
+    datainit();
+  },
+  methods: {
+    handleSelect(key, keyPath) {},
+  },
+};
+</script>
+<style lang="sass" scoped>
+#app
+  width: 100%
+  height: 100%
+
+#mychart
+  height: 500px
+  width: 500px
+
+.el-header
+  position: sticky
+  top: 0
+  z-index: 999
+
+.el-footer
+  background-color: rgb(84, 92, 100)
+  color: aliceblue
+  position: fixed
+  bottom: 0
+  width: 100%
+  z-index: 999
+  text-align: center
+  line-height: 60px
+</style>
+<style lang="sass">
+body,
+.el-header,
+.el-main,
+.el-footer
+  margin: 0 !important
+  padding: 0 !important
+  height: 100%
+
+::-webkit-scrollbar
+
+  width: 6px
+  height: 6px
+  background-color: #F5F5F5
+
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track
+
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3)
+  border-radius: 10px
+  background-color: #F5F5F5
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb
+
+  border-radius: 10px
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)
+  background-color: #555
 </style>

src/components/HelloWorld.vue

@@ -1,32 +1,6 @@
 <template>
   <div class="hello">
     <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
   </div>
 </template>
 

src/element-variables.scss

@@ -0,0 +1,11 @@
+/*
+Write your variables here. All available variables can be
+found in element-ui/packages/theme-chalk/src/common/var.scss.
+For example, to overwrite the theme color:
+*/
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+
+@import "~element-ui/packages/theme-chalk/src/index";

src/http.js

@@ -0,0 +1,12 @@
+import axios from 'axios'
+import Vue from 'vue'
+import router from './router'
+
+const http = axios.create({
+  baseURL: process.env.VUE_APP_API_URL || '/admin/api',
+  // baseURL: process.env.VUE_APP_API_URL,
+  // baseURL: 'http://192.168.10.168:8080'
+})
+
+
+export default http

src/main.js

@@ -1,10 +1,18 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import './plugins/element.js'
+import store from './store/index'
+var echarts = require('echarts');
+Vue.prototype.$echarts = echarts;
+
+import http from './http'
+Vue.prototype.$http = http
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/plugins/element.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Element from 'element-ui'
+import '../element-variables.scss'
+
+Vue.use(Element)

src/router/index.js

@@ -1,14 +1,19 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import Index from '../views/Index.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'home',
+    redirect: '/index'
+  },
+  {
+    path: '/index',
+    name: 'index',
+    component: Index
   },
   {
     path: '/about',
@@ -21,7 +26,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
-  mode: 'history',
+  mode: 'hash',
   base: process.env.BASE_URL,
   routes
 })

src/store/index.js

@@ -0,0 +1,50 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+// 值的存储  获取: this.$store.state.xxxx
+const state = {
+  windturbineMap: {},
+  count:1,
+}
+
+//计算state的值  获取: this.$store.getters.xxxx
+const getters = {
+    getcount(state){
+        return state.count +1
+    }
+}
+
+// 数据更新 使用: this.$store.commit('函数名','val')
+const mutations = {
+  
+  update(state, newData)
+  {
+    state.windturbineMap = newData
+  }
+};
+// 数据更新-异步 使用: this.$store.dispatch('函数名','val')
+
+const actions = {
+  getupdate(context, newData)
+  {
+    context.commit("update", newData);
+  },
+};
+
+
+
+/** 打印日志 */
+function D(text)
+{
+  console.log(text);
+}
+
+
+const store = new Vuex.Store({
+  state,
+  mutations,
+  actions,
+  getters,
+});
+export default store;

src/views/About.vue

@@ -1,5 +1,41 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <el-button @click="commit">click</el-button>
+    {{data || 'aaa'}}
+    store.state获得数据:{{ this.$store.state.count }} store.getters获得数据:{{
+      this.$store.getters.getcount
+    }}
   </div>
 </template>
+<script>
+export default {
+  name: "app",
+  data() {
+    return {
+      data: "",
+    };
+  },
+  methods: {
+    fetch() {
+      this.$http
+        .get("/gyee-query/area/list")
+        .then((res) => {
+          console.log(res.data);
+          this.data = res.data;
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+    commit() {
+      // this.$store.commit('update','33')
+      // this.$store.dispatch('getupdate',66)
+    },
+  },
+  created() {
+    this.fetch();
+  },
+  mounted() {},
+};
+</script>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'Home',
-  components: {
-    HelloWorld
-  }
-}
-</script>

src/views/Index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="app">
+    <el-table
+      :data="
+        tableData.filter(
+          (data) =>
+            !search || data.name.toLowerCase().includes(search.toLowerCase())
+        )
+      "
+      style="width: 60%"
+    >
+      <el-table-column label="Date" prop="date"> </el-table-column>
+      <el-table-column label="Name" prop="name"> </el-table-column>
+      <el-table-column align="right">
+        <template slot="header">
+          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
+        </template>
+        <template slot-scope="scope">
+          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
+            >Edit</el-button
+          >
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)"
+            >Delete</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <div id="mychart"></div>
+    <div style="height:400px"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "app",
+  data() {
+    return {
+      tableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄",
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄",
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄",
+        },
+      ],
+      search: "",
+    };
+  },
+  mounted() {
+    var myChart = this.$echarts.init(document.getElementById("mychart"));
+    var option = {
+      xAxis: {
+        type: "category",
+        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      },
+      yAxis: {
+        type: "value",
+      },
+      series: [
+        {
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+          type: "line",
+        },
+      ],
+    };
+    myChart.setOption(option);
+  },
+  methods: {
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
+    },
+  },
+};
+</script>
+
+<style>
+#mychart {
+  height: 500px;
+  width: 500px;
+}
+</style>

vue.config.js

@@ -0,0 +1,20 @@
+
+module.exports = {
+  // 基本路径  3.6之前的版本时 baseUrl
+  publicPath: "./",
+  // 输出文件目录
+  outputDir: "dist",
+  // eslint-loader 是否在保存的时候检查
+  devServer: {
+    proxy: {
+        '/admin/api': {
+            target: 'http://192.168.10.151:8082/',
+            changeOrigin: true,
+            ws: true,
+            pathRewrite: {
+              '^/admin/api': ''
+            }
+        }
+    }
+}
+};