<template>
|
<div class="signalling">
|
<div class="signaHeader">
|
<div>
|
<el-radio-group v-model="type" @change="changeType">
|
<el-radio-button label="热力"></el-radio-button>
|
<el-radio-button label="柱状"></el-radio-button>
|
<el-radio-button label="网格"></el-radio-button>
|
</el-radio-group>
|
</div>
|
|
<div>
|
<label>{{ sliderLabel }}</label>
|
<label>单位：万人</label>
|
</div>
|
</div>
|
<div class="signaSlider">
|
<div class="signaButton">
|
<div class="signalling_play" @click="signallingPlay()">
|
<img src="~@/assets/img/new/rightArrow.png" />
|
</div>
|
</div>
|
<div class="sliderBox">
|
<el-slider v-model="sliderValue" @change="handleSliderChange" :format-tooltip="formatTooltip"
|
:marks="silderMark" :step="1" :min="0" :max="47" show-stops>
|
</el-slider>
|
</div>
|
</div>
|
|
<!-- <div class="signalling_describe">单位：万人</div>
|
<div>
|
<ul class="signalling_ul">
|
<li class="signalling_node" :class="{ signalling_active: i == selectIndex }" v-for="(item, i) in time"
|
@click="changeTime(i)">
|
<div class="signalling_value">{{ Math.round(value[i] / 10000) }}</div>
|
<div class="signalling_symbol"></div>
|
<div class="signalling_time">{{ item }}</div>
|
</li>
|
</ul>
|
</div>
|
|
<div class="signalling_type">
|
<el-radio-group v-model="type" @change="changeType">
|
<el-radio-button label="热力"></el-radio-button>
|
<el-radio-button label="柱状"></el-radio-button>
|
<el-radio-button label="网格"></el-radio-button>
|
</el-radio-group>
|
</div> -->
|
</div>
|
</template>
|
<style>
|
.signalling_type .el-radio-group {
|
line-height: 0px !important;
|
color: white !important;
|
}
|
|
.signalling_type .el-radio-group {
|
height: 30px !important;
|
}
|
|
.signalling_type .el-radio-button__inner {
|
background: rgba(0, 132, 255, 0.8) !important;
|
border: none !important;
|
color: white !important;
|
height: 30px !important;
|
|
}
|
|
|
|
.signalling_type .el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
background: rgba(255, 136, 0, 0.8) !important;
|
}
|
</style>
|
<style scoped>
|
.signalling {
|
position: absolute;
|
left: 50%;
|
transform: translateX(-50%);
|
bottom: 230px;
|
color: white;
|
width: 1300px;
|
z-index: 9999999;
|
pointer-events: all;
|
background-image: url("~@/assets/img/new/listbg.png");
|
background-size: 100% 100%;
|
padding: 20px 10px;
|
border-radius: 10px;
|
}
|
|
.signaHeader {
|
display: flex;
|
|
justify-content: space-between;
|
align-items: center;
|
/* color: #409EFF; */
|
}
|
|
.signaSlider {
|
display: flex;
|
align-items: center;
|
margin: 10px 0px;
|
width: 100%;
|
}
|
|
.signaButton {
|
width: 40px;
|
display: flex;
|
justify-content: center;
|
margin-right: 10px;
|
}
|
.sliderBox{
|
flex: 1;
|
}
|
|
.signalling_type {
|
|
position: absolute;
|
right: 130px;
|
top: 120px;
|
}
|
|
.signalling_describe {
|
position: absolute;
|
right: 0px;
|
top: 110px;
|
}
|
|
.signalling_play {
|
/* position: absolute;
|
left: 0px;
|
top: 110px; */
|
width: 24px;
|
height: 24px;
|
cursor: pointer;
|
border-radius: 32px;
|
border: 1px solid #fff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.signalling_play img {
|
width: 16px;
|
height: 16px;
|
margin: 8px 6px 8px 10px;
|
|
}
|
|
.signalling_ul {}
|
|
.signalling_node {
|
float: left;
|
width: 40px;
|
margin: 2.5px 7px;
|
list-style: none;
|
cursor: pointer;
|
|
}
|
|
.signalling_value,
|
.signalling_symbol,
|
.signalling_time {
|
width: 40px;
|
text-align: center;
|
|
}
|
|
.signalling_symbol {
|
height: 5px;
|
background-color: rgb(0, 132, 255);
|
border-radius: 2px;
|
}
|
|
.signalling_node:hover .signalling_symbol {
|
background-color: rgb(255, 136, 0) !important;
|
}
|
|
.signalling_node:hover {
|
color: rgb(255, 136, 0) !important;
|
}
|
|
.signalling_active {
|
color: rgb(255, 136, 0) !important;
|
}
|
|
.signalling_active .signalling_symbol {
|
background-color: rgb(255, 136, 0) !important;
|
}
|
</style>
|
<script>
|
|
export default {
|
name: "signalling",
|
components: {
|
|
},
|
data() {
|
return {
|
sliderLabel: '',
|
silderMark: {},
|
sliderFLag: false,
|
sliderMax: 0,
|
sliderValue: 0,
|
type: "热力",
|
play: false,
|
selectIndex: 0,
|
time: ["00:00", "00:30", "01:00", "01:30", "02:00", "02:30", "03:00", "03:30", "04:00", "04:30", "05:00", "05:30", "06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30", "18:00", "18:30", "19:00", "19:30", "20:00", "20:30", "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"],
|
value: [0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 22, 22, 23, 23]
|
};
|
},
|
beforeDestroy() {
|
removeDataRender();
|
removeGrid();
|
},
|
|
mounted() {
|
let that = this;
|
const loading = this.$loading({
|
lock: true,
|
text: "信令数据加载中，请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
window.requestData(function () {
|
that.value = signallingData.count;
|
loading.close();
|
that.getMarks();
|
|
});
|
|
|
},
|
methods: {
|
formatTooltip(res) {
|
var val = this.value[res] / 10000;
|
return this.time[res] + " : " + Math.round(parseFloat(val));
|
|
},
|
getForMate(res) {
|
var val = this.value[res] / 10000;
|
return "时间： " + this.time[res] + " " + " 值：" + Math.round(parseFloat(val));
|
},
|
getMarks() {
|
this.sliderLabel = this.getForMate(0)
|
for (var i = 0; i < this.time.length; i++) {
|
if (i % 2 == 0) {
|
const key = i;
|
const value = this.time[i];
|
this.$set(this.silderMark, key, {
|
style: {
|
color: '#FFFFFF'
|
},
|
label: value
|
}); // 使用 Vue.set 触发视图更新
|
}
|
|
}
|
|
|
this.sliderFLag = true
|
|
},
|
handleSliderChange(val) {
|
this.play = false;
|
|
|
this.$nextTick(() => {
|
this.changeTime(val)
|
})
|
|
},
|
|
changeType(val) {
|
const loading = this.$loading({
|
lock: true,
|
text: "信令数据加载中，请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
this.sliderLabel = this.getForMate(0)
|
this.sliderValue = 0;
|
this.play = false;
|
if (val == "热力") {
|
removeGrid();
|
dataDraw();
|
} else if (val == "柱状") {
|
setDataRenderVisible(false);
|
removeGrid();
|
dataGrid(true);
|
} else if (val == "网格") {
|
setDataRenderVisible(false);
|
removeGrid();
|
dataGrid(false);
|
}
|
loading.close();
|
},
|
changeTime(id) {
|
this.play = false;
|
this.selectIndex = id;
|
if (this.type == "热力") {
|
signallingData.selectid = id;
|
} else if (this.type == "柱状") {
|
const loading = this.$loading({
|
lock: true,
|
text: "信令数据加载中，请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
signallingData.selectid = id;
|
updateDataGrid(true);
|
loading.close();
|
} else if (this.type == "网格") {
|
const loading = this.$loading({
|
lock: true,
|
text: "信令数据加载中，请稍后",
|
spinner: "el-icon-loading",
|
background: "rgba(0, 0, 0, 0.7)",
|
});
|
signallingData.selectid = id;
|
updateDataGrid(false);
|
loading.close();
|
}
|
},
|
modify() {
|
if (signallingData.selectid == list.length - 1) {
|
signallingData.selectid = 0;
|
} else {
|
signallingData.selectid++;
|
}
|
this.sliderValue = this.selectIndex;
|
this.selectIndex = signallingData.selectid;
|
setTimeout(() => {
|
if (this.play) {
|
this.modify();
|
}
|
}, 300);
|
},
|
signallingPlay() {
|
if (this.type == "热力") {
|
this.play = !this.play;
|
if (this.play) {
|
this.modify();
|
}
|
}
|
},
|
}
|
};
|
</script>
|
