代码提交
This commit is contained in:
parent
70db821295
commit
262ec2866e
|
|
@ -28,7 +28,8 @@
|
|||
"vue-router": "^3.0.1",
|
||||
"vue2-scale-box": "^0.1.4",
|
||||
"vuedraggable": "2.24.3",
|
||||
"vuex": "3.0.1"
|
||||
"vuex": "3.0.1",
|
||||
"moment": "^2.29.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^7.1.2",
|
||||
|
|
|
|||
|
|
@ -88,3 +88,33 @@ export const getCompleteMonthStatus = (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},
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,4 +38,15 @@ export const getAttend = (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},
|
||||
)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
height="100%"
|
||||
:extensionFun="extensionFun"
|
||||
></Chart>
|
||||
<div class="lineBox"></div>
|
||||
<!-- <div class="lineBox"></div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -53,7 +53,11 @@ export default {
|
|||
yAxisPadding: {
|
||||
type: Array,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
radarList:{
|
||||
type: Array,
|
||||
default: null
|
||||
} //父传子的数组
|
||||
},
|
||||
|
||||
components: {
|
||||
|
|
@ -69,7 +73,13 @@ export default {
|
|||
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
chartData: {
|
||||
// chartData: {
|
||||
// deep: true,
|
||||
// handler () {
|
||||
// this.resetOption()
|
||||
// }
|
||||
// },
|
||||
radarList:{
|
||||
deep: true,
|
||||
handler () {
|
||||
this.resetOption()
|
||||
|
|
@ -100,6 +110,12 @@ export default {
|
|||
}
|
||||
},
|
||||
option () {
|
||||
let month = [];
|
||||
let number = [];
|
||||
this.radarList.forEach((item,index) => {
|
||||
month.push(item.month + '月')
|
||||
number.push(item.number)
|
||||
});
|
||||
const self = this
|
||||
return {
|
||||
title: {
|
||||
|
|
@ -119,10 +135,10 @@ export default {
|
|||
}
|
||||
},
|
||||
grid: {
|
||||
top: '121',
|
||||
top: '80',
|
||||
left: '37',
|
||||
right: '31',
|
||||
bottom: '46',
|
||||
bottom: '20',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
|
|
@ -130,7 +146,7 @@ export default {
|
|||
// x轴线的颜色以及宽度
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#ffff',
|
||||
color: '#fff',
|
||||
height: 0
|
||||
}
|
||||
},
|
||||
|
|
@ -146,7 +162,7 @@ export default {
|
|||
},
|
||||
triggerEvent: true,
|
||||
type: 'category',
|
||||
data: this.xAxisData
|
||||
data: month
|
||||
},
|
||||
yAxis: {
|
||||
name: '次数',
|
||||
|
|
@ -183,7 +199,7 @@ export default {
|
|||
series: [
|
||||
{
|
||||
name:'检查次数',
|
||||
data: this.chartData,
|
||||
data: number,
|
||||
type: 'bar',
|
||||
barWidth:10,
|
||||
color:'#0DFFFF'
|
||||
|
|
|
|||
|
|
@ -89,6 +89,10 @@
|
|||
var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
tooltip:{
|
||||
trigger:'item',
|
||||
formatter: '{b}：{c}',
|
||||
},
|
||||
graphic: {
|
||||
elements: [{
|
||||
type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
||||
|
|
|
|||
|
|
@ -79,6 +79,10 @@ export default {
|
|||
var arr = ['middleLost', 0.6, val1data2, '今日完成进度']
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
tooltip:{
|
||||
trigger:'item',
|
||||
formatter: '{b}：{c}%',
|
||||
},
|
||||
graphic: {
|
||||
elements: [{
|
||||
type: 'image',//需要填充图片,配置image,如果不需要图片可以配置其他的, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
|
||||
|
|
|
|||
|
|
@ -72,6 +72,10 @@ export default {
|
|||
var arr = ["middleLost", 0.6, val1data2, "今日完成进度"];
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
tooltip:{
|
||||
trigger:'item',
|
||||
formatter: '{b}：{c}%',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<div class="jsBox">
|
||||
<div class="bogJs" v-for="(item, i) in pieData" :key="i">
|
||||
<div class="jsChild">
|
||||
<span :style="item.color"></span>
|
||||
<span :style="{'background':item.colorList}"></span>
|
||||
<!-- <span :background="item.color"></span> -->
|
||||
<span>{{item.groupName}}</span>
|
||||
</div>
|
||||
|
|
@ -58,10 +58,11 @@ export default {
|
|||
totalPer:0,
|
||||
pieDataNew:[],
|
||||
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() {
|
||||
this.initCharts();
|
||||
// this.initCharts();
|
||||
},
|
||||
watch: {
|
||||
// 监听父组件中的数据变化，重新触发Echarts
|
||||
|
|
@ -74,10 +75,8 @@ export default {
|
|||
pieData: {
|
||||
deep: true,
|
||||
handler(newVal) {
|
||||
console.log(newVal,'==============');
|
||||
// this.initCharts(newVal)
|
||||
this.changeNewVal(newVal)
|
||||
|
||||
this.initCharts(newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -85,21 +84,74 @@ export default {
|
|||
methods: {
|
||||
//获取人员数据
|
||||
changeNewVal(newVal){
|
||||
console.log("newVal",newVal)
|
||||
this.pieDataNew = newVal
|
||||
// var pieDataN = []
|
||||
newVal.map((item,index) => {
|
||||
this.totalPer+=item.number
|
||||
console.log("this.totalPer",this.totalPer)
|
||||
this.color.forEach((items,indexs) => {
|
||||
this.colorList.forEach((items,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);
|
||||
var placeHolderStyle = {
|
||||
normal: {
|
||||
|
|
@ -121,103 +173,110 @@ export default {
|
|||
};
|
||||
// 绘制图表
|
||||
myChart.setOption({
|
||||
series: [
|
||||
{
|
||||
name: '值',
|
||||
type: 'pie',
|
||||
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)' //边框阴影
|
||||
tooltip:{
|
||||
trigger:'item',
|
||||
formatter: function (params) {
|
||||
return params.seriesName+':' +params.value
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
value: 12,
|
||||
}, {
|
||||
value: 4,
|
||||
name: '',
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
// ------------2
|
||||
{
|
||||
name: '值',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
hoverAnimation: false,
|
||||
radius: ['72%', '67%'],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
length: 100,
|
||||
smooth: 0.5
|
||||
},
|
||||
borderWidth: 5,
|
||||
shadowBlur: 40,
|
||||
borderColor: "#F1E453",
|
||||
shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
|
||||
}
|
||||
},
|
||||
data: [{
|
||||
value: 6,
|
||||
}, {
|
||||
value: 4,
|
||||
name: '',
|
||||
itemStyle: placeHolderStyle
|
||||
}]
|
||||
},
|
||||
// ------------3
|
||||
{
|
||||
name: '值',
|
||||
type: 'pie',
|
||||
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
|
||||
}]
|
||||
},
|
||||
]
|
||||
series: series,
|
||||
// [
|
||||
// {
|
||||
// name: '值',
|
||||
// type: 'pie',
|
||||
// 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: [{
|
||||
// value: 12,
|
||||
// }, {
|
||||
// value: 4,
|
||||
// name: '',
|
||||
// itemStyle: placeHolderStyle
|
||||
// }]
|
||||
// },
|
||||
// // ------------2
|
||||
// {
|
||||
// name: '值',
|
||||
// type: 'pie',
|
||||
// clockWise: true,
|
||||
// hoverAnimation: false,
|
||||
// radius: ['72%', '67%'],
|
||||
// center: ['50%', '50%'],
|
||||
// itemStyle: {
|
||||
// normal: {
|
||||
// label: {
|
||||
// show: false
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false,
|
||||
// length: 100,
|
||||
// smooth: 0.5
|
||||
// },
|
||||
// borderWidth: 5,
|
||||
// shadowBlur: 40,
|
||||
// borderColor: "#F1E453",
|
||||
// shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
|
||||
// }
|
||||
// },
|
||||
// data: [{
|
||||
// value: 6,
|
||||
// }, {
|
||||
// value: 4,
|
||||
// name: '',
|
||||
// itemStyle: placeHolderStyle
|
||||
// }]
|
||||
// },
|
||||
// // ------------3
|
||||
// {
|
||||
// name: '值',
|
||||
// type: 'pie',
|
||||
// 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
|
||||
// }]
|
||||
// },
|
||||
// ]
|
||||
});
|
||||
|
||||
//默认第一条高亮
|
||||
|
|
|
|||
|
|
@ -35,6 +35,14 @@ Object.keys(filters).forEach(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
|
||||
//MQTT订阅
|
||||
var currentTopics = null;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
<!-- 视频监控 -->
|
||||
<VideoSurveillanceComponents v-if="videoSurveillanceShow" @transfer="getUser"/>
|
||||
<!-- 视频监控子页面 -->
|
||||
<VideoViewingComponents v-if="videoViewingShow"/>
|
||||
<VideoViewingComponents v-if="videoViewingShow" :videoName="videoName" :videoId="videoId"/>
|
||||
<!-- 进度管理 -->
|
||||
<ProgressComponents v-if="progressShow"/>
|
||||
<!-- 安全管理 -->
|
||||
|
|
@ -111,6 +111,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
videoName:'', //子传父的视频名称
|
||||
videoId:'',//子传父的视频Id
|
||||
//显示首页
|
||||
indexShow:true,
|
||||
//人员管理
|
||||
|
|
@ -371,7 +373,26 @@ export default {
|
|||
}
|
||||
},
|
||||
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(){
|
||||
|
|
@ -401,7 +422,6 @@ export default {
|
|||
url: 'https://restapi.amap.com/v3/weather/weatherInfo?key=e979d73682c0c69059e4cb6740c9dacd&city=320100',
|
||||
methods: ''
|
||||
}).then(res => {
|
||||
console.log(res.data,'=======================');
|
||||
this.weatherItem = res.data.lives[0];
|
||||
});
|
||||
} ,
|
||||
|
|
@ -439,7 +459,7 @@ export default {
|
|||
//获取视频子传父数据
|
||||
getUser(msg){
|
||||
// this.username= msg
|
||||
if(msg=='into'){
|
||||
if(msg != null){
|
||||
this.indexShow = false
|
||||
this.personnelShow = false
|
||||
this.videoSurveillanceShow = false
|
||||
|
|
@ -447,6 +467,8 @@ export default {
|
|||
this.managementShow= false
|
||||
this.progressShow = false
|
||||
this.titLeftshow = true
|
||||
this.videoName = msg.videoName
|
||||
this.videoId = msg.videoId
|
||||
}
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
|
|
|
|||
|
|
@ -200,6 +200,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<!-- 右侧模块1 -->
|
||||
|
||||
<div class="rightOneBox" :style="{ right: boxNone ? '27px' : '-444px' }">
|
||||
<div class="titName">
|
||||
<span></span>
|
||||
|
|
@ -210,16 +211,19 @@
|
|||
<div
|
||||
style="position: relative; margin-left: 30px; margin-right: 20px"
|
||||
class="videoFat"
|
||||
v-for="(item,index) in videoList"
|
||||
:key="index"
|
||||
>
|
||||
<img src="@/assets/pic/23.png" alt="" />
|
||||
<div class="smallBox">隧道2号位摄像头</div>
|
||||
<img :src="item.thumbnail" alt="" />
|
||||
<div class="smallBox">{{item.equipmentName}}</div>
|
||||
</div>
|
||||
<div style="position: relative" class="videoFat">
|
||||
<!-- <div style="position: relative" class="videoFat">
|
||||
<img src="@/assets/pic/23.png" alt="" />
|
||||
<div class="smallBox">隧道3号位摄像头</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧模块2 -->
|
||||
<div class="rightTwoBox" :style="{ right: boxNone ? '27px' : '-442px' }">
|
||||
<div class="titName">
|
||||
|
|
@ -352,6 +356,7 @@ import {
|
|||
getProjectStatus,
|
||||
getProjectCheckCensus,
|
||||
getProjectCheckInfo,
|
||||
getIsImportant,
|
||||
} from "@/api/api";
|
||||
export default {
|
||||
name: "report",
|
||||
|
|
@ -363,6 +368,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
videoList:[],//视频监控数据
|
||||
jinduList:0, //计算进度条的宽度
|
||||
progress:0, //计算进度条的值
|
||||
securityCheck: [], //安全检查统计
|
||||
|
|
@ -729,6 +735,12 @@ export default {
|
|||
}
|
||||
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 = () => {
|
||||
|
|
@ -894,7 +906,7 @@ export default {
|
|||
}
|
||||
|
||||
.smallBox {
|
||||
width: 105px;
|
||||
// width: 105px;
|
||||
height: 28px;
|
||||
background: rgba(0, 37, 35, 0.5);
|
||||
position: absolute;
|
||||
|
|
@ -1125,15 +1137,19 @@ export default {
|
|||
|
||||
.videoBox {
|
||||
position: absolute;
|
||||
bottom: 33px;
|
||||
display: flex;
|
||||
|
||||
// bottom: 33px;
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
overflow-y: auto; //重点
|
||||
height: calc(100% - 60px);
|
||||
top: 40px;
|
||||
.videoFat {
|
||||
background: gray;
|
||||
flex: 1;
|
||||
width: 180px;
|
||||
width: 165px;
|
||||
height: 183px;
|
||||
|
||||
float: left;
|
||||
margin-top: 5%;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -1442,10 +1458,11 @@ export default {
|
|||
position: absolute;
|
||||
top: 96px;
|
||||
right: 27px;
|
||||
overflow-x: hidden;
|
||||
// overflow-x: auto;
|
||||
transition: right 0.8s, height 1s;
|
||||
overflow-y: hidden; //重点
|
||||
|
||||
// overflow-y: auto; //重点
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@media only screen and (max-height: 1000px) {
|
||||
top: 76px;
|
||||
height: 282px;
|
||||
|
|
|
|||
|
|
@ -48,37 +48,40 @@
|
|||
<span></span>
|
||||
</div>
|
||||
<div class="kqjk">
|
||||
<div class="oneKqjk">
|
||||
<img src="@/assets/pic/23.png" alt="" />
|
||||
</div>
|
||||
<div class="twoKqjk">
|
||||
<div class="nameMessage" v-for="(item, i) in peopleList" :key="i">
|
||||
<div>
|
||||
<span style="color: #7ffffc">姓名：</span>
|
||||
<span style="color: #ffffff">{{ item.value }}</span>
|
||||
<div class="oneKqjk">
|
||||
<img :src="item.picture" alt="" />
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #7ffffc">岗位：</span>
|
||||
<span style="color: #ffffff">{{ item.value }}</span>
|
||||
<div class="textRight">
|
||||
<div style="margin-top:10px">
|
||||
<span style="color: #7ffffc;white-space: nowrap">姓名：</span>
|
||||
<span style="color: #ffffff">{{ item.name }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #7ffffc">体温：</span>
|
||||
<span style="color: #ffffff">{{ item.value }}</span>
|
||||
<div style="margin-top:10px">
|
||||
<span style="color: #7ffffc;white-space: nowrap">岗位：</span>
|
||||
<span style="color: #ffffff">{{ item.post }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #7ffffc">入场时间：</span>
|
||||
<span style="color: #ffffff">{{ item.value }}</span>
|
||||
<div style="margin-top:10px">
|
||||
<span style="color: #7ffffc;white-space: nowrap">体温：</span>
|
||||
<span style="color: #ffffff">{{ item.temperature }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #7ffffc">考勤类型：</span>
|
||||
<span style="color: #ffffff">{{ item.value }}</span>
|
||||
<div style="margin-top:10px">
|
||||
<span style="color: #7ffffc;white-space: nowrap">入场时间：</span>
|
||||
<span style="color: #ffffff">{{ item.time }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #7ffffc">打卡设备：</span>
|
||||
<span style="color: #ffffff">{{ item.value }}</span>
|
||||
<div style="margin-top:10px">
|
||||
<span style="color: #7ffffc;white-space: nowrap">考勤类型：</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>
|
||||
<!-- 右侧模块1 -->
|
||||
|
|
@ -96,15 +99,15 @@
|
|||
<div class="mesBox">
|
||||
<div>
|
||||
<span style="color: #82dddb">会议时间：</span>
|
||||
<span style="color: #ffffff">2023-01-02</span>
|
||||
<span style="color: #ffffff">{{meeting.date}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #82dddb">会议类型：</span>
|
||||
<span style="color: #ffffff">项目早会</span>
|
||||
<span style="color: #ffffff">{{meeting.type}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #82dddb">会议主持：</span>
|
||||
<span style="color: #ffffff">王毅</span>
|
||||
<span style="color: #ffffff">{{meeting.host}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #82dddb">参会人员：</span>
|
||||
|
|
@ -115,25 +118,20 @@
|
|||
display: inline-block;
|
||||
white-space: pre-wrap;
|
||||
"
|
||||
>王小龙，高红，澄澈</span
|
||||
>{{meeting.participants}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meeting">会议内容</div>
|
||||
<div class="mettiogBox">
|
||||
<div>
|
||||
<div>1、施工部署</div>
|
||||
<div>
|
||||
(1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
|
||||
</div>
|
||||
<div>
|
||||
(2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
|
||||
</div>
|
||||
</div>
|
||||
<div class="meetContent">
|
||||
{{meeting.content}}</div>
|
||||
<div style="height:10%;width:100%">
|
||||
<div class="lookFor" @click="gantDialog"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右侧模块2 -->
|
||||
<div class="rightThreeBox" :style="{ right: boxNone ? '27px' : '-443px' }">
|
||||
<div class="titName">
|
||||
|
|
@ -148,6 +146,7 @@
|
|||
:color-array="['#021C9F', '#01B1FF']"
|
||||
:chart-data="qyList"
|
||||
:x-axis-data="qyList.map((item) => item.name)"
|
||||
:radarList="radarList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -199,15 +198,15 @@
|
|||
<div class="mesBox">
|
||||
<div>
|
||||
<span style="color: #82dddb">会议时间：</span>
|
||||
<span style="color: #ffffff">2023-01-02</span>
|
||||
<span style="color: #ffffff">{{meeting.date}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #82dddb">会议类型：</span>
|
||||
<span style="color: #ffffff">项目早会</span>
|
||||
<span style="color: #ffffff">{{meeting.type}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #82dddb">会议主持：</span>
|
||||
<span style="color: #ffffff">王毅</span>
|
||||
<span style="color: #ffffff">{{meeting.host}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span style="color: #82dddb">参会人员：</span>
|
||||
|
|
@ -218,27 +217,15 @@
|
|||
display: inline-block;
|
||||
white-space: pre-wrap;
|
||||
"
|
||||
>王小龙，高红，澄澈</span
|
||||
>{{meeting.participants}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="meet2ing">会议内容</div>
|
||||
<div class="mettiog2Box">
|
||||
<div>
|
||||
<div>1、施工部署</div>
|
||||
<div>
|
||||
(1)土方开挖:条基采用机械开挖，局部人工修补，余土外运。桩基采用人工挖土，桩基挖土过程中设置通风设备，保证挖土人员的安全。
|
||||
</div>
|
||||
<div>
|
||||
(2)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
|
||||
</div>
|
||||
<div>
|
||||
(3)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
|
||||
</div>
|
||||
<div>
|
||||
(4)钢筋加工:现场加工，现场设置钢筋加工棚，布置加工机械梁板钢筋连接采用绑扎接头或闪光对焊，柱及墙板钢筋采用电渣压力焊。
|
||||
</div>
|
||||
<div class="meetContent">
|
||||
{{meeting.content}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -255,7 +242,7 @@ import RadarChart from "@/components/common/RadarChart";
|
|||
import pieChart from "@/components/common/pieChart";
|
||||
import pieDateChart from "@/components/common/pieDateChart";
|
||||
import Resize from "../utils/Resize.vue";
|
||||
import { getUserGroup, getGroupCensus, getAttend } from "@/api/personnel";
|
||||
import { getUserGroup, getGroupCensus, getAttend,getRecentMeeting,getMonthCensus } from "@/api/personnel";
|
||||
export default {
|
||||
name: "report",
|
||||
components: {
|
||||
|
|
@ -266,6 +253,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
radarList:[], //站班会统计
|
||||
meeting:{}, //站班会记录
|
||||
boxNone: true,
|
||||
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
||||
iconPicList: [
|
||||
|
|
@ -374,7 +363,13 @@ export default {
|
|||
chartData: [],
|
||||
peopleList: [
|
||||
{
|
||||
name:'王刚'
|
||||
name:'史蒂芬库里',
|
||||
post:'经理',
|
||||
temperature:'36.7',
|
||||
time:'2023-2-1',
|
||||
type:'lala',
|
||||
equipment:'一号打卡机',
|
||||
picture:require('../assets/pic/23.png')
|
||||
}
|
||||
],
|
||||
vdaH: 0,
|
||||
|
|
@ -413,7 +408,6 @@ export default {
|
|||
getUserGroup({
|
||||
projectId: projectId,
|
||||
}).then((res) => {
|
||||
console.log("res.data.data", res.data.data);
|
||||
// this.projectUser = res.data.data
|
||||
this.pieData = res.data.data;
|
||||
});
|
||||
|
|
@ -423,11 +417,26 @@ export default {
|
|||
}).then((res) => {
|
||||
this.constructionPersonnel = res.data.data;
|
||||
});
|
||||
//考勤监控
|
||||
getAttend({
|
||||
projectId: projectId,
|
||||
}).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() {
|
||||
|
|
@ -659,13 +668,17 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
margin-top: 10px;
|
||||
margin-left: 18px;
|
||||
|
||||
span:nth-child(1) {
|
||||
display: inline-block;
|
||||
width: 56px;
|
||||
text-align-last: justify;
|
||||
// margin-top: 10px;
|
||||
// margin-left: 18px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
// span:nth-child(1) {
|
||||
// display: inline-block;
|
||||
// width: 56px;
|
||||
// text-align-last: justify;
|
||||
// }
|
||||
.textRight{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -736,6 +749,17 @@ export default {
|
|||
color: #ffffff;
|
||||
padding: 0 22px 0 0px;
|
||||
height: 260px;
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.meetContent{
|
||||
overflow: auto;
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.mettiogBox {
|
||||
|
|
@ -747,16 +771,31 @@ export default {
|
|||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
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) {
|
||||
top: 330px;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.meetContent{
|
||||
overflow: auto;
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.lookFor {
|
||||
width: 57px;
|
||||
height: 24px;
|
||||
height: 100%;
|
||||
background: url("~@/assets/pic/view.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
float: right;
|
||||
|
|
@ -812,7 +851,9 @@ export default {
|
|||
position: absolute;
|
||||
top: 48px;
|
||||
display: flex;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none ;
|
||||
}
|
||||
@media only screen and (max-height: 1000px) {
|
||||
top: 24px;
|
||||
}
|
||||
|
|
@ -822,7 +863,7 @@ export default {
|
|||
height: 160px;
|
||||
padding: 5px;
|
||||
border: 1px solid #00ebeb;
|
||||
margin-top: 38px;
|
||||
margin-top: 11px;
|
||||
margin-left: 18px;
|
||||
margin-right: 14px;
|
||||
|
||||
|
|
@ -833,10 +874,11 @@ export default {
|
|||
}
|
||||
|
||||
.twoKqjk {
|
||||
width: 234px;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
height: 194px;
|
||||
margin-top: 25px;
|
||||
background: rgba(0, 84, 79, 0.3);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,11 +18,19 @@
|
|||
</div>
|
||||
</div> -->
|
||||
<!-- 左侧大模块 -->
|
||||
<div class="scFathBox scroller" style="overflow-y: scroll;overflow-x: hidden">
|
||||
<div class="scFathChild" v-for="(item, i) in 20" :key="i" @click="tzSp">
|
||||
<img src="../assets/pic/23.png" alt="" style="width:100%;height:100%">
|
||||
<div
|
||||
class="scFathBox scroller"
|
||||
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">
|
||||
隧道{{ i + 1 }}号位摄像头
|
||||
{{ item.equipmentName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -35,28 +43,57 @@
|
|||
<span></span>
|
||||
</div>
|
||||
<div class="tjBox">
|
||||
<div style="display: flex;margin-left: 57px;">
|
||||
<div style="display: flex; margin-left: 57px">
|
||||
<span class="tt tt1"></span>
|
||||
<div class="ttgd">
|
||||
<span class="nameBox">固定摄像头</span>
|
||||
<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>
|
||||
<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 style="margin-top: 10px">
|
||||
<span class="nameBox" style="color: #fff"
|
||||
>在线<span
|
||||
style="color: #fff; font-size: 16px; font-weight: bold"
|
||||
>{{ onlineLock }}</span
|
||||
>台</span
|
||||
>
|
||||
<span class="nameBox" style="float: right"
|
||||
>共{{ allLock }}台</span
|
||||
>
|
||||
</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>
|
||||
<div class="ttgd">
|
||||
<span class="nameBox">移动监控</span>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -66,17 +103,32 @@
|
|||
<div class="titName">
|
||||
<span></span>
|
||||
<span>在线摄像头列表</span>
|
||||
<span style="width: 201px;"></span>
|
||||
<span style="width: 201px"></span>
|
||||
</div>
|
||||
<div class="securityCheck">
|
||||
<div class="vidBox">
|
||||
<span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
|
||||
<div style="overflow:hidden;">
|
||||
<span class="playBox" @click="tzSp"></span>
|
||||
<span class="lookForMessage">查看</span>
|
||||
<div
|
||||
class="vidBox"
|
||||
:style="index % 2 != 0 ? 'background: none' : 'background: block'"
|
||||
v-for="(item, index) in videoList"
|
||||
: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 class="vidBox" style="background: none;">
|
||||
<!-- <div class="vidBox" style="background: none;">
|
||||
<span style="margin-left: 47px;margin-right: 88px;">隧道一号位摄像头</span>
|
||||
<div style="overflow:hidden;">
|
||||
<span class="playBox"></span>
|
||||
|
|
@ -146,6 +198,13 @@
|
|||
<span class="lookForMessage">查看</span>
|
||||
</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>
|
||||
|
|
@ -156,111 +215,119 @@
|
|||
import RadarChart from "@/components/common/RadarChart";
|
||||
import pieChart from "@/components/common/pieChart";
|
||||
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 {
|
||||
name: "report",
|
||||
components: {
|
||||
pieChart,
|
||||
RadarChart,
|
||||
pieDateChart,
|
||||
Resize
|
||||
Resize,
|
||||
},
|
||||
data() {
|
||||
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: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
}
|
||||
entName: "我打打死",
|
||||
},
|
||||
],
|
||||
qyList: [
|
||||
{
|
||||
name: "我的",
|
||||
value: 12
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: "我的",
|
||||
value: 112
|
||||
value: 112,
|
||||
},
|
||||
{
|
||||
name: "我的",
|
||||
value: 132
|
||||
}
|
||||
value: 132,
|
||||
},
|
||||
],
|
||||
xArry: [],
|
||||
chartData: [],
|
||||
peopleList: [
|
||||
{
|
||||
name: "姓名",
|
||||
value: "：王刚"
|
||||
value: "：王刚",
|
||||
},
|
||||
{
|
||||
name: "岗位",
|
||||
value: "：项目经理"
|
||||
value: "：项目经理",
|
||||
},
|
||||
{
|
||||
name: "体温",
|
||||
value: "：36.5℃"
|
||||
value: "：36.5℃",
|
||||
},
|
||||
{
|
||||
name: "入场时间",
|
||||
value: "：2022-11-26"
|
||||
value: "：2022-11-26",
|
||||
},
|
||||
{
|
||||
name: "考勤类型",
|
||||
value: "：进场"
|
||||
value: "：进场",
|
||||
},
|
||||
{
|
||||
name: "打卡设备",
|
||||
value: "：1号打卡机"
|
||||
value: "：1号打卡机",
|
||||
},
|
||||
],
|
||||
vdaH: 0,
|
||||
|
|
@ -268,7 +335,7 @@ export default {
|
|||
menuType: 2,
|
||||
numberList: [5, 5],
|
||||
rightThreeHeightBox: 0,
|
||||
leftOneBox: 0
|
||||
leftOneBox: 0,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -278,20 +345,25 @@ export default {
|
|||
methods: {
|
||||
goBack(val) {
|
||||
if (val === 1) {
|
||||
this.$router.push('/')
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.$router.go(0)
|
||||
this.$router.go(0);
|
||||
}
|
||||
},
|
||||
tzSp() {
|
||||
tzSp(name, id) {
|
||||
// this.$router.push('/videoViewing')
|
||||
this.$emit('transfer','into')
|
||||
let videoObj = {
|
||||
videoName: name,
|
||||
videoId: id,
|
||||
};
|
||||
this.$emit("transfer", videoObj);
|
||||
},
|
||||
getDivHeight() {
|
||||
const screenheight = window.innerHeight
|
||||
this.rightThreeHeightBox = screenheight - 440 + 'px'
|
||||
this.leftOneBox = screenheight - 187 + 'px'
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
const screenheight = window.innerHeight;
|
||||
this.rightThreeHeightBox = screenheight - 440 + "px";
|
||||
this.leftOneBox = screenheight - 187 + "px";
|
||||
let h =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
|
|
@ -306,11 +378,11 @@ export default {
|
|||
childBoxClick(val) {
|
||||
this.menuType = val;
|
||||
if (val === 3) {
|
||||
this.$router.push('/progress')
|
||||
this.$router.push("/progress");
|
||||
} else if (val === 1) {
|
||||
this.$router.push('/personnel')
|
||||
this.$router.push("/personnel");
|
||||
} else if (val === 4) {
|
||||
this.$router.push('/management')
|
||||
this.$router.push("/management");
|
||||
}
|
||||
},
|
||||
switchDiv() {
|
||||
|
|
@ -322,15 +394,49 @@ export default {
|
|||
setTimeout(() => {
|
||||
// 俩秒之后让模块消失
|
||||
this.$refs.switchBtn.style.display = "block";
|
||||
}, 800)
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.switchDiv();
|
||||
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>
|
||||
|
||||
|
|
@ -349,12 +455,12 @@ export default {
|
|||
background: #053635;
|
||||
border-radius: 4px;
|
||||
opacity: 0.6;
|
||||
border: 1px solid #0E6760;
|
||||
border: 1px solid #0e6760;
|
||||
}
|
||||
|
||||
.scroller::-webkit-scrollbar-thumb {
|
||||
width: 11em;
|
||||
background-color: #0E6760;
|
||||
background-color: #0e6760;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
|
|
@ -378,7 +484,6 @@ export default {
|
|||
|
||||
.scFathChild:hover {
|
||||
transform: scale(1.1);
|
||||
|
||||
}
|
||||
|
||||
.scFathChild {
|
||||
|
|
@ -392,7 +497,7 @@ export default {
|
|||
transition: All 0.2s ease-in-out;
|
||||
|
||||
.childrenBox {
|
||||
width: 123px;
|
||||
// width: 123px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
|
|
@ -403,16 +508,16 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.meeting {
|
||||
width: 76px;
|
||||
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%;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
|
|
@ -422,7 +527,7 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -434,7 +539,7 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding: 0 22px 0 33px;
|
||||
height: 260px;
|
||||
}
|
||||
|
|
@ -475,9 +580,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.bgPicture {
|
||||
width: 100%;
|
||||
background: url("~@/assets/pic/b1g.png") no-repeat;
|
||||
|
|
@ -502,14 +604,14 @@ export default {
|
|||
.titLeft {
|
||||
width: 138px;
|
||||
height: 40px;
|
||||
background: #025A5F;
|
||||
background: #025a5f;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1),
|
||||
span:nth-child(2) {
|
||||
font-size: 14px;
|
||||
color: #3CFFF9;
|
||||
color: #3cfff9;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
|
|
@ -529,7 +631,7 @@ export default {
|
|||
padding-right: 25px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #D1FFFE;
|
||||
color: #d1fffe;
|
||||
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
|
|
@ -541,7 +643,6 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.titName {
|
||||
|
|
@ -578,9 +679,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.rightOneBox {
|
||||
width: 424px;
|
||||
height: 302px;
|
||||
|
|
@ -611,7 +709,6 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
width: 27px;
|
||||
height: 33px;
|
||||
|
||||
}
|
||||
|
||||
.tt {
|
||||
|
|
@ -625,21 +722,32 @@ export default {
|
|||
.nameBox {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #60D5CD;
|
||||
color: #60d5cd;
|
||||
}
|
||||
|
||||
.status-one {
|
||||
width: 260px;
|
||||
border: 1px #60D5CD solid;
|
||||
// border: 1px #60D5CD solid;
|
||||
height: 20px;
|
||||
background: transparent; // 此时是最新的语法；
|
||||
padding: 1px;
|
||||
margin-top: 8px;
|
||||
margin-top: 4px;
|
||||
|
||||
.process-one {
|
||||
background: linear-gradient(89deg, #105752, #25E8B3);
|
||||
width: 50%;
|
||||
width: 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%;
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
|
||||
overflow-y: auto;
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-height: 1000px) {
|
||||
top: 66px;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vidBox {
|
||||
|
|
@ -664,11 +776,11 @@ export default {
|
|||
font-size: 16px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #ADFFFE;
|
||||
color: #adfffe;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 38px;
|
||||
|
||||
margin-left: 30px;
|
||||
justify-content: space-around;
|
||||
|
||||
.playBox {
|
||||
display: inline-block;
|
||||
|
|
@ -685,8 +797,8 @@ export default {
|
|||
.lookForMessage {
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #92FFFC;
|
||||
vertical-align: middle
|
||||
color: #92fffc;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -699,11 +811,16 @@ export default {
|
|||
position: absolute;
|
||||
top: 421px;
|
||||
right: 27px;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
@media only screen and (max-height: 1000px) {
|
||||
top: 401px;
|
||||
height: 510px;
|
||||
overflow: hidden;
|
||||
// overflow: hidden;
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,9 +20,13 @@
|
|||
<!-- 左侧大模块-->
|
||||
<div class="scFathBox" :style="{ height: leftOneBox }">
|
||||
<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">
|
||||
隧道1号位摄像头
|
||||
{{ videoName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,28 +38,56 @@
|
|||
<span></span>
|
||||
</div>
|
||||
<div class="tjBox">
|
||||
<div style="display: flex;">
|
||||
<div style="display: flex">
|
||||
<span class="tt tt1"></span>
|
||||
<div class="ttgd">
|
||||
<span class="nameBox">固定摄像头</span>
|
||||
<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>
|
||||
<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 style="margin-top: 10px">
|
||||
<span class="nameBox" style="color: #fff"
|
||||
>在线<span
|
||||
style="color: #fff; font-size: 16px; font-weight: bold"
|
||||
>{{ onlineLock }}</span
|
||||
>台</span
|
||||
>
|
||||
<span class="nameBox" style="float: right"
|
||||
>共{{ allLock }}台</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;margin-top: 23px;">
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 23px">
|
||||
<span class="tt tt2"></span>
|
||||
<div class="ttgd">
|
||||
<span class="nameBox">移动监控</span>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -70,22 +102,31 @@
|
|||
<div class="securityCheck">
|
||||
<el-form ref="form" :model="timeForm" label-width="100px">
|
||||
<el-form-item label="开始时间：">
|
||||
<el-date-picker :clearable="false" popper-class="elDatePicker" style="width:100%;"
|
||||
v-model="timeForm.start" type="datetime" placeholder="选择日期时间">
|
||||
<el-date-picker
|
||||
:clearable="false"
|
||||
popper-class="elDatePicker"
|
||||
style="width: 100%"
|
||||
v-model="timeForm.start"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间：">
|
||||
<el-date-picker :clearable="false" style="width:100%;" v-model="timeForm.end" type="datetime"
|
||||
placeholder="选择日期时间">
|
||||
<el-date-picker
|
||||
:clearable="false"
|
||||
style="width: 100%"
|
||||
v-model="timeForm.end"
|
||||
type="datetime"
|
||||
placeholder="选择日期时间"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="topIcon cc"></div>
|
||||
<div class="bottomIcon dd"></div>
|
||||
</div>
|
||||
<div class="btnon" @click="lookForVideo">
|
||||
|
||||
</div>
|
||||
<div class="btnon" @click="lookForVideo"></div>
|
||||
</div>
|
||||
<!-- 右侧模块3 -->
|
||||
<div class="rightThreeBox">
|
||||
|
|
@ -96,11 +137,16 @@
|
|||
</div>
|
||||
<div class="kzBtn">
|
||||
<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>
|
||||
<div class="bottomTitle">隧道5号位摄像头</div>
|
||||
<div class="bottomTitle"> {{ videoName }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -111,115 +157,131 @@
|
|||
import RadarChart from "@/components/common/RadarChart";
|
||||
import pieChart from "@/components/common/pieChart";
|
||||
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 {
|
||||
name: "report",
|
||||
props: {
|
||||
videoName: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
videoId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
},
|
||||
components: {
|
||||
pieChart,
|
||||
RadarChart,
|
||||
pieDateChart,
|
||||
Resize
|
||||
Resize,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
allLock: 0, //所有固定摄像头
|
||||
allMove: 0, //所有移动摄像头
|
||||
onlineLock: 0, //在线固定摄像头
|
||||
onlineMove: 0, //在线移动摄像头
|
||||
lockPer: 0, //固定摄像头占比
|
||||
movePer: 0, //移动摄像头占比
|
||||
timeForm: {
|
||||
start: '',
|
||||
end: ''
|
||||
start: "",
|
||||
end: "",
|
||||
},
|
||||
colorList: ['#00A572', '#008AA4', '#7968D9', '#C7A73E'],
|
||||
colorList: ["#00A572", "#008AA4", "#7968D9", "#C7A73E"],
|
||||
iconPicList: [
|
||||
{
|
||||
icon: "wendu",
|
||||
name: "温度",
|
||||
val: "19.8",
|
||||
tem: "℃"
|
||||
tem: "℃",
|
||||
},
|
||||
{
|
||||
icon: "shidu",
|
||||
name: "湿度",
|
||||
val: "19.8",
|
||||
tem: "%"
|
||||
tem: "%",
|
||||
},
|
||||
{
|
||||
icon: "yangqi",
|
||||
name: "氧气值",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "co2",
|
||||
name: "二氧化碳",
|
||||
val: "19.8",
|
||||
tem: "%VOL"
|
||||
tem: "%VOL",
|
||||
},
|
||||
{
|
||||
icon: "ch4",
|
||||
name: "甲烷",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
tem: "ppm",
|
||||
},
|
||||
{
|
||||
icon: "h2s",
|
||||
name: "硫化氢",
|
||||
val: "19.8",
|
||||
tem: "ppm"
|
||||
}
|
||||
tem: "ppm",
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
entName: "我打打死",
|
||||
},
|
||||
{
|
||||
entName: "我打打死"
|
||||
}
|
||||
entName: "我打打死",
|
||||
},
|
||||
],
|
||||
qyList: [
|
||||
{
|
||||
name: "我的",
|
||||
value: 12
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: "我的",
|
||||
value: 112
|
||||
value: 112,
|
||||
},
|
||||
{
|
||||
name: "我的",
|
||||
value: 132
|
||||
}
|
||||
value: 132,
|
||||
},
|
||||
],
|
||||
xArry: [],
|
||||
chartData: [],
|
||||
peopleList: [
|
||||
{
|
||||
name: "姓名",
|
||||
value: "：王刚"
|
||||
value: "：王刚",
|
||||
},
|
||||
{
|
||||
name: "岗位",
|
||||
value: "：项目经理"
|
||||
value: "：项目经理",
|
||||
},
|
||||
{
|
||||
name: "体温",
|
||||
value: "：36.5℃"
|
||||
value: "：36.5℃",
|
||||
},
|
||||
{
|
||||
name: "入场时间",
|
||||
value: "：2022-11-26"
|
||||
value: "：2022-11-26",
|
||||
},
|
||||
{
|
||||
name: "考勤类型",
|
||||
value: "：进场"
|
||||
value: "：进场",
|
||||
},
|
||||
{
|
||||
name: "打卡设备",
|
||||
value: "：1号打卡机"
|
||||
value: "：1号打卡机",
|
||||
},
|
||||
],
|
||||
vdaH: 0,
|
||||
|
|
@ -229,7 +291,7 @@ export default {
|
|||
rightThreeHeightBox: 0,
|
||||
leftOneBox: 0,
|
||||
isShowLookFor: false,
|
||||
bfkzBtn: false
|
||||
bfkzBtn: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
|
@ -240,31 +302,39 @@ export default {
|
|||
//点击播放按
|
||||
bfClick() {
|
||||
if (this.isShowLookFor) {
|
||||
this.bfkzBtn = !this.bfkzBtn
|
||||
this.bfkzBtn = !this.bfkzBtn;
|
||||
}
|
||||
},
|
||||
//点击开始查看按钮
|
||||
lookForVideo() {
|
||||
if (this.timeForm.start == '' && this.timeForm.end == '') {
|
||||
this.isShowLookFor = false
|
||||
if (this.timeForm.start == "" && this.timeForm.end == "") {
|
||||
this.isShowLookFor = false;
|
||||
} 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;
|
||||
}
|
||||
console.log(this.isShowLookFor);
|
||||
},
|
||||
goBack(val) {
|
||||
if (val === 1) {
|
||||
this.$router.push('/')
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.$router.push('/videoSurveillance')
|
||||
this.$router.push("/videoSurveillance");
|
||||
}
|
||||
},
|
||||
getDivHeight() {
|
||||
const screenheight = window.innerHeight
|
||||
const screenheight = window.innerHeight;
|
||||
console.log(window.innerHeight);
|
||||
this.rightThreeHeightBox = screenheight - 780 + 'px'
|
||||
this.leftOneBox = screenheight - 216 + 'px'
|
||||
let h = document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.rightThreeHeightBox = screenheight - 780 + "px";
|
||||
this.leftOneBox = screenheight - 216 + "px";
|
||||
let h =
|
||||
document.documentElement.clientHeight || document.body.clientHeight;
|
||||
this.vdaH = h - 0 + "px";
|
||||
},
|
||||
tableRowClassName({ row, rowIndex }) {
|
||||
|
|
@ -279,13 +349,13 @@ export default {
|
|||
childBoxClick(val) {
|
||||
this.menuType = val;
|
||||
if (val === 3) {
|
||||
this.$router.push('/progress')
|
||||
this.$router.push("/progress");
|
||||
} else if (val === 2) {
|
||||
this.$router.push('/videoSurveillance')
|
||||
this.$router.push("/videoSurveillance");
|
||||
} else if (val === 4) {
|
||||
this.$router.push('/management')
|
||||
this.$router.push("/management");
|
||||
} else if (val === 1) {
|
||||
this.$router.push('/personnel')
|
||||
this.$router.push("/personnel");
|
||||
}
|
||||
},
|
||||
switchDiv() {
|
||||
|
|
@ -297,16 +367,28 @@ export default {
|
|||
setTimeout(() => {
|
||||
// 俩秒之后让模块消失
|
||||
this.$refs.switchBtn.style.display = "block";
|
||||
}, 800)
|
||||
}, 800);
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.switchDiv();
|
||||
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>
|
||||
|
||||
|
|
@ -322,7 +404,7 @@ export default {
|
|||
.titLeft {
|
||||
width: 138px;
|
||||
height: 40px;
|
||||
background: #025A5F;
|
||||
background: #025a5f;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
|
@ -330,7 +412,7 @@ export default {
|
|||
span:nth-child(1),
|
||||
span:nth-child(2) {
|
||||
font-size: 14px;
|
||||
color: #3CFFF9;
|
||||
color: #3cfff9;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
|
|
@ -341,7 +423,6 @@ export default {
|
|||
color: #fff;
|
||||
letter-spacing: 1px;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -350,7 +431,7 @@ export default {
|
|||
padding-right: 25px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #D1FFFE;
|
||||
color: #d1fffe;
|
||||
|
||||
span:nth-child(2) {
|
||||
display: inline-block;
|
||||
|
|
@ -362,7 +443,6 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 隐藏小时钟图标
|
||||
|
|
@ -391,7 +471,7 @@ export default {
|
|||
position: relative;
|
||||
|
||||
.childrenBox {
|
||||
width: 123px;
|
||||
// width: 123px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
|
|
@ -402,7 +482,7 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -410,7 +490,8 @@ export default {
|
|||
.meeting {
|
||||
width: 76px;
|
||||
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%;
|
||||
text-align: center;
|
||||
line-height: 29px;
|
||||
|
|
@ -420,7 +501,7 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
|
|
@ -432,7 +513,7 @@ export default {
|
|||
font-size: 14px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
padding: 0 22px 0 33px;
|
||||
height: 260px;
|
||||
}
|
||||
|
|
@ -530,7 +611,7 @@ export default {
|
|||
right: 27px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
|
||||
@media only screen and (max-height: 960px) {
|
||||
@media only screen and (max-height: 969px) {
|
||||
height: 270px;
|
||||
top: 77px;
|
||||
|
||||
|
|
@ -544,7 +625,7 @@ export default {
|
|||
top: 92px;
|
||||
left: 56px;
|
||||
|
||||
@media only screen and (max-height: 960px) {
|
||||
@media only screen and (max-height: 969px) {
|
||||
top: 64px;
|
||||
}
|
||||
|
||||
|
|
@ -560,7 +641,6 @@ export default {
|
|||
background-size: 100% 100%;
|
||||
width: 27px;
|
||||
height: 33px;
|
||||
|
||||
}
|
||||
|
||||
.tt {
|
||||
|
|
@ -574,21 +654,33 @@ export default {
|
|||
.nameBox {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #60D5CD;
|
||||
color: #60d5cd;
|
||||
}
|
||||
|
||||
.status-one {
|
||||
width: 260px;
|
||||
border: 1px #60D5CD solid;
|
||||
// border: 1px #60D5CD solid;
|
||||
height: 20px;
|
||||
background: transparent; // 此时是最新的语法；
|
||||
padding: 1px;
|
||||
margin-top: 8px;
|
||||
// margin-top: 8px;
|
||||
|
||||
.process-one {
|
||||
background: linear-gradient(89deg, #105752, #25E8B3);
|
||||
width: 50%;
|
||||
// background: linear-gradient(89deg, #105752, #25E8B3);
|
||||
width: 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%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@media only screen and (max-height: 960px) {
|
||||
@media only screen and (max-height: 969px) {
|
||||
top: 97px;
|
||||
}
|
||||
|
||||
|
|
@ -659,8 +751,6 @@ export default {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ciedoOne {
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
|
|
@ -710,8 +800,6 @@ export default {
|
|||
cursor: pointer;
|
||||
background: url("~@/assets/pic/jgright.png") no-repeat;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btnon {
|
||||
|
|
@ -725,7 +813,7 @@ export default {
|
|||
transform: translateX(-50%);
|
||||
cursor: pointer;
|
||||
|
||||
@media only screen and (max-height: 960px) {
|
||||
@media only screen and (max-height: 969px) {
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -735,7 +823,6 @@ export default {
|
|||
height: 48px;
|
||||
background: url("~@/assets/pic/jgck.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
}
|
||||
|
||||
.cc {
|
||||
|
|
@ -765,11 +852,11 @@ export default {
|
|||
.vidBox {
|
||||
width: 345px;
|
||||
height: 46px;
|
||||
background: #378E7C;
|
||||
background: #378e7c;
|
||||
font-size: 16px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #ADFFFE;
|
||||
color: #adfffe;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
|
@ -782,14 +869,14 @@ export default {
|
|||
background: url("~@/assets/pic/play.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 3px;
|
||||
vertical-align: middle
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.lookForMessage {
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #92FFFC;
|
||||
vertical-align: middle
|
||||
color: #92fffc;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -803,11 +890,10 @@ export default {
|
|||
top: 422px;
|
||||
right: 27px;
|
||||
|
||||
@media only screen and (max-height: 960px) {
|
||||
@media only screen and (max-height: 969px) {
|
||||
top: 366px;
|
||||
height: 270px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rightThreeBox {
|
||||
|
|
@ -818,30 +904,28 @@ export default {
|
|||
position: absolute;
|
||||
top: 746px;
|
||||
right: 27px;
|
||||
|
||||
@media only screen and (max-height: 969px) {
|
||||
height: 270px;
|
||||
top: 654px;
|
||||
}
|
||||
.bottomTitle {
|
||||
width: 138px;
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background: rgba(0, 37, 35, 0.5);
|
||||
position: absolute;
|
||||
bottom: 31px;
|
||||
left: 142px;
|
||||
// left: 142px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
color: #ffffff;
|
||||
|
||||
@media only screen and (max-height: 960px) {
|
||||
@media only screen and (max-height: 969px) {
|
||||
bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-height: 960px) {
|
||||
height: 270px;
|
||||
top: 654px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -985,11 +1069,8 @@ export default {
|
|||
|
||||
.el-input--prefix .el-input__inner {
|
||||
background: #002220 !important;
|
||||
;
|
||||
border-radius: 2px !important;
|
||||
;
|
||||
border: 1px solid #31A49C !important;
|
||||
;
|
||||
border: 1px solid #31a49c !important;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue