update 优化后的示例页面

src/api/device-management/device-instance.js

+import request from '@/utils/request'
+// const baseURL = process.env.VUE_APP_BASE_API
+const baseURL = ''
+
+// 获取数据集列表-分页
+export function getTableData(data) {
+  return request({
+    url: `${baseURL}/cc/linque/getDatasetList`,
+    method: 'post',
+    data
+  })
+}

src/router/index.js

@@ -104,6 +104,8 @@ import dataManagement from './modules/dataManagement'
 import dataVisible from './modules/dataVisibleManagement'
 // 设备管理
 import equipmentManagement from './modules/equipmentManagement'
+// 设备管理-迭代
+import deviceManagement from './modules/deviceManagement'
 // 告警管理
 import deviceAlarm from './modules/deviceAlarm'
 
@@ -111,6 +113,7 @@ export const asyncRoutes = [
   dataVisible,
   dataManagement,
   equipmentManagement,
+  deviceManagement,
   deviceAlarm,
   systemManagement,
   tenantManagement,

src/router/modules/deviceManagement.js

+import Common from '@/layout/common/index'
+
+const router = {
+  menuId: 'DeviceMgr',
+  path: '/device-management',
+  name: '设备实例',
+  component: Common,
+  redirect: '/device-management/device-instance',
+  meta: { title: '设备实例', icon: 'equipment' },
+  alwaysShow: true,
+  children: [
+    {
+      menuId: 'DeviceDetail',
+      path: 'device-detail',
+      name: '设备详情',
+      component: () => import('@/views/device-management/device-detail'),
+      meta: { title: '设备详情', icon: 'equipment-model' }
+    },
+    {
+      menuId: 'DeviceMonitoring',
+      path: 'device-monitoring',
+      name: '实时监控',
+      component: () => import('@/views/device-management/device-monitoring'),
+      meta: { title: '实时监控', icon: 'equipment-model' }
+    },
+    {
+      menuId: 'HistoryData',
+      path: 'history-data',
+      name: '历史数据',
+      component: () => import('@/views/device-management/history-data'),
+      meta: { title: '历史数据', icon: 'equipment-model' }
+    }
+  ]
+}
+export default router

src/router/modules/equipmentManagement.js

@@ -22,6 +22,13 @@ const router = {
       name: '设备实例',
       component: () => import('@/views/equipment-management/equipment-instance'),
       meta: { title: '设备实例', icon: 'equipment-instance' }
+    },
+    {
+      menuId: 'DeviceInstance',
+      path: 'device-instance',
+      name: '设备实例',
+      component: () => import('@/views/device-management/device-instance'),
+      meta: { title: '设备实例-迭代', icon: 'equipment-model' }
     }
   ]
 }

src/views/data-visible/query-history/index.vue

@@ -14,8 +14,7 @@
                 :key="item.value"
                 :label="item.label"
                 :value="item.value"
-              >
-              </el-option>
+              />
             </el-select>
           </div>
           <div class="custom-menu">
@@ -101,7 +100,7 @@
               :line-data="setChartData(chart.propertyCode, index)"
               :description="chart.propertyUnit"
               :config="lineConfig"
-            ></e-line>
+            />
           </el-col>
         </el-row>
       </el-col>

src/views/device-management/device-detail/index.vue

