运行

chuanyi_client2/src/components/BreadcrumbView/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="breadcrumb-content">
+    <div class="breadcrumb-head"></div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item v-if="showIndex" :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <template v-for="breadcrumb in breadcrumbList">
+        <el-breadcrumb-item>{{breadcrumb}}</el-breadcrumb-item>
+      </template>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "index",
+  data() {
+    return {
+    }
+  },
+  props: ["breadcrumbList", "showIndex"]
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.breadcrumb-content {
+  padding: 20px;
+}
+
+.breadcrumb-head {
+  width: 5px;
+  height: 15px;
+  background: #275da2;
+  margin-right: 10px;
+  float: left;
+}
+</style>

chuanyi_client2/src/components/LeftMenu/index.vue

@@ -8,7 +8,7 @@
       <el-image :src="require('@/assets/images/model.png')" fit="contain"></el-image>
       <span>数据模型</span>
     </el-col>
-    <el-col class="cy-conn">
+    <el-col class="cy-conn" @click.native="changeNavType(1)">
       <el-image :src="require('@/assets/images/run.png')" fit="contain"></el-image>
       <span>运行配置</span>
     </el-col>
@@ -247,8 +247,13 @@ export default {
     },
     /** 添加数据源配置 */
     createDatasourceEvent() {
+      this.changeNavType(0)
       this.datasourceDialogVisible = true
     },
+    /** 修改菜单点击项 */
+    changeNavType(type) {
+      this.$emit("changeNavType", type)
+    },
     /** 保存数据源事件 */
     handleSaveDatasource() {
       if (this.chooseConnServer == null && this.chooseServerType == null) {

chuanyi_client2/src/router/index.js

@@ -43,6 +43,10 @@ const routes = [
             {
                 path: 'groupItem',
                 component: () => import('@/views/group_item/index')
+            },
+            {
+                path: 'runConfig',
+                component: () => import('@/views/run_config/index')
             }
         ]
     }

chuanyi_client2/src/views/group_item/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cqcy-content">
+  <div class="cqcy-content" v-if="chooseGroupId">
     <div style="margin-bottom: 10px;">
       <el-select v-model="chooseGroupId" disabled size="mini">
         <el-option
@@ -24,7 +24,7 @@
       </el-table-column>
       <el-table-column prop="val" label="数据项值" align="center" width="120">
       </el-table-column>
-      <el-table-column prop="dataSourceName" label="数据源名称" align="center">
+      <el-table-column prop="dataSourceName" label="数据源名称" align="center" width="200">
       </el-table-column>
       <el-table-column prop="runState" label="运行状态" align="center" width="100">
       </el-table-column>

chuanyi_client2/src/views/index.vue

@@ -1,11 +1,11 @@
 <template>
   <el-container>
     <el-aside>
-      <left-menu></left-menu>
+      <left-menu @changeNavType="changeNavType"></left-menu>
     </el-aside>
     <el-container>
       <el-main>
-        <split-pane :min-percent='minPercent' :default-percent='defaultPercent' split="vertical">
+        <split-pane :min-percent='minPercent' :default-percent='defaultPercent' split="vertical" v-if="mainViewType == 0">
           <template slot="paneL">
             <header-main></header-main>
           </template>
@@ -14,6 +14,10 @@
             <router-view></router-view>
           </template>
         </split-pane>
+        <template v-if="mainViewType == 1">
+          <header-personal></header-personal>
+          <router-view></router-view>
+        </template>
       </el-main>
     </el-container>
   </el-container>
@@ -33,7 +37,8 @@ export default {
   data() {
     return {
       defaultPercent: 20,
-      minPercent: 20
+      minPercent: 20,
+      mainViewType: 0
     }
   },
   created() {
@@ -43,11 +48,29 @@ export default {
     disableEvent() {
       this.$nextTick(() => {
         // 禁用右键
-        document.oncontextmenu = new Function("event.returnValue=false");
+        document.oncontextmenu = new Function("event.returnValue=false")
         // 禁用选择
-        document.onselectstart = new Function("event.returnValue=false");
-      });
-    }
+        document.onselectstart = new Function("event.returnValue=false")
+      })
+    },
+    /** 修改右侧布局视图 */
+    changeNavType(type) {
+      this.mainViewType = type
+      if (type == 1) {
+        this.gotoPageByName('/runConfig')
+      } else {
+        this.gotoPageByName('/index')
+      }
+    },
+    /** 页面跳转 */
+    gotoPageByName(path) {
+      this.$router.push({
+        path: path,
+        query: {
+          t: new Date().getTime()
+        }
+      })
+    },
   }
 };
 </script>

