Commit 63a7bab0 authored by xiexingan's avatar xiexingan

调整

parent f623e88b
......@@ -5,10 +5,10 @@ CONFIG.TITLE = 'AI节能管理系统'
// 网络请求公用地址
CONFIG.requestPath = 'http://localhost:8046'
// CONFIG.requestPath = 'http://localhost:8046'
// CONFIG.requestPath = 'http://10.20.72.31:8046'
// CONFIG.requestPath = 'http://59.110.43.122:8046'
CONFIG.requestPath = 'http://59.110.43.122:8046'
// 文件上传
CONFIG.urlPath = 'http://10.20.72.33/'
......
......@@ -56,7 +56,7 @@ export default {
right: 10,
top: 20,
bottom: 20,
data: ['测试1', '测试2', '测试3', '测试4']
data: ['测试', '测试2', '测试3', '测试4']
// selected: this.list.selected
},
......
<template lang='pug'>
#chart4(:style="{ width: '100%', height: '90%'}")
</template>
<script>
export default {
mounted() {
this.chart4()
},
methods: {
chart4() {
let dom = document.getElementById('chart4')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
// color:['#D0F0FF'],
title: {
text: '故障报警'
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '订单数量',
type: 'line',
stack: '总量',
smooth: true,
label: {
show: true,
position: 'top'
},
areaStyle: {
normal: {
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'orange' // 0% 处的颜色
},
{
offset: 1,
color: '#fff' // 100% 处的颜色
}
])
}
},
lineStyle: {
color: '#13B0FF'
},
itemStyle: {
normal: {
color: '#13B0FF'
}
},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
......@@ -45,7 +45,7 @@ card-warp(title="室内气象分析" height='45px' showBackground)
div
chart3
div
pie4
chart4
</template>
......@@ -53,13 +53,13 @@ card-warp(title="室内气象分析" height='45px' showBackground)
import chart from './chart'
import chart2 from './chart2'
import chart3 from './chart3'
import pie4 from './pie4'
import chart4 from './chart4'
export default {
components: {
chart,
chart2,
chart3,
pie4
chart4
},
data() {
return {
......
<template lang='pug'>
#pie4(:style="{ width: '100%', height: '90%' }")
</template>
<script>
export default {
mounted() {
this.pie()
},
methods: {
pie() {
let dom = document.getElementById('pie4')
if (!dom) return
let myCharts = this.$echarts.init(dom)
let option = {
title: {
text: '故障报警'
},
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '20',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' }
]
}
]
}
myCharts.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
</style>
......@@ -5,23 +5,16 @@
<div>
<el-form :inline="true" :model="formData" label-width="100">
<el-form-item label="定时功能启止时间:">
<el-date-picker size="mini" style="width: 200px" type="date" placeholder="" v-model="formData.startTime">
</el-date-picker>
<span style="padding: 0 10px"></span>
<el-date-picker size="mini" style="width: 200px" type="date" placeholder="" v-model="formData.endTime">
</el-date-picker>
</el-form-item>
<el-form-item label="定时设定按钮:">
<el-switch active-color="#47B320" v-model="formData.timing" inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="节能模式:">
<el-switch active-color="#47B320" v-model="formData.saving" inactive-color="#ff4949" ></el-switch>
<div class="switch-warp">
<div :class="[formData.saving == 1?'on':'']" @click="handleSwitch(1)">人工</div>
<div :class="[formData.saving == 2?'on':'']" @click="handleSwitch(2)">节能</div>
</div>
</el-form-item>
<span class="btn-group">
<el-form-item label="">
<el-button type="primary" size="mini">温度设定</el-button>
<el-button type="primary" size="mini">
<img src="../../home/image/sun_icon.png" alt="">
自然通风
......@@ -36,6 +29,29 @@
</el-button>
</el-form-item>
</span>
</el-col>
<el-col :span="24">
<el-form-item label="定时功能启止时间:">
<el-date-picker size="mini" style="width: 200px" type="date" placeholder="" v-model="formData.startTime">
</el-date-picker>
<span style="padding: 0 10px"></span>
<el-date-picker size="mini" style="width: 200px" type="date" placeholder="" v-model="formData.endTime">
</el-date-picker>
</el-form-item>
<!-- <el-form-item label="定时设定按钮:">
<el-switch active-color="#47B320" v-model="formData.timing" inactive-color="#ff4949">
</el-switch>
</el-form-item> -->
<el-form-item label="温度设定:">
<el-input ></el-input>
</el-form-item>
<el-form-item label="">
<el-button type="primary" size="mini">确定</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
......@@ -106,7 +122,9 @@ export default {
activeTab: '01',
tableData: tableDataOne,
tableColums: tableColumsOne,
formData: {},
formData: {
saving: 1
},
tabList: [
{
value: '01',
......@@ -135,6 +153,9 @@ export default {
},
statusHandle() {
},
handleSwitch(state) {
this.formData.saving = state
}
}
}
......@@ -158,4 +179,30 @@ export default {
}
}
}
.switch-warp {
font-size: 12px;
line-height: 20px;
overflow: hidden;
border-radius: 13px;
background: #ced1d6;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 0px 1px rgba(255, 255, 255, 0.25),
0px 2px 4px 0px rgba(0, 0, 0, 0.1);
div {
width: 46px;
height: 20px;
float: left;
text-align: center;
cursor: pointer;
}
div.on {
background: #45b5f8;
color: #fff;
border-radius: 13px;
border: 1px solid rgba(23, 41, 71, 0.5);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.3),
0px 2px 0px 0px rgba(255, 255, 255, 0.15);
}
}
</style>
......@@ -582,7 +582,7 @@ export default {
this.queryDetail(item.id)
} else {
// console.log('2')
this.noQueryDetail(item.id)
this.noQueryDetail(item)
}
// console.log('subCode', item.subCode, typeof (item.subCode))
// switch (item.subCode) {
......
<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 style="height:40px; width:100%;padding-top:10px">
<div style="width:80px; float:left; line-height:40px; padding-left:10px;">关联监控:</div>
<div style="float:left">
<el-select v-model="camera" placeholder="请选择" @change="cameraChange">
<el-option v-for="item in dataForm.list" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</div>
</div>
<div class='info-video'>
<img v-if="video1 == 0" class="video" src="@/assets/images/videoImg.png" alt="">
<video v-if="video1 == 1" class="video" ref="video" muted autoplay 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')
div(style='height:40px; width:100%;padding-top:10px')
div(style='width:80px; float:left; line-height:40px; padding-left:10px;') 关联监控:
.info-form
.info-title 监控点信息
.info-form
.quDetailM
p.leftP 线路站点&nbsp;:&nbsp;&nbsp;
span {{dataForm.lineStation}}
.quDetailM
p.leftP 资源点名称&nbsp;:&nbsp;&nbsp;{{dataForm.name}}
.quDetailM
p.leftP 资源点类型&nbsp;:&nbsp;&nbsp;{{dataForm.typeName}}
.quDetailM
p.leftP 资源点编码&nbsp;:&nbsp;&nbsp;{{dataForm.code}}
.quDetailM
p.leftP 资源点状态&nbsp;:&nbsp;&nbsp;{{dataForm.status==1?'正常':'异常'}}
.quDetailM
p.leftP 部署位置&nbsp;:&nbsp;&nbsp;{{dataForm.deployLocation}}
</template>
<script>
import { mapState } from 'vuex'
import { isAuth } from '../../../util'
export default {
computed: {
...mapState('d2admin/user', ['info'])
......@@ -114,61 +34,9 @@ export default {
return {
video1: 0,
stationId: localStorage.getItem('stationId'),
//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,
monitorList: [
{
value: '1',
label: '监控1'
},
{
value: '2',
label: '监控2'
}
],
monitorValue: '监控1',
videoSrc: '',
clickFlag: false,
camera: '',
cameraCur: {},
restaurants: [],
dataForm: {
......@@ -194,209 +62,15 @@ export default {
},
created() {},
methods: {
init(id, stationId) {
init(data, stationId) {
this.clickFlag = false
this.dataForm.id = id
this.dataForm = data
// this.stationId = stationId
this.cameraCur = {}
this.camera = ''
this.initResource()
this.dataForm.operatorName = this.info.name
},
initResource() {
this.video1 = 0 //初始化显示默认图片
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 (this.dataForm.list && this.dataForm.list.length > 0) {
this.cameraCur = this.dataForm.list[0]
// console.log(this.cameraCur, '---------')
this.camera = this.cameraCur.id
this.video1 = 1
this.$http({
url: this.$http.adornUrlEq('/camera/camerasPlay'),
method: 'post',
data: {
id: this.cameraCur.id,
stationId: this.cameraCur.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then((data) => {
if (data && data.code === 0) {
//视频直播
var src = data.url
//视频连接
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: src
})
this.$nextTick(function() {
this.flvPlayer.attachMediaElement(this.$refs.video)
try {
this.flvPlayer.load()
// this.flvPlayer.play()
} catch (error) {
console.log(error)
}
})
}
}
})
}
}
})
},
closeQueryDetailVisible() {
this.$emit('closeQ')
},
clickPTZControl(ptz, dwStop, img) {
// console.log(this.camera)
if (
!this.camera ||
(this.cameraCur.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.cameraCur.id,
stationId: this.cameraCur.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3,
ip: this.cameraCur.addressCode, //ip地址
port: this.cameraCur.port, //端口
username: this.cameraCur.username, //账号
password: this.cameraCur.password, //密码
channel: this.cameraCur.byx1, //通道
stream: 'main', //主码流
dwPtzCommand: ptz, //云台控制命令
dwStop: dwStop //云台控制0开始和1结束
}
}).then((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.cameraCur.id,
stationId: this.stationId,
type: this.cameraCur.type,
result: result
}
}).then((data) => {})
},
cameraChange(id) {
if (id) {
this.camera = id
this.dataForm.list.forEach((res) => {
if (res.id === id) {
this.cameraCur = res
}
})
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: this.cameraCur.id,
stationId: this.cameraCur.stationId,
userId: localStorage.getItem('userId'),
levelType: 1,
controlType: 3
}
}).then((data) => {
if (data && data.code === 0) {
//视频直播
var src = data.url
//视频连接
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: src
})
this.$nextTick(function() {
this.flvPlayer.attachMediaElement(this.$refs.video)
try {
this.flvPlayer.load()
// this.flvPlayer.play()
} catch (error) {
console.log(error)
}
})
}
}
})
}
}
}
}
......
......@@ -172,16 +172,16 @@ export default {
if (data && data.code === 0) {
this.dataForm = data.bean
//如果当前设备摄像头为离线状态,则不加载画面
if(data.bean.byx2 == 0 && this.flvPlayer){//资源点状态(0=离线,1=在线)
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){
} else if (data.bean.byx2 == 0 && !this.flvPlayer) {
return
}else if(this.flvPlayer){
} else if (this.flvPlayer) {
this.flvPlayer.pause()
this.flvPlayer.unload()
this.flvPlayer.detachMediaElement()
......
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