0214
/
ALOps_sys1
2
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

【web】 设备信息详情

Browse Source
dev
Wangxin 11 months ago
parent d5e9657bd3
commit 1456a811d7
8 changed files with 378 additions and 3 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      ALOps_sys_fe/alops-ui/src/assets/styles/index.scss
  2. 19
      ALOps_sys_fe/alops-ui/src/assets/styles/ruoyi.scss
  3. 14
      ALOps_sys_fe/alops-ui/src/router/index.js
  4. 132
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/LineChart.vue
  5. 8
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
  6. 198
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
  7. 7
      ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue

1
ALOps_sys_fe/alops-ui/src/assets/styles/index.scss
Unescape View File

@ -11,6 +11,7 @@ body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
color: #606266;
} }
label { label {

19
ALOps_sys_fe/alops-ui/src/assets/styles/ruoyi.scss
Unescape View File

@ -285,3 +285,22 @@
.splitpanes.default-theme .splitpanes__pane { .splitpanes.default-theme .splitpanes__pane {
background-color: #fff!important; background-color: #fff!important;
} }
.flex-center{
display: flex;
justify-content: center;
align-items: center;
}
.flex{
display: flex;
}
.justifyContent{
justify-content: center;
}
.alignItems{
align-items: center;
}
.gap10{
gap: 10px;
}

14
ALOps_sys_fe/alops-ui/src/router/index.js
Unescape View File

@ -92,6 +92,20 @@ export const constantRoutes = [
// 动态路由，基于用户权限动态去加载 // 动态路由，基于用户权限动态去加载
export const dynamicRoutes = [ export const dynamicRoutes = [
{
path: '/inMonitoring/devicesState-detail',
component: Layout,
hidden: true,
permissions: ['inMonitoring:devicesState:edit'],
children: [
{
path: 'detail/:userId(\\d+)',
component: () => import('@/views/inMonitoring/devicesState/detail'),
name: 'DevicesStateDetail',
meta: { title: '设备详情', activeMenu: '/inMonitoring/devicesState-detail' }
}
]
},
{ {
path: '/system/user-auth', path: '/system/user-auth',
component: Layout, component: Layout,

132
ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/LineChart.vue
Unescape View File

@ -0,0 +1,132 @@
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
const animationDuration = 6000
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '200px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption(
{
color: ['#5b9bd5', '#ed7d31'],
backgroundColor: '#FFF',
grid: {
top: 20,
bottom: 100,
left: '12%',
right: '2%'
},
legend: {
bottom: '10',
itemWidth: 30,
itemHeight: 6,
data: ['逐月总逆温日', '逐月PM2.5浓度']
},
xAxis: [{
name: '城市',
nameLocation: 'center',
nameGap: 50,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
rotate: 50
},
data: ['南京', '无锡', '徐州', '常州', '苏州', '南通', '连云港', '淮安', '盐城', '扬州', '镇江', '泰州', '宿迁'],
}],
yAxis: [{
name: '地面风速（m/s）',
nameLocation: 'center',
nameGap: 40,
nameTextStyle: {
color: '#000'
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#CCC'
}
},
axisLabel: {
color: '#000'
}
}],
series: [{
name: '逐月总逆温日',
type: 'line',
itemStyle: {
color: '#5b9bd5',
borderColor: '#5b9bd5',
borderWidth: 4
},
lineStyle: {
width: 4
},
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 20]
},
{
name: '逐月PM2.5浓度',
type: 'line',
itemStyle: {
color: '#ed7d31',
borderColor: '#ed7d31',
borderWidth: 4
},
lineStyle: {
width: 4
},
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 15]
}
]
}
)
}
}
}
</script>

8
ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/cardItem.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div class=""> <div class="">
<h3 class="h3">交换机</h3> <h3 class="h3" @click="handleDetail">交换机</h3>
<el-row> <el-row>
<el-col :span="14"> <el-col :span="14">
<img src="../../../assets/images/profile.jpg" width="100%" alt="" srcset=""> <img src="../../../assets/images/profile.jpg" width="100%" alt="" srcset="">
@ -64,6 +64,12 @@ export default {
created() { created() {
}, },
methods: { methods: {
/** 查看详情 */
handleDetail: function(row) {
console.log("%c 🖍️: row ", "font-size:16px;background-color:#3c235b;color:white;", row)
const userId = row.pointerId
this.$router.push("/inMonitoring/devicesState-detail/detail/" + userId)
},
} }
} }
</script> </script>

198
ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/detail.vue
Unescape View File

@ -0,0 +1,198 @@
<template>
<div class="app-container">
<el-row :gutter="5">
<el-col :span="24">
<el-card>
<el-row>
<el-col :span="4">
<h3>交换机</h3>
</el-col>
<el-col :span="4">
<h3>持续在线XXXXX小时</h3>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :span="8">
<h3>交换机</h3>
</el-col>
<el-col :span="4">
<h3>设备基本信息</h3>
<p>
<span>设备型号:</span>
<span>待开发</span>
</p>
<p>
<span>设备级别:</span>
<span>待开发</span>
</p>
<p>
<span>设备版本:</span>
<span>待开发</span>
</p>
<p>
<span>设备类型:</span>
<span>待开发</span>
</p>
</el-col>
<el-col :span="4">
<h3>设备出厂信息</h3>
<p>
<span>生产商名称:</span>
<span>待开发</span>
</p>
<p>
<span>供货商名称:</span>
<span>待开发</span>
</p>
<p>
<span>出厂日期:</span>
<span>待开发</span>
</p>
<p>
<span>质保时间:</span>
<span>待开发</span>
</p>
<p>
<span>联系人:</span>
<span>待开发</span>
</p>
<p>
<span>联系电话:</span>
<span>待开发</span>
</p>
</el-col>
<el-col :span="4">
<h3>设备管理信息</h3>
<p>
<span>带外IP管理:</span>
<span>待开发</span>
</p>
<p>
<span>安装位置:</span>
<span>待开发</span>
</p>
<p>
<span>安装日期:</span>
<span>待开发</span>
</p>
<p>
<span>服役年限:</span>
<span>待开发</span>
</p>
<p>
<span>管理员:</span>
<span>待开发</span>
</p>
</el-col>
<el-col :span="4">
<h3>设备状态信息</h3>
<p>
<span>累计预警次数:</span>
<span>待开发</span>
</p>
<p>
<span>累计维修次数:</span>
<span>待开发</span>
</p>
</el-col>
</el-row>
</el-card>
</el-col>
</el-row>
<el-row class="mt10" :gutter="10">
<el-col :span="12">
<el-card :style="{height: '500px'}">
<el-row>
<el-col :span="24" class="flex alignItems gap10">
<h3>设备运行数据</h3>
<el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</el-col>
<el-col :span="14">
<el-row>
<el-col :span="12">
<LineChart></LineChart>
</el-col>
<el-col :span="12">
<LineChart></LineChart>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<LineChart></LineChart>
</el-col>
<el-col :span="12">
<LineChart></LineChart>
</el-col>
</el-row>
</el-col>
<el-col :span="10">
<el-row>
<el-col :span="12">
<BarChart height="200px" :dateRange="dateRange"></BarChart>
</el-col>
<el-col :span="12">
<BarChart height="200px" :dateRange="dateRange"></BarChart>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2>
</el-col>
<el-col :span="8">
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2>
</el-col>
<el-col :span="8">
<BarChart2 height="200px" :dateRange="dateRange"></BarChart2>
</el-col>
</el-row>
</el-col>
</el-row>
</el-card>
</el-col>
<el-col :span="12">
<el-card :style="{height: '500px'}">
<el-tabs v-model="selectedTab">
<el-tab-pane label="历史预警" :name="1">
历史预警
</el-tab-pane>
<el-tab-pane label="接口信息" :name="2">
接口信息
</el-tab-pane>
<el-tab-pane label="其他指标" :name="3">
其他指标
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>
</el-row>
</div>
</template>
<script>
import BarChart from './BarChart1.vue'
import LineChart from './LineChart.vue'
import BarChart2 from './BarChart2.vue'
export default {
name: "cardItem",
components: { BarChart, BarChart2, LineChart },
data() {
return {
dateRange: [],
selectedTab: 1
}
},
created() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>

7
ALOps_sys_fe/alops-ui/src/views/inMonitoring/devicesState/index.vue
Unescape View File

@ -40,7 +40,7 @@
<div class="app-container" v-loading="loading"> <div class="app-container" v-loading="loading">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="8" class="card-box" v-for="(i,k) in userList" :key="k"> <el-col :span="8" class="card-box" v-for="(i,k) in userList" :key="k" @click="handleDetail(i)">
<el-card> <el-card>
<cardItem/> <cardItem/>
</el-card> </el-card>
@ -385,6 +385,11 @@ export default {
this.form.password = this.initPassword this.form.password = this.initPassword
}) })
}, },
/** 查看详情 */
handleDetail: function(row) {
const userId = row.userId
this.$router.push("/inMonitoring/devicesState-detail/detail/" + userId)
},
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset() this.reset()

Write Preview
Loading…
Cancel
Save