chengdandan
/
fayuanjiangbei
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
lixiaobang 2023-04-14 17:57:33 +08:00
parent 5bc8cf9c2f
commit 6fc6118904
13 changed files with 1401 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -16,6 +16,7 @@
"less": "^4.1.3",
"less-loader": "^5.0.0",
"moment": "^2.29.4",
"mqtt": "^4.3.7",
"pdfjs-dist": "2.5.207",
"postcss-px2rem-exclude": "^0.0.6",
"semver": "^7.4.0",

5
src/App.vue
View File

@ -28,8 +28,7 @@
<div class="menu">
<div class="menuList">
<div class="menuBtn" v-for="(item, index) in menuBtn" :key="index" @click="menuChange(index)" :class="{menuAc : menuAc == index}">
<img :src="item.icon" style="width: 55%;
height: 71%;" />
<img :src="item.icon" :style="{'wdith':menuAc == index ? '75%':'55%','height':menuAc == index ? '85%':'71%'}"/>
<div style="font-size: 0.55rem">{{ item.name }}</div>
</div>
</div>
@ -109,7 +108,6 @@ import {getData} from './api/index.js'
}
},
created() {
this.lastTime = new Date().getTime();
this.fun();
},
mounted() {
@ -133,7 +131,6 @@ import {getData} from './api/index.js'
},
methods:{
//菜单选中
//菜单选中
menuChange(index){
this.menuAc = index
this.menuBtn.forEach((item,index) => {

17
src/api/index.js
View File

@ -1,9 +1,16 @@
import axios from 'axios'
if (process.env.NODE_ENV === 'development') {
axios.defaults.baseURL = '/api'
} else if (process.env.NODE_ENV === 'production') {
axios.defaults.baseURL = '/api'
}
// if (process.env.NODE_ENV === 'development') {
// axios.defaults.baseURL = '/api'
// } else if (process.env.NODE_ENV === 'production') {
// axios.defaults.baseURL = '/api'
// }
// 设置请求头参数 common 为设置所有的接口 post为设置post请求的接口
// axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
//
// export const getFindlist = (params) => {
// return axios.get('api/services/svBuildingInfo/findlist', {
// params
// })
// };

BIN
src/assets/images/moreBg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 B

56
src/main.js
View File

@ -15,7 +15,7 @@ Vue.prototype.$echarts = echarts
import moment from 'moment'
//定义一个全局过滤器实现日期格式化
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
Vue.filter('datefmt', function (input, fmtstring) {//当input为时间戳时，需转为Number类型
// 使用momentjs这个日期格式化类库实现日期的格式化功能
return moment(input).format(fmtstring);
});
@ -23,7 +23,61 @@ Vue.prototype.$moment = moment
import 'amfe-flexible'; //引入amfe-flexible做rem适配
import './assets/index.css';
import mqttConfig from './utils/mqttConfig.js';
Vue.config.productionTip = false
//mqtt订阅
var currentTopics = null;
var client = null; //mqtt客户端连接
var callback = null; //回调
let mqtt = new mqttConfig(currentTopics); // 初始化mqtt
//订阅mqtt
window.PubScribe = function (topic, _callback,) {
callback = _callback;
if (currentTopics != null) {
//取消currentTopics主题订阅
if (client != null) {
client.unsubscribe(currentTopics);
currentTopics = null;
}
}
if (client == null) {
client = mqtt.createConnect(() => {
//客户端订阅主题
client.subscribe(['/SC/pub/uwb', '/SC/pub/env'], {
qos: 0
}, (err) => {
if (!err) {
console.log("订阅成功0", ['/SC/pub/uwb', '/SC/pub/env']);
} else {
console.log('订阅失败');
}
});
client.on("message", (topic, message) => {
//数据分类
try {
callback(topic, message);
} catch (error) {
}
});
});
} else {
if (topic != null) {
console.log("topic", topic)
currentTopics = topic;
client.subscribe(currentTopics, {
qos: 0
}, (err) => {
if (!err) {
console.log("订阅成功1");
} else {
console.log('消息订阅失败！')
}
});
}
}
}
new Vue({
router,
render: h => h(App)

104
src/utils/mqttConfig.js Normal file
View File

@ -0,0 +1,104 @@
import mqtt from "mqtt";
import Vue from 'vue'
var vm = new Vue();
// var ip = window.location.host.split(":")[0];
// console.log("ip",ip)
class mqttHandle {
constructor() {
this.connect = {
// host: vm.mqttHost,
// port: vm.mqttPort,
endpoint: "/mqtt",
clean: true, // 保留会话
cleanSession: true,
connectTimeout: 7000, // 超时时间
reconnectPeriod: 7000, // 重连时间间隔
host: '175.27.191.156',
port: '10083',
// 认证信息
// clientId: Number(new Date()).toString(),
clientId: 'mqttjs_23dda38f34',
username: "site",
password: "site",
}
// this.subscription = {
// topic: subscribe, //需要传入数组的包含订阅的名称
// qos: 0,
// }
this.mqttClient = null;
}
/**
* 创建链接
* @returns client
*/
createConnect(onConnected) {
//配置链接
const { host, port, endpoint, ...options } = this.connect;
console.log("this.connect.host", this.connect.host)
const connectUrl = 'ws://175.27.191.156:10083/mqtt';
// const connectUrl = `ws://${this.connect.host}:${this.connect.port}`;
// if (!client.connected) {
// client.on('connect', function () {
// console.log('连接成功')
// })
// } else {
// client.publish('test/clientE', ms, {'qos': 2}, function (err) {
// if (err) {
// console.log(err)
// }
// })
// }
if (this.mqttClient == undefined) {
this.mqttClient = mqtt.connect(connectUrl, options);
this.mqttClient.on("connect", () => {
console.log("Connection succeeded!");
onConnected();
});
this.mqttClient.on('reconnect', (error) => {
console.log('正在重连')
})
this.mqttClient.on("error", (error) => {
console.log("Connection failed");
});
//配置topic
// const { topic, qos } = this.subscription;
// console.log(topic, qos,'topic, qos');
// this._client.subscribe(topic, { qos: qos }, (error, res) => {
// if (error) {
// console.log("Subscribe to topics error", error);
// return;
// }
// this.subscribeSuccess = true;
// console.log("Subscribe to topics res", res[0].qos, res[0].topic);
// });
}
return this.mqttClient;
// try {
// } catch (error) {
// console.log("mqtt.connect error", error);
// }
}
MySub(subscriptions) {
this.mqttClient.subscribe(subscriptions, { qos: 0 }, (err) => {
if (!err) {
console.log("订阅成功：" + subscriptions);
} else {
console.log('消息订阅失败！' + subscriptions)
}
});
}
MyUnSub(subscription) {
}
}
export default mqttHandle;

548
src/views/alarm.vue
View File

@ -4,7 +4,7 @@
<div class="leftOne">
<div class="title">预计统计列表 一级</div>
<div class="courtHouse">
<div
<div
class="warnListContent"
v-for="(item, index) in warnList1"
:key="index"
@ -12,26 +12,30 @@
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%;float: left;">
报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
<div class="warnArrayBox">
<div style="margin-top: 2%; float: left">
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div>
<div
style="margin-top: 2%;">
报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span>
<div style="margin-top: 2%">
报警原因:<span class="spancolor">{{
"「" + item.cause + "」"
}}</span
><span>{{ item.content }}</span>
</div>
<div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{
"「" + item.risk + "」"
}}</span>
</div>
<div style="margin-top: 2%;float: left;">
风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="leftTwo">
<div class="title">预计统计列表 二级</div>
<div class="courtHouse">
<div
<div class="title">预计统计列表 二级</div>
<div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList2"
:key="index"
@ -39,17 +43,21 @@
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%;float: left;">
报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
<div class="warnArrayBox">
<div style="margin-top: 2%; float: left">
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div>
<div
style="margin-top: 2%;">
报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span>
<div style="margin-top: 2%">
报警原因:<span class="spancolor">{{
"「" + item.cause + "」"
}}</span
><span>{{ item.content }}</span>
</div>
<div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{
"「" + item.risk + "」"
}}</span>
</div>
<div style="margin-top: 2%;float: left;">
风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
</div>
</div>
</div>
</div>
@ -58,32 +66,35 @@
<!-- <div class="leftThree"></div> -->
</div>
<div class="right">
<div class="title">预计统计列表 三级</div>
<div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList3"
:key="index"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%;float: left;">
报警时间:<span style="margin:0 0.5rem;">{{ item.time }}</span>
</div>
<div
style="margin-top: 2%;">
报警原因:<span class="spancolor">{{'「'+ item.cause+'」' }}</span><span>{{item.content}}</span>
</div>
<div style="margin-top: 2%;float: left;">
风险等级:<span class="spancolor">{{ '「'+ item.risk +'」'}}</span>
</div>
<div class="title">预计统计列表 三级</div>
<div class="courtHouse">
<div
class="warnListContent"
v-for="(item, index) in warnList3"
:key="index"
>
<div class="warnArray">
<span>{{ item.id }}</span>
<img :src="item.icon" style="width: 7%; margin-left: 3%" />
<div class="warnArrayBox">
<div style="margin-top: 2%; float: left">
报警时间:<span style="margin: 0 0.5rem">{{ item.time }}</span>
</div>
<div style="margin-top: 2%">
报警原因:<span class="spancolor">{{
"「" + item.cause + "」"
}}</span
><span>{{ item.content }}</span>
</div>
<div style="margin-top: 2%; float: left">
风险等级:<span class="spancolor">{{
"「" + item.risk + "」"
}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
@ -93,14 +104,14 @@ export default {
name: "court",
data() {
return {
//报警数组 一级
warnList1: [
//报警数组 一级
warnList1: [
{
id: "1",
icon: require("../assets/images/warnRed.png"),
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "一级",
},
{
@ -108,50 +119,50 @@ export default {
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "一级",
},
{
id: "3",
icon: require("../assets/images/warnRed.png"),
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "一级",
},
{
{
id: "4",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "一级",
},
{
{
id: "5",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "一级",
},
{
{
id: "6",
icon: require("../assets/images/warnRed.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "一级",
},
],
],
//报警数组 二级
warnList2: [
warnList2: [
{
id: "1",
icon: require("../assets/images/warnOrange.png"),
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "二级",
},
{
@ -159,50 +170,50 @@ export default {
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "二级",
},
{
id: "3",
icon: require("../assets/images/warnOrange.png"),
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "二级",
},
{
{
id: "4",
icon: require("../assets/images/warnOrange.png"),
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "二级",
},
{
{
id: "5",
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "二级",
},
{
{
id: "6",
icon: require("../assets/images/warnOrange.png"),
icon: require("../assets/images/warnOrange.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "二级",
},
],
],
//报警数组 三级
warnList3: [
warnList3: [
{
id: "1",
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "三级",
},
{
@ -210,59 +221,59 @@ export default {
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "三级",
},
{
id: "3",
icon: require("../assets/images/warnBlue.png"),
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "三级",
},
{
{
id: "4",
icon: require("../assets/images/warnBlue.png"),
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "三级",
},
{
{
id: "5",
icon: require("../assets/images/warnBlue.png"),
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "三级",
},
{
{
id: "6",
icon: require("../assets/images/warnBlue.png"),
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "三级",
},
{
id: "7",
icon: require("../assets/images/warnBlue.png"),
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "三级",
},
{
id: "8",
icon: require("../assets/images/warnBlue.png"),
icon: require("../assets/images/warnBlue.png"),
time: "2023年03月18日 15:26:08",
cause: "机房02机箱",
content:'发生事故',
content: "发生事故",
risk: "三级",
},
],
courtList: [
],
courtList: [
{
name: "空闲中",
count: "7",
@ -280,7 +291,7 @@ export default {
count: "86",
},
], // 智慧法庭小房子
houseList: ["blueHouse", "redHouse", "yellowHouse","orangeHouse"],
houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
};
},
mounted() {},
@ -299,44 +310,47 @@ export default {
justify-content: space-between;
padding: 0 0.3% 0 0.3%;
box-sizing: border-box;
.left {
width: 25.5%;
height: 95%;
padding: 0.5% 0.3% 1% 0.3%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: leftAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.leftOne {
width: 100%;
height: 40%;
.title {
width: 100%;
height: 14%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
display: flex;
align-items: center;
padding-left: 12%;
box-sizing: border-box;
}
width: 100%;
height: 14%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
display: flex;
align-items: center;
padding-left: 12%;
box-sizing: border-box;
}
.courtHouse {
height: 95%;
width: 100%;
width: 100%;
display: block;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
height: 32%;
width: 95%;
color: #fff;
@ -354,164 +368,188 @@ export default {
align-items: center;
justify-content: flex-start;
line-height: 2;
.warnArrayBox{
margin-left: 3%;
span{
margin:0.5rem;
}
.spancolor{
color: rgb(218, 25, 25);
}
.warnArrayBox {
margin-left: 3%;
span {
margin: 0.5rem;
}
.spancolor {
color: rgb(218, 25, 25);
}
}
}
}
}
}
}
.leftTwo {
width: 100%;
height: 51%;
}
@keyframes leftAnimation {
0% {
position: relative;
left: 38%;
transform: scale(0);
}
100% {
position: relative;
left: 0%;
transform: scale(1);
}
}
.leftTwo {
width: 100%;
height: 51%;
// position: relative;
.title {
width: 100%;
height: 12%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
display: flex;
align-items: center;
padding-left: 12%;
box-sizing: border-box;
}
.courtHouse {
height: 93%;
width: 100%;
display: block;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
height: 28%;
width: 95%;
color: #fff;
.title {
width: 100%;
height: 12%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
display: flex;
align-items: center;
padding-left: 12%;
box-sizing: border-box;
}
.courtHouse {
height: 93%;
width: 100%;
display: block;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
height: 28%;
width: 95%;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left: 3%;
box-sizing: border-box;
border-bottom: 0.08rem solid #eee;
margin-left: 0.5rem;
.warnArray {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
align-items: center;
padding-left: 3%;
box-sizing: border-box;
border-bottom: 0.08rem solid #eee;
margin-left: 0.5rem;
.warnArray {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
line-height: 2;
.warnArrayBox{
// display: flex;
// flex-direction: column;
// align-items: flex-start;
margin-left: 3%;
span{
margin:0.5rem;
}
.spancolor{
color: darkorange;
}
justify-content: flex-start;
line-height: 2;
.warnArrayBox {
// display: flex;
// flex-direction: column;
// align-items: flex-start;
margin-left: 3%;
span {
margin: 0.5rem;
}
.spancolor {
color: darkorange;
}
}
}
}
#caseEcharts{
width: 100%;
height: calc(100% - 16%);
border: 1px solid blue;
}
}
.leftThree {
#caseEcharts {
width: 100%;
height: 40%;
border: 1px solid white;
height: calc(100% - 16%);
border: 1px solid blue;
}
}
.right {
width: 25.5%;
height: 95%;
padding: 0.5% 0.3% 1% 0.3%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
.title {
width: 100%;
height: 5%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
display: flex;
align-items: center;
padding-left: 12%;
box-sizing: border-box;
}
.courtHouse {
height: 95%;
.leftThree {
width: 100%;
display: block;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
height: 14%;
width: 95%;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left: 3%;
box-sizing: border-box;
border-bottom: 0.08rem solid #eee;
margin-left: 0.5rem;
.warnArray {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
line-height: 2;
.warnArrayBox{
// display: flex;
// flex-direction: column;
// align-items: flex-start;
margin-left: 3%;
span{
margin:0.5rem;
}
.spancolor{
color: deepskyblue;
}
}
height: 40%;
border: 1px solid white;
}
}
.right {
width: 25.5%;
height: 95%;
padding: 0.5% 0.3% 1% 0.3%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: rightAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.title {
width: 100%;
height: 5%;
background: url("../assets/images/title.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 0.7rem;
display: flex;
align-items: center;
padding-left: 12%;
box-sizing: border-box;
}
.courtHouse {
height: 95%;
width: 100%;
display: block;
flex-wrap: nowrap;
justify-content: space-around;
align-items: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 0;
}
.warnListContent {
height: 14%;
width: 95%;
color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
padding-left: 3%;
box-sizing: border-box;
border-bottom: 0.08rem solid #eee;
margin-left: 0.5rem;
.warnArray {
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
line-height: 2;
.warnArrayBox {
// display: flex;
// flex-direction: column;
// align-items: flex-start;
margin-left: 3%;
span {
margin: 0.5rem;
}
.spancolor {
color: deepskyblue;
}
}
}
}
}
}
}
@keyframes rightAnimation {
0% {
position: relative;
right: 38%;
transform: scale(0);
}
100% {
position: relative;
right: 0%;
transform: scale(1);
}
}
.caseTitle{
.caseTitle {
width: 23%;
height: 10%;
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
@ -521,7 +559,7 @@ export default {
display: flex;
align-items: center;
padding-left: 5%;
box-sizing: border-box;
margin-top: 2%;
box-sizing: border-box;
margin-top: 2%;
}
</style>

63
src/views/court.vue
View File

@ -103,7 +103,15 @@
</div>
<div style="padding-left: 5%" class="rowDetail">
<span>案件名称:</span>
<span style="width: 80%;display: flex;justify-content: flex-end;text-align: left;">{{ item.caseName }}</span>
<span
style="
width: 80%;
display: flex;
justify-content: flex-end;
text-align: left;
"
>{{ item.caseName }}</span
>
</div>
<div style="padding-left: 5%" class="rowDetail">
<span>开庭时间:</span>
@ -115,7 +123,15 @@
</div>
<div style="padding-left: 5%" class="rowDetail">
<span>案件案由:</span>
<span style="width: 80%;display: flex;justify-content: flex-end;text-align: left;">{{ item.brief }}</span>
<span
style="
width: 80%;
display: flex;
justify-content: flex-end;
text-align: left;
"
>{{ item.brief }}</span
>
</div>
<div style="padding-left: 5%" class="rowDetail">
<span>当事人:</span>
@ -299,7 +315,8 @@ export default {
{
id: "2",
caseCode: "(2022)苏0192民初14272号",
caseName: "崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;",
caseName:
"崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;",
time: "2023-01-16 09:00--09:30",
court: "新楼第十五法庭",
brief: "买卖合同纠纷",
@ -781,6 +798,10 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: leftAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.leftOne {
width: 100%;
height: 20%;
@ -898,6 +919,18 @@ export default {
}
}
}
@keyframes leftAnimation {
0% {
position: relative;
left: 38%;
transform: scale(0);
}
100% {
position: relative;
left: 0%;
transform: scale(1);
}
}
.right {
width: 24.7%;
height: 95%;
@ -907,6 +940,10 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: rightAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.caseList {
width: 100%;
height: calc(100% - 5%);
@ -937,7 +974,7 @@ export default {
color: #fff;
}
/deep/ .el-select-dropdown {
background: rgba(0,23,28,0.3);
background: rgba(0, 23, 28, 0.3);
border: 1px solid rgb(1, 176, 202);
border-radius: 5px;
// left: -3px !important;
@ -988,12 +1025,24 @@ export default {
}
}
}
::-webkit-scrollbar {
display: none;
}
::-webkit-scrollbar {
display: none;
}
}
}
}
@keyframes rightAnimation {
0% {
position: relative;
right: 38%;
transform: scale(0);
}
100% {
position: relative;
right: 0%;
transform: scale(1);
}
}
}
.title {
width: 100%;

458
src/views/energySaving.vue
View File

@ -2,7 +2,10 @@
<div class="energy">
<div class="left">
<div class="leftOne">
<div class="title">设备用能统计数据</div>
<div class="title">
设备用能统计数据
<img src="../assets/images/moreBg.png" @click="equipmentMore" />
</div>
<div class="equipment">
<div
class="equipmentEnergy"
@ -91,9 +94,19 @@
</div>
<div class="right">
<div class="rightOne">
<div class="title">能耗计量分析</div>
<div class="title">能耗计量同比分析</div>
<div id="calculateEcharts"></div>
</div>
<div class="rightThree">
<div class="title" style="height: 16%">能耗计量环比分析</div>
<!-- <div class="video">
<img
src="../assets/images/camera.png"
style="width: 100%; height: 100%"
/>
</div> -->
<div id="calculateEchartsTwo"></div>
</div>
<div class="rightTwo">
<div class="title">太阳能光伏发电系统数据</div>
<div class="sun">
@ -118,15 +131,30 @@
</div>
</div>
</div>
<div class="rightThree">
<div class="title" style="height: 16%">视频联动</div>
<div class="video">
<img
src="../assets/images/camera.png"
style="width: 100%; height: 100%"
/>
</div>
<div class="equipmentShow" v-show="equipmentShow">
<div class="equipContent">
<div
class="equipmentEnergy"
v-for="(item, index) in equipmentList"
:key="index"
>
<div class="equipmentList">
<span>{{ item.count }}</span>
<span style="color: rgb(225, 177, 25); font-size: 0.4rem">KWH</span>
</div>
<div class="equipmentName">
{{ item.name }}
<el-input v-model="item.value" placeholder="请输入阈值"></el-input>
</div>
</div>
</div>
<div class="close" @click="closeEquipmentShow"></div>
<div class="subCommit">
<el-button type="primary">提交</el-button>
<el-button type="info">清空</el-button>
</div>
</div>
</div>
</template>
@ -140,38 +168,47 @@ export default {
{
name: "热回收机组1",
count: "28.4",
value: "",
},
{
name: "热回收机组2",
count: "28.4",
value: "",
},
{
name: "热回收机组3",
count: "28.4",
value: "",
},
{
name: "热回收机组4",
count: "28.4",
value: "",
},
{
name: "热回收机组5",
count: "28.4",
value: "",
},
{
name: "热回收机组6",
count: "28.4",
value: "",
},
{
name: "热回收机组7",
count: "28.4",
value: "",
},
{
name: "热回收机组8",
count: "28.4",
value: "",
},
{
name: "热回收机组9",
count: "28.4",
value: "",
},
], //设备用能数据
equipmentBtnList: [
@ -254,18 +291,55 @@ export default {
unit: "h",
},
{
name: "运行状态",
name: "故障报警",
icon: require("../assets/images/jieNengImg/warning.png"),
count: "无",
unit: "",
},
],
equipmentShow: false,
};
},
mounted() {
this.calculateEcharts();
this.calculateEchartsTwo();
window.createMqtt = this.createMqtt();
},
methods: {
//mqtt订阅数据
createMqtt() {
//创建链接，接收数据
let topicSends = ["/SC/pub/uwb", "/SC/pub/env"];
window.PubScribe(topicSends, this.realInfo);
},
/** 实时数据分类 */
realInfo(topic, message) {
let that = this;
switch (topic) {
// 接收托片
case "/SC/pub/uwb":
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
// if ( msg.params.设备运行状态 == 1) {
// msg.params.设备运行状态 = '正常'
// }else{
// msg.params.设备运行状态 = '异常'
// }
that.sunList[0].count = msg.params.光伏逆变器日发电量;
that.sunList[1].count = msg.params.光伏逆变器总发电量;
that.sunList[2].count = msg.params.有功功率;
that.sunList[3].count = msg.params.设备运行状态;
that.sunList[4].count = msg.params.机器总运行时间;
that.sunList[5].count = msg.params.警告信息;
} catch (error) {}
console.log(error);
break;
}
},
//预警点击
changeWarn(index) {
this.equipmentBtnAc = index;
@ -275,27 +349,22 @@ export default {
let chartData = [
{
value: 42,
name: "空调",
name: "主楼",
},
{
value: 24,
name: "动力",
},
{
value: 13,
name: "插座",
},
{
value: 48,
name: "特种",
name: "辅楼",
},
// {
// value: 13,
// name: "插座",
// },
// {
// value: 48,
// name: "特种",
// },
];
let colorList = [
"red",
"rgb(255,122,0)",
"rgb(0,213,243)",
"rgb(219,241,243)",
];
let colorList = ["red", "rgb(255,122,0)"];
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
let gap = (1 * sum) / 100;
let pieData1 = [];
@ -333,7 +402,7 @@ export default {
let option = {
tooltip: {
show: false,
show: true,
backgroundColor: "rgba(17,95,234,0.5)",
textStyle: {
color: "#F0F0F0",
@ -343,7 +412,6 @@ export default {
show: true,
right: "10%",
top: "center",
icon: "rect",
itemWidth: 15,
itemHeight: 15,
@ -485,6 +553,214 @@ export default {
};
myChart.setOption(option);
},
calculateEchartsTwo() {
let imgSrc = "/img/car.png";
let chartData = [
{
value: 42,
name: "主楼",
},
{
value: 24,
name: "辅楼",
},
];
let colorList = ["rgb(0,213,243)", "rgb(219,241,243)"];
let sum = chartData.reduce((per, cur) => per + cur.value, 0);
let gap = (1 * sum) / 100;
let pieData1 = [];
let pieData2 = [];
let gapData = {
name: "",
value: gap,
itemStyle: {
color: "transparent",
},
};
for (let i = 0; i < chartData.length; i++) {
// 第一圈数据
pieData1.push({
...chartData[i],
itemStyle: {
borderRadius: 0,
},
});
pieData1.push(gapData);
// 第二圈数据
pieData2.push({
...chartData[i],
itemStyle: {
color: colorList[i],
opacity: 0.1,
},
});
pieData2.push(gapData);
}
var myChart = this.$echarts.init(
document.getElementById("calculateEchartsTwo")
);
let option = {
tooltip: {
show: true,
backgroundColor: "rgba(17,95,234,0.5)",
textStyle: {
color: "#F0F0F0",
},
},
legend: {
show: true,
right: "10%",
top: "center",
icon: "rect",
itemWidth: 15,
itemHeight: 15,
itemGap: 20,
textStyle: {
color: "auto",
rich: {
name: {
padding: [0, 10, 0, 8],
color: "auto",
fontSize: "0.7rem",
},
percent: {
padding: [0, 0, 0, 8],
color: "auto",
fontSize: "0.7rem",
},
},
},
formatter: (name) => {
let item = chartData.find((i) => {
return i.name == name;
});
let p = ((item.value / sum) * 100).toFixed(0);
return "{name|" + name + "}" + "{percent|" + p + "}" + "%";
},
},
graphic: {
elements: [
{
type: "image",
z: 3,
style: {
image: imgSrc,
width: 30,
height: 30,
},
top: "middle",
left: "25%",
scale: [1.5, 1.5],
},
],
},
grid: {
top: 35,
right: 30,
bottom: 20,
left: 30,
},
color: colorList,
series: [
{
name: "消息来源",
type: "pie",
// roundCap: true,
radius: ["70%", "80%"],
center: ["30%", "50%"],
// avoidLabelOverlap: true,
label: {
show: false,
},
labelLine: {
show: false,
},
data: pieData1,
},
{
type: "pie",
radius: ["70%", "60%"],
center: ["30%", "50%"],
gap: 1.71,
label: {
show: false,
},
labelLine: {
show: false,
},
silent: true,
data: pieData2,
},
{
type: "pie",
center: ["30%", "50%"],
radius: [0, "45.6%"],
label: {
show: false,
},
labelLine: {
show: false,
},
itemStyle: {
color: "rgba(5,37,95,0.3)",
},
silent: true,
data: [
{
value: 100,
name: "",
},
],
},
{
name: "",
type: "gauge",
detail: false,
splitNumber: 10, //刻度数量
radius: "65%", //图表尺寸
center: ["30%", "50%"],
startAngle: 0, //开始刻度的角度
endAngle: -356, //结束刻度的角度
axisLine: {
show: false,
lineStyle: {
width: 0,
shadowBlur: 0,
},
},
axisTick: {
show: true,
lineStyle: {
color: "#fff",
width: 1,
},
length: 2,
splitNumber: 3,
},
splitLine: {
show: false,
length: 5,
lineStyle: {
color: "#194482",
},
},
axisLabel: {
show: false,
},
},
],
};
myChart.setOption(option);
},
//设备更多
equipmentMore() {
this.equipmentShow = true;
},
closeEquipmentShow() {
this.equipmentShow = false;
},
},
components: {},
};
@ -507,6 +783,10 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: leftAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.leftOne {
width: 100%;
height: 35%;
@ -516,9 +796,13 @@ export default {
display: flex;
flex-wrap: wrap;
overflow: auto;
position: relative;
.equipmentEnergy {
width: 25%;
height: 50%;
display: inline-block;
white-space: nowrap;
animation: 10s wordsLoop linear infinite normal;
.equipmentList {
width: 100%%;
height: 80%;
@ -543,6 +827,26 @@ export default {
display: none;
}
}
@keyframes wordsLoop {
0% {
transform: translateY(100%);
-webkit-transform: translateY(100%);
}
100% {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}
}
@-webkit-keyframes wordsLoop {
0% {
transform: translateY(100%);
-webkit-transform: translateY(100%);
}
100% {
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}
}
.leftTwo {
width: 100%;
height: calc(100% - 35%);
@ -601,6 +905,18 @@ export default {
}
}
}
@keyframes leftAnimation {
0% {
position: relative;
left: 38%;
transform: scale(0);
}
100% {
position: relative;
left: 0%;
transform: scale(1);
}
}
.right {
width: 24.7%;
height: 95%;
@ -610,6 +926,10 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: rightAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.rightOne {
width: 100%;
height: 30%;
@ -648,6 +968,22 @@ export default {
width: 98%;
border: 3px solid rgb(1, 176, 202);
}
#calculateEchartsTwo {
height: calc(100% - 23%);
width: 98%;
}
}
}
@keyframes rightAnimation {
0% {
position: relative;
right: 38%;
transform: scale(0);
}
100% {
position: relative;
right: 0%;
transform: scale(1);
}
}
}
@ -662,5 +998,71 @@ export default {
align-items: center;
padding-left: 12%;
box-sizing: border-box;
justify-content: space-between;
}
.equipmentShow {
position: fixed;
top: 21%;
left: 26%;
width: 47.4%;
height: 60%;
border: 5px solid #01b0ca;
.equipContent {
width: 100%;
height: 90%;
display: flex;
flex-wrap: wrap;
overflow: auto;
.equipmentEnergy {
width: 20%;
height: 35%;
margin-left: 4%;
margin-top: 3%;
.equipmentList {
width: 100%%;
height: 80%;
background: url("../assets/images/jieNengImg/energyBack.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: 1.3rem;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
}
.equipmentName {
height: calc(100% - 80%);
width: 100%;
color: #fff;
/deep/ .el-input__inner {
background: rgba(1, 99, 137, 0.6);
margin-top: 3%;
color: #fff;
}
}
}
}
::-webkit-scrollbar {
display: none;
}
.subCommit {
width: 100%;
height: calc(100% - 90%);
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
}
.close {
width: 3%;
height: 5%;
z-index: 999;
position: absolute;
top: 1%;
right: 1%;
background: url("../assets/images/quit.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
}
</style>

185
src/views/index.vue
View File

@ -30,7 +30,7 @@
v-for="(item, index) in wisdomMonArr"
:key="index"
>
<div style="width:100%">
<div style="width: 100%">
<span>{{ item.name }}:</span>
<span style="color: rgb(225, 177, 25); margin-left: 5%">{{
item.count
@ -41,7 +41,7 @@
</div>
</div>
<div class="leftTwo">
<div class="title" style="height:18%">设备告警</div>
<div class="title" style="height: 18%">设备告警</div>
<div class="warning">
<div id="warningOne"></div>
<div id="warningTwo"></div>
@ -50,9 +50,7 @@
<div class="leftThree">
<div class="warnListTitle">
<div class="titleTwo">
<span style="margin-left: 5%; font-size: 0.6rem"
>报警信息列表</span
>
<span style="margin-left: 5%; font-size: 0.6rem">报警信息列表</span>
</div>
</div>
<div class="warnBtn">
@ -116,7 +114,7 @@
justify-content: space-evenly;
"
>
<span>当日</span>
<span>当日</span>
<img src="../assets/images/blueDian.png" style="width: 9%" />
<span style="margin-left: 2%">报警数：8</span>
</div>
@ -141,7 +139,7 @@
justify-content: space-evenly;
"
>
<span>统计</span>
<span>统计</span>
<img src="../assets/images/blueDian.png" style="width: 9%" />
<span style="margin-left: 2%">派单数：8</span>
</div>
@ -167,6 +165,22 @@
<div class="rightTwo">
<div class="title">智慧节能</div>
<div id="energyEcharts"></div>
<div class="pickerChange">
<el-select
v-model="selectDate"
:popper-append-to-body="false"
clearable
placeholder="请选择"
>
<el-option
v-for="(item, index) in dateOptions"
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
<div class="selectChange">
<el-select
v-model="selectValue"
@ -191,12 +205,17 @@
class="cameraList"
v-for="(item, index) in cameraList"
:key="index"
@click="changeCamera(item.icon)"
>
<img :src="item.icon" style="width: 100%; height: 100%" />
</div>
</div>
</div>
</div>
<div class="camersBig" v-show="cameraBigShow">
<img :src="cameraBig" style="width:100%;height:100%"/>
<div class="close" @click="closeCamer"></div>
</div>
</div>
</template>
@ -204,6 +223,7 @@
export default {
data() {
return {
dateData:'',//日期选择
wisdomList: [
{
name: "空闲中",
@ -279,6 +299,21 @@ export default {
value: "2",
},
],
selectDate:'',
dateOptions: [
{
label: "年",
value: "1",
},
{
label: "月",
value: "2",
},
{
label: "日",
value: "3",
},
],
cameraList: [
{
icon: require("../assets/images/camera.png"),
@ -293,6 +328,8 @@ export default {
icon: require("../assets/images/camera.png"),
},
], //摄像
cameraBig:'',
cameraBigShow:false,
};
},
mounted() {
@ -301,8 +338,17 @@ export default {
this.maintenanceLeft();
this.maintenanceRight();
this.energyEcharts();
window.createMqtt = this.createMqtt();
},
methods: {
//选中图片
changeCamera(path) {
this.cameraBig = path
this.cameraBigShow = true
},
closeCamer(){
this.cameraBigShow = false
},
//报警选中
warnSelect(index) {
this.warnBtnAc = index;
@ -314,7 +360,7 @@ export default {
legend: {
show: true,
align: "left",
x:'45%',
x: "45%",
orient: "vertical",
textStyle: {
color: "#fff",
@ -435,7 +481,7 @@ export default {
legend: {
show: true,
align: "left",
x:'45%',
x: "45%",
orient: "vertical",
textStyle: {
color: "#fff",
@ -597,7 +643,7 @@ export default {
icon: "rect",
// left: "5%",
// top: "20%",
bottom:'0',
bottom: "0",
itemWidth: 14,
itemGap: 10,
textStyle: {
@ -610,7 +656,7 @@ export default {
b: {
color: "rgba(255,255,255,0)",
fontSize: "0rem",
padding: [0, 10, 0,15],
padding: [0, 10, 0, 15],
},
},
},
@ -702,10 +748,10 @@ export default {
},
},
legend: {
icon: "rect",
icon: "rect",
// left: "5%",
// top: "20%",
bottom:'0',
bottom: "0",
itemWidth: 14,
itemGap: 10,
textStyle: {
@ -737,7 +783,7 @@ export default {
{
name: "",
type: "pie",
radius: ["45%", "60%"],
radius: ["45%", "60%"],
center: ["48%", "40%"],
avoidLabelOverlap: true,
label: {
@ -942,6 +988,26 @@ export default {
};
myChart.setOption(option);
},
createMqtt() {
//创建链接，接收数据
let topicSends = ["/SC/pub/uwb", "/SC/pub/env"];
window.PubScribe(topicSends, this.realInfo);
},
/** 实时数据分类 */
realInfo(topic, message) {
switch (topic) {
// 接收托片
case "/SC/pub/uwb":
try {
const utf8decoder = new TextDecoder();
const u8arr = new Uint8Array(message);
const temp = utf8decoder.decode(u8arr); // 将二进制数据转为字符串
const msg = JSON.parse(temp); //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
console.log("msg", msg);
} catch (error) {}
break;
}
},
},
components: {},
};
@ -965,6 +1031,10 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: leftAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.leftOne {
height: 22%;
width: 100%;
@ -1027,7 +1097,7 @@ export default {
background: url(../assets/images/flootLine.png) no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
align-items: center;
}
}
}
@ -1130,6 +1200,18 @@ export default {
}
}
}
@keyframes leftAnimation {
0% {
position: relative;
left: 38%;
transform: scale(0);
}
100% {
position: relative;
left: 0%;
transform: scale(1);
}
}
.right {
width: 24.7%;
height: 95%;
@ -1139,6 +1221,10 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: rightAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.rightOne {
height: 38%;
width: 100%;
@ -1226,6 +1312,44 @@ export default {
align-items: center;
}
}
.pickerChange{
width: 23%;
height: 10%;
position: absolute;
top: 22%;
right: 35%;
/deep/ .el-select {
width: 100%;
height: 100%;
border-radius: 15px;
}
/deep/ .el-input__inner {
width: 100%;
height: 100%;
background: transparent;
border: 1px solid rgb(1, 176, 202);
border-radius: 15px;
color: #fff;
}
/deep/ .el-select-dropdown {
background: transparent;
border: 1px solid rgb(1, 176, 202);
border-radius: 5px;
// left: -30px !important;
}
/deep/ .el-select-dropdown__item {
color: turquoise;
}
/deep/ .el-select .el-input .el-select__caret {
color: rgb(1, 176, 202);
font-size: 0.3rem;
font-weight: 500;
}
/deep/ .el-input__suffix {
display: flex;
align-items: center;
}
}
}
.rightThree {
height: 34%;
@ -1246,6 +1370,18 @@ export default {
}
}
}
@keyframes rightAnimation {
0% {
position: relative;
right: 38%;
transform: scale(0);
}
100% {
position: relative;
right: 0%;
transform: scale(1);
}
}
}
.title {
width: 100%;
@ -1259,6 +1395,25 @@ export default {
padding-left: 12%;
box-sizing: border-box;
}
.camersBig {
position: fixed;
top: 21%;
left: 26%;
width: 47.4%;
height: 50%;
border: 5px solid #01b0ca;
.close{
width: 3%;
height: 5%;
z-index: 999;
position: absolute;
top:1%;
right:1%;
background: url("../assets/images/quit.png") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}
}
</style>

36
src/views/operationMaintenance.vue
View File

@ -87,7 +87,9 @@
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>接单时间:</span>
<span class="distributeLeafletsValue">{{ item.receiveTime }}</span>
<span class="distributeLeafletsValue">{{
item.receiveTime
}}</span>
</div>
<div class="distributeLeaflets" style="margin-left: 4%">
<span>订单状态:</span>
@ -377,6 +379,10 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: leftAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.workOrder {
width: 100%;
height: 15%;
@ -424,6 +430,18 @@ export default {
}
}
}
@keyframes leftAnimation {
0% {
position: relative;
left: 38%;
transform: scale(0);
}
100% {
position: relative;
left: 0%;
transform: scale(1);
}
}
.right {
width: 24.7%;
height: 95%;
@ -433,6 +451,10 @@ export default {
// flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: rightAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.selectList {
width: 100%;
height: 15%;
@ -515,6 +537,18 @@ export default {
}
}
}
@keyframes rightAnimation {
0% {
position: relative;
right: 38%;
transform: scale(0);
}
100% {
position: relative;
right: 0%;
transform: scale(1);
}
}
}
.title {
width: 100%;

443
src/views/security.vue
View File

@ -4,27 +4,35 @@
<div class="leftOne">
<div class="title">安防统计数据</div>
<div class="security">
<div class="securitySupervision">
安防监管
</div>
<img src="../assets/images/anFangAc.png" class="securityImg"/>
<div class="securitySupervision">安防监管</div>
<div class="securityCount">
<div class="securityList" v-for="(item,index) in securityList" :key="index">
<span>{{item.name}}</span>
<span>{{item.count}}</span>
<div
class="securityList"
v-for="(item, index) in securityList"
:key="index"
>
<span>{{ item.name }}</span>
<span>{{ item.count }}</span>
</div>
<!-- <img src="../"/> -->
</div>
</div>
</div>
<div class="leftTwo">
<div class="title" style="height:8%">预警视频监控联动</div>
<div class="title" style="height: 8%">预警视频监控联动</div>
<div class="warnVideo">
<!-- <div class="warnCamera">
<img src="../assets/images/camera.png" style="width:100%;height:100%"/>
</div> -->
<div class="warnCameraList">
<div style="width:45%;height:30%" v-for="(item,index) in warnCameraList" :key="index" @click="videoChange(index)">
<img :src="item.icon" style="width:100%;height:100%"/>
<div
style="width: 45%; height: 30%"
v-for="(item, index) in warnCameraList"
:key="index"
@click="videoChange(index)"
>
<img :src="item.icon" style="width: 100%; height: 100%" />
</div>
</div>
</div>
@ -32,110 +40,106 @@
</div>
<div class="right">
<div class="rightOne">
<div class="title" style="height:10%">火灾报警管理</div>
<div class="title" style="height: 10%">火灾报警管理</div>
<div class="fire">
<div
class="warnList"
v-for="(item, index) in fireWarnList"
:key="index"
class="warnList"
v-for="(item, index) in fireWarnList"
:key="index"
>
<img :src="item.icon" />
<div
style="
display: flex;
flex-direction: column;
align-items: flex-start;
width: 65%;
"
>
<img :src="item.icon" />
<div
style="
display: flex;
flex-direction: column;
align-items: flex-start;
width: 65%;
"
<span
style="display: flex; width: 100%; justify-content: flex-start"
>报警时间:<span style="margin-left: 5%">{{
item.time
}}</span></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>设备定位:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
>{{ item.position }}</span
></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>报警状态:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
>{{ item.status }}</span
></span
>
<span
style="
display: flex;
width: 100%;
justify-content: flex-start;
"
>报警时间:<span style="margin-left: 5%">{{
item.time
}}</span></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>设备定位:<span style="color: rgb(0,255,255); margin-left: 5%">{{
item.position
}}</span></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>报警状态:<span style="color: rgb(0,255,255); margin-left: 5%">{{
item.status
}}</span></span
>
</div>
</div>
</div>
</div>
</div>
<div class="rightTwo">
<div class="title" style="height:10%">安防报警管理</div>
<div class="title" style="height: 10%">安防报警管理</div>
<div class="police">
<div
class="warnList"
v-for="(item, index) in policeList"
:key="index"
>
class="warnList"
v-for="(item, index) in policeList"
:key="index"
>
<span>{{ item.id }}</span>
<img :src="item.icon" />
<div
style="
display: flex;
flex-direction: column;
align-items: flex-start;
width: 65%;
"
<img :src="item.icon" />
<div
style="
display: flex;
flex-direction: column;
align-items: flex-start;
width: 65%;
"
>
<span
style="display: flex; width: 100%; justify-content: flex-start"
>报警时间:<span style="margin-left: 5%">{{
item.time
}}</span></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>设备内容:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
>{{ item.content }}</span
></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>报警状态:<span
style="color: rgb(0, 255, 255); margin-left: 5%"
>{{ item.status }}</span
></span
>
<span
style="
display: flex;
width: 100%;
justify-content: flex-start;
"
>报警时间:<span style="margin-left: 5%">{{
item.time
}}</span></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>设备内容:<span style="color: rgb(0,255,255); margin-left: 5%">{{
item.content
}}</span></span
>
<span
style="
margin-top: 3%;
display: flex;
width: 100%;
justify-content: flex-start;
"
>报警状态:<span style="color: rgb(0,255,255); margin-left: 5%">{{
item.status
}}</span></span
>
</div>
</div>
</div>
</div>
</div>
</div>
@ -147,8 +151,8 @@ export default {
name: "security",
data() {
return {
securityList: [
{
securityList: [
{
name: "",
count: "",
},
@ -168,32 +172,32 @@ export default {
name: "报警数",
count: "0",
},
{
{
name: "昨日报警数",
count: "0",
},
],
warnCameraList:[
warnCameraList: [
{
icon:require("../assets/images/anFang/videoAc.png")
icon: require("../assets/images/anFang/videoAc.png"),
},
{
icon:require("../assets/images/anFang/video.png")
icon: require("../assets/images/anFang/video.png"),
},
{
icon:require("../assets/images/anFang/video.png")
icon: require("../assets/images/anFang/video.png"),
},
{
icon:require("../assets/images/anFang/video.png")
icon: require("../assets/images/anFang/video.png"),
},
{
icon:require("../assets/images/anFang/video.png")
icon: require("../assets/images/anFang/video.png"),
},
{
icon:require("../assets/images/anFang/video.png")
icon: require("../assets/images/anFang/video.png"),
},
],
fireWarnList: [
fireWarnList: [
{
icon: require("../assets/images/jieNengImg/warnBlue.png"),
time: "2023年03月12日 15:45:10",
@ -219,46 +223,48 @@ export default {
status: "已解除",
},
], //故障数组
policeList:[
policeList: [
{
id:'1',
id: "1",
icon: require("../assets/images/anFang/exclamatory.png"),
time: "2023年03月12日 15:45:10",
content: "306门禁故障",
status: "已解除",
},
{
id:'2',
id: "2",
icon: require("../assets/images/anFang/exclamatory.png"),
time: "2023年03月12日 15:45:10",
content: "201门禁故障",
status: "已解除",
},
{
id:'3',
id: "3",
icon: require("../assets/images/anFang/exclamatory.png"),
time: "2023年03月12日 15:45:10",
content: "206门禁故障",
status: "已解除",
},
{
id:'4',
id: "4",
icon: require("../assets/images/anFang/exclamatory.png"),
time: "2023年03月12日 15:45:10",
content: "106门禁故障",
status: "已解除",
},
]
],
};
},
mounted() {},
methods: {
videoChange(index){
this.warnCameraList.forEach((item,i) => {
item.icon = require("../assets/images/anFang/video.png")
videoChange(index) {
this.warnCameraList.forEach((item, i) => {
item.icon = require("../assets/images/anFang/video.png");
});
this.warnCameraList[index].icon = require("../assets/images/anFang/videoAc.png")
}
this.warnCameraList[
index
].icon = require("../assets/images/anFang/videoAc.png");
},
},
watch: {},
components: {},
@ -283,6 +289,10 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
-webkit-animation-name: leftAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.leftOne {
width: 100%;
height: 35%;
@ -290,50 +300,55 @@ export default {
flex-wrap: wrap;
align-items: flex-end;
align-content: space-between;
.security{
.security {
height: calc(100% - 25%);
width: 100%;
padding-right: 5%;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
.securitySupervision{
width: 50%;
height: 12%;
background: url("../assets/images/anFang/securityBack.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: @fontsize;
}
.securityCount{
width: 100%;
height: calc(100% - 12%);
position: relative;
display: flex;
padding-right: 5%;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
position: relative;
.securityImg{
position: absolute;
left:10%;
}
.securitySupervision {
width: 50%;
height: 12%;
background: url("../assets/images/anFang/securityBack.png") no-repeat;
background-size: 100% 100%;
color: #fff;
font-size: @fontsize;
}
.securityCount {
width: 100%;
height: calc(100% - 12%);
position: relative;
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
align-items: center;
.securityList{
width: 30%;
height: 20%;
color: #fff;
margin-left: 2%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
}
.securityList {
width: 30%;
height: 20%;
color: #fff;
margin-left: 2%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
}
}
}
.leftTwo {
width: 100%;
height: 65%;
.warnVideo{
.warnVideo {
height: calc(100% - 8%);
width: 100%;
padding:0 3%;
padding: 0 3%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
@ -343,7 +358,7 @@ export default {
// height: 40%;
// border: 3px solid rgb(1, 176, 202);
// }
.warnCameraList{
.warnCameraList {
height: 90%;
width: 100%;
display: flex;
@ -354,6 +369,18 @@ export default {
}
}
}
@keyframes leftAnimation {
0% {
position: relative;
left: 38%;
transform: scale(0);
}
100% {
position: relative;
left: 0%;
transform: scale(1);
}
}
.right {
width: 24.7%;
height: 95%;
@ -363,51 +390,67 @@ export default {
flex-wrap: wrap;
background: url(../assets/images/leftKuang.png) no-repeat;
background-size: 100% 100%;
.rightOne{
-webkit-animation-name: rightAnimation;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
.rightOne {
width: 100%;
height: 50%;
.fire{
height: calc(100% - 10%);
width: 100%;
overflow: auto;
.warnList {
height: 32%;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
padding-right: 20%;
box-sizing: border-box;
color: #fff;
}
}
::-webkit-scrollbar{
display: none;
}
}
.rightTwo{
width: 100%;
height: 50%;
.police{
height: calc(100% - 10%);
width: 100%;
overflow: auto;
.warnList {
height: 32%;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
padding-right: 20%;
box-sizing: border-box;
color: #fff;
}
.fire {
height: calc(100% - 10%);
width: 100%;
overflow: auto;
.warnList {
height: 32%;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
padding-right: 20%;
box-sizing: border-box;
color: #fff;
}
}
::-webkit-scrollbar{
display: none;
}
::-webkit-scrollbar {
display: none;
}
}
.rightTwo {
width: 100%;
height: 50%;
.police {
height: calc(100% - 10%);
width: 100%;
overflow: auto;
.warnList {
height: 32%;
width: 100%;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
padding-right: 20%;
box-sizing: border-box;
color: #fff;
}
}
::-webkit-scrollbar {
display: none;
}
}
}
@keyframes rightAnimation {
0% {
position: relative;
right: 38%;
transform: scale(0);
}
100% {
position: relative;
right: 0%;
transform: scale(1);
}
}
}
@ -423,7 +466,7 @@ export default {
padding-left: 12%;
box-sizing: border-box;
}
.caseTitle{
.caseTitle {
width: 23%;
height: 10%;
background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
@ -433,7 +476,7 @@ export default {
display: flex;
align-items: center;
padding-left: 5%;
box-sizing: border-box;
margin-top: 2%;
box-sizing: border-box;
margin-top: 2%;
}
</style>

2
vue.config.js
View File

@ -15,7 +15,7 @@ module.exports = {
// port: 8989, // 开发服务器运行端口号
proxy: {
'/api': { //代理的名字
target:'http://172.16.1.254:3333/',
target:'http://122.51.103.65:8002/ecs-server',
ws: true,
changeOrigin: true,
pathRewrite:{