update dashboard views

src/api/object-visible/dashboard.js

@@ -2,10 +2,28 @@ import request from '@/utils/request'
 // const baseURL = process.env.VUE_APP_BASE_API
 const baseURL = ''
 
-// 获取数据集列表-分页
-export function getDatasetList(data) {
+// 获取所有模型列表
+export function getAllModel(data) {
   return request({
-    url: `${baseURL}/cc/linque/getDatasetList`,
+    url: `${baseURL}/iot/model/all`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取模型详情
+export function getModelDetail(data) {
+  return request({
+    url: `${baseURL}/iot/model/detail`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取指定模型的实例列表
+export function getModelInstanceList(data) {
+  return request({
+    url: `${baseURL}/iot/model/getModelInstanceList`,
     method: 'post',
     data
   })

src/components/G2Plot/G2Line.vue

 <template>
-  <div ref="line" style="background-color: #fff;height: 100%;width: 100%"/>
+  <div :ref="id" style="height: 100%;width: 100%" />
 </template>
 
 <script>
 import { Line } from '@antv/g2plot'
 export default {
-  name: "G2Line",
+  name: 'G2Line',
+  props: {
+    id: {
+      type: String,
+      default: 'line'
+    },
+    lineData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    title: {
+      type: String,
+      default: 'line'
+    }
+  },
   data() {
     return {
       line: null
     }
   },
+  watch: {
+    lineData: function(val) {
+      this.line.changeData(val)
+    }
+  },
   mounted() {
-    const el = this.$refs.line
+    const el = this.$refs[this.id]
     this.line = new Line(el, {
-      data: [],
+      data: this.lineData,
       title: {
         visible: true,
-        text: '折线图'
+        text: this.title
       },
       description: {
         visible: true,

src/views/object-visible/dashboard/components/ObjectPanel.vue

+<template>
+  <div>
+    <el-radio-group v-model="objectId">
+      <el-radio
+        v-for="(object, index) in objectList"
+        :key="index"
+        :label="object.id"
+      >{{ object.name }}</el-radio>
+    </el-radio-group>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ObjectPanel',
+  props: {
+    id: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+  data() {
+    return {
+      objectList: [
+        {
+          name: 'object1',
+          id: '1'
+        },
+        {
+          name: 'object2',
+          id: '2'
+        }
+      ],
+      objectId: '1',
+      propIds: []
+    }
+  },
+  watch: {
+    id(val) {
+      console.log(val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/object-visible/dashboard/components/PropPanel.vue

+<template>
+  <el-checkbox-group v-model="propIds">
+    <el-checkbox label="temperature">温度</el-checkbox>
+    <el-checkbox label="humidity">湿度</el-checkbox>
+    <el-checkbox label="power">功率</el-checkbox>
+  </el-checkbox-group>
+</template>
+
+<script>
+export default {
+  name: 'PropPanel',
+  props: {
+    id: {
+      type: [Number, String],
+      default: 0
+    },
+    yFields: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data() {
+    return {
+      propIds: []
+    }
+  },
+  watch: {
+    propIds: function(val) {
+      this.$emit('update:yFields', val)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/object-visible/dashboard/index.vue

 <template>
-  <div>
-    <el-card class="no-bottom">
-      <el-form
-        ref="searchForm"
-        :model="searchForm"
-        label-width="80px"
-        inline
-      >
-        <el-form-item
-          label="input:"
-          prop="input"
-        >
-          <el-input v-model="searchForm.input" />
-        </el-form-item>
-        <el-form-item
-          label="status:"
-          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 margin-bottom-20">
-        <el-button type="primary" icon="el-icon-plus" @click="addRow">增加系统</el-button>
-      </div>
-
-      <el-table
-        :data="tableData"
-        border
-      >
-        <el-table-column
-          type="index"
-          label="序号"
-          width="50px"
-          align="center"
-        />
-        <el-table-column
-          prop="a"
-          label="a"
-        />
-        <el-table-column
-          prop="b"
-          label="b"
-        />
-        <el-table-column
-          prop="c"
-          label="c"
-        />
-        <el-table-column
-          prop="d"
-          label="d"
-        />
-        <el-table-column
-          label="操作"
-          width="140px"
-          align="center"
-        >
-          <template slot-scope="props">
-            <el-button v-permission="'SysMgr_update'" type="text" @click="editItem(props.row)">编辑</el-button>
-            <el-popconfirm
-              title="确定要删除此条记录吗？"
-              @onConfirm="deleteItem(props.row.id)"
-            >
-              <el-button slot="reference" type="text">删除</el-button>
-            </el-popconfirm>
-          </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-card class="container">
+    <el-tabs
+      v-model="activeModel"
+      tab-position="left"
+      @tab-click="onTabClick"
     >
-      <el-form
-        :model="addForm"
-        label-width="90px"
+      <el-tab-pane
+        v-for="(model, index) in modelList"
+        :key="index"
+        :label="model.name"
+        :name="model.id.toString()"
       >
-        <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>
+        <div v-if="activeModel === model.id.toString()">
+          <el-form
+            :model="chartField"
+            inline
+            label-width="100px"
+            style="margin-top: 20px"
+          >
+            <div>
+              <el-form-item label="选择实例：">
+                <el-radio-group v-model="chartField.instanceId">
+                  <el-radio
+                    v-for="(ins, index) in instanceList"
+                    :key="300 + index"
+                    :label="ins.id"
+                  >{{ ins.instanceName }}</el-radio>
+                </el-radio-group>
+              </el-form-item>
+            </div>
+            <div>
+              <el-form-item label="Y轴:">
+                <el-checkbox-group v-model="chartField.yFields">
+                  <el-checkbox
+                    v-for="(prop, i) in propertyList"
+                    :key="200+i"
+                    :label="prop.id"
+                  >{{ prop.propertyName }}</el-checkbox>
+                </el-checkbox-group>
+              </el-form-item>
+            </div>
+            <div>
+              <el-form-item label="时间轴:">
+                Timestamp
+              </el-form-item>
+              <el-form-item
+                label="刷新时间(秒):"
+              >
+                <el-input-number
+                  v-model.number="chartField.refresh"
+                  :min="1"
+                  :max="10"
+                  label="单位秒"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  @click="createCharts"
+                >生成图表</el-button>
+              </el-form-item>
+            </div>
+          </el-form>
+          <el-row :gutter="20">
+            <el-col
+              v-for="(chart, index) in charts"
+              :key="100 + index"
+              :span="12"
+              style="height: 400px"
+            >
+              <g2-line
+                :id="'line-' + index"
+                :title="chart"
+                :line-data="setChartData(chart)"
+                style="min-width: 500px;height: 400px"
+              />
+            </el-col>
+          </el-row>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </el-card>
 </template>
 
 <script>
+import G2Line from '@/components/G2Plot/G2Line'
+import { getAllModel, getModelDetail, getModelInstanceList } from '@/api/object-visible/dashboard'
+
 export default {
   name: 'Dashboard',
-  props: {},
+  components: {
+    G2Line
+  },
   data() {
     return {
-      searchForm: {
-        input: null,
-        status: null
-      },
-      add: true,
-      dialogVisible: false,
-      tableData: [],
-      addForm: {
-        input: null,
-        status: null
+      chartField: {
+        instanceId: null,
+        yFields: [],
+        refresh: 1
       },
-      pageForm: {
-        pageSize: 10,
-        pageNum: 1,
-        total: 0
-      }
+      activeModel: null,
+      modelList: [],
+      objectId: '1',
+      lineData: [],
+      chartData: [],
+      timer: 0,
+      count: 0,
+      instanceList: [],
+      propertyList: [],
+      charts: []
     }
   },
-  created() {},
-  mounted() {},
+  created() {
+    getAllModel()
+      .then(res => {
+        this.modelList = res.data
+        if (this.modelList.length > 0) {
+          this.activeModel = this.modelList[0].id.toString()
+          this.getDetail(parseInt(this.activeModel))
+        }
+      })
+      .catch(err => console.error(err))
+  },
+  mounted() {
+    // this.timer = setInterval(() => {
+    //   this.chartData.push({
+    //     time: new Date().getTime(),
+    //     value: {
+    //       power: this.random(100, 120),
+    //       temperature: this.random(20, 30),
+    //       humidity: this.random(200, 300)
+    //     }
+    //   })
+    //   this.count++
+    // }, this.chartField.refresh * 1000)
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
   methods: {
-    getTableData(pageNum) {},
-    resetForm() {
-      this.$refs.searchForm.resetFields()
+    onTabClick() {
+      this.getDetail(parseInt(this.activeModel))
     },
-    addRow() {
-      this.add = true
-      this.dialogVisible = true
+    getDetail(id) {
+      Promise.all([getModelInstanceList({ id }), getModelDetail({ id })])
+        .then(res => {
+          const [res1, res2] = res
+          this.instanceList = res1.data
+          this.propertyList = res2.data.propertyList
+        })
+        .catch(err => console.error(err))
     },
-    editItem() {
-      this.add = false
-      this.dialogVisible = true
+    random(m, n) {
+      return Math.round(Math.random() * (m - n) + n)
     },
-    deleteItem(id) {},
-    saveSystem() {},
-    handleSizeChange(val) {
-      this.pageForm.pageSize = val
-      this.getTableData(1)
+    setChartData(yField) {
+      return this.chartData.map(v => {
+        return {
+          time: v.time,
+          value: v.value[yField]
+        }
+      })
     },
-    handleCurrentChange(val) {
-      this.pageForm.pageNum = val
-      this.getTableData(val)
-    }
+    createCharts() {}
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.container{
+  min-height: calc(100vh - 125px);
+}
 </style>