图片加载优化
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