优化

MrShi

16 小时以前 b545acd5def7b4024c0b8dfbf14c3f45bc873698

 screen/src/views/KeyCabinet.vue

@@ -4,7 +4,7 @@
            <img src="@/assets/images/bg.png" class="main_bg" alt="" />
            <div class="main_header">
                <img src="@/assets/images/maintitle.gif" class="main_header_bg" alt="" />
                <div class="title">钥匙柜数据看板</div>
                <div class="title">三交一封智能柜</div>
                <div class="time_wrap">
                    <span class="date">{{ date }}</span>
                    <span class="week">{{ week }}</span>
@@ -95,7 +95,7 @@
                                <div>钥匙取还记录</div>
                            </div>
                            <div class="search">
                                <div class="search-item" @click.stop="show = true">
                                <div class="search-item" @click.stop="show = !show">
                                    <div class="search-item-label">状态：</div>
                                    <div class="search-item-select">
                                        <span v-if="form.status === ''">全部</span>
@@ -176,9 +176,9 @@
                                </div>
                                <div class="car_static">
                                    <div class="echart_wrap">
                                        <div class="pie_text">
                                            <div class="fs30"><strong>30</strong></div>
                                            <div style="font-size: 15px; color: rgba(255,255,255,0.8); font-weight: 400;">入库总量</div>
                                        <div class="pie_text" v-if="fenbu">
                                            <div class="fs30"><strong>{{fenbu.alcoholNum + fenbu.unCloseNum + fenbu.timeOutNum}}</strong></div>
                                            <div style="font-size: 15px; color: rgba(255,255,255,0.8); font-weight: 400;">告警总量</div>
                                        </div>
                                        <div class="echart1" id="echart1"></div>
                                    </div>
@@ -195,14 +195,14 @@
                                                <div class="icon" :style="{ background: `linear-gradient(270deg, ${colors[1].color1} 0%, ${colors[1].color2} 100%)` }"></div>
                                                <div class="text">柜门未关告警</div>
                                            </div>
                                            <div class="num" :style="{ color: '#FEAF01' }">{{fenbu.timeOutNum}}次｜{{fenbu.timeOutNumPct}}%</div>
                                            <div class="num" :style="{ color: '#FEAF01' }">{{fenbu.unCloseNum}}次｜{{fenbu.unCloseNumPct}}%</div>
                                        </div>
                                        <div class="item1">
                                            <div class="line">
                                                <div class="icon" :style="{ background: `linear-gradient(270deg, ${colors[2].color1} 0%, ${colors[2].color2} 100%)` }"></div>
                                                <div class="text">超时未还告警</div>
                                            </div>
                                            <div class="num" :style="{ color: '#28F0C4' }">{{fenbu.unCloseNum}}次｜{{fenbu.unCloseNumPct}}%</div>
                                            <div class="num" :style="{ color: '#28F0C4' }">{{fenbu.timeOutNum}}次｜{{fenbu.timeOutNumPct}}%</div>
                                        </div>
                                    </div>
                                </div>
@@ -329,7 +329,7 @@
        getKeyUseRecord({ carCode: form.value.carCode, status: form.value.status })
            .then(res => {
                if (res.code === 200) {
                    // data5.value = res.data
                    data5.value = res.data
                }
            })
    }
@@ -350,8 +350,8 @@
                fenbu.value = {
                    ...res.data,
                    alcoholNumPct: calculatePercentage(res.data.alcoholNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum]),
                    timeOutNumPct: calculatePercentage(res.data.timeOutNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum]),
                    unCloseNumPct: calculatePercentage(res.data.unCloseNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum])
                    unCloseNumPct: calculatePercentage(res.data.unCloseNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum]),
                    timeOutNumPct: calculatePercentage(res.data.timeOutNum,[res.data.alcoholNum + res.data.timeOutNum + res.data.unCloseNum])
                }
                dataList5.value = [res.data.alcoholNum, res.data.unCloseNum, res.data.timeOutNum]
                nextTick(() => {
@@ -427,6 +427,7 @@
                    itemStyle: {
                        borderRadius: 10,
                        color: function(params) {
                            console.log(params)
                            // 使用不同的渐变色
                            let colorList = [
                                {offset: 0, color: colors[params.dataIndex].color1}, // 0% 处的颜色
@@ -623,14 +624,14 @@
                            <div style="position: absolute;bottom: 0;right: 0;width: 10px;height: 10px;border-right: 1px solid #01D9FE;border-bottom: 1px solid #01D9FE;"></div>
                            <div style="color: #FFFFFF;font-size: 14px;font-weight: 400;">${params[0].axisValue}</div>
                            <div style="display: flex; align-items: center;margin-top: 4px;">
                                <div style="width: 12px;height: 12px;background: #00C2FF;border-radius: 50%;margin-right: 12px;"></div>
                                <div style="width: 12px;height: 12px;background: linear-gradient(to bottom, #50afd3, #1d4861);border-radius: 50%;margin-right: 12px;"></div>
                                <div style="color: #FFFFFF;font-size: 14px;font-weight: 400;">领取：</div>
                                <div style="color: #00F2F3;font-size: 14px;font-weight: 500;">${params[0].data}个</div>
                                <div style="color: #00F2F3;font-size: 14px;font-weight: 500;">${params[0].data}次</div>
                            </div>
                            <div style="display: flex; align-items: center;margin-top: 4px;">
                                <div style="width: 12px;height: 12px;background: #FF8A00;border-radius: 50%;margin-right: 12px;"></div>
                                <div style="width: 12px;height: 12px;background: linear-gradient(to bottom, rgb(255,184,0), rgba(255, 138, 0, 0.20));border-radius: 50%;margin-right: 12px;"></div>
                                <div style="color: #FFFFFF;font-size: 14px;font-weight: 400;">归还：</div>
                                <div style="color: #00F2F3;font-size: 14px;font-weight: 500;">${params[1].data}个</div>
                                <div style="color: #00F2F3;font-size: 14px;font-weight: 500;">${params[1].data}次</div>
                            </div>
                        </div>
                      `;
@@ -646,7 +647,7 @@
            },
            yAxis: {
                type: 'value',
                name: '单位：个',
                name: '单位：次',
                minInterval: 1,
                axisLabel: {
                    color: '#D2E0FF',
@@ -1403,7 +1404,7 @@
                        z-index: 9;
                        border-radius: 10px;
                        overflow: hidden;
                        background: rgba(0,86,255,0.05);
                        background: rgba(134, 156, 201, 1);
                        .search-item-select-list-item {
                            width: 100%;
                            height: 40px;