+<template>
+  <div>
+    <el-card class="no-bottom">
+      <el-form :model="form" inline>
+        <el-form-item label="设备类型:">
+          <el-select v-model="form.a" placeholder="请选择">
+            <el-option label="类型一" :value="null" />
+            <el-option label="类型二" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备实例:">
+          <el-select v-model="form.a" placeholder="请选择">
+            <el-option label="实例一" :value="null" />
+            <el-option label="实例二" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="margin-top-20">
+      <div slot="header" class="clearfix">
+        <span>类型信息</span>
+      </div>
+      <descriptions
+        label-position="right"
+        label-width="140px"
+      >
+        <descriptions-item label="设备类型" value="机床" />
+        <descriptions-item label="数据模型" value="模型一，模型二" />
+      </descriptions>
+    </el-card>
+    <el-card class="margin-top-20">
+      <div slot="header" class="clearfix">
+        <span>设备信息</span>
+        <el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
+      </div>
+      <descriptions
+        label-position="right"
+        label-width="140px"
+      >
+        <descriptions-item label="型号" value="AKB48" />
+        <descriptions-item label="健康状态" value="健康" />
+        <descriptions-item label="运行状态" value="运行中" />
+        <descriptions-item label="上次启动时间" value="2020-08-12 12:22:21" />
+        <descriptions-item label="运行时长" value="1d 27h 13m 21s" />
+        <descriptions-item label="描述" value="非常贵的设备" />
+      </descriptions>
+    </el-card>
+    <el-card class="margin-top-20">
+      <el-tabs v-model="secondActiveName">
+        <el-tab-pane label="模型一" name="first">
+          <descriptions
+            label-position="right"
+            label-width="140px"
+          >
+            <descriptions-item label="温度" value="20 摄氏度" />
+            <descriptions-item label="湿度" value="70%" />
+            <descriptions-item label="压力" value="2500 帕斯卡" />
+            <descriptions-item label="转子转速" value="1250 rpm/m" />
+          </descriptions>
+        </el-tab-pane>
+        <el-tab-pane label="模型二" name="second">
+          <descriptions
+            label-position="right"
+            label-width="140px"
+          >
+            <descriptions-item label="温度" value="20 摄氏度" />
+            <descriptions-item label="湿度" value="70%" />
+            <descriptions-item label="压力" value="2500 帕斯卡" />
+            <descriptions-item label="转子转速" value="1250 rpm/m" />
+          </descriptions>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceMonitoring',
+  data() {
+    return {
+      form: {
+        a: null,
+        c: [],
+        refresh: 1
+      },
+      activeName: 'first',
+      secondActiveName: 'first'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/device-management/device-monitoring/index.vue

+<template>
+  <div>
+    <el-card class="no-bottom">
+      <el-form :model="form" inline>
+        <el-form-item label="设备类型:">
+          <el-select v-model="form.a" placeholder="请选择">
+            <el-option label="类型一" :value="null" />
+            <el-option label="类型二" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备实例:">
+          <el-select v-model="form.a" placeholder="请选择">
+            <el-option label="实例一" :value="null" />
+            <el-option label="实例二" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据模型:">
+          <el-select v-model="form.a" placeholder="请选择">
+            <el-option label="模型一" :value="null" />
+            <el-option label="模型二" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间轴:">
+          <div style="margin-right: 20px">
+            Timestamp
+          </div>
+        </el-form-item>
+        <el-form-item label="刷新时间">
+          <el-input-number
+            v-model.number="form.refresh"
+            :min="1"
+            :max="10"
+            label="单位秒"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="margin-top-20">
+      <div slot="header" class="clearfix">
+        <span>设备信息</span>
+        <el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
+      </div>
+      <descriptions
+        label-position="right"
+        label-width="140px"
+      >
+        <descriptions-item label="型号" value="AKB48" />
+        <descriptions-item label="健康状态" value="健康" />
+        <descriptions-item label="运行状态" value="运行中" />
+        <descriptions-item label="上次启动时间" value="2020-08-12 12:22:21" />
+        <descriptions-item label="运行时长" value="1d 27h 13m 21s" />
+        <descriptions-item label="描述" value="非常贵的设备" />
+      </descriptions>
+    </el-card>
+    <el-card class="margin-top-20">
+      <div slot="header" class="clearfix">
+        <span>模型数据</span>
+        <el-button style="float: right; padding: 3px 0" type="text">2020-08-12 12:22:21</el-button>
+      </div>
+      <descriptions
+        label-position="right"
+        label-width="140px"
+      >
+        <descriptions-item label="温度" value="20 摄氏度" />
+        <descriptions-item label="湿度" value="70%" />
+        <descriptions-item label="压力" value="2500 帕斯卡" />
+        <descriptions-item label="转子转速" value="1250 rpm/m" />
+      </descriptions>
+    </el-card>
+    <el-card class="margin-top-20">
+      <el-tabs v-model="secondActiveName">
+        <el-tab-pane label="温度:" name="first">
+          <div style="width: 100%;height: 400px;background: #0a76a4;margin-bottom: 20px"></div>
+        </el-tab-pane>
+        <el-tab-pane label="湿度" name="second">
+          <div style="width: 100%;height: 400px;background: #4ab7bd;margin-bottom: 20px"></div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DeviceDetail',
+  data() {
+    return {
+      form: {
+        a: null,
+        c: [],
+        refresh: 1
+      },
+      activeName: 'first',
+      secondActiveName: 'first'
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/device-management/history-data/index.vue

+<template>
+  <div>
+    <el-card class="no-bottom">
+      <el-form :model="form" inline>
+        <el-form-item label="设备类型:">
+          <el-select v-model="form.a" placeholder="请选择">
+            <el-option label="类型一" :value="null" />
+            <el-option label="类型二" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="设备实例:">
+          <el-select v-model="form.a" placeholder="请选择">
+            <el-option label="实例一" :value="null" />
+            <el-option label="实例二" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="数据模型:">
+          <el-select v-model="form.a" placeholder="请选择">
+            <el-option label="模型一" :value="null" />
+            <el-option label="模型二" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间范围:">
+          <el-date-picker
+            v-model="form.c"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="margin-top-20">
+      <el-tabs v-model="secondActiveName">
+        <el-tab-pane label="温度:" name="first">
+          <div style="width: 100%;height: 400px;background: #0a76a4;margin-bottom: 20px"></div>
+        </el-tab-pane>
+        <el-tab-pane label="湿度" name="second">
+          <div style="width: 100%;height: 400px;background: #4ab7bd;margin-bottom: 20px"></div>
+        </el-tab-pane>
+      </el-tabs>
+    </el-card>
+    <el-card class="margin-top-20">
+      <div slot="header" class="clearfix">
+        <span>详细</span>
+        <el-button style="float: right; padding: 3px 0" type="text">导出</el-button>
+      </div>
+      <el-table :data="tableData" border style="width: 100%">
+        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column
+          label="温度"
+          prop="a"
+        />
+        <el-table-column
+          label="湿度"
+          prop="a"
+        />
+        <el-table-column
+          label="压力"
+          prop="a"
+        />
+      </el-table>
+      <el-pagination
+        class="margin-top-20 text-align-right"
+        :current-page="pageForm.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageForm.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageForm.total"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HistoryData',
+  data() {
+    return {
+      form: {
+        a: null,
+        c: []
+      },
+      activeName: 'first',
+      secondActiveName: 'first',
+      tableData: [
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {},
+        {}
+      ],
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/equipment-management/device-instance/index.vue

+<template>
+  <div>
+    <el-card class="no-bottom">
+      <el-form
+        ref="searchForm"
+        :model="searchForm"
+        label-width="80px"
+        inline
+      >
+        <el-form-item
+          label="设备名称:"
+          prop="input"
+        >
+          <el-input v-model="searchForm.input" />
+        </el-form-item>
+        <el-form-item
+          label="设备分类:"
+          prop="status"
+        >
+          <el-select v-model="searchForm.status" placeholder="请选择">
+            <el-option label="全部" :value="null" />
+            <el-option label="正常" :value="0" />
+            <el-option label="锁定" :value="1" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" @click="getTableData">查询</el-button>
+          <el-button icon="el-icon-refresh" @click="resetForm">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card class="margin-top-20">
+      <div class="buttons-group" style="margin-bottom: 20px">
+        <el-button type="primary">增加实例</el-button>
+      </div>
+      <el-table
+        :data="tableData"
+        border
+      >
+        <el-table-column
+          type="index"
+          label="序号"
+          width="50px"
+          align="center"
+        />
+        <el-table-column
+          prop="a"
+          label="设备名称"
+        />
+        <el-table-column
+          prop="b"
+          label="设备描述"
+        />
+        <el-table-column
+          prop="c"
+          label="设备分类"
+        />
+        <el-table-column
+          prop="d"
+          label="设备状态"
+        />
+        <el-table-column
+          prop="e"
+          label="运行状态"
+        />
+        <el-table-column
+          prop="f"
+          label="运行时长"
+        />
+        <el-table-column
+          prop="g"
+          label="上次启动时间"
+        />
+        <el-table-column
+          prop="h"
+          label="上次停机时间"
+        />
+        <el-table-column
+          label="操作"
+          width="320px"
+          align="center"
+        >
+          <template>
+            <el-button
+              type="text"
+              @click="goto('/device-management/device-detail')"
+            >详情</el-button>
+            <el-button
+              type="text"
+              @click="goto('/device-management/device-monitoring')"
+            >监控</el-button>
+            <el-button
+              type="text"
+              @click="goto('/device-management/history-data')"
+            >历史数据</el-button>
+            <el-button type="text" @click="goto('/device-alarm/alarm-show')">告警历史</el-button>
+            <el-button type="text">编辑</el-button>
+            <el-button type="text">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        class="margin-top-20 text-align-right"
+        :current-page="pageForm.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageForm.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pageForm.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+
+    <el-dialog
+      :title="add ? '增加系统' : '编辑系统'"
+      :visible.sync="dialogVisible"
+      width="700px"
+    >
+      <el-form
+        v-if="dialogVisible"
+        :model="addForm"
+        label-width="90px"
+      >
+        <el-form-item
+          label="input:"
+        >
+          <el-input v-model="addForm.input" />
+        </el-form-item>
+        <el-form-item
+          label="status:"
+        >
+          <el-input v-model="addForm.status" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveSystem">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getTableData } from '@/api/device-management/device-instance'
+export default {
+  name: 'DeviceInstance',
+  components: {},
+  props: {},
+  data() {
+    return {
+      searchForm: {
+        input: null,
+        status: null
+      },
+      add: true,
+      dialogVisible: false,
+      tableData: [],
+      addForm: {
+        input: null,
+        status: null
+      },
+      pageForm: {
+        pageSize: 10,
+        pageNum: 1,
+        total: 0
+      },
+      deviceStatusDialog: false,
+      deviceHistoryDialog: false
+    }
+  },
+  created() {
+    this.tableData = [
+      {
+        a: 1,
+        d: '健康',
+        e: '运行中'
+      },
+      {
+        a: 2,
+        d: '故障',
+        e: '已停机'
+      }
+    ]
+  },
+  mounted() {},
+  methods: {
+    goto(url) {
+      this.$router.push(url)
+    },
+    getTableData(pageNum) {
+      const params = {
+        ...this.searchForm,
+        pageNum,
+        pageSize: this.pageForm.pageSize
+      }
+      getTableData(params)
+        .then(res => {
+          const { records, totalSize } = res.data
+          this.tableData = records
+          this.pageForm.total = totalSize
+        })
+        .catch(err => console.error(err))
+    },
+    resetForm() {
+      this.$refs.searchForm.resetFields()
+    },
+    addRow() {
+      this.add = true
+      this.dialogVisible = true
+    },
+    editItem() {
+      this.add = false
+      this.dialogVisible = true
+    },
+    deleteItem(id) {},
+    saveSystem() {},
+    handleSizeChange(val) {
+      this.pageForm.pageSize = val
+      this.getTableData(1)
+    },
+    handleCurrentChange(val) {
+      this.pageForm.pageNum = val
+      this.getTableData(val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>