Skip to content

S
super-hive-web
Commit cc32ccc5 authored by huangcb's avatar huangcb
Browse files
Options

Merge branch 'master' into huangcb

parents 306da4f0 49fb1677
Hide whitespace changes
Inline Side-by-side
Showing with 1411 additions and 69 deletions
.env.production
View file @ cc32ccc5
......@@ -2,7 +2,7 @@
ENV = 'production'
# base api
VUE_APP_BASE_API = 'http://esvsy.wicp.vip:8082'
VUE_APP_BASE_API = 'http://cloud.esvtek.com:8085/dataCenterApi'
# VUE_APP_BASE_API = 'http://192.168.31.248:8080'
src/api/data-visible/image-identification.js 0 → 100644
View file @ cc32ccc5
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/api/data-visible/query-history.js 0 → 100644
View file @ cc32ccc5
import request from '@/utils/request'
// const baseURL = process.env.VUE_APP_BASE_API
const baseURL = ''
// 获取图表历史
export function getModelHistory(data) {
return request({
url: `${baseURL}/iot/dashboard/modelHistory`,
method: 'post',
data
})
}
src/api/device-management/history-data.js 0 → 100644
View file @ cc32ccc5
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/api/equipment-management/device-instance.js 0 → 100644
View file @ cc32ccc5
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/components/Charts/ELine.vue
View file @ cc32ccc5
......@@ -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/icons/svg/image-identification.svg 0 → 100644
View file @ cc32ccc5
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597110371950" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3001" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M859.648 159.744l-36.352-12.8c-4.096-23.552-25.6-42.496-51.2-42.496-29.696 0-53.248 23.552-53.248 53.248s23.552 53.248 53.248 53.248c14.848 0 25.6-6.144 36.352-14.848l29.696 12.8c23.552 8.704 38.4 38.4 38.4 66.048v473.6c0 27.648-14.848 57.344-38.4 66.048l-27.648 10.752c-10.752-10.752-23.552-16.896-38.4-16.896-29.696 0-53.248 23.552-53.248 53.248s23.552 53.248 53.248 53.248c23.552 0 42.496-14.848 51.2-36.352l38.4-12.8c45.056-14.848 78.848-66.048 78.848-115.2V275.456c-2.048-49.152-35.84-100.352-80.896-115.712zM292.352 808.448c-16.896 0-31.744 8.704-42.496 21.504l-38.4-12.8c-21.504-10.752-40.448-38.4-40.448-61.952V270.848c0-23.552 19.456-51.2 40.448-59.904l42.496-14.848c10.752 10.752 23.552 16.896 38.4 16.896 29.696 0 53.248-23.552 53.248-53.248s-23.552-53.248-53.248-53.248c-23.552 0-45.056 14.848-51.2 36.352l-53.248 16.896c-42.496 14.848-80.896 64-80.896 111.104v486.4c0 47.104 38.4 93.696 83.456 111.104l51.2 16.896c8.704 19.456 27.648 31.744 49.152 31.744 29.696 0 53.248-23.552 53.248-53.248 1.536-31.744-22.016-55.296-51.712-55.296z m125.952-388.096c0 23.552 18.944 42.496 42.496 42.496s42.496-18.944 42.496-42.496c0-23.552-18.944-42.496-42.496-42.496-23.552-0.512-42.496 18.944-42.496 42.496z" p-id="3002"></path><path d="M669.696 443.904l80.896 78.848 2.048 111.104-396.8-2.048v-66.048l91.648-66.048 89.6 59.904 132.608-115.712z" p-id="3003"></path><path d="M627.2 748.544H336.896c-49.152 0-89.6-40.448-89.6-89.6V424.448c0-23.552 19.456-42.496 42.496-42.496h8.704v275.456c0 21.504 16.896 36.352 36.352 36.352h332.8v10.752c2.048 25.088-16.896 44.032-40.448 44.032z" p-id="3004"></path><path d="M746.496 676.352h-394.24c-21.504 0-36.352-16.896-36.352-36.352V330.752c0-25.6 21.504-47.104 47.104-47.104h384c25.6 0 47.104 21.504 47.104 47.104v298.496c1.536 25.6-22.016 47.104-47.616 47.104z m-377.344-53.248H742.4V345.6c0-6.144-4.096-10.752-10.752-10.752H379.904c-6.144 0-10.752 4.096-10.752 10.752v277.504z" p-id="3005"></path></svg>
\ No newline at end of file
src/icons/svg/query-history.svg 0 → 100644
View file @ cc32ccc5
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1597110389502" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3148" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M591.5 447.4l141.4-143.3 57.6 58.4 65.2-264.3-260.6 66.1 72.7 73.7-141.5 143.3L396 249.2 135.3 513.5l65.2 66.1L396 381.3l130.3 132.1 65.2-66z m251.8 60.4h-92.1c-25.5 0-46.1 20.9-46.1 46.7v327c0 25.8 20.6 46.7 46.1 46.7h92.1c25.4 0 46.1-20.9 46.1-46.7v-327c-0.1-25.8-20.7-46.7-46.1-46.7z m-553 186.9h-92.2c-25.4 0-46.1 20.9-46.1 46.7v140.1c0 25.8 20.6 46.7 46.1 46.7h92.2c25.4 0 46.1-20.9 46.1-46.7V741.4c0-25.8-20.6-46.7-46.1-46.7z m276.5-93.5h-92.2c-25.4 0-46.1 20.9-46.1 46.7v233.6c0 25.8 20.6 46.7 46.1 46.7h92.2c25.5 0 46.1-20.9 46.1-46.7V647.9c0-25.8-20.7-46.7-46.1-46.7z" p-id="3149"></path></svg>
\ No newline at end of file
src/main.js
View file @ cc32ccc5
......@@ -32,10 +32,10 @@ Vue.use(Element, {
})
Vue.use(VueClipboard)
import { mockXHR } from '../mock'
if (process.env.NODE_ENV === 'production') {
mockXHR()
}
// import { mockXHR } from '../mock'
// if (process.env.NODE_ENV === 'production') {
// mockXHR()
// }
// 全局注册 v-permission 按键权限指令
Vue.directive('permission', permission)
......
src/router/index.js
View file @ cc32ccc5
......@@ -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/dataVisibleManagement.js
View file @ cc32ccc5
......@@ -15,6 +15,20 @@ const router = {
name: '仪表盘',
component: () => import('@/views/data-visible/dashboard'),
meta: { title: '仪表盘', icon: 'dashboard' }
},
{
menuId: 'QueryHistory',
path: 'query-history',
name: '历史查询',
component: () => import('@/views/data-visible/query-history'),
meta: { title: '历史查询', icon: 'query-history' }
},
{
menuId: 'ImageIdentification',
path: 'image-identification',
name: '图像识别',
component: () => import('@/views/data-visible/image-identification'),
meta: { title: '图像识别', icon: 'image-identification' }
}
]
}
......
src/router/modules/deviceManagement.js 0 → 100644
View file @ cc32ccc5
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
View file @ cc32ccc5
......@@ -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/equipment-management/device-instance'),
meta: { title: '设备实例-迭代', icon: 'equipment-model' }
}
]
}
......
src/router/modules/tenantManagement.js
View file @ cc32ccc5
......@@ -5,7 +5,7 @@ const router = {
path: '/tenant-management',
name: '租户管理',
component: Common,
redirect: '/tenant-management/tenant',
redirect: '/tenant-management/tenant-management',
meta: { title: '租户管理', icon: 'tenant' },
children: [
{
......
src/views/data-management/model-management/AddOrUpdate.vue
View file @ cc32ccc5
......@@ -9,14 +9,17 @@
ref="modelForm"
:model="modelForm"
label-width="90px"
:rules="rules"
>
<el-form-item
label="模型名称:"
prop="name"
>
<el-input v-model="modelForm.name" style="width: 400px" />
</el-form-item>
<el-form-item
label="描述:"
prop="description"
>
<el-input v-model="modelForm.description" type="textarea" :rows="4" style="width: 400px" />
</el-form-item>
......@@ -190,6 +193,14 @@ export default {
hasInstance: false,
instanceCount: null,
propertyList: []
},
rules: {
name: [
{ required: true, message: '请输入模型名称', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入描述', trigger: 'blur' }
]
}
}
},
......
src/views/data-visible/dashboard/index.vue
View file @ cc32ccc5
......@@ -38,46 +38,53 @@
ref="form"
:model="chartField"
inline
label-position="top"
label-width="100px"
style="margin-top: 20px"
>
<div v-if="dataModelList.length">
<el-form-item
v-for="(dataModel, index) in dataModelList"
:key="index + 300"
:label='dataModel.name + ":"'
prop="yFields"
>
<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>
</el-form-item>
</div>
<div>
<el-form-item label="时间轴:">
<el-form-item
label="属性:"
prop="yFields"
>
<div class="data-model-container">
<div
v-for="(dataModel, index) in dataModelList"
:key="index + 400"
class="data-model-item"
>
<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="时间轴:">
<div style="margin-right: 20px">
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>
</div>
</el-form-item>
<el-form-item
label="刷新时间(秒):"
>
<el-input-number
v-model.number="chartField.refresh"
:min="1"
:max="10"
label="单位秒"
/>
<el-button
type="primary"
style="margin-left: 20px"
@click="createCharts"
>生成图表</el-button>
</el-form-item>
</el-form>
<el-row
v-for="(chartGroup, index) in chartList"
......@@ -184,13 +191,22 @@ export default {
onInstanceSelect(index) {
const id = parseInt(index)
const instance = this.deviceInstanceList.find(v => v.id === id)
this.deviceInstance = instance.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)
}
},
getDataModelByDeviceTypeId(id) {
getDataModelByDeviceTypeId({ id })
.then(res => {
this.dataModelList = res.data
this.dataModelList = []
this.chartField.yFields = []
this.dataModelList = res.data
this.dataModelList.forEach(v => {
this.chartField.yFields.push([])
})
......@@ -321,6 +337,25 @@ export default {
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>
src/views/data-visible/image-identification/index.vue 0 → 100644
View file @ cc32ccc5
<template>
<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-option
v-for="item in deviceTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<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">
<div class="demo-image__preview">
<el-row>
<descriptions
label-position="top"
label-width="80px"
style="margin-left: 30px"
>
<descriptions-item label="标准尺寸" value="">
<div style="font-weight: bold;color:blue">240mm</div>
</descriptions-item>
<descriptions-item label="故障尺寸" value="">
<div style="font-weight: bold;color:red">230mm</div>
</descriptions-item>
</descriptions>
<descriptions
label-position="top"
label-width="80px"
style="margin-left: 30px"
>
<descriptions-item label="当前尺寸" value="">
<div style="font-weight: bold;color:green">232mm</div>
</descriptions-item>
<descriptions-item label="采集时间" value="">
<div style="font-weight: bold;color:green">2020-08-08 12:31</div>
</descriptions-item>
</descriptions>
<descriptions
label-position="top"
label-width="80px"
style="margin-left: 30px"
>
<descriptions-item label="当前状态" value="">
<div style="font-weight: bold;color:green">正常</div>
</descriptions-item>
</descriptions>
</el-row>
<el-row style="margin-top: 100px">
<el-col v-for="(item,index) in images" :key="index" :span="6" style="text-align: center">
<div style="font-weight: bold;">{{ item.step }}</div>
<el-image
style="width: 200px; height: 200px;margin: 10px auto"
:src="item.url"
:preview-src-list="srcList"
/>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</el-card>
</template>
<script>
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
import step1 from '@/assets/step1.png'
import step2 from '@/assets/step2.png'
import step3 from '@/assets/step3.png'
import step4 from '@/assets/step4.png'
export default {
name: 'ImageIdentification',
data() {
return {
deviceInstance: null,
instanceList: [],
deviceType: null,
deviceTypeList: [],
deviceInstanceList: [],
srcList: [
step1,
step2,
step3,
step4
],
images: [
{
content: '活动按期开始',
step: '原始图片',
url: step1
},
{
content: '活动按期开始',
step: '边缘提取',
url: step2
},
{
content: '活动按期开始',
step: '图形识别',
url: step3
},
{
content: '活动按期开始',
step: '对比图',
url: step4
}
],
form: {}
}
},
created() {
// 初始化设备类型
getAllDeviceModel()
.then(res => {
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)
}
})
.catch(_ => {})
},
methods: {
onDeviceTypeChange(val) {
// 获取该设备类型下的设备实例
this.getAllInstanceByDeviceTypeId(val)
},
onInstanceSelect(index) {
const id = parseInt(index)
const instance = this.deviceInstanceList.find(v => v.id === id)
if (instance.id !== this.deviceInstance) {
this.deviceInstance = instance.id
}
},
getAllInstanceByDeviceTypeId(val) {
getAllInstanceByDeviceTypeId({ deviceTypeId: val })
.then(res => {
this.deviceInstanceList = res.data
})
.then(_ => this.$nextTick())
.then(_ => {
if (this.deviceInstanceList.length) {
this.deviceInstance = this.deviceInstanceList[0].id
this.$nextTick()
.then(_ => {
document.getElementById(`instance${this.deviceInstanceList[0].id}`).click()
})
.catch(_ => {})
}
})
.catch(_ => {})
}
}
}
</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;
}
}
}
</style>
src/views/data-visible/query-history/index.vue 0 → 100644
View file @ cc32ccc5
<template>
<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-option
v-for="item in deviceTypeList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<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
ref="form"
:model="chartField"
inline
label-position="top"
label-width="100px"
style="margin-top: 20px"
>
<el-form-item
label="属性:"
prop="yFields"
>
<div class="data-model-container">
<div
v-for="(dataModel, index) in dataModelList"
:key="index + 400"
class="data-model-item"
>
<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="查询范围:"
prop="startAndEndTime"
:rules="[{ type: 'array', required: true, message: '请选择时间范围', trigger: 'blur' }]"
>
<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>
<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"
/>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</template>
<script>
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',
components: {
ELine
},
data() {
return {
chartField: {
yFields: [],
refresh: 1,
startAndEndTime: []
},
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' }
]
},
lineConfig: {
dataZoom: [
{
show: true,
realtime: true,
start: 65,
end: 85
},
{
type: 'inside',
realtime: true,
start: 65,
end: 85
}
]
}
}
},
created() {
// 初始化设备类型
getAllDeviceModel()
.then(res => {
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(_ => {})
},
methods: {
onDeviceTypeChange(val) {
this.dataModelList = []
this.chartField = {
yFields: [],
refresh: 1
}
this.chartList = []
this.chartData = []
clearInterval(this.timer)
this.getDataModelByDeviceTypeId(val)
this.getAllInstanceByDeviceTypeId(val)
},
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)
}
},
getDataModelByDeviceTypeId(id) {
getDataModelByDeviceTypeId({ id })
.then(res => {
this.dataModelList = []
this.chartField.yFields = []
this.dataModelList = res.data
this.dataModelList.forEach(v => {
this.chartField.yFields.push([])
})
})
.catch(_ => {})
},
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(_ => {})
},
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>
src/views/device-alarm/alarm-show/index.vue
View file @ cc32ccc5
......@@ -8,13 +8,13 @@
inline
>
<el-form-item
label="设备名称"
label="设备名称:"
prop="deviceName"
>
<el-input v-model="searchForm.deviceName" />
</el-form-item>
<el-form-item
label="告警等级"
label="告警等级:"
prop="alarmLevel"
>
<el-select v-model="searchForm.alarmLevel">
......@@ -43,10 +43,12 @@
<el-table-column
prop="deviceTypeName"
label="设备类型"
min-width="120"
/>
<el-table-column
prop="deviceName"
label="设备名称"
min-width="120"
/>
<el-table-column
prop="dataModelName"
......@@ -55,6 +57,7 @@
<el-table-column
prop="propertyCode"
label="属性代码"
min-width="90"
/>
<el-table-column
prop="propertyName"
......@@ -82,13 +85,13 @@
prop="reportTime"
label="上报时间"
:formatter="$moment"
min-width="130px"
min-width="155px"
/>
<el-table-column
prop="alarmTime"
label="告警时间"
:formatter="$moment"
min-width="130px"
min-width="155px"
/>
<el-table-column
label="详情"
......@@ -200,9 +203,9 @@ export default {
}
getTableData(params)
.then(res => {
const { records, totalSize } = res.data
const { records, total } = res.data
this.tableData = records
this.pageForm.total = totalSize
this.pageForm.total = total
})
.catch(err => console.error(err))
},
......
src/views/device-management/device-detail/index.vue 0 → 100644
View file @ cc32ccc5
<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 0 → 100644
View file @ cc32ccc5
<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 0 → 100644
View file @ cc32ccc5
<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
v-for="(deviceType, index) in deviceTypeList"
:key="index"
:label="deviceType.name"
:value="deviceType.id"
/>
</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>
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
export default {
name: 'HistoryData',
data() {
return {
form: {
deviceType: null,
c: []
},
activeName: 'first',
secondActiveName: 'first',
tableData: [
{},
{},
{},
{},
{},
{},
{},
{},
{},
{}
],
pageForm: {
pageSize: 10,
pageNum: 1,
total: 0
},
deviceTypeList: []
}
},
created() {
// 获取所有设备实例
getAllDeviceModel()
.then(res => {
this.deviceTypeList = res.data
if (this.deviceTypeList.length) {
this.form.deviceType = this.deviceTypeList[0].value
// // 获取该设备类型下的设备实例
// this.getAllInstanceByDeviceTypeId(this.deviceType)
// // 根据设备类型 ID 获取关联数据模型
// this.getDataModelByDeviceTypeId(this.deviceType)
}
})
.catch(_ => {})
},
methods: {
}
}
</script>
<style scoped>
</style>
src/views/equipment-management/device-instance/index.vue 0 → 100644
View file @ cc32ccc5
<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/equipment-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>
src/views/equipment-management/equipment-instance/index.vue
View file @ cc32ccc5
......@@ -24,19 +24,19 @@
inline
>
<el-form-item
label="设备名称"
label="设备名称:"
prop="instanceName"
>
<el-input v-model="searchForm.instanceName" maxlength="50" />
</el-form-item>
<el-form-item
label="业务ID"
label="业务ID:"
prop="businessId"
>
<el-input v-model="searchForm.businessId" maxlength="50" />
</el-form-item>
<el-form-item
label="型号"
label="型号:"
prop="deviceModel"
>
<el-input v-model="searchForm.deviceModel" maxlength="200" />
......
src/views/equipment-management/equipment-model/index.vue
View file @ cc32ccc5
......@@ -35,6 +35,7 @@
<el-table-column
prop="name"
label="设备类型"
width="200"
/>
<el-table-column
prop="instanceCount"
......
src/views/login/index.vue
View file @ cc32ccc5
......@@ -10,16 +10,23 @@
<img :src="logo" alt="">
</div>
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
<el-form
ref="loginForm"
:model="loginForm"
:rules="loginRules"
class="login-form"
autocomplete="on"
label-position="left"
>
<div class="title-container">
<div class="title">账号登录</div>
</div>
<el-form-item prop="username">
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<span class="svg-container">
<svg-icon icon-class="user" />
</span>
<el-input
ref="username"
v-model="loginForm.username"
......@@ -31,11 +38,16 @@
/>
</el-form-item>
<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
<el-tooltip
v-model="capsTooltip"
content="大写锁定"
placement="right"
manual
>
<el-form-item prop="password">
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<span class="svg-container">
<svg-icon icon-class="password" />
</span>
<el-input
:key="passwordType"
ref="password"
......@@ -48,15 +60,15 @@
@blur="capsTooltip = false"
/>
<span class="show-pwd" @click="showPwd">
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
</span>
</el-form-item>
</el-tooltip>
<el-form-item prop="captcha" class="captcha">
<span class="svg-container">
<svg-icon icon-class="captcha" />
</span>
<span class="svg-container">
<svg-icon icon-class="captcha" />
</span>
<el-input
v-model="loginForm.captcha"
placeholder="验证码"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment