add 历史查询

src/api/data-visible/query-history.js

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

src/components/Charts/ELine.vue

@@ -39,6 +39,12 @@ export default {
     description: {
       type: String,
       default: ''
+    },
+    config: {
+      type: Object,
+      default: () => {
+        return {}
+      }
     }
   },
   data() {
@@ -81,8 +87,7 @@ export default {
     },
     initChart() {
       this.chart = echarts.init(document.getElementById(this.id))
-
-      this.chart.setOption({
+      let config = {
         title: {
           text: `${this.title}监控图表`,
           subtext: `单位为: ${this.description}`
@@ -100,7 +105,13 @@ export default {
           type: 'line',
           data: []
         }]
-      })
+      }
+      config = {
+        ...config,
+        ...this.config
+      }
+
+      this.chart.setOption(config)
     }
   }
 }

src/views/data-visible/query-history/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-card class="container">
+    <el-row :gutter="20" class="content">
+      <el-col :xs="8" :sm="8" :md="6" :lg="4">
+        <div class="left">
+          <div class="search">
+            <el-select
+              v-model="deviceType"
+              style="width: 100%"
+              @change="onDeviceTypeChange"
             >
-          <el-input v-model="searchForm.input" />
-        </el-form-item>
-        <el-form-item
-          label="status:"
-          prop="status"
+              <el-option
+                v-for="item in deviceTypeList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
               >
-          <el-select v-model="searchForm.status" placeholder="请选择">
-            <el-option label="全部" :value="null" />
-            <el-option label="正常" :value="0" />
-            <el-option label="锁定" :value="1" />
+              </el-option>
             </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="scope">
-            <el-button type="text" @click="editItem(scope.row)">编辑</el-button>
-            <el-popconfirm
-              title="确定要删除此条记录吗？"
-              style="margin-left: 10px"
-              @onConfirm="deleteItem(scope.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"
+          <div class="custom-menu">
+            <el-menu
+              ref="customMenu"
+              @select="onInstanceSelect"
             >
+              <el-menu-item
+                v-for="(instance, index) in deviceInstanceList"
+                :id="'instance' + instance.id"
+                :key="'instance' + index"
+                :index="instance.id.toString()"
+              >{{ instance.name }}</el-menu-item>
+            </el-menu>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="16" :sm="16" :md="18" :lg="20">
         <el-form
-        v-if="dialogVisible"
-        :model="addForm"
-        label-width="90px"
+          ref="form"
+          :model="chartField"
+          inline
+          label-position="top"
+          label-width="100px"
+          style="margin-top: 20px"
         >
           <el-form-item
-          label="input:"
+            label="属性:"
+            prop="yFields"
+          >
+            <div class="data-model-container">
+              <div
+                v-for="(dataModel, index) in dataModelList"
+                :key="index + 400"
+                class="data-model-item"
               >
-          <el-input v-model="addForm.input" />
+                <div class="data-model-name">
+                  {{ dataModel.name }}:
+                </div>
+                <el-checkbox-group v-model="chartField.yFields[index]">
+                  <el-checkbox
+                    v-for="(prop, i) in dataModel.propertyList"
+                    :key="200+i"
+                    :label="prop.propertyCode"
+                  >{{ prop.propertyName }}</el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </div>
           </el-form-item>
           <el-form-item
-          label="status:"
+            label="查询范围:"
+            prop="startAndEndTime"
+            :rules="[{ type: 'array', required: true, message: '请选择时间范围', trigger: 'blur' }]"
           >
-          <el-input v-model="addForm.status" />
+            <el-date-picker
+              v-model="chartField.startAndEndTime"
+              type="datetimerange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              style="margin-left: 20px"
+              @click="createCharts"
+            >查看图表</el-button>
           </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>
+        <el-row
+          v-for="(chartGroup, index) in chartList"
+          :key="index + 1000"
+          :gutter="20"
+        >
+          <el-col
+            v-for="(chart) in chartGroup"
+            :key="chart.id"
+            :span="12"
+            style="height: 400px"
+          >
+            <e-line
+              :id="'line-' + chart.propertyCode"
+              :title="chart.propertyName"
+              :line-data="setChartData(chart.propertyCode, index)"
+              :description="chart.propertyUnit"
+              :config="lineConfig"
+            ></e-line>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+  </el-card>
 </template>
 
 <script>
