xiaomeng/wszhyWx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pc-master #259

Merged
xiaomeng merged 4 commits from pc-master into portal 2025-07-02 06:25:51 +00:00
Conversation 0 Commits 4 Files Changed 10 +290 -57
10 changed files with 290 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/assets/css/main.css
View File

@ -31,6 +31,31 @@
/*滚动条边角*/
}
.amap-marker .p_title {
height: 44px;
background: rgba(1, 12, 28, 0.7);
border-radius: 22px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 8px;
white-space: nowrap;
}
.amap-marker .p_title > img {
width: 30px;
height: 30px;
margin-right: 5px;
}
.amap-marker .p_title > span {
font-size: 18px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
flex: 1;
}
.tips-model {
padding: 10px;
color: #fff;
@ -2311,11 +2336,19 @@ textarea {
position: relative;
}
.realTime .page-content .realTime-bottom .left-view > div.center {
justify-content: center;
}
.realTime .page-content .realTime-bottom .left-view > div .video-js {
width: calc(100% - 400px);
height: 100%;
}
.realTime .page-content .realTime-bottom .left-view > div .video-js.w-100 {
width: 100%;
}
.realTime .page-content .realTime-bottom .left-view > div #video-js {
position: absolute;
left: 0;

35
src/assets/css/main.scss
View File

@ -33,6 +33,34 @@
}
}
.amap-marker{
.p_title {
// width:50px;
height: 44px;
background: rgba(1, 12, 28, 0.7);
border-radius:22px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 8px;
// overflow: hidden;
white-space: nowrap;
>img {
width: 30px;
height: 30px;
margin-right: 5px;
}
>span {
font-size: 18px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #ffffff;
flex: 1;
}
}
}
.tips-model {
padding: 10px;
@ -2444,10 +2472,15 @@ textarea {
display: flex;
align-items: center;
position: relative;
&.center{
justify-content: center;
}
.video-js {
width: calc(100% - 400px);
height: 100%;
&.w-100{
width: 100%;
}
}
#video-js {

6
src/i18n/lang/en.js
View File

@ -31,7 +31,8 @@ module.exports = {
roleRequired: "Role is required",
deviceRequired: "Please add at least one device",
passwordMismatch: "Passwords do not match",
sortRequired: "Sort code is required"
sortRequired: "Sort code is required",
fileName:'The file name cannot be empty',
},
placeholder: {
@ -54,7 +55,8 @@ module.exports = {
newPassword: "Enter new password",
confirmPassword: "Confirm password",
sortOrder: "Enter sort order",
role: "Select role"
role: "Select role",
fileName:'Please enter the download file name.'
},
text: {
sortOrder: "Sort Order",

6
src/i18n/lang/zh.js
View File

@ -43,7 +43,8 @@ module.exports = {
oldPassword: "请输入原密码",
newPassword: "请输入新密码",
confirmPassword: "请输入确认密码",
role: "请选择角色"
role: "请选择角色",
fileName:'请输入下载文件名称'
},
// 各个消息提示
@ -62,7 +63,8 @@ module.exports = {
roleRequired: "角色还未选择",
deviceRequired: "请添加一个设备",
passwordMismatch: "两次密码不一致",
sortRequired: "排序还未填写"
sortRequired: "排序还未填写",
fileName:'文件名称不能为空',
},
text: {
sortOrder: "排序",

18
src/views/manage/deviceManage.vue
View File

@ -10,7 +10,7 @@
</div>
<div class="flex-view">
<div class="manage-input w-180">
<span class="input-title">{{$t('deviceManage.username')}}</span>
<span class="input-title">{{$t('deviceManage.search.username')}}</span>
<input
class="search-input"
type="text"
@ -19,7 +19,7 @@
/>
</div>
<div class="manage-input w-180">
<span class="input-title">{{$t('deviceManage.deviceCode')}}</span>
<span class="input-title">{{$t('deviceManage.search.deviceCode')}}</span>
<input
class="search-input"
type="text"
@ -194,6 +194,14 @@
:placeholder="$t('placeholder.cameraChannelPlaceholder')"
/>
</div>
<div class="manage-input">
<div class="input-title">摄像头右侧控制面板(1为显示)</div>
<input
type="number"
v-model="nowData1.cameraName"
placeholder="1为显示其他不显示"
/>
</div>
<div class="manage-text">
{{$t('deviceManagement.dialogs.noteText')}}
@ -229,9 +237,11 @@ export default {
addModel1: false,
nowData1: {
deviceState: 0,
cameraName:1,
},
deviceType: "",
};
},
computed:{
@ -282,6 +292,7 @@ export default {
this.nowData1.deviceTypeName = e
this.deviceType = e;
},
openRoleModel(deviceId) {
this.loading = this.$loading({
lock: true,
@ -308,7 +319,7 @@ export default {
openAddModel1() {
this.nowData1 = {
deviceState: 0,
cameraName:1,
};
this.deviceType=''
this.addModel1 = true;
@ -326,6 +337,7 @@ export default {
this.$message.error(this.$t('message.deviceNameRequired'));
return;
}
var data = {
...this.nowData1,
stationName: this.nowData1.deviceTypeName,

61
src/views/page/historyData.vue
View File

@ -28,8 +28,8 @@
<div class="btn blue" @click="search">
{{ $t('imageGallery.query') }}
</div>
<div class="btn blue" @click="download">
{{ $t('imageGallery.downloadImages') }}
<div class="btn blue" @click="downloadFile(0)">
{{ $t('imageGallery.download') }}
</div>
<div class="btn blue" @click="openModel">
{{ $t('imageGallery.dataStatistics') }}
@ -82,7 +82,7 @@
<div class="btn blue" @click="search1">
{{ $t('imageGallery.query') }}
</div>
<div class="btn blue" @click="download1">
<div class="btn blue" @click="downloadFile(1)">
{{ $t('imageGallery.download') }}
</div>
</div>
@ -105,6 +105,23 @@
</div>
</el-dialog>
<el-dialog title="" class="vrcode-model confirm-psw" top="30vh" :close-on-click-modal="false" :append-to-body="true" :visible.sync="warnModel"
width="700px">
<div class="vrcode-model-title vrcode-model-title-282">{{ $t('placeholder.fileName') }}</div>
<div class="warning-model" style="padding: 0 30px;">
<div class="flex-view border-none">
<div class="input-main">
<div>{{ $t('placeholder.fileName') }}</div>
<input type="text" v-model="fileName">
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="modelClose">{{$t('index.cancel1')}}</el-button>
<el-button type="success" @click="modelConfirm">{{$t('index.confirm1')}}</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
@ -131,6 +148,10 @@ export default {
pageSize1: 10,
tableList1: [],
total1: 0,
warnModel:false,//下载文件名称
downType:0,
fileName:'',
}
},
watch: {
@ -216,13 +237,36 @@ export default {
this.getData()
}, 0);
},
modelClose(){
this.downType=0
this.warnModel=false
},
modelConfirm(){
if(this.downType==0){
this.download()
}else{
this.download1()
}
},
downloadFile(type){
var store = this.$store.state
var index = store.equipmentIndex;
this.downType=type
this.fileName=store.equipmentList[index - 1].deviceTypeName
this.warnModel=true
},
download1() {
if(!this.fileName){
this.$message.warning( this.$t('message.fileName'));
return
}
this.loading = this.$loading({
lock: true,
text: this.$t('message.loading'),
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var store = this.$store.state
var index = store.equipmentIndex;
var data = {
@ -234,6 +278,7 @@ export default {
isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
}
this.api.selFsAvgdatadownload(data).then(res => {
this.warnModel=false
// 创建一个blob对象
this.loading.close()
const blob = new Blob([res.data], { type: 'text/csv' });
@ -244,7 +289,7 @@ export default {
link.href = url;
// 设置文件名
link.setAttribute('download', 'filename.csv');
link.setAttribute('download', `${this.fileName}.csv`);
// 模拟点击下载
document.body.appendChild(link);
@ -256,12 +301,17 @@ export default {
})
},
download() {
if(!this.fileName){
this.$message.warning( this.$t('message.fileName'));
return
}
this.loading = this.$loading({
lock: true,
text: this.$t('message.loading'),
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
var store = this.$store.state
var index = store.equipmentIndex;
var data = {
@ -273,6 +323,7 @@ export default {
isEquipment: store.equipmentList[index - 1].deviceName == 30 ? 1 : 0
}
this.api.loadHistorydata(data).then(res => {
this.warnModel=false
// 创建一个blob对象
this.loading.close()
const blob = new Blob([res.data], { type: 'text/csv' });
@ -283,7 +334,7 @@ export default {
link.href = url;
// 设置文件名
link.setAttribute('download', 'filename.csv');
link.setAttribute('download', `${this.fileName}.csv`);
// 模拟点击下载
document.body.appendChild(link);

53
src/views/page/largeScreen.vue
View File

@ -1378,6 +1378,7 @@ mapInit(){
// 添加标点
const iconUrl = require("@/assets/img/axis1.png");
const iconUrl1 = require("@/assets/img/wenshi.png");
const icon = new AMap.Icon({
image: iconUrl,
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
@ -1385,17 +1386,49 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
});
this.dataList.forEach((el,index)=>{
if(el.xaxis&&el.yaxis){
const marker = new AMap.Marker({
position:new AMap.LngLat(el.xaxis,el.yaxis),
icon: icon,
title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
});
marker.on("click", function (e) {
// const marker = new AMap.Marker({
// position:new AMap.LngLat(el.xaxis,el.yaxis),
// icon: icon,
// title: "上海前卫柑桔有限公司",
// offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
// });
// marker.on("click", function (e) {
// that.$router.push({ path: "/largeScreen1" });
// });
// const text = new AMap.Text({
// text: el.greenhouseName, // 要显示的文字
// anchor: 'bottom', // 文字对齐方式（bottom 表示文字在坐标点下方）
// offset: new AMap.Pixel(-17.5,-70), // 调整文字位置（向上偏移）
// style: {
// 'font-size': '14px',
// 'background-color': '#fff',
// 'padding': '4px 8px',
// 'border-radius': '4px',
// // 'border': '1px solid #ddd',
// },
// position:new AMap.LngLat(el.xaxis,el.yaxis),
// });
// text.on("click", function (e) {
// that.$router.push({ path: "/largeScreen1" });
// });
var content=` <div class="p_title">
<img src="${iconUrl1}" alt="" />
<span>${el.greenhouseName}</span>
</div>`
const marker = new AMap.Marker({
position: new AMap.LngLat(el.xaxis,el.yaxis), // 坐标
content: content, // 自定义 HTML
offset: new AMap.Pixel(-30,-22), // 调整位置（使 div 中心对准坐标点）
});
marker.on("click", function (e) {
that.$router.push({ path: "/largeScreen1" });
});
map.add(marker);
map.add(marker);
// map.add(text);
}
})
@ -2500,9 +2533,9 @@ window.open("http://localhost:8080/");
padding-bottom: 0.1rem;
>img {
width: 0.62rem;
width: 0.68rem;
height: 0.68rem;
margin: 0 0.16rem 0 0.13rem;
margin: 0 0.1rem 0 0.13rem;
}
.item_child {

53
src/views/page/largeScreen2.vue
View File

@ -12,12 +12,16 @@
</div>
<largeNav :active="1"></largeNav>
<div class="content scroll">
<div
class="video monitor"
v-for="(item, index) in videoList"
:key="index"
:id="'monitor' + index"
>
<div class="header">
{{item.name}}
</div>
<div
ref="videoPlayer"
class="video-js"
@ -65,20 +69,22 @@ export default {
this.getTime();
this.typeList = this.$store.state.typeList;
this.list1 = [
{ cameraid: "FT5712546", channelid: 1, player: null },
{ cameraid: "FT5712546", channelid: 2, player: null },
{ cameraid: "FT5712546", channelid: 3, player: null },
{ cameraid: "FT5712546", channelid: 4, player: null },
{ cameraid: "FT5712546", channelid: 5, player: null },
{ cameraid: "FT5712546", channelid: 6, player: null },
{ cameraid: "FT5712546", channelid: 7, player: null },
{ cameraid: "FT5712546", channelid: 8, player: null },
{ cameraid: "FT5712546", channelid: 9, player: null },
{ cameraid: "FT5712546", channelid: 10, player: null },
{ cameraid: "FT5712546", channelid: 11, player: null },
{ cameraid: "FT5712546", channelid: 12, player: null },
{ cameraid: "FT5712546", channelid: 13, player: null },
{ cameraid: "FT5712546", channelid: 14, player: null },
{ cameraid: "FT5712546", channelid: 1, name:'二期 3#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 2, name:'二期 1#温室东面内部', player: null },
{ cameraid: "FT5712546", channelid: 3, name:'二期 2#温室东面内部', player: null },
{ cameraid: "FT5712546", channelid: 4, name:'二期 5#温室东面内部', player: null },
{ cameraid: "FT5712546", channelid: 5, name:'二期 2#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 6, name:'二期 1#温室球机', player: null },
{ cameraid: "FT5712546", channelid: 7, name:'二期 3#温室东面南侧内部', player: null },
{ cameraid: "FT5712546", channelid: 8, name:'二期 1#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 9, name:'二期 4#温室东面内部', player: null },
{ cameraid: "FT5712546", channelid: 10,name:'二期 5#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 11,name:'二期 4#温室球机', player: null },
{ cameraid: "FT5712546", channelid: 12,name:'二期 5#温室球机', player: null },
{ cameraid: "FT5712546", channelid: 13,name:'二期 3#温室东面北侧内部', player: null },
{ cameraid: "FT5712546", channelid: 14,name:'二期 2#温室球机', player: null },
{ cameraid: "FT5712546", channelid: 15,name:'二期 4#温室西面内部', player: null },
{ cameraid: "FT5712546", channelid: 16,name:'二期 3#温室球机', player: null },
];
this.list2 = [
@ -202,6 +208,16 @@ export default {
},
};
</script>
<style lang="scss">
.about .header-controls{
// .theme-icon-item{
// display: none!important;
// }
display: none!important;
//
}
</style>
<style lang="scss" scoped>
.about {
width: 100%;
@ -313,6 +329,15 @@ export default {
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 0.2rem; //纵向间隔
grid-column-gap: 0.2rem; //横向间隔
.header{
height: 32px;
width: 100%;
background: #000;
padding-left: 1%;
color: #fff;
display: flex;
align-items: center;
}
.video {
height: calc((100vh - 3.3rem) / 3);
.video-js {

33
src/views/page/largeScreen3.vue
View File

@ -784,6 +784,7 @@ mapInit(){
// 添加标点
const iconUrl = require("@/assets/img/axis1.png");
const iconUrl1 = require("@/assets/img/wenshi.png");
const icon = new AMap.Icon({
image: iconUrl,
size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以根据需要进行调整或忽略
@ -792,16 +793,30 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
this.dataList.forEach((el,index)=>{
if(el.xaxis&&el.yaxis){
var marker = new AMap.Marker({
position:new AMap.LngLat(el.xaxis,el.yaxis),
icon: icon,
title: "上海前卫柑桔有限公司",
offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
});
marker.on("click", function (e) {
// var marker = new AMap.Marker({
// position:new AMap.LngLat(el.xaxis,el.yaxis),
// icon: icon,
// title: "上海前卫柑桔有限公司",
// offset: new AMap.Pixel(-17.5, -40), //以 icon 的 [center bottom] 为原点
// });
// marker.on("click", function (e) {
// that.$router.push({ path: "/largeScreen1" });
// });
var content=` <div class="p_title">
<img src="${iconUrl1}" alt="" />
<span>${el.greenhouseName}</span>
</div>`
const marker = new AMap.Marker({
position: new AMap.LngLat(el.xaxis,el.yaxis), // 坐标
content: content, // 自定义 HTML
offset: new AMap.Pixel(-30,-22), // 调整位置（使 div 中心对准坐标点）
});
marker.on("click", function (e) {
that.$router.push({ path: "/largeScreen1" });
});
map.add(marker);
map.add(marker);
}
@ -1303,9 +1318,9 @@ size: new AMap.Size(70, 86), // 原始大小，如果不是原始大小，可以
padding-bottom: 0.1rem;
>img {
width: 0.62rem;
width: 0.68rem;
height: 0.68rem;
margin: 0 0.16rem 0 0.13rem;
margin: 0 0.1rem 0 0.13rem;
}
.item_child {

43
src/views/page/videoMonitoring.vue
View File

@ -5,16 +5,17 @@
<img src="../../assets/image/real-time.png" alt="" />
{{ deviceTypeName }}—{{ $t('videoMonitoring.title') }}<span class="outline" v-if="deviceState == 0">({{ $t('realTime.deviceOffline') }})</span>
</div>
<div class="flex-list realTime-bottom videoMonitoring-monitor">
<div class="flex-list realTime-bottom videoMonitoring-monitor" :class="limitUserId==13?'noHeader':''">
<div class="left-view" v-if="deviceName != 30">
<div ref="monitor" class="monitor" id="monitor">
<div ref="monitor" class="monitor" :class="cameraName==1?'':'center'" id="monitor">
<!-- <video ref="videoPlayer" class="video-js" id="video-js"></video> -->
<img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
<div v-if="!imgUrl" ref="videoPlayer" class="video-js">
<img v-if="imgUrl" class="video-js" :src="imgUrl" alt="">
<div v-if="!imgUrl" ref="videoPlayer" class="video-js">
<div id="video-js"></div>
</div>
<div class="video-control">
<div class="video-control" v-if="cameraName==1">
<div class="video-btn-big">
<div class="top" @mousedown="downStart(0)">
<div class="arrow"></div>
@ -88,6 +89,9 @@ export default {
imgUrl: '',
url: '',
nowNum: -1,
limitUserId:1,
cameraName:1,
}
},
watch: {
@ -98,6 +102,7 @@ export default {
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
clearInterval(this.statusInterval) && this.statusInterval
this.imgUrl=''
setTimeout(() => {
@ -120,6 +125,7 @@ export default {
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
this.imgUrl=''
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
clearInterval(this.statusInterval) && this.statusInterval
setTimeout(() => {
@ -152,6 +158,7 @@ export default {
this.deviceTypeName = store.equipmentList[this.indexs - 1].deviceTypeName
this.deviceName = store.equipmentList[this.indexs - 1].deviceName
this.deviceState = store.equipmentList[this.indexs - 1].deviceState
this.cameraName=store.equipmentList[this.indexs - 1].cameraName
setTimeout(() => {
that.dataInit();
}, 0);
@ -219,7 +226,7 @@ export default {
createVideoNew(accessToken) {
// divW和divH是获取了父级宽高 使播放容器能铺满div
let divW = this.$refs.videoPlayer.clientWidth
let divH = this.$refs.videoPlayer.clientHeight
let divH = this.$refs.videoPlayer.clientHeight+(this.limitUserId==13?48:0)
this.player = new EZUIKit.EZUIKitPlayer({
id: 'video-js', // 视频容器ID
accessToken: accessToken,
@ -250,17 +257,37 @@ export default {
this.api.getGethls(data2).then(res => {
// console.log(res.data, 11);
if (res.data.code == 200) {
this.url = res.data.data.ezopen
let userInfo = JSON.parse(localStorage.getItem("userInfo"));
this.api.user_getjurisdiction(userInfo.userid).then((res1) => {
if (res1.data.code == 200) {
this.limitUserId = (res1.data.data.filter(el => el.id == 2 || el.id == 1 || el.id == 5 || el.id == 7 || el.id == 8 || el.id == 9 || el.id == 10 || el.id == 11|| el.id == 12|| el.id == 13))[0].id;
this.url = res.data.data.ezopen
this.accesstoken = res.data.data.accesstoken
this.createVideoNew(res.data.data.accesstoken)
}
});
} else {
this.imgUrl = nowDevice.hls
}
})
}
},
},
}
</script>
<style lang="scss"></style>
<style lang="scss">
.videoMonitoring{
.noHeader .header-controls{
// .theme-icon-item{
// display: none!important;
// }
display: none!important;
//
}
}
</style>