jianguan
/
supervise-monitor-ui
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://gitea.yxtsoft.com/jianguan/supervise-monitor-ui

master
zyc@123456 2 years ago
parent
836505dea0 a818a2acfe
commit
e68b0bf282
7 changed files with 351 additions and 279 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .gitignore
  2. 5
      package.json
  3. BIN
      public/image/yujing.png
  4. 617
      src/views/index.vue
  5. 2
      src/views/shebeirizhi/shebeirizhiList.vue
  6. 2
      src/views/shebeitaizhang/shebeitaizhangList.vue
  7. 2
      vue.config.js

2
.gitignore
View File

@ -96,4 +96,6 @@ fabric.properties
# Android studio 3.1+ serialized cache file # Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser .idea/caches/build_file_checksums.ser
package-lock.json
node_modules/
monitor-ui/ monitor-ui/

5
package.json
View File

@ -17,6 +17,7 @@
"axios": "^0.24.0", "axios": "^0.24.0",
"bpmn-js": "^9.2.2", "bpmn-js": "^9.2.2",
"core-js": "^2.6.12", "core-js": "^2.6.12",
"echarts": "^5.4.2",
"ejs": "^2.7.4", "ejs": "^2.7.4",
"element-ui": "2.15.13", "element-ui": "2.15.13",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
@ -33,8 +34,8 @@
"vue-router": "3.0.6", "vue-router": "3.0.6",
"vuex": "3.1.0", "vuex": "3.1.0",
"vuex-persistedstate": "^4.0.0", "vuex-persistedstate": "^4.0.0",
"xcrud": "^0.4.19", "web-control": "^1.0.2",
"web-control": "^1.0.2" "xcrud": "^0.4.19"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "4.4.4", "@vue/cli-plugin-babel": "4.4.4",

BIN
public/image/yujing.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

617
src/views/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="webindex"> <div class="webindex">
<div class="tops"> <div class="tops">
<!-- 第1个 --> <!-- 第1个 -->
<div class="topbox"> <div class="topbox">
@ -10,8 +10,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">26</span></div> <div class="note">正常：<span class="bluezi">26</span></div>
<div class="note">离线：<span class="huizi">12</span></div> <div class="note">离线：<span class="huizi">12</span></div>
<div class="note">报警：<span class="redzi">11</span></div> <div class="note">报警：<span class="redzi">11</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -24,8 +24,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">36</span></div> <div class="note">正常：<span class="bluezi">36</span></div>
<div class="note">离线：<span class="huizi">16</span></div> <div class="note">离线：<span class="huizi">16</span></div>
<div class="note"><span class="redzi"></span></div> <div class="note"><span class="redzi"></span></div>
</div> </div>
</div> </div>
</div> </div>
@ -38,8 +38,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">38</span></div> <div class="note">正常：<span class="bluezi">38</span></div>
<div class="note">离线：<span class="huizi">15</span></div> <div class="note">离线：<span class="huizi">15</span></div>
<div class="note">报警：<span class="redzi">12</span></div> <div class="note">报警：<span class="redzi">12</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -52,8 +52,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">26</span></div> <div class="note">正常：<span class="bluezi">26</span></div>
<div class="note">离线：<span class="huizi">12</span></div> <div class="note">离线：<span class="huizi">12</span></div>
<div class="note">报警：<span class="redzi">11</span></div> <div class="note">报警：<span class="redzi">11</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -66,8 +66,8 @@
</div> </div>
<div class="rights"> <div class="rights">
<div class="note">正常：<span class="bluezi">39</span></div> <div class="note">正常：<span class="bluezi">39</span></div>
<div class="note">离线：<span class="huizi">15</span></div> <div class="note">离线：<span class="huizi">15</span></div>
<div class="note">报警：<span class="redzi">12</span></div> <div class="note">报警：<span class="redzi">12</span></div>
</div> </div>
</div> </div>
</div> </div>
@ -86,7 +86,7 @@
<div class="tbar"> <div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>视频监控</div> <div class="title"><span class="iconfont icon-jiating greenzi"></span>视频监控</div>
<div class="bar"> <div class="bar">
<pie-chartrenyuan :chart-data="shipinjiankong_Chart" ></pie-chartrenyuan> <pie-chartrenyuan :chart-data="shipinjiankong_Chart"></pie-chartrenyuan>
</div> </div>
</div> </div>
<!-- 第1个图表 --> <!-- 第1个图表 -->
@ -96,7 +96,7 @@
<pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan> <pie-chartrenyuan :chart-data="ruqinbaojing_Chart"></pie-chartrenyuan>
</div> </div>
</div> </div>
<!-- 第1个图表 --> <!-- 第1个图表 -->
<div class="tbar"> <div class="tbar">
<div class="title"><span class="iconfont icon-jiating greenzi"></span>电子围栏</div> <div class="title"><span class="iconfont icon-jiating greenzi"></span>电子围栏</div>
<div class="bar"> <div class="bar">
@ -113,7 +113,7 @@
</div> </div>
<!-- 第3行 --> <!-- 第3行 -->
<div class="con"> <div class="con">
<!-- 第1 --> <!-- 第1 -->
<div class="news"> <div class="news">
<div class="title"> <div class="title">
<div class="newstits">提醒任务</div> <div class="newstits">提醒任务</div>
@ -127,8 +127,8 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 第1 --> <!-- 第1 -->
<div class="news"> <div class="news">
<div class="title"> <div class="title">
<div class="newstits">待办</div> <div class="newstits">待办</div>
<div class="more" @click="toMore()">更多></div> <div class="more" @click="toMore()">更多></div>
@ -170,295 +170,364 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {login1} from '@/api/system/user/login.js' import { login1 } from '@/api/system/user/login.js'
import * as echarts from "echarts"; import * as echarts from "echarts";
import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan' import PieChartrenyuan from '@/views/echarts/components/PieChartrenyuan'
// 1.1入侵报警饼图 // 1.1入侵报警饼图
const ruqinbaojing_Chart = { const ruqinbaojing_Chart = {
// seriesName: '入侵报警', // seriesName: '入侵报警',
unit: '次', unit: '次',
color: ['#fe7f02', '#049f51', '#fdc004'], color: ['#fe7f02', '#049f51', '#fdc004'],
Data: { Data: {
seriesData: [ seriesData: [
{ value: 39, name: '正常' }, { value: 39, name: '正常' },
{ value: 16, name: '离线' }, { value: 16, name: '离线' },
{ value: 12, name: '报警' } { value: 12, name: '报警' }
] ]
}, },
label: { label: {
normal: { normal: {
position: 'inner', position: 'inner',
show: false show: false
} }
}, },
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
// 1.2视频监控饼图 // 1.2视频监控饼图
const shipinjiankong_Chart = { const shipinjiankong_Chart = {
// seriesName: '视频监控', // seriesName: '视频监控',
unit: '次', unit: '次',
color: ['#fe7f02', '#049f51', '#fdc004'], color: ['#fe7f02', '#049f51', '#fdc004'],
Data: { Data: {
seriesData: [ seriesData: [
{ value: 39, name: '正常' }, { value: 39, name: '正常' },
{ value: 16, name: '离线' }, { value: 16, name: '离线' },
// { value: 12, name: '报警' } // { value: 12, name: '报警' }
] ]
}, },
label: { label: {
normal: { normal: {
position: 'inner', position: 'inner',
show: false show: false
} }
}, },
// radius: ['50%', '55%'] // radius: ['50%', '55%']
} }
export default { export default {
name: 'index', name: 'index',
components: { components: {
PieChartrenyuan PieChartrenyuan
}, },
created() {
var _self = this
setInterval(function () {
_self.getMessage();
}, 20000)
},
data() { data() {
return { return {
ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1 ruqinbaojing_Chart: ruqinbaojing_Chart, // 1.1
shipinjiankong_Chart:shipinjiankong_Chart, shipinjiankong_Chart: shipinjiankong_Chart,
token:'', token: '',
Datalista: [ Datalista: [
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
{ title: '您有新任务了', createTime: '2023-05-23' }, { title: '您有新任务了', createTime: '2023-05-23' },
], ],
Datalist: [ Datalist: [
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
{ title: '您有新消息了', createTime: '2023-05-23' }, { title: '您有新消息了', createTime: '2023-05-23' },
], ],
} }
}, },
methods:{ methods: {
// getToken(){ getMessage() {
// let params = { this.$notify({
// password: "329653", title: '报警消息',
// roleSid: "", dangerouslyUseHTMLString: true,
// token: "", // // message: "<img src='" + warningIcon + "'>" + data.messageContent,
// userName: "15097329653", message: "<img style='width:50px' src='/image/yujing.png'>" + "新的报警待处理",
// verifyCode: "" position: 'bottom-right',
// } onClick: () => {
// login1(params).then(res => { alert("这是一条新订单")
// this.token = res.data.token // this.playText('你有一条报警信息未读')
// window.sessionStorage.setItem('token', res.data.token) // this.getServicePageLists()
// }) },
// } duration: 3000,
})
},
// getToken(){
// let params = {
// password: "329653",
// roleSid: "",
// token: "",
// userName: "15097329653",
// verifyCode: ""
// }
// login1(params).then(res => {
// this.token = res.data.token
// window.sessionStorage.setItem('token', res.data.token)
// })
// }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.webindex { .webindex {
width: 100%; padding: 20px; width: 100%;
padding: 20px;
height: 100%; height: 100%;
background: radial-gradient(#fff,#f5f7f4, #fff); background: radial-gradient(#fff, #f5f7f4, #fff);
} }
.tops { .tops {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-start;align-items: flex-start; justify-content: flex-start;
padding: 0px; align-items: flex-start;
margin: 0px; padding: 0px;
} margin: 0px;
.tops .topbox { }
width: 25%;
margin: 0 20px 0 0; .tops .topbox {
background-color: #fff; width: 25%;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; margin: 0 20px 0 0;
padding: 10px; background-color: #fff;
} box-shadow: 0px 0px 10px #E9E9E9;
.tops .topbox:last-of-type { border-radius: 5px;
margin: 0; padding: 10px;
} }
.tops .topbox .toptitle {
font-size: 20px; .tops .topbox:last-of-type {
padding: 10px 20px; margin: 0;
font-weight: bold; color: #333;font-size: 16px; }
border-bottom: 1px solid #ececee;
} .tops .topbox .toptitle {
.tops .topbox .mids { font-size: 20px;
display: flex; padding: 10px 20px;
flex-direction: row; font-weight: bold;
flex-wrap: nowrap; color: #333;
justify-content: flex-start;align-items: center; font-size: 16px;
margin: 0; border-bottom: 1px solid #ececee;
padding: 20px ; }
}
.tops .topbox .mids .lefts{width: 100px;} .tops .topbox .mids {
.tops .topbox .mids .lefts .iconbox { display: flex;
border-radius: 10px; flex-direction: row;
line-height: 80px; flex-wrap: nowrap;
width: 80px; justify-content: flex-start;
height: 80px; align-items: center;
color: #fff; margin: 0;
font-size: 36px;text-align: center; padding: 20px;
} }
.tops .topbox .mids .lefts {
width: 100px;
}
.tops .topbox .mids .lefts .iconbox {
border-radius: 10px;
line-height: 80px;
width: 80px;
height: 80px;
color: #fff;
font-size: 36px;
text-align: center;
}
.iconbox_red { .iconbox_red {
background-color: #df2f07; background-color: #df2f07;
} }
.iconbox_yellow { .iconbox_yellow {
background-color: #ff7521; background-color: #ff7521;
} }
.iconbox_green { .iconbox_green {
background-color: #07C160; background-color: #07C160;
} }
.iconbox_blue {
background-color: #3f9bfa; .iconbox_blue {
} background-color: #3f9bfa;
.iconbox_zi { }
background-color: #6421ff;
} .iconbox_zi {
background-color: #6421ff;
.iconbox_fen { }
background-color: #9b2efb;
} .iconbox_fen {
.tops .topbox .mids .rights {flex: 1; background-color: #9b2efb;
padding: 2px 0 2px 10px; }
}
.tops .topbox .mids .rights .note { .tops .topbox .mids .rights {
color: #333; flex: 1;
font-size: 14px; padding: 2px 0 2px 10px;
padding: 0 0 3px 0; }
}
.tops .topbox .mids .rights .note span { .tops .topbox .mids .rights .note {
font-size: 20px; color: #333;
padding: 0 5px; font-size: 14px;
} padding: 0 0 3px 0;
}
/* 饼图部分 */
.tbars { .tops .topbox .mids .rights .note span {
display: flex; font-size: 20px;
flex-direction: row; padding: 0 5px;
flex-wrap: nowrap; }
justify-content: flex-start;align-items: flex-start;
margin: 0; /* 饼图部分 */
padding: 20px 0 0 0; .tbars {
} display: flex;
.tbar { flex-direction: row;
width: 25%; flex-wrap: nowrap;
margin: 0 20px 0 0; justify-content: flex-start;
background-color: #fff; align-items: flex-start;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; margin: 0;
padding: 10px; padding: 20px 0 0 0;
} }
.tbar:last-of-type {
margin: 0; .tbar {
} width: 25%;
.tbar0 { margin: 0 20px 0 0;
border-bottom: 0px solid #032ab8; background-color: #fff;
} box-shadow: 0px 0px 10px #E9E9E9;
.tbar .title { border-radius: 5px;
font-size: 20px; padding: 10px;
padding: 10px 20px; }
font-weight: bold; color: #333;font-size: 16px;
border-bottom: 1px solid #ececee; .tbar:last-of-type {
} margin: 0;
.tbar .title span { }
padding: 0 10px 0 0;
} .tbar0 {
.tbar .bar { border-bottom: 0px solid #032ab8;
display: flex; }
flex-direction: row;
flex-wrap: nowrap; .tbar .title {
justify-content: flex-start;align-items: center; font-size: 20px;
margin: 0; padding: 10px 20px;
padding: 0px; font-weight: bold;
height: 190px; color: #333;
font-size: 16px;
} border-bottom: 1px solid #ececee;
.con { }
padding: 20px 0;
display: flex; .tbar .title span {
flex-direction: row; padding: 0 10px 0 0;
flex-wrap: nowrap; }
justify-content: space-around;
} .tbar .bar {
.news { display: flex;
width: 25%; flex-direction: row;
margin: 0 20px 0 0; flex-wrap: nowrap;
background-color: #fff; justify-content: flex-start;
box-shadow:0px 0px 10px #E9E9E9;border-radius: 5px; align-items: center;
padding: 10px; margin: 0;
} padding: 0px;
.news:last-of-type { height: 190px;
margin: 0;
} }
.news .title {
display: flex; .con {
flex-direction: row; padding: 20px 0;
flex-wrap: nowrap; display: flex;
justify-content: space-between; flex-direction: row;
align-items: center; flex-wrap: nowrap;
padding: 10px 10px 10px 20px; justify-content: space-around;
border-bottom: 1px solid #ececee; }
}
.news {
.news .title .newstits { width: 25%;
font-weight: bold; color: #333;font-size: 16px; margin: 0 20px 0 0;
} background-color: #fff;
box-shadow: 0px 0px 10px #E9E9E9;
.news .title .more {text-align: right; border-radius: 5px;
cursor: pointer;color: #6c6a6a;font-size: 14px; padding: 10px;
} }
.news .content { .news:last-of-type {
padding: 10px 0; margin: 0;
height: 210px; }
overflow: hidden;
} .news .title {
display: flex;
.news .content .newsli { flex-direction: row;
display: flex; flex-wrap: nowrap;
flex-direction: row; justify-content: space-between;
flex-wrap: nowrap; align-items: center;
justify-content: space-between; padding: 10px 10px 10px 20px;
margin: 0px 0px; border-bottom: 1px solid #ececee;
padding: 5px 10px; }
border-bottom: 1px solid #ececee;
} .news .title .newstits {
.news .content .newsli .dot { font-weight: bold;
padding: 0px 8px 0 0; color: #333;
font-size: 18px; font-size: 16px;
height: 25px; }
line-height: 25px;color: #047cf7;
} .news .title .more {
.news .content .newsli .tit { text-align: right;
padding: 0px 0; cursor: pointer;
font-size: 14px; color: #6c6a6a;
flex: 3; font-size: 14px;
height: 25px; }
overflow: hidden;
line-height: 25px; .news .content {
cursor: pointer; padding: 10px 0;
} height: 210px;
overflow: hidden;
// .news .content .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;} }
.news .content .newsli .time {
padding: 0px 0; .news .content .newsli {
color: #666666; display: flex;
text-align: right;font-size: 14px; flex-direction: row;
width: 100px; flex-wrap: nowrap;
height: 25px; justify-content: space-between;
line-height: 25px; margin: 0px 0px;
} padding: 5px 10px;
</style> border-bottom: 1px solid #ececee;
}
.news .content .newsli .dot {
padding: 0px 8px 0 0;
font-size: 18px;
height: 25px;
line-height: 25px;
color: #047cf7;
}
.news .content .newsli .tit {
padding: 0px 0;
font-size: 14px;
flex: 3;
height: 25px;
overflow: hidden;
line-height: 25px;
cursor: pointer;
}
// .news .content .newsli .tel{padding: 10px 0;color: #84d1f5;flex: 1;text-align: center;}
.news .content .newsli .time {
padding: 0px 0;
color: #666666;
text-align: right;
font-size: 14px;
width: 100px;
height: 25px;
line-height: 25px;
}
</style>

2
src/views/shebeirizhi/shebeirizhiList.vue
View File

@ -12,7 +12,7 @@
maxlength="20"></el-date-picker> maxlength="20"></el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="设备名称"> <el-form-item label="设备名称">
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择设备名称"> <el-select v-model="listQuery.params.supplierType1" filterable clearable placeholder="请选择设备名称">
<el-option v-for="item in supplierType_list" :key="item.id" :label="item.title" :value="item.id" /> <el-option v-for="item in supplierType_list" :key="item.id" :label="item.title" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>

2
src/views/shebeitaizhang/shebeitaizhangList.vue
View File

@ -43,7 +43,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="选择楼层"> <el-form-item label="选择楼层">
<el-select v-model="listQuery.params.supplierType" filterable clearable placeholder="请选择楼层"> <el-select v-model="listQuery.params.supplierType1" filterable clearable placeholder="请选择楼层">
<el-option v-for="item in floor_list" :key="item.id" :label="item.title" :value="item.id" /> <el-option v-for="item in floor_list" :key="item.id" :label="item.title" :value="item.id" />
</el-select> </el-select>
</el-form-item> </el-form-item>

2
vue.config.js
View File

@ -24,7 +24,7 @@ module.exports = {
*在大多数情况下，请使用“/”！！！ *在大多数情况下，请使用“/”！！！
*详细信息：https://cli.vuejs.org/config/#publicpath *详细信息：https://cli.vuejs.org/config/#publicpath
*/ */
publicPath: process.env.NODE_ENV === 'production' ? '/monitor/' : '/', publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
outputDir: 'monitor-ui', outputDir: 'monitor-ui',
assetsDir: 'static', assetsDir: 'static',
lintOnSave: process.env.NODE_ENV === 'development', lintOnSave: process.env.NODE_ENV === 'development',

Write Preview
Loading…
Cancel
Save