图片加载优化
fanluyan
9 months ago
parent
5f5fd289cf
commit
8c0c78f4b6
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,298 @@
|
||||
<template>
|
||||
<div class="realTimeMonitor" v-loading="mainLoading">
|
||||
<div class="monitor-container">
|
||||
<div class="allSide">
|
||||
<div class="typeList">
|
||||
<el-radio-group v-model="typeRadio" size="mini" @input="getTypeRadio">
|
||||
<el-radio-button :label="-1">全部</el-radio-button>
|
||||
<el-radio-button
|
||||
:label="1"
|
||||
v-if="roleName === 'superadmin' || roleName === 'Matthew'"
|
||||
>活动</el-radio-button
|
||||
>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<sideBar ref="sideTree" v-if="allTreeFlag"></sideBar>
|
||||
<activeSiderBar ref="activesideTree" v-else></activeSiderBar>
|
||||
</div>
|
||||
|
||||
<div class="picListBox">
|
||||
<div class="previewBox" v-if="LineFlag">
|
||||
<!-- 预览图页面 -->
|
||||
<previewContain ref="previewRef"></previewContain>
|
||||
</div>
|
||||
<div class="previewBox" v-if="towerFlag">
|
||||
<div class="swiperBox" v-loading="swiperLoading">
|
||||
<div class="title">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item> {{ towertitle }}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
<carouselChart
|
||||
ref="carouselpic"
|
||||
:terminalPhoto="terminalPhoto"
|
||||
:photoNum="photoNum"
|
||||
:protocolInfo="protocolInfo"
|
||||
v-if="terminalPhoto.length !== 0"
|
||||
></carouselChart>
|
||||
</div>
|
||||
<div class="parameterArea">
|
||||
<parameterArea ref="areaRef"></parameterArea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getTerminalPhotoListJoggle } from "@/utils/api/index";
|
||||
import sideBar from "./components/siderBar";
|
||||
import activeSiderBar from "./components/activeSiderBar";
|
||||
import previewContain from "./components/previewContain";
|
||||
import carouselChart from "./components/carouselChart";
|
||||
import parameterArea from "./components/parameterArea";
|
||||
import morePicPreveiw from "./components/morePicPreveiw";
|
||||
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import ActiveSiderBar from "./components/activeSiderBar.vue";
|
||||
export default {
|
||||
name: "realTimeMonitor",
|
||||
data() {
|
||||
return {
|
||||
LineFlag: false, //如果是线路显示
|
||||
towerFlag: false, //如果杆塔显示
|
||||
mainLoading: false, //全局loading
|
||||
page: 1, // 当前页数
|
||||
towertitle: "", //杆塔名称
|
||||
lineLoading: false, //杆塔loading
|
||||
swiperLoading: false,
|
||||
terminalPhoto: [], //获取装置当前图片数据
|
||||
photoNum: 5,
|
||||
dateValue: "", //当前时间
|
||||
protocolInfo: "",
|
||||
nopicPath: require("@/assets/img/nopic.jpg"),
|
||||
typeRadio: -1, //类型选择
|
||||
allTreeFlag: true,
|
||||
roleName: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
treeSelectData: {
|
||||
handler(newVal, oldVal) {},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
sideBar,
|
||||
activeSiderBar,
|
||||
previewContain,
|
||||
carouselChart,
|
||||
parameterArea,
|
||||
morePicPreveiw,
|
||||
},
|
||||
computed: {
|
||||
treeSelectData() {
|
||||
return this.$store.state.currentData;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.roleName = localStorage.getItem("userName");
|
||||
//this.treeSelectData = currentData;
|
||||
//获取当前时间
|
||||
},
|
||||
mounted() {
|
||||
this.mainLoading = true;
|
||||
setTimeout(() => {
|
||||
this.mainLoading = false;
|
||||
}, 1000);
|
||||
},
|
||||
methods: {
|
||||
getTypeRadio() {
|
||||
console.log(this.typeRadio);
|
||||
if (this.typeRadio == -1) {
|
||||
this.allTreeFlag = true;
|
||||
} else {
|
||||
this.allTreeFlag = false;
|
||||
}
|
||||
},
|
||||
getCurrentData(data) {
|
||||
console.log("执行父组件", this.treeSelectData);
|
||||
if (this.treeSelectData.dyValue) {
|
||||
console.log("电压");
|
||||
this.LineFlag = true;
|
||||
this.towerFlag = false;
|
||||
this.lineLoading = true;
|
||||
this.type = 1;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.previewRef.getPicList(
|
||||
this.treeSelectData.id,
|
||||
this.type,
|
||||
this.page
|
||||
);
|
||||
});
|
||||
} else if (this.treeSelectData.dyLevelId) {
|
||||
console.log("线路");
|
||||
this.LineFlag = true;
|
||||
this.towerFlag = false;
|
||||
this.type = 2;
|
||||
console.log(this.treeSelectData);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.previewRef.getPicList(
|
||||
this.treeSelectData.id,
|
||||
this.type,
|
||||
this.page
|
||||
);
|
||||
});
|
||||
} else {
|
||||
console.log("杆塔");
|
||||
this.LineFlag = false;
|
||||
this.towerFlag = true;
|
||||
this.terminalPhoto = [];
|
||||
this.protocolInfo = this.treeSelectData.protocol;
|
||||
console.log("asddddddddddddddddddddd", this.treeSelectData);
|
||||
this.towertitle = this.treeSelectData.name;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.areaRef.getChannelList();
|
||||
this.$refs.areaRef.takepicFun();
|
||||
});
|
||||
}
|
||||
},
|
||||
getPhotoList(channelId, date, termId) {
|
||||
console.log(channelId, date, termId);
|
||||
this.swiperLoading = true;
|
||||
console.log("zhanshi asdadadadadadsddadadadadad", this.terminalPhoto);
|
||||
this.terminalPhoto = [];
|
||||
getTerminalPhotoListJoggle({
|
||||
channelid: channelId,
|
||||
time: date,
|
||||
terminalid: termId,
|
||||
})
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
if (res.data.list.length == 0) {
|
||||
this.terminalPhoto = [
|
||||
{
|
||||
path: this.nopicPath,
|
||||
termId: termId,
|
||||
mediatype: 0,
|
||||
},
|
||||
];
|
||||
} else {
|
||||
this.terminalPhoto = res.data.list;
|
||||
}
|
||||
// let newDataList = [];
|
||||
// let current = 0;
|
||||
// if (this.terminalPhoto && this.terminalPhoto.length > 0) {
|
||||
// for (let i = 0; i <= this.terminalPhoto.length - 1; i++) {
|
||||
// if (i % this.photoNum !== 0 || i === 0) {
|
||||
// if (!newDataList[current]) {
|
||||
// newDataList.push([this.terminalPhoto[i]]);
|
||||
// } else {
|
||||
// newDataList[current].push(this.terminalPhoto[i]);
|
||||
// }
|
||||
// } else {
|
||||
// current++;
|
||||
// newDataList.push([this.terminalPhoto[i]]);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// this.terminalPhoto = [...newDataList];
|
||||
// this.$nextTick(() => {
|
||||
// this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0][0], 0);
|
||||
// });
|
||||
this.$nextTick(() => {
|
||||
this.$refs.carouselpic.changeBigPic(this.terminalPhoto[0], 0);
|
||||
});
|
||||
|
||||
this.swiperLoading = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err); //代码错误、请求失败捕获
|
||||
});
|
||||
},
|
||||
//点击图片列表执行函数
|
||||
jumpTowerPic(data) {
|
||||
console.log("我是从子组件过来的数据");
|
||||
console.log(data);
|
||||
this.$refs.morePicPreveiw_ref.display(data);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.realTimeMonitor {
|
||||
width: calc(100% - 0px);
|
||||
height: calc(100% - 12px);
|
||||
padding: 12px 0px 0px 0px;
|
||||
background: #ffffff;
|
||||
.monitor-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dddddd;
|
||||
border-radius: 4px;
|
||||
.allSide {
|
||||
height: 100%;
|
||||
.typeList {
|
||||
width: 94%;
|
||||
margin: 0 auto;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.picListBox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid #dddddd;
|
||||
.previewBox {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
.swiperBox {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
.title {
|
||||
height: 32px;
|
||||
padding-left: 12px;
|
||||
line-height: 32px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
//background-color: #169e8cb0;
|
||||
background: linear-gradient(180deg, #4cdbc8 10%, #128071 100%);
|
||||
|
||||
.el-breadcrumb {
|
||||
line-height: 32px;
|
||||
color: #fff !important;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
.el-breadcrumb__inner,
|
||||
.el-breadcrumb__separator {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.parameterArea {
|
||||
width: 220px;
|
||||
padding: 0px 8px;
|
||||
border-left: 1px solid #dddddd;
|
||||
position: relative;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue