Skip to content

D
donkey
Commit ac6837b0 authored by caicaicai's avatar caicaicai
Browse files
Options

环境监测页面编写，主页球转动

parent 2c6c852b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1179 additions and 42 deletions
package-lock.json
View file @ ac6837b0
This diff is collapsed.
package.json
View file @ ac6837b0
...@@ -19,6 +19,7 @@ ...@@ -19,6 +19,7 @@
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"moment": "^2.29.1", "moment": "^2.29.1",
"qs": "^6.10.1", "qs": "^6.10.1",
"video.js": "^7.14.3",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.2.0", "vue-router": "^3.2.0",
"vuex": "^3.4.0" "vuex": "^3.4.0"
......
src/main.js
View file @ ac6837b0
...@@ -7,6 +7,11 @@ import 'element-ui/lib/theme-chalk/index.css'; ...@@ -7,6 +7,11 @@ import 'element-ui/lib/theme-chalk/index.css';
import '../plugins/jquery-2.1.1.min.js'; import '../plugins/jquery-2.1.1.min.js';
import $ from 'jquery' import $ from 'jquery'
import './assets/icon/iconfont.css' import './assets/icon/iconfont.css'
import Videojs from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Videojs
Vue.prototype.$ = $; Vue.prototype.$ = $;
......
src/views/environment/alarm.vue
View file @ ac6837b0
This diff is collapsed.
src/views/environment/history.vue
View file @ ac6837b0
This diff is collapsed.
src/views/environment/nowData.vue
View file @ ac6837b0
...@@ -250,8 +250,10 @@ export default { ...@@ -250,8 +250,10 @@ export default {
switchBtn1(){ switchBtn1(){
if(this.switchBtn == "趋势图"){ if(this.switchBtn == "趋势图"){
this.switchBtn = "表格图"; this.switchBtn = "表格图";
this.bottomTitle = "温数据监测趋势图";
}else{ }else{
this.switchBtn = "趋势图"; this.switchBtn = "趋势图";
this.bottomTitle = "实时数据列表";
} }
}, },
tableRowStyle({row, rowIndex}) { tableRowStyle({row, rowIndex}) {
......
src/views/mineMonitoring.vue
View file @ ac6837b0
<template> <template>
<div class="allBox"> <div class="allBox">
<!-- 中间球 --> <!-- 中间球 -->
<div></div> <div class="rotatingBall"></div>
<!-- 智能派单系统 --> <!-- 智能派单系统 -->
<div class="intelligentDispatch"> <div class="intelligentDispatch">
...@@ -112,7 +112,6 @@ ...@@ -112,7 +112,6 @@
</template> </template>
<script> <script>
export default { export default {
data(){ data(){
return{ return{
...@@ -138,6 +137,120 @@ export default { ...@@ -138,6 +137,120 @@ export default {
height: 100%; height: 100%;
position: relative; position: relative;
} }
.rotatingBall{
position: absolute;
top: 12%;
left: 50%;
transform: translateX(-55%);
width: 300px;
height: 300px;
background-image: url('../imgs/qiuxuliezhen/00_00000.png');
background-size: 100% 100%;
animation: turn 3s linear infinite;
}
@keyframes turn {
0% { background-image: url('../imgs/qiuxuliezhen/00_00000.png');}
1% { background-image: url('../imgs/qiuxuliezhen/00_00001.png');}
2% { background-image: url('../imgs/qiuxuliezhen/00_00004.png');}
3% { background-image: url('../imgs/qiuxuliezhen/00_00006.png');}
4% { background-image: url('../imgs/qiuxuliezhen/00_00007.png');}
5% { background-image: url('../imgs/qiuxuliezhen/00_00008.png');}
6% { background-image: url('../imgs/qiuxuliezhen/00_00009.png');}
7% { background-image: url('../imgs/qiuxuliezhen/00_00011.png');}
8% { background-image: url('../imgs/qiuxuliezhen/00_00012.png');}
9% { background-image: url('../imgs/qiuxuliezhen/00_00014.png');}
10% { background-image: url('../imgs/qiuxuliezhen/00_00016.png');}
11% { background-image: url('../imgs/qiuxuliezhen/00_00018.png');}
12% { background-image: url('../imgs/qiuxuliezhen/00_00020.png');}
13% { background-image: url('../imgs/qiuxuliezhen/00_00021.png');}
14% { background-image: url('../imgs/qiuxuliezhen/00_00022.png');}
15% { background-image: url('../imgs/qiuxuliezhen/00_00023.png');}
16% { background-image: url('../imgs/qiuxuliezhen/00_00024.png');}
17% { background-image: url('../imgs/qiuxuliezhen/00_00025.png');}
18% { background-image: url('../imgs/qiuxuliezhen/00_00026.png');}
19% { background-image: url('../imgs/qiuxuliezhen/00_00027.png');}
20% { background-image: url('../imgs/qiuxuliezhen/00_00028.png');}
21% { background-image: url('../imgs/qiuxuliezhen/00_00029.png');}
22% { background-image: url('../imgs/qiuxuliezhen/00_00030.png');}
23% { background-image: url('../imgs/qiuxuliezhen/00_00031.png');}
24% { background-image: url('../imgs/qiuxuliezhen/00_00032.png');}
25% { background-image: url('../imgs/qiuxuliezhen/00_00034.png');}
26% { background-image: url('../imgs/qiuxuliezhen/00_00036.png');}
27% { background-image: url('../imgs/qiuxuliezhen/00_00038.png');}
28% { background-image: url('../imgs/qiuxuliezhen/00_00039.png');}
29% { background-image: url('../imgs/qiuxuliezhen/00_00040.png');}
30% { background-image: url('../imgs/qiuxuliezhen/00_00042.png');}
31% { background-image: url('../imgs/qiuxuliezhen/00_00043.png');}
32% { background-image: url('../imgs/qiuxuliezhen/00_00044.png');}
33% { background-image: url('../imgs/qiuxuliezhen/00_00045.png');}
34% { background-image: url('../imgs/qiuxuliezhen/00_00046.png');}
35% { background-image: url('../imgs/qiuxuliezhen/00_00047.png');}
36% { background-image: url('../imgs/qiuxuliezhen/00_00048.png');}
37% { background-image: url('../imgs/qiuxuliezhen/00_00049.png');}
38% { background-image: url('../imgs/qiuxuliezhen/00_00050.png');}
39% { background-image: url('../imgs/qiuxuliezhen/00_00051.png');}
40% { background-image: url('../imgs/qiuxuliezhen/00_00052.png');}
41% { background-image: url('../imgs/qiuxuliezhen/00_00053.png');}
42% { background-image: url('../imgs/qiuxuliezhen/00_00054.png');}
43% { background-image: url('../imgs/qiuxuliezhen/00_00055.png');}
44% { background-image: url('../imgs/qiuxuliezhen/00_00056.png');}
45% { background-image: url('../imgs/qiuxuliezhen/00_00057.png');}
46% { background-image: url('../imgs/qiuxuliezhen/00_00058.png');}
47% { background-image: url('../imgs/qiuxuliezhen/00_00059.png');}
48% { background-image: url('../imgs/qiuxuliezhen/00_00060.png');}
49% { background-image: url('../imgs/qiuxuliezhen/00_00061.png');}
50% { background-image: url('../imgs/qiuxuliezhen/00_00062.png');}
51% { background-image: url('../imgs/qiuxuliezhen/00_00063.png');}
52% { background-image: url('../imgs/qiuxuliezhen/00_00064.png');}
53% { background-image: url('../imgs/qiuxuliezhen/00_00066.png');}
54% { background-image: url('../imgs/qiuxuliezhen/00_00068.png');}
55% { background-image: url('../imgs/qiuxuliezhen/00_00070.png');}
56% { background-image: url('../imgs/qiuxuliezhen/00_00071.png');}
57% { background-image: url('../imgs/qiuxuliezhen/00_00072.png');}
58% { background-image: url('../imgs/qiuxuliezhen/00_00074.png');}
59% { background-image: url('../imgs/qiuxuliezhen/00_00076.png');}
60% { background-image: url('../imgs/qiuxuliezhen/00_00077.png');}
61% { background-image: url('../imgs/qiuxuliezhen/00_00078.png');}
62% { background-image: url('../imgs/qiuxuliezhen/00_00079.png');}
63% { background-image: url('../imgs/qiuxuliezhen/00_00080.png');}
64% { background-image: url('../imgs/qiuxuliezhen/00_00081.png');}
65% { background-image: url('../imgs/qiuxuliezhen/00_00082.png');}
66% { background-image: url('../imgs/qiuxuliezhen/00_00083.png');}
67% { background-image: url('../imgs/qiuxuliezhen/00_00084.png');}
68% { background-image: url('../imgs/qiuxuliezhen/00_00085.png');}
69% { background-image: url('../imgs/qiuxuliezhen/00_00086.png');}
70% { background-image: url('../imgs/qiuxuliezhen/00_00087.png');}
71% { background-image: url('../imgs/qiuxuliezhen/00_00088.png');}
72% { background-image: url('../imgs/qiuxuliezhen/00_00089.png');}
73% { background-image: url('../imgs/qiuxuliezhen/00_00090.png');}
74% { background-image: url('../imgs/qiuxuliezhen/00_00091.png');}
75% { background-image: url('../imgs/qiuxuliezhen/00_00092.png');}
76% { background-image: url('../imgs/qiuxuliezhen/00_00093.png');}
77% { background-image: url('../imgs/qiuxuliezhen/00_00094.png');}
78% { background-image: url('../imgs/qiuxuliezhen/00_00095.png');}
79% { background-image: url('../imgs/qiuxuliezhen/00_00096.png');}
80% { background-image: url('../imgs/qiuxuliezhen/00_00097.png');}
81% { background-image: url('../imgs/qiuxuliezhen/00_00098.png');}
82% { background-image: url('../imgs/qiuxuliezhen/00_00099.png');}
83% { background-image: url('../imgs/qiuxuliezhen/00_00100.png');}
84% { background-image: url('../imgs/qiuxuliezhen/00_00101.png');}
85% { background-image: url('../imgs/qiuxuliezhen/00_00102.png');}
86% { background-image: url('../imgs/qiuxuliezhen/00_00103.png');}
87% { background-image: url('../imgs/qiuxuliezhen/00_00104.png');}
88% { background-image: url('../imgs/qiuxuliezhen/00_00106.png');}
89% { background-image: url('../imgs/qiuxuliezhen/00_00108.png');}
90% { background-image: url('../imgs/qiuxuliezhen/00_00110.png');}
91% { background-image: url('../imgs/qiuxuliezhen/00_00112.png');}
92% { background-image: url('../imgs/qiuxuliezhen/00_00114.png');}
93% { background-image: url('../imgs/qiuxuliezhen/00_00116.png');}
94% { background-image: url('../imgs/qiuxuliezhen/00_00117.png');}
95% { background-image: url('../imgs/qiuxuliezhen/00_00118.png');}
96% { background-image: url('../imgs/qiuxuliezhen/00_00119.png');}
97% { background-image: url('../imgs/qiuxuliezhen/00_00120.png');}
98% { background-image: url('../imgs/qiuxuliezhen/00_00122.png');}
99% { background-image: url('../imgs/qiuxuliezhen/00_00123.png');}
100% { background-image: url('../imgs/qiuxuliezhen/00_00124.png');}
}
/* 智能派单系统 */ /* 智能派单系统 */
.intelligentDispatch{ .intelligentDispatch{
top: 35%; top: 35%;
......
src/views/videoSurveillance/videoShow.vue
View file @ ac6837b0
<template> <template>
<div class="iframeBody"> <div class="iframeBody">
<!-- <iframe src="http://192.168.0.106:8080/examples/?q=loader#webgl_loader_obj" class="iframeViews"></iframe> --> <div class="leftMenuBar">
<div style="color:#071E4C;font-weight:600;font-size:20px;margin-bottom:20px;">视频监控区域</div>
<div style="color:#071E4C;font-weight:600;font-size:17px;">
<div v-for="(item,index) in videoAreaArray" :key="index" style="margin-bottom:10px;cursor: pointer;" :class="index == videoAreaIndex ? 'leftMenuSelected' : '' " @click="videoMenuIndex(index)">
<span class="el-icon-camera-solid"> {{item}}</span>
</div>
</div>
</div>
<div class="rightVideoBox">
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data(){
return{
videoAreaArray:["采区监控","厂区监控","办公室监控","办公室监控1","办公室监控2"],
videoAreaIndex:0,
}
},
methods:{
videoMenuIndex(index){
this.videoAreaIndex = index;
}
},
} }
</script> </script>
<style scoped> <style scoped>
*{ *{
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.iframeBody{ .iframeBody{
height: 100%; height: 100%;
background-color: aquamarine; display: flex;
}
.iframeViews{
width: 100%; width: 100%;
}
.leftMenuBar{
width: 10%;
height: 100%;
background-color: white;
padding: 20px;
box-sizing: border-box;
}
.rightVideoBox{
width: 90%;
height: 100%; height: 100%;
background-color: bisque;
}
.leftMenuSelected{
color: rgb(0,82,255);
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment