开关统计vue2

<template>
  <div class="switchright" :style="indexCss">
        <div class="container">
            <div id="leftDiv" @click="iconClick">
                <!-- <i id="icon" :class="iconclass"></i> -->
                <svg
                    id="icon"
                    v-if="!optimizeSwitch"
                    width="8.873047"
                    height="8.484375"
                    viewBox="0 0 8.87305 8.48438"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                    <desc>
                            Created with Pixso.
                    </desc>
                    <defs/>
                    <path
                        id="Combined Shape"
                        d="M5.99 4.24L8.86 7.42L7.9 8.48L4.2 4.41L4.21 4.4L4.07 4.24L7.9 0L8.87 1.06L5.99 4.24Z"
                        fill="#A3B4CC"
                        fill-opacity="1.000000"
                        fill-rule="evenodd"
                    />
                    <path
                        id="Combined Shape"
                        d="M1.91 4.24L4.79 7.42L3.83 8.48L0.12 4.41L0.13 4.4L0 4.24L3.83 0L4.79 1.06L1.91 4.24Z"
                        fill="#A3B4CC"
                        fill-opacity="1.000000"
                        fill-rule="evenodd"
                    />
                </svg>
                <svg
                    id="icon"
                    v-else
                    width="8.873047"
                    height="8.484375"
                    viewBox="0 0 8.87305 8.48438"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                    <desc>
                            Created with Pixso.
                    </desc>
                    <defs/>
                    <path
                        id="Combined Shape"
                        d="M2.87 4.23L0 1.06L0.96 0L4.66 4.07L4.66 4.08L4.79 4.23L0.96 8.48L0 7.41L2.87 4.23Z"
                        fill="#A3B4CC"
                        fill-opacity="1.000000"
                        fill-rule="evenodd"
                    />
                    <path
                        id="Combined Shape"
                        d="M6.95 4.23L4.08 1.06L5.04 0L8.74 4.07L8.73 4.08L8.87 4.23L5.04 8.48L4.07 7.41L6.95 4.23Z"
                        fill="#A3B4CC"
                        fill-opacity="1.000000"
                        fill-rule="evenodd"
                    />
                </svg>
            </div>
            <div id="rightDiv">
                <div style="display:flex;padding:4px;align-items: center;margin:10px">
                    <div style="font-size: 14px;">开关统计</div>
                    <el-tooltip
                        class="item"
                        effect="dark"
                        placement="bottom"
                        style="margin-left:5px;cursor: pointer;"
                    >
                         <template #content>
                             <span style="lineHeight: 22px;font-size: 14px;color:rgb(255, 255, 255)">
                                    统计当日不同时段优化开关开启的数量<br/>
                                    优化开关开启：统计时段内至少有5min时段开关开启<br/>
                                    优化开关关闭：统计时段内未开启该策略及未配置时段<br/>
                             </span>
                        </template>
                        <svg
                            width="14.666687"
                            height="14.666626"
                            viewBox="0 0 14.6667 14.6666"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            xmlns:xlink="http://www.w3.org/1999/xlink"
                        >
                            <desc>
                                    Created with Pixso.
                            </desc>
                            <defs/>
                            <path
                                id="形状"
                                d="M14.6667 7.33337C14.6667 3.2832 11.3834 0 7.33331 0C3.28326 0 0
                                3.2832 0 7.33337C0 11.3834 3.28326 14.6666 7.33331 14.6666C11.3834
                                14.6666 14.6667 11.3834 14.6667 7.33337ZM1.33331 7.33337C1.33331
                                4.01965 4.01965 1.33337 7.33331 1.33337C10.647 1.33337 13.3333
                                4.01965 13.3333 7.33337C13.3333 10.6471 10.647 13.3334 7.33331
                                13.3334C4.01965 13.3334 1.33331 10.6471 1.33331 7.33337ZM7.26208
                                3.66736L7.13806 3.67371L7.02234 3.68567L6.94543 3.69666L6.81702
                                3.72119L6.68909 3.75317L6.64105 3.76782L6.50775 3.81201C5.61969
                                4.14185 4.98688 4.99707 4.98688 6C4.98688 6.09033 4.992 6.17944
                                5.00201 6.26697L6.35626 6.26697C6.33276 6.18201 6.32019 6.09241
                                6.32019 6C6.32019 5.93286 6.32684 5.86731 6.34155 5.80469C6.42755
                                5.37451 6.77911 5.06128 7.19586 5.00842L7.27118 5.00171L7.3479
                                5.00037C7.41107 5.00208 7.47278 5.00964 7.53253 5.02258L7.56757
                                5.03113L7.6192 5.04541L7.70526 5.07678L7.77716 5.11023L7.84052
                                5.14526L7.9281 5.20593L8.00433 5.27063C8.19873 5.453 8.32019 5.71228
                                8.32019 6C8.32019 6.47729 7.98584 6.87646 7.53857 6.97607L7.50391
                                6.98413C7.44489 6.995 7.38422 7.00061 7.3222 7.00061L7.24445 7.00513C6.9129
                                7.0437 6.65558 7.32544 6.65558 7.66736L6.65558 8.66736L7.98889 8.66736L7.98889
                                8.2373C9.08466 7.91077 9.78247 6.83838 9.63733 5.70422C9.53223 4.88342 9.00793
                                4.20508 8.29266 3.8783L8.27692 3.87048L8.12012 3.80688L8.00104 3.76721L7.88959
                                3.73633L7.76904 3.70959L7.61005 3.68445L7.48218 3.672L7.40405 3.66797L7.26208
                                3.66736ZM8.0332 9.60022L8.0332 10.9336L6.69989 10.9336L6.69989 9.60022L8.0332
                                9.60022Z"
                                clip-rule="evenodd"
                                fill="#A3B4CC"
                                fill-opacity="1.000000"
                                fill-rule="evenodd"
                            />
                        </svg>
                    </el-tooltip>
                </div>
                <div style="display:flex;margin-left:10px;margin-top: 10px;">
                    <div style="margin-top:-10px" class="rightDiv_left">
                        <ul
                            :key="item"
                            v-for="item in timerAxislist"
                            style="margin-top:1px"
                        >
                            <li style="color:#A3B4CC;height:36.87px;">{{ item }}</li>
                         </ul>
                    </div>
                    <div style="margin-left:10px" class="rightDiv_cent">
                        <ul
                            :key="item.id"
                            v-for="(item,index) in numberAxislist"
                            style="margin-top:1px"
                        >
                            <li
                                style="width:10px;height:36.87px;"
                                class="hover-effect"
                                :class="{ 'selected': selectedIndex === index }"
                                @click="handClick(index)"
                            >
                            </li>
                        </ul>
                    </div>
                    <div style="margin-left:10px;margin-top:10px" class="rightDiv_rigtt">
                        <ul
                            :key="index"
                            v-for="(item,index) in numberSwitchlist"
                            style="margin-top:1px"
                        >
                            <li style="height:36.87px;width:47px;color:#35A684;">
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    :content="item + '个'"
                                    placement="top"
                                >
                                    <div
                                        style="
                                        width:47px;
                                        height:20px;
                                        background:#1ECC990D;
                                        font-size: 12px;
                                        text-align: center;
                                        line-height: 20px;
                                        cursor: pointer;
                                        "
                                    >{{ numberFun(item) }}个</div>
                                </el-tooltip>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
   </div>
