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

代码提交

This commit is contained in:
lixiaobang 2023-03-24 16:50:05 +08:00
parent 70db821295
commit 262ec2866e
14 changed files with 2149 additions and 1733 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -28,7 +28,8 @@
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue2-scale-box": "^0.1.4", "vue2-scale-box": "^0.1.4",
"vuedraggable": "2.24.3", "vuedraggable": "2.24.3",
"vuex": "3.0.1" "vuex": "3.0.1",
"moment": "^2.29.4"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.2", "autoprefixer": "^7.1.2",

30
src/api/api.js
View File

@ -88,3 +88,33 @@ export const getCompleteMonthStatus = (params) => {
{params}, {params},
) )
}; };
//视频监控
export const getIsImportant = (params) => {
return axios.get('api/ems-third-party-service/camera/isImportant',
{params},
)
};
//获取所有监控接口
export const getAllCamera = (params) => {
return axios.get('api/ems-third-party-service/camera/all/get',
{params},
)
};
//获取所有监控接口列表
export const getAllCameraList = (params) => {
return axios.get('api/ems-third-party-service/camera/all/get',
{params},
)
};
//获取摄像头数量接口
export const getCameraCount = (params) => {
return axios.get('api/ems-third-party-service/camera/count',
{params},
)
};
//获取摄像头历史监控
export const getCameraHistory = (params) => {
return axios.get('api/ems-third-party-service/camera/history',
{params},
)
};

13
src/api/personnel.js
View File

@ -38,4 +38,15 @@ export const getAttend = (params) => {
{params}, {params},
) )
}; };
//站班会记录
export const getRecentMeeting = (params) => {
return axios.get('api/ems-third-party-service/project/recentMeeting',
{params},
)
};
//站班会统计
export const getMonthCensus = (params) => {
return axios.get('api/ems-third-party-service/project/monthCensus',
{params},
)
};

32
src/components/common/RadarChart.vue
View File

@ -8,7 +8,7 @@
height="100%" height="100%"
:extensionFun="extensionFun" :extensionFun="extensionFun"
></Chart> ></Chart>
<div class="lineBox"></div> <!-- <div class="lineBox"></div> -->
</div> </div>
</template> </template>
<script> <script>
@ -53,7 +53,11 @@ export default {
yAxisPadding: { yAxisPadding: {
type: Array, type: Array,
default: null default: null
} },
radarList:{
type: Array,
default: null
} //父传子的数组
}, },
components: { components: {
@ -69,7 +73,13 @@ export default {
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // 监听父组件中的数据变化，重新触发Echarts
chartData: { // chartData: {
// deep: true,
// handler () {
// this.resetOption()
// }
// },
radarList:{
deep: true, deep: true,
handler () { handler () {
this.resetOption() this.resetOption()
@ -100,6 +110,12 @@ export default {
} }
}, },
option () { option () {
let month = [];
let number = [];
this.radarList.forEach((item,index) => {
month.push(item.month + '月')
number.push(item.number)
});
const self = this const self = this
return { return {
title: { title: {
@ -119,10 +135,10 @@ export default {
} }
}, },
grid: { grid: {
top: '121', top: '80',
left: '37', left: '37',
right: '31', right: '31',
bottom: '46', bottom: '20',
containLabel: true containLabel: true
}, },
xAxis: { xAxis: {
@ -130,7 +146,7 @@ export default {
// x轴线的颜色以及宽度 // x轴线的颜色以及宽度
show: true, show: true,
lineStyle: { lineStyle: {
color: '#ffff', color: '#fff',
height: 0 height: 0
} }
}, },
@ -146,7 +162,7 @@ export default {
}, },
triggerEvent: true, triggerEvent: true,
type: 'category', type: 'category',
data: this.xAxisData data: month
}, },
yAxis: { yAxis: {
name: '次数', name: '次数',
@ -183,7 +199,7 @@ export default {
series: [ series: [
{ {
name:'检查次数', name:'检查次数',
data: this.chartData, data: number,
type: 'bar', type: 'bar',
barWidth:10, barWidth:10,
color:'#0DFFFF' color:'#0DFFFF'

4
src/components/common/mdScreenPie.vue
View File

@ -89,6 +89,10 @@
var arr = ['middleLost', 0.6, val1data2, '今日完成进度'] var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
tooltip:{
trigger:'item',
formatter: '{b}：{c}',
},
graphic: { graphic: {
elements: [{ elements: [{
type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,

4
src/components/common/pieChart.vue
View File

@ -79,6 +79,10 @@ export default {
var arr = ['middleLost', 0.6, val1data2, '今日完成进度'] var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
tooltip:{
trigger:'item',
formatter: '{b}：{c}%',
},
graphic: { graphic: {
elements: [{ elements: [{
type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group, type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,

4
src/components/common/pieChartUnImg.vue
View File

@ -72,6 +72,10 @@ export default {
var arr = ["middleLost", 0.6, val1data2, "今日完成进度"]; var arr = ["middleLost", 0.6, val1data2, "今日完成进度"];
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
tooltip:{
trigger:'item',
formatter: '{b}：{c}%',
},
series: [ series: [
{ {
type: "pie", type: "pie",

267
src/components/common/pieDateChart.vue
View File

@ -9,7 +9,7 @@
<div class="jsBox"> <div class="jsBox">
<div class="bogJs" v-for="(item, i) in pieData" :key="i"> <div class="bogJs" v-for="(item, i) in pieData" :key="i">
<div class="jsChild"> <div class="jsChild">
<span :style="item.color"></span> <span :style="{'background':item.colorList}"></span>
<!-- <span :background="item.color"></span> --> <!-- <span :background="item.color"></span> -->
<span>{{item.groupName}}</span> <span>{{item.groupName}}</span>
</div> </div>
@ -58,10 +58,11 @@ export default {
totalPer:0, totalPer:0,
pieDataNew:[], pieDataNew:[],
color:['background-color:#00B3FF','background-color:#F1E453','background-color:#F85B60','background-color:#00A572', 'background-color:#008AA4', 'background-color:#7968D9', 'background-color:#C7A73E'], color:['background-color:#00B3FF','background-color:#F1E453','background-color:#F85B60','background-color:#00A572', 'background-color:#008AA4', 'background-color:#7968D9', 'background-color:#C7A73E'],
colorList:['#00B3FF','#F1E453','#F85B60','#00A572', '#008AA4', '#7968D9', '#C7A73E'],
}; };
}, },
mounted() { mounted() {
this.initCharts(); // this.initCharts();
}, },
watch: { watch: {
// 监听父组件中的数据变化，重新触发Echarts // 监听父组件中的数据变化，重新触发Echarts
@ -74,10 +75,8 @@ export default {
pieData: { pieData: {
deep: true, deep: true,
handler(newVal) { handler(newVal) {
console.log(newVal,'==============');
// this.initCharts(newVal)
this.changeNewVal(newVal) this.changeNewVal(newVal)
this.initCharts(newVal)
} }
} }
}, },
@ -85,21 +84,74 @@ export default {
methods: { methods: {
//获取人员数据 //获取人员数据
changeNewVal(newVal){ changeNewVal(newVal){
console.log("newVal",newVal)
this.pieDataNew = newVal this.pieDataNew = newVal
// var pieDataN = [] // var pieDataN = []
newVal.map((item,index) => { newVal.map((item,index) => {
this.totalPer+=item.number this.totalPer+=item.number
console.log("this.totalPer",this.totalPer) console.log("this.totalPer",this.totalPer)
this.color.forEach((items,indexs) => { this.colorList.forEach((items,indexs) => {
if(index==indexs){ if(index==indexs){
return item.color = items return item.colorList = items
} }
}) })
}) })
}, },
initCharts() { initCharts(dataList) {
let series = [];
let serItem={}
dataList.forEach((item,index) => {
serItem={}
serItem={
name: item.groupName,
type: 'pie',
clockWise: true,
hoverAnimation: false,
radius: [80-(index*10), 82-(index*10)],
center: ['50%', '50%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: 3,
shadowBlur: 40,
borderColor: item.colorList,
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
}
},
data: [ {
value: item.number,
}, {
value: item.number + 5,
// name: '',
itemStyle: {
normal: {
label: {
show: false,
position: "center"
},
labelLine: {
show: false
},
color: "rgb(8,76,71)",
borderWidth: 0
},
emphasis: {
color: "#104841a3",
borderColor: "#00b3ff",
borderWidth: 0
}
}
}]
},
series.push(serItem)
});
let myChart = this.$echarts.init(this.$refs.chart); let myChart = this.$echarts.init(this.$refs.chart);
var placeHolderStyle = { var placeHolderStyle = {
normal: { normal: {
@ -121,103 +173,110 @@ export default {
}; };
// 绘制图表 // 绘制图表
myChart.setOption({ myChart.setOption({
series: [ tooltip:{
{ trigger:'item',
name: '值', formatter: function (params) {
type: 'pie', return params.seriesName+':' +params.value
clockWise: true,
hoverAnimation: false,
radius: ['92%', '97%'],
center: ['50%', '50%'],
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false,
length: 100,
smooth: 0.5
},
borderWidth: 5,
shadowBlur: 40,
borderColor: "#00B3FF",
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
} }
}, },
data: [{ series: series,
value: 12, // [
}, { // {
value: 4, // name: '值',
name: '', // type: 'pie',
itemStyle: placeHolderStyle // clockWise: true,
}] // hoverAnimation: false,
}, // radius: ['92%', '97%'],
// ------------2 // center: ['50%', '50%'],
{ // itemStyle: {
name: '值', // normal: {
type: 'pie', // label: {
clockWise: true, // show: false
hoverAnimation: false, // },
radius: ['72%', '67%'], // labelLine: {
center: ['50%', '50%'], // show: false,
itemStyle: { // length: 100,
normal: { // smooth: 0.5
label: { // },
show: false // borderWidth: 5,
}, // shadowBlur: 40,
labelLine: { // borderColor: "#00B3FF",
show: false, // shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
length: 100, // }
smooth: 0.5 // },
}, // data: [{
borderWidth: 5, // value: 12,
shadowBlur: 40, // }, {
borderColor: "#F1E453", // value: 4,
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影 // name: '',
} // itemStyle: placeHolderStyle
}, // }]
data: [{ // },
value: 6, // // ------------2
}, { // {
value: 4, // name: '值',
name: '', // type: 'pie',
itemStyle: placeHolderStyle // clockWise: true,
}] // hoverAnimation: false,
}, // radius: ['72%', '67%'],
// ------------3 // center: ['50%', '50%'],
{ // itemStyle: {
name: '值', // normal: {
type: 'pie', // label: {
clockWise: true, // show: false
hoverAnimation: false, // },
radius: ['48%', '44%'], // labelLine: {
center: ['50%', '50%'], // show: false,
itemStyle: { // length: 100,
normal: { // smooth: 0.5
label: { // },
show: false // borderWidth: 5,
}, // shadowBlur: 40,
labelLine: { // borderColor: "#F1E453",
show: false, // shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
length: 100, // }
smooth: 0.5 // },
}, // data: [{
borderWidth: 5, // value: 6,
shadowBlur: 40, // }, {
borderColor: "#f85b60", // value: 4,
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影 // name: '',
} // itemStyle: placeHolderStyle
}, // }]
data: [{ // },
value: 9, // // ------------3
}, { // {
value: 44, // name: '值',
name: '', // type: 'pie',
itemStyle: placeHolderStyle // clockWise: true,
}] // hoverAnimation: false,
}, // radius: ['48%', '44%'],
] // center: ['50%', '50%'],
// itemStyle: {
// normal: {
// label: {
// show: false
// },
// labelLine: {
// show: false,
// length: 100,
// smooth: 0.5
// },
// borderWidth: 5,
// shadowBlur: 40,
// borderColor: "#f85b60",
// shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
// }
// },
// data: [{
// value: 9,
// }, {
// value: 44,
// name: '',
// itemStyle: placeHolderStyle
// }]
// },
// ]
}); });
//默认第一条高亮 //默认第一条高亮

8
src/main.js
View File

@ -35,6 +35,14 @@ Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key]) Vue.filter(key, filters[key])
}) })
import moment from 'moment'
//定义一个全局过滤器实现日期格式化
Vue.filter('datefmt',function (input,fmtstring) {//当input为时间戳时，需转为Number类型
// 使用momentjs这个日期格式化类库实现日期的格式化功能
return moment(input).format(fmtstring);
});
Vue.prototype.$moment = moment
Vue.config.productionTip = false Vue.config.productionTip = false
//MQTT订阅 //MQTT订阅
var currentTopics = null; var currentTopics = null;

30
src/views/index.vue
View File

@ -38,7 +38,7 @@
<!-- 视频监控 --> <!-- 视频监控 -->
<VideoSurveillanceComponents v-if="videoSurveillanceShow" @transfer="getUser"/> <VideoSurveillanceComponents v-if="videoSurveillanceShow" @transfer="getUser"/>
<!-- 视频监控子页面 --> <!-- 视频监控子页面 -->
<VideoViewingComponents v-if="videoViewingShow"/> <VideoViewingComponents v-if="videoViewingShow" :videoName="videoName" :videoId="videoId"/>
<!-- 进度管理 --> <!-- 进度管理 -->
<ProgressComponents v-if="progressShow"/> <ProgressComponents v-if="progressShow"/>
<!-- 安全管理 --> <!-- 安全管理 -->
@ -111,6 +111,8 @@ export default {
}, },
data() { data() {
return { return {
videoName:'', //子传父的视频名称
videoId:'',//子传父的视频Id
//显示首页 //显示首页
indexShow:true, indexShow:true,
//人员管理 //人员管理
@ -371,7 +373,26 @@ export default {
} }
}, },
closeindex(){ closeindex(){
this.$router.push('/') // this.$router.push('/')
this.$confirm("确定退出登录？", "确认信息", {
distinguishCancelAndClose: true,
confirmButtonText: "退出",
cancelButtonText: "取消",
})
.then(() => {
this.$message({
type: "info",
message: "返回登录",
});
this.$router.push("/");
sessionStorage.clear(); //清除所有session值
})
.catch((action) => {
this.$message({
type: "info",
message: action === "cancel" ? "取消退出" : "停留在当前页面",
});
});
}, },
//获取当前时间 //获取当前时间
getTime(){ getTime(){
@ -401,7 +422,6 @@ export default {
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100', url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
methods: '' methods: ''
}).then(res => { }).then(res => {
console.log(res.data,'=======================');
this.weatherItem = res.data.lives[0]; this.weatherItem = res.data.lives[0];
}); });
} , } ,
@ -439,7 +459,7 @@ export default {
//获取视频子传父数据 //获取视频子传父数据
getUser(msg){ getUser(msg){
// this.username= msg // this.username= msg
if(msg=='into'){ if(msg != null){
this.indexShow = false this.indexShow = false
this.personnelShow = false this.personnelShow = false
this.videoSurveillanceShow = false this.videoSurveillanceShow = false
@ -447,6 +467,8 @@ export default {
this.managementShow= false this.managementShow= false
this.progressShow = false this.progressShow = false
this.titLeftshow = true this.titLeftshow = true
this.videoName = msg.videoName
this.videoId = msg.videoId
} }
}, },
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {

43
src/views/modelScreenComponents.vue
View File

@ -200,6 +200,7 @@
</div> </div>
</div> </div>
<!-- 右侧模块1 --> <!-- 右侧模块1 -->
<div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-444px' }"> <div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-444px' }">
<div class="titName"> <div class="titName">
<span></span> <span></span>
@ -210,16 +211,19 @@
<div <div
style="position: relative; margin-left: 30px; margin-right: 20px" style="position: relative; margin-left: 30px; margin-right: 20px"
class="videoFat" class="videoFat"
v-for="(item,index) in videoList"
:key="index"
> >
<img src="@/assets/pic/23.png" alt="" /> <img :src="item.thumbnail" alt="" />
<div class="smallBox">隧道2号位摄像头</div> <div class="smallBox">{{item.equipmentName}}</div>
</div> </div>
<div style="position: relative" class="videoFat"> <!-- <div style="position: relative" class="videoFat">
<img src="@/assets/pic/23.png" alt="" /> <img src="@/assets/pic/23.png" alt="" />
<div class="smallBox">隧道3号位摄像头</div> <div class="smallBox">隧道3号位摄像头</div>
</div> -->
</div> </div>
</div> </div>
</div>
<!-- 右侧模块2 --> <!-- 右侧模块2 -->
<div class="rightTwoBox" :style="{ right: boxNone ? '27px' : '-442px' }"> <div class="rightTwoBox" :style="{ right: boxNone ? '27px' : '-442px' }">
<div class="titName"> <div class="titName">
@ -352,6 +356,7 @@ import {
getProjectStatus, getProjectStatus,
getProjectCheckCensus, getProjectCheckCensus,
getProjectCheckInfo, getProjectCheckInfo,
getIsImportant,
} from "@/api/api"; } from "@/api/api";
export default { export default {
name: "report", name: "report",
@ -363,6 +368,7 @@ export default {
}, },
data() { data() {
return { return {
videoList:[],//视频监控数据
jinduList:0, //计算进度条的宽度 jinduList:0, //计算进度条的宽度
progress:0, //计算进度条的值 progress:0, //计算进度条的值
securityCheck: [], //安全检查统计 securityCheck: [], //安全检查统计
@ -729,6 +735,12 @@ export default {
} }
this.tableData = res.data.data; this.tableData = res.data.data;
}); });
//视频监控
getIsImportant().then((res)=>{
this.videoList = Object.keys(res.data.data).map((item,index)=>{
return {thumbnail:res.data.data[item].thumbnail,equipmentName:res.data.data[item].equipmentName}
})
})
}); });
window.onresize = () => { window.onresize = () => {
@ -894,7 +906,7 @@ export default {
} }
.smallBox { .smallBox {
width: 105px; // width: 105px;
height: 28px; height: 28px;
background: rgba(0, 37, 35, 0.5); background: rgba(0, 37, 35, 0.5);
position: absolute; position: absolute;
@ -1125,15 +1137,19 @@ export default {
.videoBox { .videoBox {
position: absolute; position: absolute;
bottom: 33px; // bottom: 33px;
display: flex; // display: flex;
// width: 100%;
overflow-y: auto; //重点
height: calc(100% - 60px);
top: 40px;
.videoFat { .videoFat {
background: gray; background: gray;
flex: 1; flex: 1;
width: 180px; width: 165px;
height: 183px; height: 183px;
float: left;
margin-top: 5%;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1442,10 +1458,11 @@ export default {
position: absolute; position: absolute;
top: 96px; top: 96px;
right: 27px; right: 27px;
overflow-x: hidden; // overflow-x: auto;
transition: right 0.8s, height 1s; transition: right 0.8s, height 1s;
overflow-y: hidden; //重点 // overflow-y: auto; //重点
display: flex;
flex-direction: column;
@media only screen and (max-height: 1000px) { @media only screen and (max-height: 1000px) {
top: 76px; top: 76px;
height: 282px; height: 282px;

182
src/views/personnelComponents.vue
View File

@ -48,37 +48,40 @@
<span></span> <span></span>
</div> </div>
<div class="kqjk"> <div class="kqjk">
<div class="oneKqjk">
<img src="@/assets/pic/23.png" alt="" />
</div>
<div class="twoKqjk"> <div class="twoKqjk">
<div class="nameMessage" v-for="(item, i) in peopleList" :key="i"> <div class="nameMessage" v-for="(item, i) in peopleList" :key="i">
<div> <div class="oneKqjk">
<span style="color: #7ffffc">姓名：</span> <img :src="item.picture" alt="" />
<span style="color: #ffffff">{{ item.value }}</span>
</div> </div>
<div> <div class="textRight">
<span style="color: #7ffffc">岗位：</span> <div style="margin-top:10px">
<span style="color: #ffffff">{{ item.value }}</span> <span style="color: #7ffffc;white-space: nowrap">姓名：</span>
<span style="color: #ffffff">{{ item.name }}</span>
</div> </div>
<div> <div style="margin-top:10px">
<span style="color: #7ffffc">体温：</span> <span style="color: #7ffffc;white-space: nowrap">岗位：</span>
<span style="color: #ffffff">{{ item.value }}</span> <span style="color: #ffffff">{{ item.post }}</span>
</div> </div>
<div> <div style="margin-top:10px">
<span style="color: #7ffffc">入场时间：</span> <span style="color: #7ffffc;white-space: nowrap">体温：</span>
<span style="color: #ffffff">{{ item.value }}</span> <span style="color: #ffffff">{{ item.temperature }}</span>
</div> </div>
<div> <div style="margin-top:10px">
<span style="color: #7ffffc">考勤类型：</span> <span style="color: #7ffffc;white-space: nowrap">入场时间：</span>
<span style="color: #ffffff">{{ item.value }}</span> <span style="color: #ffffff">{{ item.time }}</span>
</div> </div>
<div> <div style="margin-top:10px">
<span style="color: #7ffffc">打卡设备：</span> <span style="color: #7ffffc;white-space: nowrap">考勤类型：</span>
<span style="color: #ffffff">{{ item.value }}</span> <span style="color: #ffffff;">{{ item.type }}</span>
</div>
<div style="margin-top:10px">
<span style="color: #7ffffc;white-space: nowrap">打卡设备：</span>
<span style="color: #ffffff">{{ item.equipment }}</span>
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div> </div>
<!-- 右侧模块1 --> <!-- 右侧模块1 -->
@ -96,15 +99,15 @@
<div class="mesBox"> <div class="mesBox">
<div> <div>
<span style="color: #82dddb">会议时间：</span> <span style="color: #82dddb">会议时间：</span>
<span style="color: #ffffff">2023-01-02</span> <span style="color: #ffffff">{{meeting.date}}</span>
</div> </div>
<div> <div>
<span style="color: #82dddb">会议类型：</span> <span style="color: #82dddb">会议类型：</span>
<span style="color: #ffffff">项目早会</span> <span style="color: #ffffff">{{meeting.type}}</span>
</div> </div>
<div> <div>
<span style="color: #82dddb">会议主持：</span> <span style="color: #82dddb">会议主持：</span>
<span style="color: #ffffff">王毅</span> <span style="color: #ffffff">{{meeting.host}}</span>
</div> </div>
<div> <div>
<span style="color: #82dddb">参会人员：</span> <span style="color: #82dddb">参会人员：</span>
@ -115,25 +118,20 @@
display: inline-block; display: inline-block;
white-space: pre-wrap; white-space: pre-wrap;
" "
>王小龙，高红，澄澈</span >{{meeting.participants}}</span
> >
</div> </div>
</div> </div>
</div> </div>
<div class="meeting">会议内容</div> <div class="meeting">会议内容</div>
<div class="mettiogBox"> <div class="mettiogBox">
<div> <div class="meetContent">
<div>1、施工部署</div> {{meeting.content}}</div>
<div> <div style="height:10%;width:100%">
(1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
</div>
<div>
(2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
</div>
</div>
<div class="lookFor" @click="gantDialog"></div> <div class="lookFor" @click="gantDialog"></div>
</div> </div>
</div> </div>
</div>
<!-- 右侧模块2 --> <!-- 右侧模块2 -->
<div class="rightThreeBox" :style="{ right: boxNone ? '27px' : '-443px' }"> <div class="rightThreeBox" :style="{ right: boxNone ? '27px' : '-443px' }">
<div class="titName"> <div class="titName">
@ -148,6 +146,7 @@
:color-array="['#021C9F', '#01B1FF']" :color-array="['#021C9F', '#01B1FF']"
:chart-data="qyList" :chart-data="qyList"
:x-axis-data="qyList.map((item) => item.name)" :x-axis-data="qyList.map((item) => item.name)"
:radarList="radarList"
/> />
</div> </div>
</div> </div>
@ -199,15 +198,15 @@
<div class="mesBox"> <div class="mesBox">
<div> <div>
<span style="color: #82dddb">会议时间：</span> <span style="color: #82dddb">会议时间：</span>
<span style="color: #ffffff">2023-01-02</span> <span style="color: #ffffff">{{meeting.date}}</span>
</div> </div>
<div> <div>
<span style="color: #82dddb">会议类型：</span> <span style="color: #82dddb">会议类型：</span>
<span style="color: #ffffff">项目早会</span> <span style="color: #ffffff">{{meeting.type}}</span>
</div> </div>
<div> <div>
<span style="color: #82dddb">会议主持：</span> <span style="color: #82dddb">会议主持：</span>
<span style="color: #ffffff">王毅</span> <span style="color: #ffffff">{{meeting.host}}</span>
</div> </div>
<div> <div>
<span style="color: #82dddb">参会人员：</span> <span style="color: #82dddb">参会人员：</span>
@ -218,27 +217,15 @@
display: inline-block; display: inline-block;
white-space: pre-wrap; white-space: pre-wrap;
" "
>王小龙，高红，澄澈</span >{{meeting.participants}}</span
> >
</div> </div>
</div> </div>
</div> </div>
<div class="meet2ing">会议内容</div> <div class="meet2ing">会议内容</div>
<div class="mettiog2Box"> <div class="mettiog2Box">
<div> <div class="meetContent">
<div>1、施工部署</div> {{meeting.content}}
<div>
(1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
</div>
<div>
(2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
</div>
<div>
(3)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
</div>
<div>
(4)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
</div>
</div> </div>
</div> </div>
</div> </div>
@ -255,7 +242,7 @@ import RadarChart from "@/components/common/RadarChart";
import pieChart from "@/components/common/pieChart"; import pieChart from "@/components/common/pieChart";
import pieDateChart from "@/components/common/pieDateChart"; import pieDateChart from "@/components/common/pieDateChart";
import Resize from "../utils/Resize.vue"; import Resize from "../utils/Resize.vue";
import { getUserGroup, getGroupCensus, getAttend } from "@/api/personnel"; import { getUserGroup, getGroupCensus, getAttend,getRecentMeeting,getMonthCensus } from "@/api/personnel";
export default { export default {
name: "report", name: "report",
components: { components: {
@ -266,6 +253,8 @@ export default {
}, },
data() { data() {
return { return {
radarList:[], //站班会统计
meeting:{}, //站班会记录
boxNone: true, boxNone: true,
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"], colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
iconPicList: [ iconPicList: [
@ -374,7 +363,13 @@ export default {
chartData: [], chartData: [],
peopleList: [ peopleList: [
{ {
name:'王刚' name:'史蒂芬库里',
post:'经理',
temperature:'36.7',
time:'2023-2-1',
type:'lala',
equipment:'一号打卡机',
picture:require('../assets/pic/23.png')
} }
], ],
vdaH: 0, vdaH: 0,
@ -413,7 +408,6 @@ export default {
getUserGroup({ getUserGroup({
projectId: projectId, projectId: projectId,
}).then((res) => { }).then((res) => {
console.log("res.data.data", res.data.data);
// this.projectUser = res.data.data // this.projectUser = res.data.data
this.pieData = res.data.data; this.pieData = res.data.data;
}); });
@ -423,11 +417,26 @@ export default {
}).then((res) => { }).then((res) => {
this.constructionPersonnel = res.data.data; this.constructionPersonnel = res.data.data;
}); });
//考勤监控
getAttend({ getAttend({
projectId: projectId, projectId: projectId,
}).then((res) => { }).then((res) => {
console.log(res.data, "============="); this.peopleList = Object.keys(res.data.data).map((item,index)=>{
return {name:res.data.data[item].name,post:res.data.data[item].post,type:res.data.data[item].type,time:res.data.data[item].time,picture:res.data.data[item].picture,equipment:res.data.data[item].equipment,temperature:res.data.data[item].temperature}
})
}); });
//站班会记录
getRecentMeeting({
projectId: projectId,
}).then((res)=>{
this.meeting = res.data.data
})
//站班会统计
getMonthCensus({
projectId: projectId,
}).then((res)=>{
this.radarList = res.data.data
})
}, },
createMqtt() { createMqtt() {
@ -659,13 +668,17 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
margin-top: 10px; // margin-top: 10px;
margin-left: 18px; // margin-left: 18px;
width: 100%;
span:nth-child(1) { display: flex;
display: inline-block; // span:nth-child(1) {
width: 56px; // display: inline-block;
text-align-last: justify; // width: 56px;
// text-align-last: justify;
// }
.textRight{
width: 50%;
} }
} }
@ -736,6 +749,17 @@ export default {
color: #ffffff; color: #ffffff;
padding: 0 22px 0 0px; padding: 0 22px 0 0px;
height: 260px; height: 260px;
::-webkit-scrollbar {
display: none;
}
.meetContent{
overflow: auto;
height: 90%;
width: 100%;
word-wrap: break-word;
word-break: break-all;
}
} }
.mettiogBox { .mettiogBox {
@ -747,16 +771,31 @@ export default {
font-weight: 500; font-weight: 500;
color: #ffffff; color: #ffffff;
padding: 0 22px 0 30px; padding: 0 22px 0 30px;
height: 260px; height: 215px;
width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
@media only screen and (max-height: 1000px) { @media only screen and (max-height: 1000px) {
top: 330px; top: 330px;
} }
::-webkit-scrollbar {
display: none;
}
.meetContent{
overflow: auto;
height: 90%;
width: 100%;
word-wrap: break-word;
word-break: break-all;
}
} }
.lookFor { .lookFor {
width: 57px; width: 57px;
height: 24px; height: 100%;
background: url("~@/assets/pic/view.png") no-repeat; background: url("~@/assets/pic/view.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
float: right; float: right;
@ -812,7 +851,9 @@ export default {
position: absolute; position: absolute;
top: 48px; top: 48px;
display: flex; display: flex;
::-webkit-scrollbar {
display: none ;
}
@media only screen and (max-height: 1000px) { @media only screen and (max-height: 1000px) {
top: 24px; top: 24px;
} }
@ -822,7 +863,7 @@ export default {
height: 160px; height: 160px;
padding: 5px; padding: 5px;
border: 1px solid #00ebeb; border: 1px solid #00ebeb;
margin-top: 38px; margin-top: 11px;
margin-left: 18px; margin-left: 18px;
margin-right: 14px; margin-right: 14px;
@ -833,10 +874,11 @@ export default {
} }
.twoKqjk { .twoKqjk {
width: 234px; width: 100%;
height: 200px; height: 194px;
margin-top: 25px; margin-top: 25px;
background: rgba(0, 84, 79, 0.3); background: rgba(0, 84, 79, 0.3);
overflow-y: auto;
} }
} }

311
src/views/videoSurveillanceComponents.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<!-- <Resize> --> <!-- <Resize> -->
<div > <div>
<!-- <div class="bgPicture" :style="{ height: vdaH }"> <!-- <div class="bgPicture" :style="{ height: vdaH }">
<div class="title"></div> <div class="title"></div>
<div class="titTop"> <div class="titTop">
@ -18,11 +18,19 @@
</div> </div>
</div> --> </div> -->
<!-- 左侧大模块 --> <!-- 左侧大模块 -->
<div class="scFathBox scroller" style="overflow-y: scroll;overflow-x: hidden"> <div
<div class="scFathChild" v-for="(item, i) in 20" :key="i" @click="tzSp"> class="scFathBox scroller"
<img src="../assets/pic/23.png" alt="" style="width:100%;height:100%"> style="overflow-y: scroll; overflow-x: hidden"
>
<div
class="scFathChild"
v-for="(item, i) in videoAllList"
:key="i"
@click="tzSp(item.equipmentName, item.id)"
>
<img :src="item.thumbnail" alt="" style="width: 100%; height: 100%" />
<div class="childrenBox"> <div class="childrenBox">
隧道{{ i + 1 }}号位摄像头 {{ item.equipmentName }}
</div> </div>
</div> </div>
</div> </div>
@ -35,28 +43,57 @@
<span></span> <span></span>
</div> </div>
<div class="tjBox"> <div class="tjBox">
<div style="display: flex;margin-left: 57px;"> <div style="display: flex; margin-left: 57px">
<span class="tt tt1"></span> <span class="tt tt1"></span>
<div class="ttgd"> <div class="ttgd">
<span class="nameBox">固定摄像头</span> <span class="nameBox">固定摄像头</span>
<div class="status-one"> <div class="status-one">
<div class="process-one"></div> <!-- <div class="process-one"> -->
<el-progress
class="process-one"
:text-inside="true"
:stroke-width="25"
:percentage="lockPer"
></el-progress>
<!-- </div> -->
</div> </div>
<span class="nameBox" style="color:#fff">在线<span <div style="margin-top: 10px">
style="color:#fff;font-size: 16px;font-weight: bold;">52</span>台</span> <span class="nameBox" style="color: #fff"
<span class="nameBox" style="float:right;">共100台</span> >在线<span
style="color: #fff; font-size: 16px; font-weight: bold"
>{{ onlineLock }}</span
>台</span
>
<span class="nameBox" style="float: right"
>共{{ allLock }}台</span
>
</div> </div>
</div> </div>
<div style="display: flex;margin-left: 57px;margin-top: 23px;"> </div>
<div style="display: flex; margin-left: 57px; margin-top: 23px">
<span class="tt tt2"></span> <span class="tt tt2"></span>
<div class="ttgd"> <div class="ttgd">
<span class="nameBox">移动监控</span> <span class="nameBox">移动监控</span>
<div class="status-one"> <div class="status-one">
<div class="process-one"></div> <!-- <div class="process-one"></div> -->
<el-progress
class="process-one"
:text-inside="true"
:stroke-width="25"
:percentage="movePer"
></el-progress>
</div>
<div style="margin-top: 10px">
<span class="nameBox" style="color: #fff"
>在线<span
style="color: #fff; font-size: 16px; font-weight: bold"
>{{ onlineMove }}</span
>台</span
>
<span class="nameBox" style="float: right"
>共{{ allMove }}台</span
>
</div> </div>
<span class="nameBox" style="color:#fff">在线<span
style="color:#fff;font-size: 16px;font-weight: bold;">52</span>台</span>
<span class="nameBox" style="float:right;">共100台</span>
</div> </div>
</div> </div>
</div> </div>
@ -66,17 +103,32 @@
<div class="titName"> <div class="titName">
<span></span> <span></span>
<span>在线摄像头列表</span> <span>在线摄像头列表</span>
<span style="width: 201px;"></span> <span style="width: 201px"></span>
</div> </div>
<div class="securityCheck"> <div class="securityCheck">
<div class="vidBox"> <div
<span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span> class="vidBox"
<div style="overflow:hidden;"> :style="index % 2 != 0 ? 'background: none' : 'background: block'"
<span class="playBox" @click="tzSp"></span> v-for="(item, index) in videoList"
<span class="lookForMessage">查看</span> :key="index"
>
<span>{{ item.name }}</span>
<div style="display: flex; align-items: center">
<!-- <span class="playBox" @click="tzSp"></span> -->
<img
:src="item.icon"
@click="tzSp(item.name, item.id)"
style="
width: 16px;
height: 16px;
margin-right: 5px;
cursor: pointer;
"
/>
<span class="lookForMessage">{{ item.lookOver }}</span>
</div> </div>
</div> </div>
<div class="vidBox" style="background: none;"> <!-- <div class="vidBox" style="background: none;">
<span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span> <span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
<div style="overflow:hidden;"> <div style="overflow:hidden;">
<span class="playBox"></span> <span class="playBox"></span>
@ -146,6 +198,13 @@
<span class="lookForMessage">查看</span> <span class="lookForMessage">查看</span>
</div> </div>
</div> </div>
<div class="vidBox">
<span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
<div style="overflow:hidden;">
<span class="playBox"></span>
<span class="lookForMessage">查看</span>
</div>
</div> -->
</div> </div>
</div> </div>
</div> </div>
@ -156,111 +215,119 @@
import RadarChart from "@/components/common/RadarChart"; import RadarChart from "@/components/common/RadarChart";
import pieChart from "@/components/common/pieChart"; import pieChart from "@/components/common/pieChart";
import pieDateChart from "@/components/common/pieDateChart"; import pieDateChart from "@/components/common/pieDateChart";
import Resize from '../utils/Resize.vue' import Resize from "../utils/Resize.vue";
import { getAllCamera, getAllCameraList, getCameraCount } from "@/api/api";
export default { export default {
name: "report", name: "report",
components: { components: {
pieChart, pieChart,
RadarChart, RadarChart,
pieDateChart, pieDateChart,
Resize Resize,
}, },
data() { data() {
return { return {
colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'], allLock: 0, //所有固定摄像头
allMove: 0, //所有移动摄像头
onlineLock: 0, //在线固定摄像头
onlineMove: 0, //在线移动摄像头
lockPer: 0, //固定摄像头占比
movePer: 0, //移动摄像头占比
videoAllList: [], //获取所有监控
videoList: [],
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
iconPicList: [ iconPicList: [
{ {
icon: "wendu", icon: "wendu",
name: "温度", name: "温度",
val: "19.8", val: "19.8",
tem: "℃" tem: "℃",
}, },
{ {
icon: "shidu", icon: "shidu",
name: "湿度", name: "湿度",
val: "19.8", val: "19.8",
tem: "%" tem: "%",
}, },
{ {
icon: "yangqi", icon: "yangqi",
name: "氧气值", name: "氧气值",
val: "19.8", val: "19.8",
tem: "%VOL" tem: "%VOL",
}, },
{ {
icon: "co2", icon: "co2",
name: "二氧化碳", name: "二氧化碳",
val: "19.8", val: "19.8",
tem: "%VOL" tem: "%VOL",
}, },
{ {
icon: "ch4", icon: "ch4",
name: "甲烷", name: "甲烷",
val: "19.8", val: "19.8",
tem: "ppm" tem: "ppm",
}, },
{ {
icon: "h2s", icon: "h2s",
name: "硫化氢", name: "硫化氢",
val: "19.8", val: "19.8",
tem: "ppm" tem: "ppm",
} },
], ],
tableData: [ tableData: [
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
} },
], ],
qyList: [ qyList: [
{ {
name: "我的", name: "我的",
value: 12 value: 12,
}, },
{ {
name: "我的", name: "我的",
value: 112 value: 112,
}, },
{ {
name: "我的", name: "我的",
value: 132 value: 132,
} },
], ],
xArry: [], xArry: [],
chartData: [], chartData: [],
peopleList: [ peopleList: [
{ {
name: "姓名", name: "姓名",
value: "：王刚" value: "：王刚",
}, },
{ {
name: "岗位", name: "岗位",
value: "：项目经理" value: "：项目经理",
}, },
{ {
name: "体温", name: "体温",
value: "：36.5℃" value: "：36.5℃",
}, },
{ {
name: "入场时间", name: "入场时间",
value: "：2022-11-26" value: "：2022-11-26",
}, },
{ {
name: "考勤类型", name: "考勤类型",
value: "：进场" value: "：进场",
}, },
{ {
name: "打卡设备", name: "打卡设备",
value: "：1号打卡机" value: "：1号打卡机",
}, },
], ],
vdaH: 0, vdaH: 0,
@ -268,7 +335,7 @@ export default {
menuType: 2, menuType: 2,
numberList: [5, 5], numberList: [5, 5],
rightThreeHeightBox: 0, rightThreeHeightBox: 0,
leftOneBox: 0 leftOneBox: 0,
}; };
}, },
created() { created() {
@ -278,20 +345,25 @@ export default {
methods: { methods: {
goBack(val) { goBack(val) {
if (val === 1) { if (val === 1) {
this.$router.push('/') this.$router.push("/");
} else { } else {
this.$router.go(0) this.$router.go(0);
} }
}, },
tzSp() { tzSp(name, id) {
// this.$router.push('/videoViewing') // this.$router.push('/videoViewing')
this.$emit('transfer','into') let videoObj = {
videoName: name,
videoId: id,
};
this.$emit("transfer", videoObj);
}, },
getDivHeight() { getDivHeight() {
const screenheight = window.innerHeight const screenheight = window.innerHeight;
this.rightThreeHeightBox = screenheight - 440 + 'px' this.rightThreeHeightBox = screenheight - 440 + "px";
this.leftOneBox = screenheight - 187 + 'px' this.leftOneBox = screenheight - 187 + "px";
let h = document.documentElement.clientHeight || document.body.clientHeight; let h =
document.documentElement.clientHeight || document.body.clientHeight;
this.vdaH = h - 0 + "px"; this.vdaH = h - 0 + "px";
}, },
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {
@ -306,11 +378,11 @@ export default {
childBoxClick(val) { childBoxClick(val) {
this.menuType = val; this.menuType = val;
if (val === 3) { if (val === 3) {
this.$router.push('/progress') this.$router.push("/progress");
} else if (val === 1) { } else if (val === 1) {
this.$router.push('/personnel') this.$router.push("/personnel");
} else if (val === 4) { } else if (val === 4) {
this.$router.push('/management') this.$router.push("/management");
} }
}, },
switchDiv() { switchDiv() {
@ -322,15 +394,49 @@ export default {
setTimeout(() => { setTimeout(() => {
// 俩秒之后让模块消失 // 俩秒之后让模块消失
this.$refs.switchBtn.style.display = "block"; this.$refs.switchBtn.style.display = "block";
}, 800) }, 800);
}
} }
}, },
},
mounted() { mounted() {
this.switchDiv(); this.switchDiv();
this.getDivHeight(); this.getDivHeight();
window.addEventListener('resize', this.getDivHeight) window.addEventListener("resize", this.getDivHeight);
//获取所有监控
getAllCamera().then((res) => {
this.videoAllList = Object.keys(res.data.data).map((item, index) => {
return {
thumbnail: res.data.data[item].thumbnail,
equipmentName: res.data.data[item].equipmentName,
id: res.data.data[item].id,
};
});
});
//获取所有接口列表
getAllCameraList().then((res) => {
this.videoList = Object.keys(res.data.data).map((item, index) => {
return {
name: res.data.data[item].equipmentName,
icon: require("../assets/pic/play.png"),
lookOver: "查看",
id: res.data.data[item].id,
};
});
});
//获取摄像头数量接口
getCameraCount().then((res) => {
this.allLock = res.data.data.allLock;
this.onlineLock = res.data.data.onlineLock;
this.allMove = res.data.data.allMove;
this.onlineMove = res.data.data.onlineMove;
if (this.allLock != 0) {
this.lockPer = (this.onlineLock / this.allLock) * 100;
} }
if (this.allMove != 0) {
this.movePer = (this.onlineMove / this.allMove) * 100;
}
});
},
}; };
</script> </script>
@ -349,12 +455,12 @@ export default {
background: #053635; background: #053635;
border-radius: 4px; border-radius: 4px;
opacity: 0.6; opacity: 0.6;
border: 1px solid #0E6760; border: 1px solid #0e6760;
} }
.scroller::-webkit-scrollbar-thumb { .scroller::-webkit-scrollbar-thumb {
width: 11em; width: 11em;
background-color: #0E6760; background-color: #0e6760;
-webkit-border-radius: 2em; -webkit-border-radius: 2em;
-moz-border-radius: 2em; -moz-border-radius: 2em;
border-radius: 2em; border-radius: 2em;
@ -378,7 +484,6 @@ export default {
.scFathChild:hover { .scFathChild:hover {
transform: scale(1.1); transform: scale(1.1);
} }
.scFathChild { .scFathChild {
@ -392,7 +497,7 @@ export default {
transition: All 0.2s ease-in-out; transition: All 0.2s ease-in-out;
.childrenBox { .childrenBox {
width: 123px; // width: 123px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
@ -403,16 +508,16 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
.meeting { .meeting {
width: 76px; width: 76px;
height: 29px; height: 29px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
text-align: center; text-align: center;
line-height: 29px; line-height: 29px;
@ -422,7 +527,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
padding-right: 6px; padding-right: 6px;
} }
@ -434,7 +539,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
padding: 0 22px 0 33px; padding: 0 22px 0 33px;
height: 260px; height: 260px;
} }
@ -475,9 +580,6 @@ export default {
} }
} }
.bgPicture { .bgPicture {
width: 100%; width: 100%;
background: url("~@/assets/pic/b1g.png") no-repeat; background: url("~@/assets/pic/b1g.png") no-repeat;
@ -502,14 +604,14 @@ export default {
.titLeft { .titLeft {
width: 138px; width: 138px;
height: 40px; height: 40px;
background: #025A5F; background: #025a5f;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
span:nth-child(1), span:nth-child(1),
span:nth-child(2) { span:nth-child(2) {
font-size: 14px; font-size: 14px;
color: #3CFFF9; color: #3cfff9;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
@ -529,7 +631,7 @@ export default {
padding-right: 25px; padding-right: 25px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #D1FFFE; color: #d1fffe;
span:nth-child(2) { span:nth-child(2) {
display: inline-block; display: inline-block;
@ -541,7 +643,6 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
} }
.titName { .titName {
@ -578,9 +679,6 @@ export default {
} }
} }
.rightOneBox { .rightOneBox {
width: 424px; width: 424px;
height: 302px; height: 302px;
@ -611,7 +709,6 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
width: 27px; width: 27px;
height: 33px; height: 33px;
} }
.tt { .tt {
@ -625,21 +722,32 @@ export default {
.nameBox { .nameBox {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #60D5CD; color: #60d5cd;
} }
.status-one { .status-one {
width: 260px; width: 260px;
border: 1px #60D5CD solid; // border: 1px #60D5CD solid;
height: 20px; height: 20px;
background: transparent; // 此时是最新的语法； background: transparent; // 此时是最新的语法；
padding: 1px; padding: 1px;
margin-top: 8px; margin-top: 4px;
.process-one { .process-one {
background: linear-gradient(89deg, #105752, #25E8B3); width: 100%;
width: 50%;
height: 100%; height: 100%;
/deep/ .el-progress-bar__inner {
background-color: unset;
background-image: linear-gradient(89deg, #105752, #25e8b3);
border-radius: 0;
}
/deep/ .el-progress-bar__outer {
border-radius: 0;
border: 1px #60d5cd solid;
}
/deep/ .el-progress-bar__outer {
background-color: transparent !important;
}
} }
} }
} }
@ -651,10 +759,14 @@ export default {
height: 80%; height: 80%;
position: absolute; position: absolute;
top: 86px; top: 86px;
overflow-y: auto;
::-webkit-scrollbar {
display: none;
}
@media only screen and (max-height: 1000px) { @media only screen and (max-height: 1000px) {
top: 66px; top: 66px;
overflow: hidden; // overflow: hidden;
overflow: auto;
} }
.vidBox { .vidBox {
@ -664,11 +776,11 @@ export default {
font-size: 16px; font-size: 16px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #ADFFFE; color: #adfffe;
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 38px; margin-left: 30px;
justify-content: space-around;
.playBox { .playBox {
display: inline-block; display: inline-block;
@ -685,8 +797,8 @@ export default {
.lookForMessage { .lookForMessage {
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #92FFFC; color: #92fffc;
vertical-align: middle vertical-align: middle;
} }
} }
} }
@ -699,11 +811,16 @@ export default {
position: absolute; position: absolute;
top: 421px; top: 421px;
right: 27px; right: 27px;
::-webkit-scrollbar {
display: none;
}
@media only screen and (max-height: 1000px) { @media only screen and (max-height: 1000px) {
top: 401px; top: 401px;
height: 510px; height: 510px;
overflow: hidden; // overflow: hidden;
::-webkit-scrollbar {
display: none;
}
} }
} }

313
src/views/videoViewingComponents.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<!-- <Resize> --> <!-- <Resize> -->
<div > <div>
<!-- <div class="bgPicture" :style="{ height: vdaH }"> <!-- <div class="bgPicture" :style="{ height: vdaH }">
<div class="title"></div> <div class="title"></div>
<div class="titTop"> <div class="titTop">
@ -20,9 +20,13 @@
<!-- 左侧大模块--> <!-- 左侧大模块-->
<div class="scFathBox" :style="{ height: leftOneBox }"> <div class="scFathBox" :style="{ height: leftOneBox }">
<div class="scFathChild"> <div class="scFathChild">
<img src="../assets/pic/bh.png" alt="" style="width:100%;height:100%"> <img
src="../assets/pic/bh.png"
alt=""
style="width: 100%; height: 100%"
/>
<div class="childrenBox"> <div class="childrenBox">
隧道1号位摄像头 {{ videoName }}
</div> </div>
</div> </div>
</div> </div>
@ -34,28 +38,56 @@
<span></span> <span></span>
</div> </div>
<div class="tjBox"> <div class="tjBox">
<div style="display: flex;"> <div style="display: flex">
<span class="tt tt1"></span> <span class="tt tt1"></span>
<div class="ttgd"> <div class="ttgd">
<span class="nameBox">固定摄像头</span> <span class="nameBox">固定摄像头</span>
<div class="status-one"> <div class="status-one">
<div class="process-one"></div> <!-- <div class="process-one"></div> -->
<el-progress
class="process-one"
:text-inside="true"
:stroke-width="25"
:percentage="lockPer"
></el-progress>
</div> </div>
<span class="nameBox" style="color:#fff">在线<span <div style="margin-top: 10px">
style="color:#fff;font-size: 16px;font-weight: bold;">52</span>台</span> <span class="nameBox" style="color: #fff"
<span class="nameBox" style="float:right;">共100台</span> >在线<span
style="color: #fff; font-size: 16px; font-weight: bold"
>{{ onlineLock }}</span
>台</span
>
<span class="nameBox" style="float: right"
>共{{ allLock }}台</span
>
</div> </div>
</div> </div>
<div style="display: flex;margin-top: 23px;"> </div>
<div style="display: flex; margin-top: 23px">
<span class="tt tt2"></span> <span class="tt tt2"></span>
<div class="ttgd"> <div class="ttgd">
<span class="nameBox">移动监控</span> <span class="nameBox">移动监控</span>
<div class="status-one"> <div class="status-one">
<div class="process-one"></div> <!-- <div class="process-one"></div> -->
<el-progress
class="process-one"
:text-inside="true"
:stroke-width="25"
:percentage="movePer"
></el-progress>
</div>
<div style="margin-top: 10px">
<span class="nameBox" style="color: #fff"
>在线<span
style="color: #fff; font-size: 16px; font-weight: bold"
>{{ onlineMove }}</span
>台</span
>
<span class="nameBox" style="float: right"
>共{{ allMove }}台</span
>
</div> </div>
<span class="nameBox" style="color:#fff">在线<span
style="color:#fff;font-size: 16px;font-weight: bold;">50</span>台</span>
<span class="nameBox" style="float:right;">共80台</span>
</div> </div>
</div> </div>
</div> </div>
@ -70,22 +102,31 @@
<div class="securityCheck"> <div class="securityCheck">
<el-form ref="form" :model="timeForm" label-width="100px"> <el-form ref="form" :model="timeForm" label-width="100px">
<el-form-item label="开始时间："> <el-form-item label="开始时间：">
<el-date-picker :clearable="false" popper-class="elDatePicker" style="width:100%;" <el-date-picker
v-model="timeForm.start" type="datetime" placeholder="选择日期时间"> :clearable="false"
popper-class="elDatePicker"
style="width: 100%"
v-model="timeForm.start"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
<el-form-item label="结束时间："> <el-form-item label="结束时间：">
<el-date-picker :clearable="false" style="width:100%;" v-model="timeForm.end" type="datetime" <el-date-picker
placeholder="选择日期时间"> :clearable="false"
style="width: 100%"
v-model="timeForm.end"
type="datetime"
placeholder="选择日期时间"
>
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div class="topIcon cc"></div> <div class="topIcon cc"></div>
<div class="bottomIcon dd"></div> <div class="bottomIcon dd"></div>
</div> </div>
<div class="btnon" @click="lookForVideo"> <div class="btnon" @click="lookForVideo"></div>
</div>
</div> </div>
<!-- 右侧模块3 --> <!-- 右侧模块3 -->
<div class="rightThreeBox"> <div class="rightThreeBox">
@ -96,11 +137,16 @@
</div> </div>
<div class="kzBtn"> <div class="kzBtn">
<div :class="[isShowLookFor ? 'viedoOne' : 'viedo2One']"></div> <div :class="[isShowLookFor ? 'viedoOne' : 'viedo2One']"></div>
<div @click="bfClick" :class="[isShowLookFor ? 'ciedo2One' : 'ciedoOne', bfkzBtn ? 'xsbfOne' : 'ciedoOne']"> <div
</div> @click="bfClick"
:class="[
isShowLookFor ? 'ciedo2One' : 'ciedoOne',
bfkzBtn ? 'xsbfOne' : 'ciedoOne',
]"
></div>
<div :class="[isShowLookFor ? 'diedo2One' : 'diedoOne']"></div> <div :class="[isShowLookFor ? 'diedo2One' : 'diedoOne']"></div>
</div> </div>
<div class="bottomTitle">隧道5号位摄像头</div> <div class="bottomTitle"> {{ videoName }}</div>
</div> </div>
</div> </div>
@ -111,115 +157,131 @@
import RadarChart from "@/components/common/RadarChart"; import RadarChart from "@/components/common/RadarChart";
import pieChart from "@/components/common/pieChart"; import pieChart from "@/components/common/pieChart";
import pieDateChart from "@/components/common/pieDateChart"; import pieDateChart from "@/components/common/pieDateChart";
import Resize from '../utils/Resize.vue' import Resize from "../utils/Resize.vue";
import { getCameraCount, getCameraHistory } from "@/api/api";
export default { export default {
name: "report", name: "report",
props: {
videoName: {
type: String,
default: "",
},
videoId: {
type: String,
default: "",
},
},
components: { components: {
pieChart, pieChart,
RadarChart, RadarChart,
pieDateChart, pieDateChart,
Resize Resize,
}, },
data() { data() {
return { return {
allLock: 0, //所有固定摄像头
allMove: 0, //所有移动摄像头
onlineLock: 0, //在线固定摄像头
onlineMove: 0, //在线移动摄像头
lockPer: 0, //固定摄像头占比
movePer: 0, //移动摄像头占比
timeForm: { timeForm: {
start: '', start: "",
end: '' end: "",
}, },
colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'], colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
iconPicList: [ iconPicList: [
{ {
icon: "wendu", icon: "wendu",
name: "温度", name: "温度",
val: "19.8", val: "19.8",
tem: "℃" tem: "℃",
}, },
{ {
icon: "shidu", icon: "shidu",
name: "湿度", name: "湿度",
val: "19.8", val: "19.8",
tem: "%" tem: "%",
}, },
{ {
icon: "yangqi", icon: "yangqi",
name: "氧气值", name: "氧气值",
val: "19.8", val: "19.8",
tem: "%VOL" tem: "%VOL",
}, },
{ {
icon: "co2", icon: "co2",
name: "二氧化碳", name: "二氧化碳",
val: "19.8", val: "19.8",
tem: "%VOL" tem: "%VOL",
}, },
{ {
icon: "ch4", icon: "ch4",
name: "甲烷", name: "甲烷",
val: "19.8", val: "19.8",
tem: "ppm" tem: "ppm",
}, },
{ {
icon: "h2s", icon: "h2s",
name: "硫化氢", name: "硫化氢",
val: "19.8", val: "19.8",
tem: "ppm" tem: "ppm",
} },
], ],
tableData: [ tableData: [
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
}, },
{ {
entName: "我打打死" entName: "我打打死",
} },
], ],
qyList: [ qyList: [
{ {
name: "我的", name: "我的",
value: 12 value: 12,
}, },
{ {
name: "我的", name: "我的",
value: 112 value: 112,
}, },
{ {
name: "我的", name: "我的",
value: 132 value: 132,
} },
], ],
xArry: [], xArry: [],
chartData: [], chartData: [],
peopleList: [ peopleList: [
{ {
name: "姓名", name: "姓名",
value: "：王刚" value: "：王刚",
}, },
{ {
name: "岗位", name: "岗位",
value: "：项目经理" value: "：项目经理",
}, },
{ {
name: "体温", name: "体温",
value: "：36.5℃" value: "：36.5℃",
}, },
{ {
name: "入场时间", name: "入场时间",
value: "：2022-11-26" value: "：2022-11-26",
}, },
{ {
name: "考勤类型", name: "考勤类型",
value: "：进场" value: "：进场",
}, },
{ {
name: "打卡设备", name: "打卡设备",
value: "：1号打卡机" value: "：1号打卡机",
}, },
], ],
vdaH: 0, vdaH: 0,
@ -229,7 +291,7 @@ export default {
rightThreeHeightBox: 0, rightThreeHeightBox: 0,
leftOneBox: 0, leftOneBox: 0,
isShowLookFor: false, isShowLookFor: false,
bfkzBtn: false bfkzBtn: false,
}; };
}, },
created() { created() {
@ -240,31 +302,39 @@ export default {
//点击播放按 //点击播放按
bfClick() { bfClick() {
if (this.isShowLookFor) { if (this.isShowLookFor) {
this.bfkzBtn = !this.bfkzBtn this.bfkzBtn = !this.bfkzBtn;
} }
}, },
//点击开始查看按钮 //点击开始查看按钮
lookForVideo() { lookForVideo() {
if (this.timeForm.start == '' && this.timeForm.end == '') { if (this.timeForm.start == "" && this.timeForm.end == "") {
this.isShowLookFor = false this.isShowLookFor = false;
} else { } else {
let data = {
equipmentId: this.videoId,
startTime: this.$moment(this.timeForm.start).format("YYYY-MM-DD hh:mm:ss"),
endTime: this.$moment(this.timeForm.end).format("YYYY-MM-DD hh:mm:ss"),
};
getCameraHistory(data).then((res) => {
console.log(res.data,'qqqqqqqqqqqqqqqqqqqqqqqqqqq');
});
this.isShowLookFor = true; this.isShowLookFor = true;
} }
console.log(this.isShowLookFor);
}, },
goBack(val) { goBack(val) {
if (val === 1) { if (val === 1) {
this.$router.push('/') this.$router.push("/");
} else { } else {
this.$router.push('/videoSurveillance') this.$router.push("/videoSurveillance");
} }
}, },
getDivHeight() { getDivHeight() {
const screenheight = window.innerHeight const screenheight = window.innerHeight;
console.log(window.innerHeight); console.log(window.innerHeight);
this.rightThreeHeightBox = screenheight - 780 + 'px' this.rightThreeHeightBox = screenheight - 780 + "px";
this.leftOneBox = screenheight - 216 + 'px' this.leftOneBox = screenheight - 216 + "px";
let h = document.documentElement.clientHeight || document.body.clientHeight; let h =
document.documentElement.clientHeight || document.body.clientHeight;
this.vdaH = h - 0 + "px"; this.vdaH = h - 0 + "px";
}, },
tableRowClassName({ row, rowIndex }) { tableRowClassName({ row, rowIndex }) {
@ -279,13 +349,13 @@ export default {
childBoxClick(val) { childBoxClick(val) {
this.menuType = val; this.menuType = val;
if (val === 3) { if (val === 3) {
this.$router.push('/progress') this.$router.push("/progress");
} else if (val === 2) { } else if (val === 2) {
this.$router.push('/videoSurveillance') this.$router.push("/videoSurveillance");
} else if (val === 4) { } else if (val === 4) {
this.$router.push('/management') this.$router.push("/management");
} else if (val === 1) { } else if (val === 1) {
this.$router.push('/personnel') this.$router.push("/personnel");
} }
}, },
switchDiv() { switchDiv() {
@ -297,16 +367,28 @@ export default {
setTimeout(() => { setTimeout(() => {
// 俩秒之后让模块消失 // 俩秒之后让模块消失
this.$refs.switchBtn.style.display = "block"; this.$refs.switchBtn.style.display = "block";
}, 800) }, 800);
} }
} },
}, },
mounted() { mounted() {
this.switchDiv(); this.switchDiv();
this.getDivHeight(); this.getDivHeight();
window.addEventListener('resize', this.getDivHeight) window.addEventListener("resize", this.getDivHeight);
//获取摄像头数量接口
getCameraCount().then((res) => {
this.allLock = res.data.data.allLock;
this.onlineLock = res.data.data.onlineLock;
this.allMove = res.data.data.allMove;
this.onlineMove = res.data.data.onlineMove;
if (this.allLock != 0) {
this.lockPer = (this.onlineLock / this.allLock) * 100;
} }
if (this.allMove != 0) {
this.movePer = (this.onlineMove / this.allMove) * 100;
}
});
},
}; };
</script> </script>
@ -322,7 +404,7 @@ export default {
.titLeft { .titLeft {
width: 138px; width: 138px;
height: 40px; height: 40px;
background: #025A5F; background: #025a5f;
line-height: 40px; line-height: 40px;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
@ -330,7 +412,7 @@ export default {
span:nth-child(1), span:nth-child(1),
span:nth-child(2) { span:nth-child(2) {
font-size: 14px; font-size: 14px;
color: #3CFFF9; color: #3cfff9;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
@ -341,7 +423,6 @@ export default {
color: #fff; color: #fff;
letter-spacing: 1px; letter-spacing: 1px;
font-weight: bold; font-weight: bold;
} }
} }
@ -350,7 +431,7 @@ export default {
padding-right: 25px; padding-right: 25px;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
color: #D1FFFE; color: #d1fffe;
span:nth-child(2) { span:nth-child(2) {
display: inline-block; display: inline-block;
@ -362,7 +443,6 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
} }
} }
} }
// 隐藏小时钟图标 // 隐藏小时钟图标
@ -391,7 +471,7 @@ export default {
position: relative; position: relative;
.childrenBox { .childrenBox {
width: 123px; // width: 123px;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
@ -402,7 +482,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
} }
} }
} }
@ -410,7 +490,8 @@ export default {
.meeting { .meeting {
width: 76px; width: 76px;
height: 29px; height: 29px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=) no-repeat; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFEAAAAdCAYAAADSFYAhAAAAAXNSR0IArs4c6QAABD9JREFUaEPtWk9oHFUY/35vD+bktbvjxZsoSot/sKJoqbaltaUgUkQQK4KIqOwkama3PeRgs9mS3Q0ILeTgwYMHgxfbHurBQynUQ715KIKK2OyaQEuEEtumeZ9kZ97szpt9+95uEjPE5hLmve/7fjO/9/u+982bRT4o7gHEI9T9x4zENcCJa9uF8tf99Lgqjs0uo/irLHlxZOkr7AiKe8Hi0X68CJLRtGj/V1c2LtV86NXtl4xni5NVfBb0x0Klfh5e4L/CwGNJ5UVKXI1GcxENShEyIkFGdiKXVCqicd1ejau4Mcua0nW7jOKD8H2zUru2RuJ+AI+vRylmJbkpbr1K3SL8e60bt87S7OwK8uPFg0LknrCllNO8jCQmck7mG270n+LztWal/t3aMyBfLr4Kxs72Aw1awG0s2IqnSlvTBmOLb5vfRHzB9O18pf5LmzZv3D8CYJftfu7Pdxhg4tvNX6/XaW6unXrwTvhHSdKTvUlS1cpEoW2pTf42P31fzxo+/6RSuU1i4bPiayREgkSRrvR9hahTYnIXhj5RamUk6/j3iL9cmGr8FlehfGnsdQF+Wmvk+mevLjBXYZmiDrhotIX4LOjv1mR9iojitg75sn9MMJ65X/PcGFiVfGmh2jjXbY0dZf8NwXg2qcRIWnFeuQGkrNzaxI5brOjs4t9ZXandPP3F9QSJXvmTN4l4dy+apJThO3RUswTCS8nJF5R4XAsSZ6myj2qigNDecHovUtbwQVhsVWqf63eLQqn4Fkg8N6TW/lduUsoLf1VnLqRIzJf8t0F4PiHP6GKwo5uN41MdIWUNX66IkwvT04spEr2S/w4xXtg4CrZnJAb/3qo0UqncrnZeyX+XGS8mHn3QlsORN+fWO4v4jK9b1drFXo+KQlB8DxAvhZMqgVKHsMlD2jiSnnAGsw6y5qAOf/UEzhY+M/E/t+VHSzMzSwYS/fdB2BPuwppJzKlh3KRAWxxTsbP5KTxbsbTFGRAfzD/PV3uncpjOgf8BBPaGvYtjXupmw6bfRr15bDq+ODM/Nf2DUTNe4H9IwMtD0rf93ZhWaOTW8ebE7LKRxEJp9GMQ7dv+bAz3hEx8pVVpTPbzRiHwfSLsTxq5ft3TvgqSq59+S8PGGdbPHR9Mk81q7XJfEvOBPwbgQLeRdY8dblGNe7oeLjP4TMvNkT+P0cTc3b4keoH/KQEH+/OiFGZaeX08RYuhtXFdjS3CZ7rYnKpXbXcJrzw6TkSH1gzZsDvHytB205iZyM9kl+pMtNOduEvMGn6Ox1qnGletJBaC0RKIDtsM+84P22KsC7TLeTPwQTebDzx4lCYmrI0fHhr3T5LAkbBNjNKm8+LSFkm6nUtuIIKS6Ww6Fozjd6pjIn6m8MHftCr1uss6oxCMPUU5fjhM5/D8ECI679N/qaA+J5vGTYiO9lnCv7vMP95oNOZdSPwXtf3hFdhdhzQAAAAASUVORK5CYII=)
no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
text-align: center; text-align: center;
line-height: 29px; line-height: 29px;
@ -420,7 +501,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
padding-right: 6px; padding-right: 6px;
} }
@ -432,7 +513,7 @@ export default {
font-size: 14px; font-size: 14px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
padding: 0 22px 0 33px; padding: 0 22px 0 33px;
height: 260px; height: 260px;
} }
@ -530,7 +611,7 @@ export default {
right: 27px; right: 27px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
@media only screen and (max-height: 960px) { @media only screen and (max-height: 969px) {
height: 270px; height: 270px;
top: 77px; top: 77px;
@ -544,7 +625,7 @@ export default {
top: 92px; top: 92px;
left: 56px; left: 56px;
@media only screen and (max-height: 960px) { @media only screen and (max-height: 969px) {
top: 64px; top: 64px;
} }
@ -560,7 +641,6 @@ export default {
background-size: 100% 100%; background-size: 100% 100%;
width: 27px; width: 27px;
height: 33px; height: 33px;
} }
.tt { .tt {
@ -574,21 +654,33 @@ export default {
.nameBox { .nameBox {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: #60D5CD; color: #60d5cd;
} }
.status-one { .status-one {
width: 260px; width: 260px;
border: 1px #60D5CD solid; // border: 1px #60D5CD solid;
height: 20px; height: 20px;
background: transparent; // 此时是最新的语法； background: transparent; // 此时是最新的语法；
padding: 1px; padding: 1px;
margin-top: 8px; // margin-top: 8px;
.process-one { .process-one {
background: linear-gradient(89deg, #105752, #25E8B3); // background: linear-gradient(89deg, #105752, #25E8B3);
width: 50%; width: 100%;
height: 100%; height: 100%;
/deep/ .el-progress-bar__inner {
background-color: unset;
background-image: linear-gradient(89deg, #105752, #25e8b3);
border-radius: 0;
}
/deep/ .el-progress-bar__outer {
border-radius: 0;
border: 1px #60d5cd solid;
}
/deep/ .el-progress-bar__outer {
background-color: transparent !important;
}
} }
} }
} }
@ -604,7 +696,7 @@ export default {
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@media only screen and (max-height: 960px) { @media only screen and (max-height: 969px) {
top: 97px; top: 97px;
} }
@ -659,8 +751,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
.ciedoOne { .ciedoOne {
width: 107px; width: 107px;
height: 107px; height: 107px;
@ -710,8 +800,6 @@ export default {
cursor: pointer; cursor: pointer;
background: url("~@/assets/pic/jgright.png") no-repeat; background: url("~@/assets/pic/jgright.png") no-repeat;
} }
} }
.btnon { .btnon {
@ -725,7 +813,7 @@ export default {
transform: translateX(-50%); transform: translateX(-50%);
cursor: pointer; cursor: pointer;
@media only screen and (max-height: 960px) { @media only screen and (max-height: 969px) {
bottom: 20px; bottom: 20px;
} }
} }
@ -735,7 +823,6 @@ export default {
height: 48px; height: 48px;
background: url("~@/assets/pic/jgck.png") no-repeat; background: url("~@/assets/pic/jgck.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.cc { .cc {
@ -765,11 +852,11 @@ export default {
.vidBox { .vidBox {
width: 345px; width: 345px;
height: 46px; height: 46px;
background: #378E7C; background: #378e7c;
font-size: 16px; font-size: 16px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #ADFFFE; color: #adfffe;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
@ -782,14 +869,14 @@ export default {
background: url("~@/assets/pic/play.png") no-repeat; background: url("~@/assets/pic/play.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
margin-top: 3px; margin-top: 3px;
vertical-align: middle vertical-align: middle;
} }
.lookForMessage { .lookForMessage {
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #92FFFC; color: #92fffc;
vertical-align: middle vertical-align: middle;
} }
} }
} }
@ -803,11 +890,10 @@ export default {
top: 422px; top: 422px;
right: 27px; right: 27px;
@media only screen and (max-height: 960px) { @media only screen and (max-height: 969px) {
top: 366px; top: 366px;
height: 270px; height: 270px;
} }
} }
.rightThreeBox { .rightThreeBox {
@ -818,30 +904,28 @@ export default {
position: absolute; position: absolute;
top: 746px; top: 746px;
right: 27px; right: 27px;
@media only screen and (max-height: 969px) {
height: 270px;
top: 654px;
}
.bottomTitle { .bottomTitle {
width: 138px; width: 100%;
height: 36px; height: 36px;
background: rgba(0, 37, 35, 0.5); background: rgba(0, 37, 35, 0.5);
position: absolute; position: absolute;
bottom: 31px; bottom: 31px;
left: 142px; // left: 142px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
line-height: 36px; line-height: 36px;
font-family: SourceHanSansCN-Medium, SourceHanSansCN; font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500; font-weight: 500;
color: #FFFFFF; color: #ffffff;
@media only screen and (max-height: 960px) { @media only screen and (max-height: 969px) {
bottom: 15px; bottom: 15px;
} }
} }
@media only screen and (max-height: 960px) {
height: 270px;
top: 654px;
}
} }
.container { .container {
@ -985,11 +1069,8 @@ export default {
.el-input--prefix .el-input__inner { .el-input--prefix .el-input__inner {
background: #002220 !important; background: #002220 !important;
;
border-radius: 2px !important; border-radius: 2px !important;
; border: 1px solid #31a49c !important;
border: 1px solid #31A49C !important;
;
color: #fff; color: #fff;
} }