Skip to content

E
energyai_vue
Commit fd4f333a authored by xiexingan's avatar xiexingan
Browse files
Options

用电

parent 374a322b
Hide whitespace changes
Inline Side-by-side
Showing with 237 additions and 1032 deletions
src/pages/eq/view/index.vue
View file @ fd4f333a
......@@ -65,15 +65,14 @@
</el-col>
</el-row>
</div>
<div class="map_right">
<div>
<iframe :src="src" ref="iframe"></iframe>
</div>
</div>
//- <div class="map_right">
//- <div>
//- <iframe :src="src" ref="iframe"></iframe>
//- </div>
//- </div>
</el-card>
</el-main>
<query-detail v-if='queryDetailVisible' ref='queryDetail' @closeQ="closeQueryDetailVisible"></query-detail>
<no-query-detail v-if='noQueryDetailVisible' ref='noQueryDetail' @closeQ="closeNoQueryDetailVisible"></no-query-detail>
</el-container>
</div>
......@@ -81,7 +80,6 @@
<script>
import QueryDetail from './query-detail'
import NoQueryDetail from './no-query-detail'
import { getUUID } from '@/util'
import Vue from 'vue'
......@@ -178,8 +176,7 @@ export default {
}
},
components: {
QueryDetail,
NoQueryDetail
QueryDetail
},
watch: {
searchInput(val) {
......@@ -570,59 +567,24 @@ export default {
})
},
pointListClick(item) {
console.log(item.type)
//监视器列表点击
//关闭其他窗口
// this.closeNoQueryDetailVisible()
if (this.transformationSta === 1) {
if (
item.type === 'b6af764f2a6e454490a6b1b3c9057e57' ||
item.type === 'ece0b8b2db27411886254e81134988a3'
) {
// console.log('1')
this.queryDetail(item.id)
} else {
// console.log('2')
this.noQueryDetail(item)
}
// console.log('subCode', item.subCode, typeof (item.subCode))
// switch (item.subCode) {
// case '01' :
// //视频监控
// this.queryDetail01Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail01.init(item.id, this.checkedData.sId)
// })
// break
// case '02' :
// //出入口控制
// this.queryDetail02Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail02.init(item.id, this.checkedData.sId)
// })
// break
// case '03' :
// //入侵报警
// this.queryDetail03Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail03.init(item.id, this.checkedData.sId)
// })
// break
// case '04' :
// //安全检查
// this.queryDetail04Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail04.init(item.id, this.checkedData.sId)
// })
// break
// case '05' :
// //电子巡更
// this.queryDetail05Visible = true
// this.$nextTick(() => {
// this.$refs.queryDetail05.init(item.id, this.checkedData.sId)
// })
// break
// }
}
this.queryDetail(item)
// if (this.transformationSta === 1) {
// if (
// item.type === 'b6af764f2a6e454490a6b1b3c9057e57' ||
// item.type === 'ece0b8b2db27411886254e81134988a3'
// ) {
// // console.log('1')
// this.queryDetail(item.id)
// } else {
// // console.log('2')
// this.noQueryDetail(item)
// }
// }
this.activeChooseResourceBox(item.id)
this.defaultExpandedKeys = [item.id]
// this.$refs.tree.setCurrentKey(item.id)
......@@ -988,13 +950,7 @@ export default {
this.$refs.queryDetail.init(id, this.checkedData.sId)
})
},
noQueryDetail(id) {
this.noQueryDetailVisible = true
this.queryDetailVisible = false
this.$nextTick(() => {
this.$refs.noQueryDetail.init(id, this.checkedData.sId)
})
},
closeQueryDetailVisible() {
this.queryDetailVisible = false
},
......
src/pages/eq/view/no-query-detail.vue deleted 100644 → 0
View file @ 374a322b
<template lang="pug">
.animation
.info-title
//- | {{ dataForm.name }}
| 空调
el-button(
icon="el-icon-close",
style="float: right",
type="text",
@click="closeQueryDetailVisible"
)
.info-form(style="text-align: center; border-bottom: 1px solid #c0c0c0")
img(src="../../../assets/images/kt.jpg")
.info-form(style="border-bottom: 1px solid #c0c0c0")
.quDetailM
p.leftP 设备名称&nbsp;:&nbsp;&nbsp; 室内机
.quDetailM
p.leftP 设备编号&nbsp;:&nbsp;&nbsp; CDSLAKS-009
.quDetailM
p.leftP 设备品牌：&nbsp;:&nbsp;&nbsp;格力
.quDetailM
p.leftP 设备型号：&nbsp;:&nbsp;&nbsp;晶弘33-1
.quDetailM
p.leftP 安装日期：&nbsp;:&nbsp;&nbsp;2020-01-04
p.leftP 维保日期：&nbsp;:&nbsp;&nbsp;2020-01-15
.info-form
el-row
el-col(:span="8")
.switch-warp
div(:class="[state == 1 ? 'on' : '']", @click="handleSwitch(1)") 打开
div(:class="[state == 2 ? 'on' : '']", @click="handleSwitch(2)") 关闭
el-col.text-size(:span="16", flex, justify-content="start")
div(style="width: 60px") 频率设置：
el-input(size="mini", style="width: 60px", v-model="speed")
span &nbsp;转
el-button(type="primary", size="mini", style="margin-left: 10px") 设定
el-row
el-col.text-size(:span="8") 当前已
span(v-if="state == 1") 打开
span(v-else) 关闭
el-col.text-size(:span="10") 当前频率：
span(style="color: blue") 2289
span &nbsp;转/分
.info-state
span(style="font-weight: bold") 空调运行状态
div
span.type 电压：
span.value 220 V
div
span.type 电流：
span.value 4 A
div
span.type 功率因数：
span.value 0.8 kw
div
span.type 功率：
span.value 0.8 kw
div
span.type 电能：
span.value 12 kw.h
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState('d2admin/user', ['info'])
},
data() {
return {
speed: '',
state: 1,
video1: 0,
stationId: localStorage.getItem('stationId'),
imgUrl: '',
clickFlag: false,
cameraCur: {},
restaurants: [],
dataForm: {
id: 0,
name: '',
type: 1,
lineId: '',
lineName: '',
stationId: '',
stationName: '',
tierId: '',
subSystem: '',
code: '',
subCode: '',
addressCode: '',
port: '',
username: '',
password: '',
remark: '',
status: 1
}
}
},
created() {},
methods: {
init(data, stationId) {
this.clickFlag = false
this.dataForm = data
// this.stationId = stationId
this.dataForm.operatorName = this.info.name
},
closeQueryDetailVisible() {
this.$emit('closeQ')
},
handleSwitch(state) {
this.state = state
}
}
}
</script>
<style lang="scss" scoped>
.switch-warp {
width: 80px;
height: 26px;
font-size: 12px;
line-height: 25px;
overflow: hidden;
border-radius: 13px;
background: #d3d3d3;
border: 1px solid rgba(0, 0, 0, 0.03);
box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
0px 2px 4px 0px rgba(0, 0, 0, 0.1);
div {
width: 39px;
height: 24px;
line-height: 24px;
float: left;
text-align: center;
cursor: pointer;
}
div.on {
background: #4cb527;
color: #fff;
border-radius: 13px;
border: 1px solid rgba(23, 41, 71, 0.02);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
0px 2px 0px 0px rgba(255, 255, 255, 0.15);
}
}
.text-size {
font-size: 12px;
line-height: 28px;
}
.info-state {
padding: 0 10px 10px;
.type {
font-size: 14px;
margin: 5px 0 0 10px;
display: inline-block;
width: 85px;
}
.value {
color: #47b320;
}
}
.el-table__header {
width: 100% !important;
}
.el-table__body {
width: 100% !important;
}
.info-title {
line-height: 40px;
height: 40px;
padding: 0 20px;
background-color: #e1edf4;
border-bottom: 1px solid #cccccc;
font-size: 16px;
font-family: Microsoft YaHei;
font-weight: bold;
}
.info-video {
padding: 10px;
height: 160px;
}
.info-form {
padding: 10px;
}
.info-block {
border: 1px solid #cccccc;
}
.el-select {
width: 100%;
}
.video {
width: 100%;
height: 180px;
}
.animation {
animation: myfirst 1s;
position: absolute;
top: 50px;
right: 0;
width: 330px;
background-color: #f4f4f4;
z-index: 11;
border: 1px solid rgba(195, 195, 195, 1);
box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
}
@keyframes myfirst {
from {
right: -500px;
}
to {
right: 0;
}
}
.quDetailM {
width: 100%;
}
.leftP {
height: 30px;
line-height: 30px;
margin: 0;
width: 100%;
font-size: 14px;
span {
color: #46b6f9;
}
}
.operate {
padding: 5px 0;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(0, 0, 0, 1);
border-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0.5),
rgba(213, 213, 213, 0.5),
rgba(255, 255, 255, 0.5),
rgba(218, 218, 218, 0.5),
rgba(255, 255, 255, 0.5)
)
2 2;
border-radius: 10px;
overflow: hidden;
display: flex;
justify-content: flex-start;
.btns {
width: 194px;
height: 194px;
position: relative;
img {
width: 100%;
height: 100%;
}
div {
cursor: pointer;
padding: 10px;
}
.s {
position: absolute;
top: 10px;
left: 75px;
width: 24px;
height: 24px;
}
.x {
position: absolute;
bottom: 10px;
left: 75px;
width: 24px;
height: 24px;
}
.z {
position: absolute;
top: 75px;
left: 10px;
width: 24px;
height: 24px;
}
.y {
position: absolute;
top: 75px;
right: 10px;
width: 24px;
height: 24px;
}
.zs {
position: absolute;
top: 32px;
left: 32px;
width: 24px;
height: 24px;
}
.zx {
position: absolute;
bottom: 32px;
left: 32px;
width: 24px;
height: 24px;
}
.ys {
position: absolute;
top: 32px;
right: 32px;
width: 24px;
height: 24px;
}
.yx {
position: absolute;
bottom: 32px;
right: 32px;
width: 24px;
height: 24px;
}
.fx {
position: absolute;
padding: 0;
cursor: default;
top: 50%;
left: 50%;
width: 65px;
height: 65px;
background: #ececec;
border-radius: 50%;
line-height: 65px;
text-align: center;
color: #969696;
transform: translate(-50%, -50%);
}
}
.ytBox {
width: 90px;
font-size: 16px;
padding: 10px 0 10px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.mllx {
display: flex;
justify-content: space-between;
width: 90%;
span {
line-height: 40px;
text-align: center;
width: 35%;
}
}
.bbBtn {
height: 40px;
display: flex;
margin-left: 10px;
justify-content: flex-start;
div {
width: 40px;
height: 40px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.el-icon-wq-r1 {
background: url(~@/assets/images/r1.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r1:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r2 {
background: url(~@/assets/images/r2.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r2:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r3 {
background: url(~@/assets/images/r3.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r3:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r5 {
background: url(~@/assets/images/r5.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r5:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r6 {
background: url(~@/assets/images/r6.png) center no-repeat;
background-size: 65%;
}
.el-icon-wq-r6:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r1b {
background: url(~@/assets/images/r1b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r1b:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r2b {
background: url(~@/assets/images/r2b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r2b:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r3b {
background: url(~@/assets/images/r3b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r3b:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r5b {
background: url(~@/assets/images/r5b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r5b:before {
content: "";
font-size: 16px;
}
.el-icon-wq-r6b {
background: url(~@/assets/images/r6b.png) center no-repeat;
height: 35px;
width: 35px;
background-size: 65%;
}
.el-icon-wq-r6b:before {
content: "";
font-size: 16px;
}
</style>
<style lang="scss">
.instuctions_content {
table {
th {
background: #eef8ff !important;
color: #333333 !important;
}
}
}
</style>
src/pages/eq/view/query-detail.vue
View file @ fd4f333a
<template lang="pug">
<div class="animation">
<div class='info-title'>当前摄像头
<el-button icon="el-icon-close" style="float:right;" type="text" @click="closeQueryDetailVisible"></el-button>
</div>
<div class='info-video'>
<video class="video" ref="video" muted autoplay controls></video>
//- <video class="video" :src="videoSrc" controls="controls"></video>
</div>
<div class="info-form">
<div class="operate" >
<div class="btns">
<img v-show="imgUrl == ''" src="@/assets/images/btns.png" alt="">
<img v-show="imgUrl == 's'" src="@/assets/images/s.png" alt="">
<img v-show="imgUrl == 'x'" src="@/assets/images/x.png" alt="">
<img v-show="imgUrl == 'z'" src="@/assets/images/z.png" alt="">
<img v-show="imgUrl == 'y'" src="@/assets/images/y.png" alt="">
<img v-show="imgUrl == 'ys'" src="@/assets/images/ys.png" alt="">
<img v-show="imgUrl == 'yx'" src="@/assets/images/yx.png" alt="">
<img v-show="imgUrl == 'zs'" src="@/assets/images/zs.png" alt="">
<img v-show="imgUrl == 'zx'" src="@/assets/images/zx.png" alt="">
<div class="fx">方向</div>
<div class="zs" @mousedown="clickPTZControl(25,0,'zs')" @mouseup="clickPTZControl(25,1)" title="云台左上">
</div>
<div class="s" @mousedown="clickPTZControl(21,0,'s')" @mouseup="clickPTZControl(21,1)" title="云台上仰">
</div>
<div class="ys" @mousedown="clickPTZControl(26,0,'ys')" @mouseup="clickPTZControl(26,1)" title="云台右上">
</div>
<div class="y" @mousedown="clickPTZControl(24,0,'y')" @mouseup="clickPTZControl(24,1)" title="云台右转">
</div>
<div class="yx" @mousedown="clickPTZControl(28,0,'yx')" @mouseup="clickPTZControl(24,1)" title="云台右下">
</div>
<div class="x" @mousedown="clickPTZControl(22,0,'x')" @mouseup="clickPTZControl(22,1)" title="云台下转">
</div>
<div class="zx" @mousedown="clickPTZControl(27,0,'zx')" @mouseup="clickPTZControl(27,1)" title="云台左下">
</div>
<div class="z" @mousedown="clickPTZControl(23,0,'z')" @mouseup="clickPTZControl(23,1)" title="云台左转">
</div>
</div>
<div class="ytBox ytBox2">
<div class="bbBtn">
<div @mousedown="clickPTZControl(11,0,'right')" @mouseup="clickPTZControl(11,1,'right')" title="变倍+">
<img v-show="imgRightUrl11" src="@/assets/images/r1.png" alt="">
<img v-show="!imgRightUrl11" src="@/assets/images/r1b.png" alt="">
</div>
<div @mousedown="clickPTZControl(12,0,'right')" @mouseup="clickPTZControl(12,1,'right')" title="变倍-">
<img v-show="imgRightUrl12" src="@/assets/images/r2.png" alt="">
<img v-show="!imgRightUrl12" src="@/assets/images/r2b.png" alt="">
</div>
</div>
<div class="bbBtn">
<div @mousedown="clickPTZControl(13,0,'right')" @mouseup="clickPTZControl(13,1,'right')" title="变焦+">
<img v-show="imgRightUrl13" src="@/assets/images/r3.png" alt="">
<img v-show="!imgRightUrl13" src="@/assets/images/r3b.png" alt="">
</div>
<div @mousedown="clickPTZControl(14,0,'right')" @mouseup="clickPTZControl(14,1,'right')" title="变焦-">
<img v-show="imgRightUrl14" src="@/assets/images/r4.png" alt="">
<img v-show="!imgRightUrl14" src="@/assets/images/r4b.png" alt="">
</div>
</div>
<div class="bbBtn">
<div @mousedown="clickPTZControl(15,0,'right')" @mouseup="clickPTZControl(15,1,'right')" title="光圈+">
<img v-show="imgRightUrl15" src="@/assets/images/r5.png" alt="">
<img v-show="!imgRightUrl15" src="@/assets/images/r5b.png" alt="">
</div>
<div @mousedown="clickPTZControl(16,0,'right')" @mouseup="clickPTZControl(16,1,'right')" title="光圈-">
<img v-show="imgRightUrl16" src="@/assets/images/r6.png" alt="">
<img v-show="!imgRightUrl16" src="@/assets/images/r6b.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div class='info-title'>监控点信息</div>
<div class='info-form'>
<div class="quDetailM">
<p class="leftP">线路站点&nbsp;:&nbsp;&nbsp;<span>{{dataForm.lineStation}}</span></p>
</div>
<div class="quDetailM">
<p class="leftP">资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}</p>
</div>
<div class="quDetailM">
<p class="leftP">资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}</p>
</div>
<div class="quDetailM">
<p class="leftP">部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}</p>
</div>
</div>
</div>
.animation
.info-title
//- | {{ dataForm.name }}
| 空调
el-button(
icon="el-icon-close",
style="float: right",
type="text",
@click="closeQueryDetailVisible"
)
.info-form(style="text-align: center; border-bottom: 1px solid #c0c0c0")
img( src="../../../assets/images/kt.jpg")
//- span {{dataForm.icon}}
//- div(:class="dataForm.icon+'6'")
.info-form(style="border-bottom: 1px solid #c0c0c0")
.quDetailM
p.leftP 设备名称&nbsp;:&nbsp;&nbsp; 室内机
.quDetailM
p.leftP 设备编号&nbsp;:&nbsp;&nbsp; CDSLAKS-009
.quDetailM
p.leftP 设备品牌：&nbsp;:&nbsp;&nbsp;格力
.quDetailM
p.leftP 设备型号：&nbsp;:&nbsp;&nbsp;晶弘33-1
.quDetailM
p.leftP 安装日期：&nbsp;:&nbsp;&nbsp;2020-01-04
p.leftP 维保日期：&nbsp;:&nbsp;&nbsp;2020-01-15
.info-form
el-row
el-col(:span="8")
.switch-warp
div(:class="[state == 1 ? 'on' : '']", @click="handleSwitch(1)") 打开
div(:class="[state == 2 ? 'on' : '']", @click="handleSwitch(2)") 关闭
el-col.text-size(:span="16", flex, justify-content="start")
div(style="width: 60px") 频率设置：
el-input(size="mini", style="width: 60px", v-model="speed")
span &nbsp;转
el-button(type="primary", size="mini", style="margin-left: 10px") 设定
el-row
el-col.text-size(:span="8") 当前已
span(v-if="state == 1") 打开
span(v-else) 关闭
el-col.text-size(:span="10") 当前频率：
span(style="color: blue") 2289
span &nbsp;转/分
.info-state
span(style="font-weight: bold") 空调运行状态
div
span.type 电压：
span.value 220 V
div
span.type 电流：
span.value 4 A
div
span.type 功率因数：
span.value 0.8 kw
div
span.type 功率：
span.value 0.8 kw
div
span.type 电能：
span.value 12 kw.h
</template>
<script>
import { mapState } from 'vuex'
import { isAuth } from '../../../util'
export default {
computed: {
...mapState('d2admin/user', [
'info'
])
...mapState('d2admin/user', ['info'])
},
data () {
data() {
return {
//11=焦距变大，12=焦距变小，13=焦点前调，14=焦点后调，15=光圈扩大，16=光圈扩小
//21=上仰，22=下俯，23=左转，24=右转，25=左上，26=右上，27=左下，28=右下，29=自动扫描
actionList: ['', '', '', '', '', '', '', '', '', '', '', '变倍+', '变倍-', '变焦+', '变焦-', '光圈+', '光圈-', '', '', '', '',
'上仰', '下俯', '左转', '右转', '左上', '右上', '左下', '右下', '自动扫描'],
imgUrl: '',
imgRightUrl11: false,
imgRightUrl12: false,
imgRightUrl13: false,
imgRightUrl14: false,
imgRightUrl15: false,
imgRightUrl16: false,
videoSrc: '',
clickFlag: false,
visible: false,
sysOrgList: [],
dataListSelections: [],
lineList: [],
stationList: [],
typeList: [],
systemList: [],
tierList: [],
speed: '', //装束
state: 1, //开关
stationId: localStorage.getItem('stationId'),
dataForm: {
id: 0,
name: '',
type: 1,
lineId: '',
lineName: '',
stationId: localStorage.getItem('stationId'),
stationName: '',
tierId: '',
subSystem: '',
code: '',
subCode: '',
addressCode: '',
port: '',
username: '',
password: '',
remark: '',
status: 1
},
ontclick: 'pointer-events: none;',
flvPlayer: null
name: ''
}
}
},
created () {
},
created() {},
methods: {
init (id, stationId) {
this.visible = true
this.clickFlag = false
this.dataForm.id = id
this.stationId = stationId
this.initResource()
init(data, stationId) {
this.dataForm = data
// this.stationId = stationId
this.dataForm.operatorName = this.info.name
},
initResource () {
this.$http({
url: this.$http.adornUrlEq(`/liResource/getResourceDetails/${this.dataForm.id}`),
method: 'get',
params: this.$http.adornParams()
}).then(data => {
if (data && data.code === 0) {
this.dataForm = data.bean
//如果当前设备摄像头为离线状态，则不加载画面
if (data.bean.byx2 == 0 && this.flvPlayer) { //资源点状态(0=离线，1=在线)
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
return
} else if (data.bean.byx2 == 0 && !this.flvPlayer) {
return
} else if (this.flvPlayer) {
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
this.flvPlayer.destroy()
this.flvPlayer = null
}
this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: data.bean.id,
stationId: data.bean.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then(data => {
if (data && data.code === 0) {
this.videoSrc = data.url
//视频连接
this.flvPlayer = null
if (flvjs.isSupported()) {
this.flvPlayer = flvjs.createPlayer({
type: 'flv',
enableWorker: true, //浏览器端开启flv.js的worker,多进程运行flv.js
isLive: true, //直播模式
hasAudio: false, //关闭音频
hasVideo: true,
stashInitialSize: 128,
enableStashBuffer: false, //播放flv时，设置是否启用播放缓存，只在直播起作用。
url: this.videoSrc
})
this.$nextTick(function () {
this.flvPlayer.attachMediaElement(this.$refs.video)
this.flvPlayer.load()
})
}
}
})
}
})
},
closeQueryDetailVisible () {
closeQueryDetailVisible() {
this.$emit('closeQ')
},
clickPTZControl (ptz, dwStop, img) {
if (this.dataForm.type !== 'ece0b8b2db27411886254e81134988a3' && (ptz < 11 || ptz > 16)) {
return
}
if (!isAuth('ol:demo:corona')) {
this.$message({
type: 'warning',
message: '没有操作权限，请联系管理员',
duration: 1000
})
return
}
if (img && img != 'right') {
this.imgUrl = img
}
if (dwStop) {
this.imgUrl = ''
}
if (img && img == 'right') {
this['imgRightUrl' + ptz] = true
}
if (dwStop && img == 'right') {
this['imgRightUrl' + ptz] = false
}
this.$http({
url: this.$http.adornUrlEq('/camera/ptzControl'),
method: 'post',
data: {
resourceId: this.dataForm.id,
stationId: this.dataForm.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.dataForm.addressCode, //ip地址
port: this.dataForm.port, //端口
username: this.dataForm.username, //账号
password: this.dataForm.password, //密码
channel: this.dataForm.byx1, //通道
stream: 'main', //主码流
dwPtzCommand: ptz, //云台控制命令
dwStop: dwStop //云台控制0开始和1结束
}
}).then(data => {
// console.log(11)
// console.log(data)
if (data && data.code === 0) {
if (dwStop == 0) { //云台控制0开始和1结束
this.saveLog(1, ptz)// 执行结果 成功 1 失败 2
this.$message.success(data.msg)
}
} else {
if (dwStop == 0) { //云台控制0开始和1结束
this.saveLog(2, ptz)// 执行结果 成功 1 失败 2
this.$message.error(data.msg)
}
}
})
},
//调用日志保存记录操作指令
saveLog (result, ptz) {
this.$http({
url: this.$http.adornUrlEq('/orVideoMonitor/save'),
method: 'post',
data: {
source: 1,
actionName: this.actionList[ptz],
resourceId: this.dataForm.id,
stationId: this.stationId,
type: this.dataForm.type,
result: result
}
}).then(data => {
})
handleSwitch(state) {
this.state = state
}
}
}
</script>
<style lang="scss" scoped>
.switch-warp {
width: 80px;
height: 26px;
font-size: 12px;
line-height: 25px;
overflow: hidden;
border-radius: 13px;
background: #d3d3d3;
border: 1px solid rgba(0, 0, 0, 0.03);
box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
0px 2px 4px 0px rgba(0, 0, 0, 0.1);
div {
width: 39px;
height: 24px;
line-height: 24px;
float: left;
text-align: center;
cursor: pointer;
}
div.on {
background: #4cb527;
color: #fff;
border-radius: 13px;
border: 1px solid rgba(23, 41, 71, 0.02);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
0px 2px 0px 0px rgba(255, 255, 255, 0.15);
}
}
.text-size {
font-size: 12px;
line-height: 28px;
}
.info-state {
padding: 0 10px 10px;
.type {
font-size: 14px;
margin: 5px 0 0 10px;
display: inline-block;
width: 85px;
}
.value {
color: #47b320;
}
}
.el-table__header {
width: 100% !important;
}
......@@ -324,7 +159,7 @@ export default {
}
.info-video {
padding: 10px;
height: 175px;
height: 160px;
}
.info-form {
padding: 10px;
......@@ -336,17 +171,17 @@ export default {
width: 100%;
}
.video {
width: 310px;
height: 175px;
width: 100%;
height: 180px;
}
.animation {
animation: myfirst 1s;
position: absolute;
right: 0;
top: 50px;
right: 0;
width: 330px;
background-color: #f4f4f4;
z-index: 999;
z-index: 11;
border: 1px solid rgba(195, 195, 195, 1);
box-shadow: 0 2px 8px 8px rgba(0, 0, 0, 0.2);
}
......@@ -371,143 +206,24 @@ export default {
color: #46b6f9;
}
}
.operate {
padding: 5px 0;
font-size: 14px;
font-family: Microsoft YaHei;
font-weight: 400;
color: rgba(0, 0, 0, 1);
border-image: linear-gradient(
90deg,
rgba(255, 255, 255, 0.5),
rgba(213, 213, 213, 0.5),
rgba(255, 255, 255, 0.5),
rgba(218, 218, 218, 0.5),
rgba(255, 255, 255, 0.5)
)
2 2;
border-radius: 10px;
overflow: hidden;
display: flex;
justify-content: flex-start;
.btns {
width: 194px;
height: 194px;
position: relative;
img {
width: 100%;
height: 100%;
}
div {
cursor: pointer;
padding: 10px;
}
.s {
position: absolute;
top: 10px;
left: 75px;
width: 24px;
height: 24px;
}
.x {
position: absolute;
bottom: 10px;
left: 75px;
width: 24px;
height: 24px;
}
.z {
position: absolute;
top: 75px;
left: 10px;
width: 24px;
height: 24px;
}
.y {
position: absolute;
top: 75px;
right: 10px;
width: 24px;
height: 24px;
}
.zs {
position: absolute;
top: 32px;
left: 32px;
width: 24px;
height: 24px;
}
.zx {
position: absolute;
bottom: 32px;
left: 32px;
width: 24px;
height: 24px;
}
.ys {
position: absolute;
top: 32px;
right: 32px;
width: 24px;
height: 24px;
}
.yx {
position: absolute;
bottom: 32px;
right: 32px;
width: 24px;
height: 24px;
}
.fx {
position: absolute;
padding: 0;
cursor: default;
top: 50%;
left: 50%;
width: 65px;
height: 65px;
background: #ececec;
border-radius: 50%;
line-height: 65px;
text-align: center;
color: #969696;
transform: translate(-50%, -50%);
}
}
.ytBox {
width: 90px;
font-size: 16px;
padding: 10px 0 10px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
.mllx {
display: flex;
justify-content: space-between;
width: 90%;
span {
line-height: 40px;
text-align: center;
width: 35%;
}
}
.bbBtn {
height: 40px;
display: flex;
margin-left: 10px;
justify-content: flex-start;
div {
width: 40px;
height: 40px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
</style>
<style lang="scss">
.instuctions_content {
table {
th {
background: #eef8ff !important;
color: #333333 !important;
}
}
}
.el-icon-jfktg6{
width: 100%;
height: 170px;
text-align: center;
background: url('../../../assets/images/kt.jpg') no-repeat center;
background-size:100% 100% ;
}
</style>
src/pages/kb/power/config.js 0 → 100644
View file @ fd4f333a
export const tableColums = [
{
align: 'center',
prop: 'A',
label: '设备名称',
width: 162
},
{
align: 'center',
prop: 'B',
label: '设备位置'
// width: 182
},
{
align: 'center',
prop: 'C',
label: '当日功耗',
width: 162
},
{
align: 'center',
prop: 'D',
label: '当月功耗',
width: 162
},
{
align: 'center',
prop: 'E',
label: '设备状态',
width: 152
},
{
align: 'center',
prop: 'F',
label: '设备编号',
width: 152
}
]
src/pages/kb/power/page.vue
View file @ fd4f333a
......@@ -20,7 +20,7 @@
</el-tabs>
</div>
<div>
<el-form :inline="true" :mode='formData'>
<el-form :inline="true" :mode="formData">
<el-form-item label="设备名称：">
<el-input size="mini" placeholder=""></el-input>
</el-form-item>
......@@ -48,15 +48,19 @@
:tableColums="tableColums"
:tableData="tableData"
:isShowOp="true"
isShowPage="true"
>
<template v-slot:operation="scope">
<el-button type="text" @click="openHistoryHandle"
<template #operation="data">
<el-button type="text" @click="openHistoryHandle(data)"
>历史数据</el-button
>
<el-button type="text" @click="openPicTHandle">统计图表</el-button>
</template>
</enTable>
<tablePagination
:pageSize="pageSize"
:totalSize="totalSize"
@parentMethod="getDataList"
></tablePagination>
</div>
</cardList>
<history-data-modal
......@@ -75,62 +79,8 @@ import enTabs from '../../components/enTabs'
import enTable from '../../components/enTable'
import historyDataModal from './components/historyDataModal'
import statisticPicTableModal from './components/statisticPicTableModal'
const tableColums = [
{
align: 'center',
prop: 'A',
label: '设备名称',
width: 162
},
{
align: 'center',
prop: 'B',
label: '设备位置'
// width: 182
},
{
align: 'center',
prop: 'C',
label: '当日功耗',
width: 162
},
{
align: 'center',
prop: 'D',
label: '当月功耗',
width: 162
},
{
align: 'center',
prop: 'E',
label: '设备状态',
width: 152
},
{
align: 'center',
prop: 'F',
label: '设备编号',
width: 152
}
]
const tableData = [
{
A: '设备1',
B: '左侧办公房屋',
C: '11',
D: '1100',
E: '开启',
F: 'QY0001'
},
{
A: '设备2',
B: '左侧办公房屋',
C: '11',
D: '1100',
E: '开启',
F: 'QY0002'
}
]
import tablePagination from '@/pages/components/tablePagination'
import { tableColums } from './config'
export default {
name: 'useElectroData',
components: {
......@@ -138,54 +88,69 @@ export default {
enTabs,
enTable,
historyDataModal,
statisticPicTableModal
statisticPicTableModal,
tablePagination
},
data() {
return {
pageIndex: 1,
pageSize: 10,
totalSize: 0,
formData: {},
activeTab: '01',
historyDataModalVisible: false,
statisticModalVisible: false,
tableColums,
tableData,
tableData: [],
electroTabList: [
{
value: '01',
label: '全部'
},
{
value: '02',
value: 'b6af764f2a6e454490a6b1b3c9057e57',
label: '排风机'
},
{
value: '03',
value: 'ece0b8b2db27411886254e81134988a3',
label: '机房空调(220V)'
},
{
value: '04',
value: 'b47661ca1d454f9792ba5369f3cb2bc5',
label: '机房空调(380V)'
},
{
value: '05',
value: 'c788ce98c1f248f590434394da485ce4',
label: '防火卷帘门'
},
{
value: '06',
value: 'b45827c068254695864ee3c1d42573cb',
label: '风冷热泵机组'
},
{
value: '07',
value: '303310efddb34a2e9bf269bdff8a7dc5',
label: '室内机风柜'
},
{
value: '08',
value: '173466a2cf9a42a6a17b2bdfbeae36d5',
label: '多联室外机'
}
]
}
},
watch: {
activeTab() {
this.getDataList()
}
},
mounted() {
this.getDataList()
},
methods: {
// 获取数据
getDataList(page, size) {
console.log('类型id', this.activeTab)
},
cancelhandle() {
this.$nextTick(() => {
this.historyDataModalVisible = false
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment