设置新窗口+可视化模块搭建

src/assets/less/uStyle.css

@@ -0,0 +1,61 @@
+/* flex布局 */
+.u-flex,
+.u-flex-jac,
+.u-flex-jab,
+.u-flex-jaa,
+.u-flex-cjac,
+.u-flex-cjab {
+  display: flex;
+}
+.fd-column,
+.u-flex-cjac,
+.u-flex-cjab {
+  flex-direction: column;
+}
+.jc-center,
+.u-flex-jac,
+.u-flex-cjac {
+  justify-content: center;
+}
+.jc-sb,
+.u-flex-jab,
+.u-flex-cjab {
+  justify-content: space-between;
+}
+.jc-sa,
+.u-flex-jaa {
+  justify-content: space-around;
+}
+.jc-start {
+  justify-content: flex-start;
+}
+.jc-end {
+  justify-content: flex-end;
+}
+.ai-center,
+.u-flex-jab,
+.u-flex-jac,
+.u-flex-jaa,
+.u-flex-cjac {
+  align-items: center;
+}
+.ai-start {
+  align-items: flex-start;
+}
+.ai-end {
+  align-items: flex-end;
+}
+.ai-stretch {
+  align-items: stretch;
+}
+.f1 {
+  flex: 1;
+}
+.f-auto {
+  flex: auto;
+}
+.visualization-common-border {
+  border: 1px solid #000;
+  width: 100%;
+  height: calc(100% - 26px);
+}

src/assets/less/uStyle.less

@@ -0,0 +1,20 @@
+/* flex布局 */
+.u-flex,.u-flex-jac,.u-flex-jab,.u-flex-jaa,.u-flex-cjac,.u-flex-cjab{ display: flex; }
+.fd-column,.u-flex-cjac,.u-flex-cjab{ flex-direction: column; }
+.jc-center,.u-flex-jac,.u-flex-cjac{ justify-content: center; }
+.jc-sb,.u-flex-jab,.u-flex-cjab{ justify-content: space-between; }
+.jc-sa,.u-flex-jaa{ justify-content: space-around; }
+.jc-start{ justify-content: flex-start; }
+.jc-end{ justify-content: flex-end; }
+.ai-center,.u-flex-jab,.u-flex-jac,.u-flex-jaa,.u-flex-cjac{ align-items: center; }
+.ai-start{ align-items: flex-start; }
+.ai-end{ align-items: flex-end; }
+.ai-stretch{ align-items: stretch; }
+.f1{ flex: 1; }
+.f-auto{ flex: auto; }
+
+.visualization-common-border{
+  border: 1px solid #000;
+  width: 100%;
+  height: calc(100% - 26px);
+}

src/components/menu/Contextmenu.vue

@@ -46,6 +46,9 @@ export default {
       if (this.visible === true && ['menuitemicon', 'menuitem'].indexOf(e.target.getAttribute('role')) < 0) {
         this.$emit('update:visible', false)
       }
+      if(e.target.href && e.target.href.indexOf('visualization')>0){
+        window.open(e.target.href,'_blank')
+      }
     },
     setPosition (e) {
       this.left = e.clientX

src/config/router.config.js

@@ -379,4 +379,11 @@ export const constantRouterMap = [
     component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
   },
 
+  // 可视化界面
+  {
+    // OAuth2 APP页面路由
+    path: '/visualization',
+    component: () => import(/* webpackChunkName: "visualization"*/ '@/views/modules_guAn/visualization/index')
+  },
+
 ]

src/views/modules_guAn/visualization/components/commonTitle.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="visualization-common-title">
+    标题
+  </div>
+</template>
+
+<script>
+export default {
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less" scoped>
+  .visualization-common-title{
+    height: 26px;
+  }
+</style>

src/views/modules_guAn/visualization/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="visualization-container">
+    <!-- 头部标题区域 -->
+    <div class="top-title-container">
+      项目
+    </div>
+    <!-- 数据内容区域 -->
+    <div class="content-container u-flex">
+      <!-- 左侧区域 -->
+      <div class="left-container">
+        <div class="left-top-con">
+          <!-- 左上 -->
+          <yuzhi-curve></yuzhi-curve>
+        </div>
+        <div class="left-center-con">
+          <!-- 左中 -->
+          <data-curve></data-curve>
+        </div>
+        <div class="left-bottom-con">
+          <!-- 左下 -->
+          <running-state></running-state>
+        </div>
+      </div>
+      <!-- 中间部分 -->
+      <div class="center-container">
+        <div class="important">
+          我是3D区域
+        </div>
+        <div class="centen-bottom-con u-flex-jab">
+          <!-- 中间 -->
+          <div class="center-bottom-left">
+            <test-information></test-information>
+          </div>
+          <div class="center-bottom-right">
+            <test-status-info></test-status-info>
+          </div>
+        </div>
+      </div>
+      <!-- 右侧区域 -->
+      <div class="right-container">
+        <div class="right-top-con">
+          <!-- 右上 -->
+          <equipment-info></equipment-info>
+        </div>
+        <div class="right-center-con">
+          <!-- 右中 -->
+          <mode-info></mode-info>
+        </div>
+        <div class="right-bottom-con">
+          <!-- 右下 -->
+          <surveillance-video></surveillance-video>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import DataCurve from './modules/DataCurve.vue'
+import YuzhiCurve from './modules/YuzhiCurve.vue'
+import RunningState from './modules/RunningState.vue'
+import EquipmentInfo from './modules/EquipmentInfo.vue'
+import ModeInfo from './modules/ModeInfo.vue'
+import SurveillanceVideo from './modules/SurveillanceVideo.vue'
+import TestInformation from './modules/TestInformation.vue'
+import TestStatusInfo from './modules/TestStatusInfo.vue'
+
+export default {
+    name: '',
+    components: {
+      YuzhiCurve,
+      DataCurve,
+      RunningState,
+      EquipmentInfo,
+      ModeInfo,
+      SurveillanceVideo,
+      TestInformation,
+      TestStatusInfo,
+    },
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .visualization-container{
+    width: 100%;
+    height: 100vh;
+    // 头部标题区域
+    .top-title-container{
+      position: fixed;
+      top: 0;
+      left: 35%;
+      right: 35%;
+      border: 1px solid #000;
+      height: 70px;
+      text-align: center;
+      line-height: 70px;
+    }
+    // 数据内容区域
+    .content-container{
+      height: 100%;
+      padding: 60px 20px 20px;
+      box-sizing: border-box;
+      .left-container{
+        flex: 1;
+        height: 100%;
+        .left-top-con{
+          height: 35%;
+          padding-bottom: 12px;
+        }
+        .left-center-con{
+          height: 35%;
+          padding-bottom: 12px;
+        }
+        .left-bottom-con{
+          height: 30%;
+        }
+      }
+      .center-container{
+        flex: 1.8;
+        height: 100%;
+        .important{
+          width: 100%;
+          height: 70%;
+          text-align: center;
+          line-height: 500px;
+        }
+        .centen-bottom-con{
+          height: 30%;
+          padding: 0 12px;
+          .center-bottom-left{
+            flex: 1;
+            height: 100%;
+          }
+          .center-bottom-right{
+            flex: 1.2;
+            height: 100%;
+            padding-left: 12px;
+          }
+        }
+      }
+      .right-container{
+        flex: 1;
+        .right-top-con{
+          height: 35%;
+          padding-bottom: 12px;
+        }
+        .right-center-con{
+          height: 35%;
+          padding-bottom: 12px;
+        }
+        .right-bottom-con{
+          height: 30%;
+        }
+      }
+    }
+  }
+</style>

src/views/modules_guAn/visualization/modules/DataCurve.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="data-curve-module">
+    <common-title></common-title>    
+    <div class="visualization-common-border">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .data-curve-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/EquipmentInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="equipment-info-module">
+    <common-title></common-title>    
+    <div class="visualization-common-border">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .equipment-info-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/ModeInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="mode-info-module">
+    <common-title></common-title>    
+    <div class="visualization-common-border">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .mode-info-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/RunningState.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="running-state-module">
+    <common-title></common-title>    
+    <div class="visualization-common-border">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .running-state-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/SurveillanceVideo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="surveillance-video-module">
+    <common-title></common-title>    
+    <div class="visualization-common-border">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .surveillance-video-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/TestInformation.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="test-information-module">
+    <common-title></common-title>    
+    <div class="visualization-common-border">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .test-information-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/TestStatusInfo.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="test-statusInfo-module">
+    <common-title></common-title>    
+    <div class="visualization-common-border">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .test-statusInfo-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>

src/views/modules_guAn/visualization/modules/YuzhiCurve.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="yuzhi-curve-module">
+    <common-title></common-title>    
+    <div class="visualization-common-border">
+
+    </div>
+  </div>
+</template>
+
+<script>
+import commonTitle from '../components/commonTitle.vue'
+
+export default {
+  components: { commonTitle },
+  name: '',
+  data () {
+    return {
+    }
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+  @import '~@assets/less/uStyle.less';
+</style>
+<style lang="less">
+  .yuzhi-curve-module{
+    width: 100%;
+    height: 100%;
+  }
+</style>