diff --git a/package.json b/package.json index 07c295b..8c52260 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.vue b/src/App.vue index 74de3c0..8e11dab 100644 --- a/src/App.vue +++ b/src/App.vue @@ -28,8 +28,7 @@
- +
{{ item.name }}
@@ -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) => { diff --git a/src/api/index.js b/src/api/index.js index 84d86bd..541c60e 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -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 +// }) +// }; \ No newline at end of file diff --git a/src/assets/images/moreBg.png b/src/assets/images/moreBg.png new file mode 100644 index 0000000..4fe5023 Binary files /dev/null and b/src/assets/images/moreBg.png differ diff --git a/src/main.js b/src/main.js index 7ea5722..fd476ba 100644 --- a/src/main.js +++ b/src/main.js @@ -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) diff --git a/src/utils/mqttConfig.js b/src/utils/mqttConfig.js new file mode 100644 index 0000000..40b9020 --- /dev/null +++ b/src/utils/mqttConfig.js @@ -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; \ No newline at end of file diff --git a/src/views/alarm.vue b/src/views/alarm.vue index 41983c8..0b14edf 100644 --- a/src/views/alarm.vue +++ b/src/views/alarm.vue @@ -4,7 +4,7 @@
预计统计列表 一级
-
{{ item.id }} -
-
- 报警时间:{{ item.time }} +
+
+ 报警时间:{{ item.time }}
-
- 报警原因:{{'「'+ item.cause+'」' }}{{item.content}} +
+ 报警原因:{{ + "「" + item.cause + "」" + }}{{ item.content }} +
+
+ 风险等级:{{ + "「" + item.risk + "」" + }}
-
- 风险等级:{{ '「'+ item.risk +'」'}} -
-
预计统计列表 二级
-
-
预计统计列表 二级
+
+
{{ item.id }} -
-
- 报警时间:{{ item.time }} +
+
+ 报警时间:{{ item.time }}
-
- 报警原因:{{'「'+ item.cause+'」' }}{{item.content}} +
+ 报警原因:{{ + "「" + item.cause + "」" + }}{{ item.content }} +
+
+ 风险等级:{{ + "「" + item.risk + "」" + }}
-
- 风险等级:{{ '「'+ item.risk +'」'}} -
@@ -58,32 +66,35 @@
- -
预计统计列表 三级
-
-
-
- {{ item.id }} - -
-
- 报警时间:{{ item.time }} -
-
- 报警原因:{{'「'+ item.cause+'」' }}{{item.content}} -
-
- 风险等级:{{ '「'+ item.risk +'」'}} -
+
预计统计列表 三级
+
+
+
+ {{ item.id }} + +
+
+ 报警时间:{{ item.time }} +
+
+ 报警原因:{{ + "「" + item.cause + "」" + }}{{ item.content }} +
+
+ 风险等级:{{ + "「" + item.risk + "」" + }}
+
@@ -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%; } \ No newline at end of file diff --git a/src/views/court.vue b/src/views/court.vue index 3e7605b..6656946 100644 --- a/src/views/court.vue +++ b/src/views/court.vue @@ -103,7 +103,15 @@
案件名称: - {{ item.caseName }} + {{ item.caseName }}
开庭时间: @@ -115,7 +123,15 @@
案件案由: - {{ item.brief }} + {{ item.brief }}
当事人: @@ -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%; diff --git a/src/views/energySaving.vue b/src/views/energySaving.vue index 57bb9ac..7a9005a 100644 --- a/src/views/energySaving.vue +++ b/src/views/energySaving.vue @@ -2,7 +2,10 @@
-
设备用能统计数据
+
+ 设备用能统计数据 + +
-
能耗计量分析
+
能耗计量同比分析
+
+
能耗计量环比分析
+ +
+
太阳能光伏发电系统数据
@@ -118,15 +131,30 @@
-
-
视频联动
-
- +
+
+
+
+
+ {{ item.count }} + KWH +
+
+ {{ item.name }} + +
+ +
+
+ 提交 + 清空 +
@@ -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; + } } \ No newline at end of file diff --git a/src/views/index.vue b/src/views/index.vue index 849fe93..192d5bd 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -30,7 +30,7 @@ v-for="(item, index) in wisdomMonArr" :key="index" > -
+
{{ item.name }}: {{ item.count @@ -41,7 +41,7 @@
-
设备告警
+
设备告警
@@ -50,9 +50,7 @@
- 报警信息列表 + 报警信息列表
@@ -116,7 +114,7 @@ justify-content: space-evenly; " > - 当日 + 当日 报警数：8
@@ -141,7 +139,7 @@ justify-content: space-evenly; " > - 统计 + 统计 派单数：8
@@ -167,6 +165,22 @@
智慧节能
+
+ + + + +
+
+ +
+
@@ -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; + } +} diff --git a/src/views/operationMaintenance.vue b/src/views/operationMaintenance.vue index 64241f3..ea7127d 100644 --- a/src/views/operationMaintenance.vue +++ b/src/views/operationMaintenance.vue @@ -87,7 +87,9 @@
接单时间: - {{ item.receiveTime }} + {{ + item.receiveTime + }}
订单状态: @@ -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%; diff --git a/src/views/security.vue b/src/views/security.vue index 00144fb..32b0104 100644 --- a/src/views/security.vue +++ b/src/views/security.vue @@ -4,27 +4,35 @@
安防统计数据
-
- 安防监管 -
+ +
安防监管
-
- {{item.name}} - {{item.count}} +
+ {{ item.name }} + {{ item.count }}
-
预警视频监控联动
+
预警视频监控联动
-
- +
+
@@ -32,110 +40,106 @@
-
火灾报警管理
+
火灾报警管理
+ +
- -
报警时间:{{ + item.time + }} + 设备定位:{{ item.position }} + 报警状态:{{ item.status }} - 报警时间:{{ - item.time - }} - 设备定位:{{ - item.position - }} - 报警状态:{{ - item.status - }} -
+
-
安防报警管理
+
安防报警管理
+ class="warnList" + v-for="(item, index) in policeList" + :key="index" + > {{ item.id }} - -
+
+ 报警时间:{{ + item.time + }} + 设备内容:{{ item.content }} + 报警状态:{{ item.status }} - 报警时间:{{ - item.time - }} - 设备内容:{{ - item.content - }} - 报警状态:{{ - item.status - }} -
+
@@ -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%; } \ No newline at end of file diff --git a/vue.config.js b/vue.config.js index 0b0725f..ad6c1e1 100644 --- a/vue.config.js +++ b/vue.config.js @@ -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:{