MrShi
14 小时以前 e1281f6933755e07c7fb4b5bd8e8027cfb780e94
screen/src/views/KeyCabinet.vue
@@ -59,7 +59,7 @@
                                </div>
                                <div class="tabs">
                                    <div class="tab" :class="type1 === 0 ? 'active' : ''" @click="clickOneItem(0)">近7天</div>
                                    <div class="separate">&nbsp;|&nbsp;</div>
                                    <div class="separate"> </div>
                                    <div class="tab" :class="type1 === 1 ? 'active' : ''" @click="clickOneItem(1)">近15天</div>
                                </div>
                                <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
@@ -75,7 +75,7 @@
                                </div>
                                <div class="tabs">
                                    <div class="tab" :class="type2 === 0 ? 'active' : ''" @click="clickTwoItem(0)">近7天</div>
                                    <div class="separate">&nbsp;|&nbsp;</div>
                                    <div class="separate"> </div>
                                    <div class="tab" :class="type2 === 1 ? 'active' : ''" @click="clickTwoItem(1)">近15天</div>
                                </div>
                                <img src="@/assets/images/task/title@2x.png" class="bg" alt="" />
@@ -122,6 +122,7 @@
                            <div class="header line">
                                <span class="item">车牌号</span>
                                <span class="item">领取人</span>
                                <span class="item">领取时间</span>
                                <span class="item">归还时间</span>
                                <span class="item">状态</span>
                                <span class="item">备注</span>
@@ -131,6 +132,7 @@
                                    <div class="line one-swiper-slide swiper-slide item" v-for="(item, i) in data5" :key="i">
                                        <span class="item">{{item.carCode}}</span>
                                        <span class="item">{{item.memberName}}</span>
                                        <span class="item">{{item.createDate}}</span>
                                        <span class="item">{{item.returnDate || '-'}}</span>
                                        <span class="item">
                                            <span v-if="item.status === 0" style="color: #FEAF01;">未归还</span>
@@ -139,14 +141,11 @@
                                        </span>
                                        <span class="item">{{item.remark || '-'}}</span>
                                    </div>
                                    <div v-if="data5.length == 0" class="empty_wrap" style="margin-top: 50px;">
                                        <img src="@/assets/images/default_empty.png" alt="">
                                    </div>
                                </div>
                            </div>
<!--                            <template>-->
<!--                                <Loading />-->
<!--                                <div class="empty">-->
<!--                                    <img src="@/assets/images/default_nodata.png" alt="">-->
<!--                                </div>-->
<!--                            </template>-->
                        </div>
                    </div>
                </div>
@@ -189,21 +188,21 @@
                                                <div class="icon" :style="{ background: `linear-gradient(270deg, ${colors[0].color1} 0%, ${colors[0].color2} 100%)` }"></div>
                                                <div class="text">酒精检测告警</div>
                                            </div>
                                            <div class="num">{{fenbu.alcoholNum}}次|{{fenbu.alcoholNumPct}}%</div>
                                            <div class="num" :style="{ color: '#01ABFE' }">{{fenbu.alcoholNum}}次|{{fenbu.alcoholNumPct}}%</div>
                                        </div>
                                        <div class="item1">
                                            <div class="line">
                                                <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">{{fenbu.timeOutNum}}次|{{fenbu.timeOutNumPct}}%</div>
                                            <div class="num" :style="{ color: '#FEAF01' }">{{fenbu.timeOutNum}}次|{{fenbu.timeOutNumPct}}%</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">{{fenbu.unCloseNum}}次|{{fenbu.unCloseNumPct}}%</div>
                                            <div class="num" :style="{ color: '#28F0C4' }">{{fenbu.unCloseNum}}次|{{fenbu.unCloseNumPct}}%</div>
                                        </div>
                                    </div>
                                </div>
@@ -232,19 +231,14 @@
                                                        <div class="title">
                                                            <img class="xf" src="@/assets/images/FireFighting/ic_gaojing_red@2x.png" alt="">
                                                            <span>{{item.content}}</span>
<!--                                                            <div class="data">-->
<!--                                                                <img src="@/assets/images/ic_guihao@2x.png" />-->
<!--                                                                <span>柜号:19</span>-->
<!--                                                            </div>-->
                                                        </div>
                                                    </div>
                                                    <!-- <div class="status">处理中</div> -->
                                                </div>
                                            </div>
                                        </div>
<!--                                        <div v-if="data7.length == 0" class="empty_wrap" style="margin-top: 50px;">-->
<!--                                            <img src="@/assets/images/default_empty.png" alt="">-->
<!--                                        </div>-->
                                        <div v-if="alarm.length == 0" class="empty_wrap" style="margin-top: 50px;">
                                            <img src="@/assets/images/default_empty.png" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
@@ -359,7 +353,7 @@
                    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])
                }
                dataList5.value = [res.data.alcoholNum, res.data.unCloseNum, res.data.timeOutNum]
                dataList5.value = [res.data.alcoholNum, res.data.timeOutNum, res.data.unCloseNum]
                nextTick(() => {
                    initEchart1()
                })
@@ -433,6 +427,7 @@
                    itemStyle: {
                        borderRadius: 10,
                        color: function(params) {
                            console.log(params)
                            // 使用不同的渐变色
                            let colorList = [
                                {offset: 0, color: colors[params.dataIndex].color1}, // 0% 处的颜色
@@ -473,21 +468,38 @@
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                },
                backgroundColor: 'transparent',
                borderColor: 'transparent',
                borderWidth: 0,
                padding: 0,
                formatter: function(params) {
                    return `
                        <div style="position: relative;padding: 16px;box-sizing: border-box;background: rgba(17,34,74,0.6);border-radius: 4px;border: 1px solid rgba(1,217,254,0.29);">
                            <div style="position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 1px solid #01D9FE;border-top: 1px solid #01D9FE;"></div>
                            <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: #00F2F3;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>
                        </div>
                      `;
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    color: '#D2E0FF'
                    color: '#D2E0FF',
                    rotate: 45 // 旋转45度
                },
                data: data4.value.map(i => i.name)
            },
            yAxis: {
                type: 'value',
                name: '单位:辆',
                minInterval: 1,
                nameTextStyle: {
                    padding: [0, 0, 0, -16],    // 四个数字分别为上右下左与原位置距离
                    color: '#D2E0FF'
@@ -502,7 +514,8 @@
                    splitNumber: 4
                },
                axisLabel: {
                    color: '#D2E0FF'
                    color: '#D2E0FF',
                    formatter: '{value}'
                }
            },
            grid: {
@@ -581,6 +594,16 @@
        var myChart = echarts.init(document.querySelector('.three_two_chat'))
        myChart.setOption({
            legend: {
                top: '5%',
                right: '2%',
                itemWidth: 16,
                itemHeight: 4,
                itemGap: 50,
                textStyle: {
                    color: '#D2E0FF'
                }
            },
            grid: {
                top: '20%',
                left: '6%',
@@ -589,20 +612,46 @@
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
                trigger: 'axis',
                backgroundColor: 'transparent',
                borderColor: 'transparent',
                borderWidth: 0,
                padding: 0,
                formatter: function(params) {
                    return `
                        <div style="position: relative;padding: 16px;box-sizing: border-box;background: rgba(17,34,74,0.6);border-radius: 4px;border: 1px solid rgba(1,217,254,0.29);">
                            <div style="position: absolute;top: 0;left: 0;width: 10px;height: 10px;border-left: 1px solid #01D9FE;border-top: 1px solid #01D9FE;"></div>
                            <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: 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>
                            <div style="display: flex; align-items: center;margin-top: 4px;">
                                <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>
                        </div>
                      `;
                }
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    color: '#D2E0FF'
                    color: '#D2E0FF',
                    rotate: 45 // 旋转45度
                },
                data: data2.value.map(i => i.name)
            },
            yAxis: {
                type: 'value',
                name: '单位:k',
                name: '单位:个',
                minInterval: 1,
                axisLabel: {
                    color: '#D2E0FF'
                    color: '#D2E0FF',
                    formatter: '{value}'
                },
                nameTextStyle: {
                    color: '#D2E0FF',
@@ -618,6 +667,7 @@
            },
            series: [
                {
                    name: '领取',
                    data: data2.value.map(i => i.num),
                    type: 'bar',
                    barWidth: 10,
@@ -635,6 +685,7 @@
                    }
                },
                {
                    name: '归还',
                    data: data2.value.map(i => i.nextNum),
                    type: 'bar',
                    barWidth: 10,