-import { getTableData } from '@/api/data-visible/query-history'
+import ELine from '@/components/Charts/ELine'
+import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
+import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
+import { getDataModelByDeviceTypeId } from '@/api/equipment-management/equipment-model'
+import { getModelHistory } from '@/api/data-visible/query-history'
+
 export default {
   name: 'QueryHistory',
-  props: {},
+  components: {
+    ELine
+  },
   data() {
     return {
-      searchForm: {
-        input: null,
-        status: null
+      chartField: {
+        yFields: [],
+        refresh: 1,
+        startAndEndTime: []
       },
-      add: true,
-      dialogVisible: false,
-      tableData: [],
-      addForm: {
-        input: null,
-        status: null
+      dataModelList: [],
+      deviceInstance: null,
+      modelList: [],
+      objectId: '1',
+      defaultActive: null,
+      timer: 0,
+      count: 0,
+      instanceList: [],
+      propertyList: [],
+      deviceType: null,
+      deviceTypeList: [],
+      deviceInstanceList: [],
+      chartData: [],
+      chartList: [],
+      rules: {
+        instanceId: [
+          { required: true, message: '请选择实例', trigger: 'change' }
+        ],
+        yFields: [
+          { type: 'array', required: true, message: '请至少选择一个属性', trigger: 'change' }
+        ]
       },
-      pageForm: {
-        pageSize: 10,
-        pageNum: 1,
-        total: 0
+      lineConfig: {
+        dataZoom: [
+          {
+            show: true,
+            realtime: true,
+            start: 65,
+            end: 85
+          },
+          {
+            type: 'inside',
+            realtime: true,
+            start: 65,
+            end: 85
           }
+        ]
       }
-  },
-  created() {},
-  mounted() {},
-  methods: {
-    getTableData(pageNum) {
-      const params = {
-        ...this.searchForm,
-        pageNum,
-        pageSize: this.pageForm.pageSize
     }
-      getTableData(params)
+  },
+  created() {
+    // 初始化设备类型
+    getAllDeviceModel()
       .then(res => {
-          const { records, totalSize } = res.data
-          this.tableData = records
-          this.pageForm.total = totalSize
+        this.deviceTypeList = res.data.map(v => {
+          return {
+            value: v.id,
+            label: v.name
+          }
+        })
+        if (this.deviceTypeList.length) {
+          this.deviceType = this.deviceTypeList[0].value
+          // 获取该设备类型下的设备实例
+          this.getAllInstanceByDeviceTypeId(this.deviceType)
+          // 根据设备类型 ID 获取关联数据模型
+          this.getDataModelByDeviceTypeId(this.deviceType)
+        }
       })
-        .catch(err => console.error(err))
+      .catch(_ => {})
   },
-    resetForm() {
-      this.$refs.searchForm.resetFields()
+  methods: {
+    onDeviceTypeChange(val) {
+      this.dataModelList = []
+      this.chartField = {
+        yFields: [],
+        refresh: 1
+      }
+      this.chartList = []
+      this.chartData = []
+      clearInterval(this.timer)
+      this.getDataModelByDeviceTypeId(val)
+      this.getAllInstanceByDeviceTypeId(val)
     },
-    addRow() {
-      this.add = true
-      this.dialogVisible = true
+    onInstanceSelect(index) {
+      const id = parseInt(index)
+      const instance = this.deviceInstanceList.find(v => v.id === id)
+      if (instance.id !== this.deviceInstance) {
+        this.deviceInstance = instance.id
+        this.chartField.refresh = 1
+        const length = this.chartField.yFields.length
+        this.chartField.yFields = [...new Array(length).fill([])]
+        this.chartList = []
+        this.chartData = []
+        clearInterval(this.timer)
+      }
     },
-    editItem() {
-      this.add = false
-      this.dialogVisible = true
+    getDataModelByDeviceTypeId(id) {
+      getDataModelByDeviceTypeId({ id })
+        .then(res => {
+          this.dataModelList = []
+          this.chartField.yFields = []
+          this.dataModelList = res.data
+          this.dataModelList.forEach(v => {
+            this.chartField.yFields.push([])
+          })
+        })
+        .catch(_ => {})
     },
-    deleteItem(id) {},
-    saveSystem() {},
-    handleSizeChange(val) {
-      this.pageForm.pageSize = val
-      this.getTableData(1)
+    getAllInstanceByDeviceTypeId(val) {
+      getAllInstanceByDeviceTypeId({ deviceTypeId: val })
+        .then(res => {
+          this.deviceInstanceList = res.data
+        })
+        .then(_ => {
+          if (this.deviceInstanceList.length) {
+            this.deviceInstance = this.deviceInstanceList[0].id
+            this.$nextTick()
+              .then(_ => {
+                document.getElementById(`instance${this.deviceInstanceList[0].id}`).click()
+              })
+              .catch(_ => {})
+          }
+        })
+        .catch(_ => {})
     },
-    handleCurrentChange(val) {
-      this.pageForm.pageNum = val
-      this.getTableData(val)
+    setChartData(yField, index) {
+      return this.chartData[index].map(v => {
+        return {
+          time: v.time,
+          value: parseInt(v[yField])
+        }
+      })
+    },
+    createCharts() {
+      // eslint-disable-next-line no-unused-vars
+      let count = 0
+      this.chartField.yFields.forEach(v => {
+        if (v.length) {
+          count += v.length
+        }
+      })
+      if (count > 0) {
+        this.$refs.form.validate()
+          .then(_ => {
+            this.chartData = []
+            this.chartList = []
+            const dashboardReqList = this.dataModelList.map((v, i) => {
+              return {
+                modelId: v.id,
+                deviceId: this.deviceInstance,
+                propertyCodeList: [...this.chartField.yFields[i]]
+              }
+            })
+            return {
+              beginTime: this.chartField.startAndEndTime[0].getTime(),
+              endTime: this.chartField.startAndEndTime[1].getTime(),
+              dashboardReqList
+            }
+          })
+          .then(params => getModelHistory(params))
+          .then(res => {
+            this.dataModelList.forEach((dataModel, i) => {
+              const arr = []
+              dataModel.propertyList.forEach(v => {
+                const index = this.chartField.yFields[i].findIndex(item => item === v.propertyCode)
+                index !== -1 && arr.push({ ...v })
+              })
+              this.chartList.push(arr)
+            })
+            this.chartData = res.data.map(v => {
+              return [...v.dataList]
+            })
+          })
+          .then(_ => this.$nextTick())
+          .then(_ => {
+            this.chartData = [...this.chartData]
+          })
+          .catch(_ => {})
+      } else {
+        this.$message.warning('请至少选择 1 个属性')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.container{
+  min-height: calc(100vh - 95px);
+  .content{
+    display: flex;
+    min-height: calc(100vh - 135px);
+    .left{
+      width: 100%;
+      height: 100%;
+      .search{
+        height: 40px;
+      }
+      .custom-menu{
+        background-color: #efeff1;
+        height: calc(100% - 40px);
+        .el-menu{
+          background-color: initial;
+          border-right: none;
+          border-top: solid 1px #e6e6e6;
+          border-left: solid 1px #e6e6e6;
+          .el-menu-item.el-menu-item{
+            min-width: initial;
+            background-color: #efeff1;
+          }
+          .el-menu-item.is-active{
+            background-color: #fff;
+            color: #303133;
+          }
+        }
+      }
+    }
+    .top{
+      display: flex;
+      justify-content: space-between;
+    }
+    .data-model-container{
+      display: flex;
+      .data-model-item{
+        display: flex;
+        .data-model-name{
+          margin-right: 20px;
+          margin-left: 20px;
+        }
+      }
+      .data-model-item:first-of-type{
+        .data-model-name{
+          margin-left: 0;
+        }
+      }
+      .data-model-item:last-of-type{
+        margin-right: 20px;
+      }
+    }
+  }
+}
 </style>