Merge branch 'master' of http://103.135.160.14:9034/r/PM20221203225_Web

lixuliang

2025-02-10 9c2cad000f9279969e76bfc206a7acbb8acc9079

 src/components/menu/signalling.vue

@@ -1,6 +1,33 @@
<template>
    <div class="signalling">
        <div class="signalling_describe">单位：万人</div>
        <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"
@@ -11,16 +38,14 @@
                </li>
            </ul>
        </div>
        <div class="signalling_play" @click="signallingPlay()">
            <img src="~@/assets/img/new/rightArrow.png" />
        </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> -->
    </div>
</template>
<style>
@@ -51,12 +76,41 @@
.signalling {
    position: absolute;
    left: 50%;
    margin-left: -650px;
    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 {
@@ -73,19 +127,22 @@
}

.signalling_play {
    position: absolute;
    /* position: absolute;
    left: 0px;
    top: 110px;
    width: 48px;
    height: 48px;
    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: 32px;
    height: 32px;
    width: 16px;
    height: 16px;
    margin: 8px 6px 8px 10px;

}
@@ -140,6 +197,11 @@
    },
    data() {
        return {
            sliderLabel: '',
            silderMark: {},
            sliderFLag: false,
            sliderMax: 0,
            sliderValue: 0,
            type: "热力",
            play: false,
            selectIndex: 0,
@@ -151,6 +213,7 @@
        removeDataRender();
        removeGrid();
    },

    mounted() {
        let that = this;
        const loading = this.$loading({
@@ -162,9 +225,52 @@
        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,
@@ -172,6 +278,8 @@
                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();
@@ -220,6 +328,7 @@
            } else {
                signallingData.selectid++;
            }
            this.sliderValue = this.selectIndex;
            this.selectIndex = signallingData.selectid;
            setTimeout(() => {
                if (this.play) {