</template>

<script>
import _ from 'lodash';
export default {
  components: {},
    props: {
        numberSwitchlist: {
            type: Array,
            default() {
                return [];
            },
        },
        defaultTimeperiodData: {
            type: Number,
            default: 0,
        },
        indexCss: {
            type: String,
            default: 'z-index: 10', // 用来操作开关统计的显示与隐藏
        }
    },
  // 定义属性
  data() {
    return {
        numberAxislist: [
                {
                    id: 1,
                    starttime: '00:00',
                    endtime: '01:00',
                },
                {
                    id: 2,
                    starttime: '01:00',
                    endtime: '02:00',
                },
                {
                    id: 3,
                    starttime: '02:00',
                    endtime: '03:00',
                },
                {
                    id: 4,
                    starttime: '03:00',
                    endtime: '04:00',
                },
                {
                    id: 5,
                    starttime: '04:00',
                    endtime: '05:00',
                },
                {
                    id: 6,
                    starttime: '05:00',
                    endtime: '06:00',
                },
                {
                    id: 7,
                    starttime: '06:00',
                    endtime: '07:00',
                },
                {
                    id: 8,
                    starttime: '07:00',
                    endtime: '08:00',
                },
                {
                    id: 9,
                    starttime: '08:00',
                    endtime: '09:00',
                },
                {
                    id: 10,
                    starttime: '09:00',
                    endtime: '10:00',
                },
                {
                    id: 11,
                    starttime: '10:00',
                    endtime: '11:00',
                },
                {
                    id: 12,
                    starttime: '11:00',
                    endtime: '12:00',
                },
                {
                    id: 13,
                    starttime: '12:00',
                    endtime: '13:00',
                },
                {
                    id: 14,
                    starttime: '13:00',
                    endtime: '14:00',
                },
                {
                    id: 15,
                    starttime: '14:00',
                    endtime: '15:00',
                },
                {
                    id: 16,
                    starttime: '15:00',
                    endtime: '16:00',
                },
                {
                    id: 17,
                    starttime: '16:00',
                    endtime: '17:00',
                },
                {
                    id: 18,
                    starttime: '17:00',
                    endtime: '18:00',
                },
                {
                    id: 19,
                    starttime: '18:00',
                    endtime: '19:00',
                },
                {
                    id: 20,
                    starttime: '19:00',
                    endtime: '20:00',
                },
                {
                    id: 21,
                    starttime: '20:00',
                    endtime: '21:00',
                },
                {
                    id: 22,
                    starttime: '21:00',
                    endtime: '22:00',
                },
                {
                    id: 23,
                    starttime: '22:00',
                    endtime: '23:00',
                },
                {
                    id: 24,
                    starttime: '23:00',
                    endtime: '24:00',
                }
        ],
        timerAxislist: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00',
        '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
        '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '24:00'],
        iconclass: 'el-icon-arrow-left',
        optimizeSwitch: false,
        selectedIndex: 0,
    };
  },
  computed: {},
  methods: {
    numberFun(v) {
        let num = '';
        if (v > 999) {
            num = '999+';
        } else {
            num = v;
        }
        return num;
    },
    iconClick: _.debounce(function () {
        const leftDiv = document.getElementById('leftDiv');
        const rightDiv = document.getElementById('rightDiv');
        leftDiv.classList.toggle('moved');
        rightDiv.classList.toggle('hidden');
        this.optimizeSwitch = !this.optimizeSwitch;
        this.$emit('optimizeSwitch', this.optimizeSwitch);
        this.selectedIndex = this.getCurrentTime() - 1;
    }, 300),
    handClick(index) {
        if (this.selectedIndex === index) {
            return;
        }
        this.selectedIndex = index;
        this.numberAxislist.forEach(v => {
            if (index + 1 === v.id) {
                this.$emit('periodoftimeData', v);
            }
        });
    },
    // 当前时间
    getCurrentTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        // return `${hours}:${minutes}`;
        const time = Number(`${hours}:${minutes}`.split(":")[0])
        for (let i = 0; i < this.numberAxislist.length; i++) {
            const element = this.numberAxislist[i];
            const timestarttime = Number(element.starttime.split(":")[0])
            const timeendtime = Number(element.endtime.split(":")[0])
            if (time >= timestarttime && time < timeendtime) {
                this.$emit('currentTimeData', element);
                return element.id
            }
        }
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
 .switchright {
    position: absolute;
    top: 20px;
    right: 0px;
    display: flex;
    padding: 0 16px;
    box-sizing: border-box;
    // background-color: #ff0000;
    // box-shadow: 0 4px 12px 2px rgba(0, 21, 51, 0.08);
    border-radius: 4px;
    .container {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }
    #leftDiv {
        width: 56px;
        height: 20px;
        background-color: #FFFFFF;
        clip-path: polygon(
            0% 0%,
            100% 0%,
            80% 100%,
            20% 100%
        );
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(255, 0, 0);
        font-weight: bold;
        transform: translateX(170px) rotate(90deg);
        transform-origin: center;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        cursor: pointer;
        #icon {
            transform: rotate(-90deg);
        }
        // #icon:hover {
        //     color: rgb(255, 0, 0);
        // }
        transition: transform 1s ease-in-out;
    }
    #rightDiv {
        width: 174px;
        height: calc(100vh - 95px);
        background-color: #FFFFFF;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        opacity: 1;
        transition: transform 1s ease-in-out;
        transform: translateX(120%);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: auto;
        /deep/ .hover-effect:hover {
            background-color: rgba(112, 182, 255, 0.24)!important;
        }
        .hover-effect {
            background-color: #A3B4CC!important;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .hover-effect.selected {
            background-color: rgba(112, 182, 255, 0.8)!important;
        }
    }
    /* 移动状态 */
    .moved {
        transform: translateX(0) rotate(90deg)!important;
    }
    /* 隐藏状态 */
    .hidden {
        // opacity: 0;
        // visibility: hidden;
        transform: translateX(0)!important;
    }
     #leftDiv, #rightDiv {
            margin: -9px;
    }
}
</style>