chuanyi_client2/src/views/run_config/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="cqcy-content" style="margin: 0;">
+    <breadcrumb-view :breadcrumbList="breadcrumbList" :show-index="false"></breadcrumb-view>
+    <el-divider></el-divider>
+    <div class="cy-main">
+      <label style="font-size: 14px;font-weight: unset;">数据组：</label>
+      <el-select v-model="chooseGroupId" size="mini" @change="getGroupById">
+        <el-option
+            v-for="dict in groupDataList"
+            :key="dict.id"
+            :label="dict.groupName"
+            :value="dict.id"
+        ></el-option>
+      </el-select>
+    </div>
+    <div class="cy-main cy-data-main">
+      <div class="cy-item-main">
+        <div class="cy-btn">
+          <el-button v-if="runStatus == 0" size="mini" type="primary" plain icon="el-icon-video-play">运行</el-button>
+          <el-button v-if="runStatus == 1" size="mini" type="danger" plain icon="el-icon-video-pause">停止</el-button>
+        </div>
+        <div style="overflow: auto;height: 100%;">
+          <ul>
+            <li v-for="item in itemDataList">
+              <div class="cy-item-name">{{ item.itemName }}</div>
+              <div style="display: flex;">
+                <div class="cy-item-val" style="width: 60px;">实时数据</div>
+                <div class="cy-item-val">实时数据</div>
+              </div>
+              <div style="display: flex;">
+                <div class="cy-item-val" style="width: 60px;">频率</div>
+                <div class="cy-item-val">频率</div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BreadcrumbView from '@/components/BreadcrumbView'
+import {getAllItemGroup, getItemGroupById} from "@/api/datasource";
+import {showLoading} from "@/utils/cqcy";
+
+export default {
+  name: "index",
+  components: {
+    BreadcrumbView
+  },
+  data() {
+    return {
+      breadcrumbList: ['运行'],
+      groupDataList: [],
+      itemDataList: [],
+      runStatus: -1,
+      chooseGroup: null,
+      chooseGroupId: null
+    }
+  },
+  watch: {
+    '$route'(to, from) {
+      this.getGroupList()
+    },
+  },
+  created() {
+    this.getGroupList()
+  },
+  methods: {
+    /** 查询所有组配置列表 */
+    getGroupList() {
+      const loading = showLoading(this, '加载中，请稍候···')
+      getAllItemGroup().then(res => {
+        loading.close()
+        this.groupDataList = res.data
+      }).catch((e) => {
+        loading.close()
+      })
+    },
+    /** 根据ID查询组信息 */
+    getGroupById(val) {
+      const loading = showLoading(this, '加载中，请稍候···')
+      getItemGroupById(val).then(res => {
+        loading.close()
+        this.runStatus = res.data.runState
+        this.itemDataList = res.data.itemList
+        console.log(res)
+      }).catch((e) => {
+        loading.close()
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.breadcrumb-content {
+  padding-bottom: 0;
+}
+
+.cy-main {
+  margin: 10px 20px;
+
+  .cy-btn {
+    margin-bottom: 10px;
+  }
+
+  .cy-btn .el-link {
+    margin-right: 15px;
+  }
+}
+
+.cy-data-main {
+  margin: 0;
+  padding: 10px;
+  background: #f5f5f5;
+  height: calc(100vh - 201px);
+
+  .cy-item-main {
+    background: #ffffff;
+    height: 100%;
+    padding: 20px;
+
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 0;
+      margin-top: 0;
+
+      li {
+        list-style-type: none;
+        background: #41aed7;
+        width: 23%;
+        margin: 10px 1%;
+        border-radius: 8px;
+        height: 100px;
+        padding: 15px;
+        color: #ffffff;
+
+        .cy-item-name {
+          font-size: 14px;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          margin-bottom: 20px;
+        }
+
+        .cy-item-val {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+</style>