Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-...

chenyao

2025-04-12 df4e3452ecdc510faa09c7310ba4857ed432553d

Merge branch 'master' of http://139.196.74.78:10010/r/drone/command-center-dashboard

 .prettierrc.json

@@ -7,6 +7,7 @@
  "singleQuote": true,
  "arrowParens": "avoid",
  "endOfLine": "crlf",
  "htmlWhitespaceSensitivity": "ignore",
  "bracketSameLine": false,
  "proseWrap": "preserve",
  "useTabs": true,
@@ -21,4 +22,4 @@
      }
    }
  ]
}
}

 src/api/home/event.js

@@ -28,11 +28,12 @@
}

// 大屏首页=>事件分页列表
export const getEventPage = data => {
export const getEventPage = (data,params) => {
    return request({
        url: '/drone-device-core/jobEvent/eventPage',
        method: 'post',
        data,
        params
    })
}


 src/assets/images/home/eventOverviewDetail/indexPoint.png

 src/assets/images/home/eventOverviewDetail/leftArrow.png

 src/assets/images/home/eventOverviewDetail/positioning.png

 src/assets/images/home/eventOverviewDetail/rightArrow.png

 src/assets/images/home/eventOverviewDetail/status0.png

 src/assets/images/home/eventOverviewDetail/status1.png

 src/assets/images/home/eventOverviewDetail/status2.png

 src/assets/images/home/eventOverviewDetail/status3.png

 src/assets/images/home/eventOverviewDetail/status4.png

 src/assets/images/home/eventOverviewDetail/status5.png

 src/assets/images/home/useEventOperate/eventSingle.png

 src/assets/images/home/useUavHome/eventAggregationImg.png

 src/assets/images/signMachineNest/machineRight/detailtitle.png

 src/components/CommonTitle.vue

@@ -67,7 +67,7 @@
  }
   .do-return {
    position: absolute;
    top: 50px;
    top: 3px;
    right: -50px;
    cursor: pointer;
    img {

 src/components/CommonWeather.vue

@@ -6,7 +6,7 @@
            <img src="@/assets/images/home/homeLeft/tq.png" alt="" />
            <span class="tq">{{ weather }}</span>
            <span class="tq">风速：{{ windVelocity }} </span>
            <span v-if="flylevel > 6" :class="[isFly === '建议飞行' ? 'qk' : isFly === '禁止飞行' ? 'redqk' : 'yellowqk']">{{
            <span v-if="flylevel >= 5" :class="[isFly === '适合飞行' ? 'qk' : isFly === '禁止飞行' ? 'redqk' : 'yellowqk']">{{
                isFly
            }}</span>
        </div>
@@ -37,7 +37,9 @@
        weather.value = res.data.data.weather
        isFly.value = res.data.data.flightAdvice
        windVelocity.value = res.data.data.windPower
        flylevel.value = res.data.data.adcode.length
        flylevel.value = res.data.data.adcode.replace(/0+$/, "").length
		
			
    })
}

@@ -57,7 +59,7 @@
<style scoped lang="scss">
.time-weather {
    margin-left: 45px;
    width: 350px;
    // width: 350px;
    font-size: 14px;
    height: 36px;
    line-height: 36px;

 src/styles/element-ui.scss

@@ -60,3 +60,177 @@
.avue--detail .el-form-item {
  background-color: #fafafa;
}
// 查看按钮
.ztzf-view {
  width: 53px;
    height: 27px;
    background: #001f4e !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #51a8ff !important;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
}
// table表格
.ztzf-table {
  .el-table__inner-wrapper:before {
        height: 0 !important;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
    }
    .el-table .warning-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 50%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
    .el-table .success-row {
        --el-table-tr-bg-color: #0b1d38;
    }
    .el-table .success-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 79%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
  .el-table {
    color: #fff;
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: none !important;
    --el-table-text-color: #fff !important;
    --el-table-header-text-color: #fff !important;
    --el-table-row-hover-bg-color: none !important;
    --el-table-current-row-bg-color: none !important;
    --el-table-header-bg-color: none !important;
    --el-table-fixed-box-shadow: none !important;
    --el-table-bg-color: none !important;
    --el-table-tr-bg-color: none !important;
    --el-table-expanded-cell-bg-color: none !important;
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
  }
  .el-table__header {
    width: 0 !important;
  }
  .el-table__body {
    border-collapse: collapse;
  }
  .el-table .el-table__cell {
    padding: 0 !important;
    text-align: center !important;
  }
  
  .el-table thead{
    border-bottom: 1px solid !important;
    border: 1px solid !important;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1 !important;
    color: var(--el-table-header-text-color) !important;
    background: #102441 !important;
  }
}
  // 分页
.ztzf-pagination {

  .el-pagination {
    display: flex !important;
    justify-content: center !important;
}
.el-pagination button{
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
.el-pager li{
    background: none !important;
    color: #8eb8ea !important;
}
.el-pager li.is-active {
    background: #021022 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1479ef;
    color: #c7e1ff !important;
}
.el-pagination__goto {
    color: #c7e1ff !important;
}
.el-pagination__classifier {
    color: #c7e1ff !important;
}
.el-pager .el-input__wrapper {
    background: #021022 !important;
    color: #c7e1ff !important;
    border: 1px solid #1479ef !important;
    z-index: 1;
}
.el-input__wrapper {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
.el-input__inner {
    color: #fff !important;
}
}


.ztzf-date-picker{
  box-shadow: none !important;
  background: rgba(0, 15, 34, 0.5);
  border: 1px solid #306fca;

  .el-input__wrapper {
    background-color: transparent;
    box-shadow: 0 0 0 1px #0070ff;

    &.is-focus {
      box-shadow: 0 0 0 1px #0070ff;
    }
  }

  .el-range-input {
    background-color: transparent;
    color: #fff;
    height: 28px;

    &::placeholder {
      color: rgba(255, 255, 255, 0.6);
    }
  }

  .el-range-separator{
    color: #fff;
  }
}

.ztzf-select {
  .el-select__wrapper {
    background-color: transparent;
    box-shadow: none;
    border: 1px solid #306fca;
  }

  .el-select__placeholder {
    color: #ffffff;
  }
}

 src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventDataAnalysis.vue

@@ -1,12 +1,10 @@
<template>
    <!-- <common-title title="行业数据分析" /> -->
    <div class="event-data-analysis">
        <div class="little-title">行业数据分析</div>
        <div class="chart" ref="echartsRef"></div>
    </div>
</template>
<script setup>
// import CommonTitle from '@/components/CommonTitle.vue'
import { getEventIndustryData } from '@/api/home/event'
import * as echarts from 'echarts'

@@ -18,6 +16,15 @@
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
        formatter: function (params) {
            let result = ''
            params.forEach(item => {
                const color = item.color.colorStops[1].color
                const marker = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${color};"></span>`
                result += `${marker}${item.seriesName}: ${item.value}<br/>`
            })
            return result
        },
    },
    grid: {
@@ -65,18 +72,36 @@
    series: [],
}

const testObj = color => ({
    type: 'bar',
    emphasis: {
        focus: 'series',
    },
    itemStyle: { color },
    data: [],
})
const seriesObj = (colorList) =>{
    const offsets = [0,1,1]
    return {
        type: 'bar',
        barWidth: 6,
        emphasis: {
            focus: 'series',
        },
        itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, // 渐变方向从上到下
                colorList.map((color,index) => ({ offset:offsets[index], color}))
            ),
        },
        data: [],
    }
}

const eventType = [
    { name: '事件', ...testObj('#6FCAFF') },
    { name: '任务', ...testObj('#8EFFAC') },
const seriesList = [
    {
        name: '事件',
        ...seriesObj(['#FFFFFF','rgba(44,134,240,0.48)','#DDECFD']),
    },
    {
        name: '任务',
        ...seriesObj(['#FFFFFF', 'rgba(33,218,229,0.48)', '#E5FEFF']),
    },
]
const params = inject('eventOverviewParams')

@@ -90,17 +115,17 @@
    const list = res?.data?.data || []
    echartsOption.xAxis.data = list.map(item => item.name)
    //
    eventType.forEach(item => {
    seriesList.forEach(item => {
        item.data = []
    })
    list.forEach(item => {
        item.data.forEach(item1 => {
            eventType.forEach(item2 => {
            seriesList.forEach(item2 => {
                item2.name === item1.name && item2.data.push(item1.value)
            })
        })
    })
    echartsOption.series = eventType
    echartsOption.series = seriesList
    chart.setOption(echartsOption)
}

@@ -112,15 +137,16 @@
</script>
<style scoped lang="scss">
.event-data-analysis {
    height: 330px;
    height: 280px;

    .little-title {
        background: url('@/assets/images/little-title-bg.png') no-repeat center / 100% 100%;
        width: 372px;
        height: 28px;
        line-height: 28px;
        padding-left: 16px;
		
    }

    .chart {
        margin-top: 10px;
        width: 356px;

 src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventOverviewDetailLeft.vue

@@ -59,7 +59,6 @@
    #1f3e7a 100%
  );
  border-radius: 0px 0px 0px 0px;
  opacity: 0.85;
    color: #e7f5ff;
    display: flex;
    flex-direction: column;
@@ -72,7 +71,7 @@

    .do-return {
        position: absolute;
        top: 50px;

        right: -50px;
        cursor: pointer;


 src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTop5.vue

@@ -1,74 +1,25 @@
<template>
    <div class="event-top5">
        <div class="little-title">同类事件TOP5统计</div>
        <div class="chart" ref="echartsRef"></div>
        <div class="top5Content">
            <div class="top5Item" v-for="(item, index) in list.filter(i => i.name)">
                <div class="top5ItemImg" />
                <div class="top5ItemIndex" :style="{ color: item.color }">{{ index + 1 }}</div>
                <div class="top5ItemName">{{ item.name }}</div>
                <div class="top5ItemRatio">
                    <div class="top5ItemRatioInner" :style="ratioFun(item)"></div>
                </div>
                <div class="top5ItemCount">
                    <span>{{ item.value }}</span
                    >件
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { getEventTopFive, getEventTrend } from '@/api/home/event'
import * as echarts from 'echarts'

const echartsRef = ref(null)
let chart = null

const echartsOption = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
        },
    },
    grid: {
        top: '5%',
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        axisLabel: {
            rotate: -45, // 旋转角度
            interval: 0, // 显示所有标签
            color: '#FFFFFF',
            fontFamily: 'Source Han Sans CN, Source Han Sans CN',
            fontWeight: 400,
            fontSize: 10,
        },
        data: [],
    },
    yAxis: [
        {
            type: 'value',
            axisLabel: {
                interval: 0, // 显示所有标签
                color: '#FFFFFF',
                fontFamily: 'Source Han Sans CN, Source Han Sans CN',
                fontWeight: 400,
                fontSize: 10,
            },
            axisLine: {
                lineStyle: {
                    color: '#ffffff',
                },
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)',
                    type: 'dashed', // 设置为虚线
                },
            },
        },
    ],
    series: {
        type: 'bar',
        emphasis: {
            focus: 'series',
        },
        itemStyle: { color:'#6FCAFF' },
        data: [],
    },
}
import { getEventTopFive } from '@/api/home/event'
import indexPoint from '@/assets/images/home/eventOverviewDetail/indexPoint.png'

const params = inject('eventOverviewParams')

@@ -76,35 +27,139 @@
    getData()
})

const ratioFun = row => ({
    background: row.bGColor,
    width: `${row.width}%`,
})

const colorOptions = [
    { color: '#F02C2C', bGColor: 'linear-gradient( 90deg, rgba(165,12,12,0) 0%, #F02C2C 78%, #DDECFD 100%)' },
    { color: '#FFA500', bGColor: 'linear-gradient( 90deg, rgba(229,154,33,0) 0%, #E59A21 78%, #EAFEFF 100%)' },
    { color: '#FFFF00', bGColor: 'linear-gradient( 90deg, rgba(242,255,54,0) 0%, #F2FF36 78%, #FFF2D9 100%)' },
    { color: '#7D7BFF', bGColor: 'linear-gradient( 90deg, rgba(29,27,155,0) 0%, #322EE2 67%, #C7C6FF 100%)' },
    { color: '#23BDF5', bGColor: 'linear-gradient( 90deg, rgba(35,189,245,0) 0%, #23BDF5 67%, #C7C6FF 100%)' },
]

const list = ref([])
// 获取数据
const getData = async () => {
    const res = await getEventTopFive(params.value)
    const list = res?.data?.data || []
    echartsOption.xAxis.data = list.map(item => item.name)
    echartsOption.series.data = list.map(item => item.value)
    chart.setOption(echartsOption)
    const resData = res?.data?.data || []
    const maxVal = resData[0]?.value || 100
    list.value = resData
    list.value.forEach((item, index) => {
        list.value[index] = {
            ...item,
            ...colorOptions[index],
            width: (item.value / maxVal) * 100,
        }
    })

    console.log(list.value)
}

onMounted(() => {
    chart = echarts.init(echartsRef.value)
    window.addEventListener('resize', chart.resize)
    getData()
})
</script>
<style scoped lang="scss">
.event-top5 {
    height: 280px;
}
.little-title {
        background: url('@/assets/images/little-title-bg.png') no-repeat center / 100% 100%;
        width: 372px;
        height: 28px;
        line-height: 28px;
        padding-left: 16px;
    height: 288px;


    .top5Content {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 14px 0;
        height: 250px;

        .top5Item {
            display: flex;
            align-items: center;
            font-family: Segoe UI, Segoe UI;
            font-weight: 400;
            font-size: 12px;
            color: #7883a7;
            line-height: 14px;
            width: 328px;
            height: 32px;
            background: rgba(14, 21, 40, 0.5);
            border-radius: 1px 1px 1px 1px;
            padding-left: 6px;

            .top5ItemImg {
                width: 7px;
                height: 7px;
                background: #5294E1;
                border-radius: 1px;
            }

            .top5ItemIndex {
                margin-left: 6px;
                font-family: Segoe UI, Segoe UI;
                font-weight: normal;
                font-size: 16px;
                color: #e94545;
                line-height: 19px;
                margin-right: 2px;
            }

            .top5ItemName {
                width: 48px;
            }

            .top5ItemRatio {
                width: 198px;
                height: 4px;
                background: #2d3a5c;
                border-radius: 0px 0px 0px 0px;
                margin: 0 7px;
                position: relative;

                .top5ItemRatioInner {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 100%;
                    &:after {
                        display: block;
                        content: '';
                        position: absolute;
                        right: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 1px;
                        height: 12px;
                        background: #B8DAFF;
                        box-shadow: 0px 0px 8px 0px rgba(212,231,252,0.5);
                        border-radius: 0px 0px 0px 0px;
                    }
                }
            }

            .top5ItemCount {
                font-family: Segoe UI, Segoe UI;
                font-weight: bold;
                font-size: 14px;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;

                span {
                    color: white;
                }
            }
        }
    }
.chart {
    margin-top: 10px;
    width: 356px;
    height: 280px;
}

.little-title {
    background: url('@/assets/images/little-title-bg.png') no-repeat center / 100% 100%;
    width: 372px;
    height: 28px;
    line-height: 28px;
    padding-left: 16px;
}
</style>

 src/views/Home/EventOverviewDetail/EventOverviewDetailLeft/EventTrendAnalysis.vue

@@ -74,6 +74,18 @@
        emphasis: {
            focus: 'series',
        },
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,
                    color: 'rgba(24, 141, 240, 0.4)', // 顶部颜色
                },
                {
                    offset: 1,
                    color: 'rgba(24, 141, 240, 0)', // 底部颜色
                },
            ]),
        },
        data: [], // 示例数据，根据实际完成率计算
    },
}

 src/views/Home/EventOverviewDetail/EventOverviewDetailRight.vue

@@ -1,10 +1,12 @@
<template>
    <UserOperate/>
    <div class="event-overviewdetail-right">
        <div>工单列表</div>
        <div>
    <div class="event-overviewdetail-right" :class="{ isMore }">
        <CommonTitle title="工单列表" />

        <div class="content">
            <img class="leftArrow" :src="isMore ? rightArrowImg : leftArrowImg" @click="leftArrowFun" alt="" />

            <el-date-picker
                style="width: 100%"
                class="ztzf-date-picker"
                v-model="timeArr"
                type="daterange"
                :value-format="timeFormat"
@@ -13,64 +15,110 @@
                end-placeholder="结束日期"
                @change="timeChange"
            />
        </div>

        <el-select style="width: 100%" v-model="params.device_sn" placeholder="机巢" filterable clearable @change="getList">
            <el-option v-for="item in deviceList" :label="item.nickname" :value="item.device_sn" :key="item.device_sn" />
        </el-select>
        <el-select v-model="params.word_order_type" placeholder="工单类型" filterable clearable @change="getList">
            <el-option v-for="item in workOrderType" :label="item.dictValue" :value="item.dictKey" :key="item.dictKey" />
        </el-select>
        <div class="statusList">
            <div v-for="item in statusList" @click="statusClick(item)" :class="{ active: item.active }">
                <div>{{ item.name }}</div>
                <div>{{ item.num || 0 }}</div>
            </div>
        </div>
            <el-select
                class="ztzf-select"
                :style="{ width: pxToRem(174) }"
                v-model="params.device_sn"
                placeholder="机巢"
                filterable
                clearable
                @change="getList"
            >
                <el-option v-for="item in deviceList" :label="item.nickname" :value="item.device_sn" :key="item.device_sn" />
            </el-select>

        <el-checkbox-group v-model="params.eventKeys" @change="getList">
            <el-checkbox
                v-for="item in eventList"
                :label="item.name + ' ' + item.value"
                :value="item.status"
                :key="item.dictKey"
            />
        </el-checkbox-group>
            <el-select
                class="ztzf-select"
                :style="{ width: pxToRem(174) }"
                v-model="params.word_order_type"
                placeholder="工单类型"
                filterable
                clearable
                @change="getList"
            >
                <el-option v-for="item in workOrderType" :label="item.dictValue" :value="item.dictKey" :key="item.dictKey" />
            </el-select>

        <div class="eventList">
            <div class="eventListItem" v-for="item in list">
                <img class="eventListItemImg" 
          :src="item.photo_url ? 
        item.photo_url.substring(0, item.photo_url.lastIndexOf('.')) + '_small' + 
        item.photo_url.substring(item.photo_url.lastIndexOf('.')) 
        : ''" 
      alt="" 
    />
                <div class="eventListItemText">
                    <div class="eventListItemName">{{ item.event_name }}</div>
                    <div @click="positioning(item)">定位</div>
                    <div class="eventListItemTime">{{ item.create_time }}</div>
            <div class="statusList">
                <div
                    class="statusItem"
                    v-for="item in isMore ? statusList : statusList.filter(i => i.few)"
                    @click="statusClick(item)"
                    :class="{ active: item.active }"
                >
                    <img class="statusItemImg" :src="item.img" alt="" />
                    <div class="statusItemInfo">
                        <div class="statusItemName">{{ item.name }}</div>
                        <div class="statusItemNum">{{ item.num || 0 }}</div>
                    </div>
                </div>
            </div>
        </div>

        <el-pagination
            background
            v-model:current-page="params.current"
            v-model:page-size="params.size"
            layout="total,  prev, pager, next"
            :total="total"
            @change="pageChange"
        />
            <el-checkbox-group v-model="params.event_keys" @change="getList">
                <el-checkbox v-for="item in eventList" :value="item.status" :key="item.dictKey">
                    <template #default>
                        <span class="eventListItemCheckboxName">{{ item.name }}</span>
                        <span class="eventListItemCheckboxNum">({{ item.value }})</span>
                    </template>
                </el-checkbox>
            </el-checkbox-group>

            <div class="eventList">
                <div class="eventListItem" v-for="item in list">
                    <img
                        class="eventListItemImg"
                        :src="
                            item.photo_url
                                ? item.photo_url.substring(0, item.photo_url.lastIndexOf('.')) +
                                  '_small' +
                                  item.photo_url.substring(item.photo_url.lastIndexOf('.'))
                                : ''
                        "
                        alt=""
                    />
                    <div class="eventListItemPosition" :title="item.address" @click="positioning(item)">
                        <img :src="positioningImg" alt="" title="点击定位" />
                        <div class="address">{{ item.address }}</div>
                    </div>
                    <div class="eventListItemText">
                        <div class="eventListItemName">{{ item.event_name }}</div>
                        <div class="eventListItemTime">{{ item.create_time }}</div>
                    </div>
                </div>
            </div>

            <div class="pagination">
                <el-pagination
                    background
                    v-model:current-page="params.current"
                    v-model:page-size="params.size"
                    layout="total,  prev, pager, next"
                    :total="total"
                    @change="pageChange"
                />
            </div>
        </div>
    </div>
</template>
<script setup>
import UserOperate from '@/components/UserOperate.vue';
import status0Img from '@/assets/images/home/eventOverviewDetail/status0.png'
import status1Img from '@/assets/images/home/eventOverviewDetail/status1.png'
import status2Img from '@/assets/images/home/eventOverviewDetail/status2.png'
import status3Img from '@/assets/images/home/eventOverviewDetail/status3.png'
import status4Img from '@/assets/images/home/eventOverviewDetail/status4.png'
import status5Img from '@/assets/images/home/eventOverviewDetail/status5.png'
import positioningImg from '@/assets/images/home/eventOverviewDetail/positioning.png'
import leftArrowImg from '@/assets/images/home/eventOverviewDetail/leftArrow.png'
import rightArrowImg from '@/assets/images/home/eventOverviewDetail/rightArrow.png'

import dayjs from 'dayjs'
import { selectDevicePage } from '@/api/home/machineNest'
import { getMultipleDictionary } from '@/api/system/dictbiz'
import { getEvenNum, getEventPage, getEventStatusNum, getEventTrend } from '@/api/home/event'
import { getEvenNum, getEventPage, getEventStatusNum } from '@/api/home/event'
import cesiumOperation from '@/utils/cesium-tsa'
import CommonTitle from '@/components/CommonTitle.vue'
import { pxToRem } from '@/utils/rem'

const timeFormat = 'YYYY-MM-DD HH:mm:ss'
const today = dayjs().format(timeFormat)
@@ -85,10 +133,18 @@
    device_sn: undefined,
    word_order_type: undefined,
    status: undefined,
    eventKeys: [],
    event_keys: [],
    current: 1,
    size: 10,
    size: 8,
})

const isMore = ref(false)
const leftArrowFun = () => {
    isMore.value = !isMore.value
    params.value.size = isMore.value ? 16 : 8
    params.value.current = 1
    getList()
}

const statusClick = row => {
    params.value.status = row.id || undefined
@@ -111,20 +167,36 @@
        workOrderType.value = res.data.data?.['WORK_ORDER_TYPE'] || []
    })
}
const { flyTo } = cesiumOperation();
const positioning = (row) =>{
const { flyTo } = cesiumOperation()
const positioning = row => {
    const longitude = Number(row.longitude)
    const latitude = Number(row.latitude)
    flyTo({ longitude, latitude }, 1, 1000);
    flyTo({ longitude, latitude }, 1, 1000)
}

// 事件状态+数量
const statusList = ref([])
const statusList = ref([
    { name: '全部状态', img: status0Img, id: undefined,few: true },
    { name: '待审核', img: status1Img, id: 2 },
    { name: '待处理', img: status2Img, id: 0, few: true },
    { name: '处理中', img: status3Img, id: 3, few: true },
    { name: '已完成', img: status4Img, id: 4, few: true },
    { name: '待分拨', img: status5Img, id: 1 },
])

const getEventStatusNumFun = () => {
    const [start_date, end_date] = timeArr.value
    getEventStatusNum({ start_date, end_date }).then(res => {
        statusList.value = (res.data?.data || []).map(i => ({ ...i, active: false }))
        const list = res.data?.data || []
        statusList.value = statusList.value.map(item => {
            const find = list.find(item1 => item.id === item1.id) || {}
            return {
                ...item,
                ...find,
            }
        })
        statusList.value[0].active = true
        console.log(statusList.value)
    })
}

@@ -145,7 +217,7 @@
    getEventStatusNumFun()
    getEventList()
    params.value.status = undefined
    params.value.eventKeys = undefined
    params.value.event_keys = undefined
    getList()
}

@@ -156,7 +228,11 @@

const list = ref([])
const getList = () => {
    getEventPage(params.value).then(res => {
    const pageParams = {
        current: params.value.current,
        size: params.value.size,
    }
    getEventPage(params.value, pageParams).then(res => {
        const resData = res.data.data
        list.value = resData?.records || []
        total.value = resData.total
@@ -174,42 +250,213 @@
<style scoped lang="scss">
.event-overviewdetail-right {
    position: absolute;
    right: 29px;
    right: 36px;
    top: 122px;
    // color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 900px;
    width: 400px;
    background: white;
    align-items: end;
    height: 922px;
    width: 405px;
    font-size: 18px;

    .statusList {
        display: flex;
        flex-wrap: wrap;
    &.isMore {
        width: 807px;

        .active {
            background: #19ad8d;
        .content {
            width: 792px;
        }
    }

    .eventList {
    .content {
        width: 390px;
        height: 877px;
        background: linear-gradient(270deg, #1f3e7a 0%, rgba(31, 62, 122, 0.35) 79%, rgba(31, 62, 122, 0) 100%);
        display: flex;
        justify-content: space-between;
        align-content: start;
        flex-wrap: wrap;
        padding: 7px 15px 0 11px;
        gap: 10px;

        .eventListItem {
            .eventListItemImg {
                width: 120px;
                height: 100px;
            }
        .leftArrow {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }

            .eventListItemText {
        .statusList {
            width: 100%;
            display: flex;

            .statusItem {
                width: 95px;
                height: 44px;
                display: flex;
                justify-content: space-between;
                font-size: 16px;
                flex: 1;
                justify-content: center;
                position: relative;
                cursor: pointer;

                &.active {
                    background: linear-gradient(
                        180deg,
                        rgba(19, 80, 141, 0) 0%,
                        rgba(22, 56, 91, 0.48) 48%,
                        #053462 91%,
                        #259dff 91%,
                        #259dff 98%
                    );
                }

                .statusItemImg {
                    width: 35px;
                    height: 35px;
                }

                .statusItemInfo {
                    .statusItemName {
                        width: 59px;
                        height: 17px;
                        font-family: Segoe UI, Segoe UI;
                        font-weight: 400;
                        font-size: 14px;
                        color: #ffffff;
                        line-height: 17px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }

                    .statusItemNum {
                        width: 32px;
                        height: 16px;
                        font-family: Segoe UI, Segoe UI;
                        font-weight: bold;
                        font-size: 16px;
                        color: #ffd509;
                        line-height: 16px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                }
            }
        }

        .el-checkbox-group {
            :deep() {
                .el-checkbox {
                    height: 20px;
                    margin-right: 10px;
                }

                .el-checkbox__inner {
                    background: transparent;
                    width: 18px;
                    height: 18px;
                    border: 1px solid #3194ef;
                }

                .el-checkbox__label {
                    font-family: Segoe UI, Segoe UI;
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 17px;

                    .eventListItemCheckboxNum {
                        color: #ffa500;
                    }
                }
            }
        }

        .eventList {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 20px 0;

            .eventListItem {
                width: 175px;
                height: 140px;
                position: relative;

                .eventListItemImg {
                    width: 174px;
                    height: 116px;
                    border-radius: 4px 4px 4px 4px;
                    margin-bottom: 7px;
                }

                .eventListItemPosition {
                    position: absolute;
                    right: 0;
                    top: 116px;
                    width: 174px;
                    height: 20px;
                    transform: translateY(-100%);
                    background: rgba(22, 22, 22, 0.68);
                    border-radius: 0 0 4px 4px;
                    font-family: Segoe UI, Segoe UI;
                    font-weight: 400;
                    font-size: 12px;
                    line-height: 17px;
                    color: #51a8ff;
                    cursor: pointer;
                    padding-right: 5px;
                    display: flex;
                    justify-content: end;

                    img {
                        margin-right: 5px;
                    }

                    .address {
                        display: inline-block;
                        width: 60px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }

                .eventListItemText {
                    display: flex;
                    justify-content: space-between;
                    font-family: Segoe UI, Segoe UI;
                    font-weight: 400;
                    font-size: 14px;
                    color: #ffffff;
                    line-height: 17px;

                    .eventListItemTime {
                        font-family: Segoe UI, Segoe UI;
                        font-weight: 400;
                        font-size: 14px;
                        color: #96a3cc;
                        line-height: 17px;
                    }
                }
            }
        }
    }
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: center;

    .el-pagination {
        --el-color-primary: #173da7;
        --el-pagination-button-bg-color: #131c35;
        --el-pagination-button-color: #ecf1ff;
        --el-disabled-bg-color: #131c35;
        --el-text-color-regular: #ecf1ff;
    }
}
</style>

 src/views/Home/HomeLeft/InspectionRaskDetails/InspectionRaskDetailsDialog.vue

@@ -59,11 +59,11 @@
            </div>
        </el-form>
        <!-- 表格 -->
        <div class="tabledata">
        <div class="tabledata ztzf-table">
            <el-table
                :data="taskDetailData"
                :row-class-name="tableRowClassName"
                :row-style="{ height: '58px', fontSize: '14px', 'text-align': 'center' }"
                :row-style="{ height: '54px', fontSize: '14px', 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center', height: '36px', fontSize: '14px' }"
            >
                <el-table-column label="序号" type="index" width="60">
@@ -71,8 +71,7 @@
                        {{ ($index + 1).toString().padStart(2, '0') }}
                    </template>
                </el-table-column>
                <!-- 事件状态:0 =待处理，1=待分拨，2=待处理，3=处理中，4=已完成 5=已完结 -->
                <el-table-column  show-overflow-tooltip prop="job_info_num" label="任务编号" />
                <el-table-column show-overflow-tooltip prop="job_info_num" label="任务编号" />
                <el-table-column prop="name" show-overflow-tooltip label="任务名称" />
                <el-table-column prop="device_names" show-overflow-tooltip label="所属机巢" />
                <el-table-column show-overflow-tooltip prop="ai_type_str" label="关联算法" />
@@ -90,7 +89,8 @@
                                    ? 'cancel '
                                    : 'fail '
                            "
                            >{{
                        >
                            {{
                                scope.row.status == 1
                                    ? '待执行'
                                    : scope.row.status == 2
@@ -100,22 +100,22 @@
                                    : scope.row.status == 4
                                    ? '取消'
                                    : '失败'
                            }}</span
                        >
                            }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="industry_type_str" label="任务类型" />
                <el-table-column prop="begin_time" label="任务时间" width="150"/>
                <el-table-column show-overflow-tooltip prop="industry_type_str" label="任务类型" />
                <el-table-column prop="begin_time" label="任务时间" width="150" />
                <el-table-column prop="event_number" label="关联事件">
                    <template #default="scope">
                        <span>{{ scope.row.event_number ? scope.row.event_number : '/' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80"> <div class="view">查看</div></el-table-column>
                <el-table-column label="操作" width="80"><div class="ztzf-view ">查看</div></el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
        <div class="pagination">
        <div class="pagination ztzf-pagination">
            <el-pagination
                v-model:current-page="pageParams.current"
                v-model:page-size="pageParams.size"
@@ -286,16 +286,6 @@
}

:deep() {
    .el-table .el-table__cell {
        padding: 0 !important;
    }
    .el-table thead {
        border-bottom: 1px solid;
        border: 1px solid;
        border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
        color: var(--el-table-header-text-color);
        background: #102441;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__wrapper {
        height: var(--el-input-height, var(--el-component-size));
@@ -336,62 +326,19 @@
    }
}
:deep(.el-pagination) {
display: flex;
justify-content: center;
margin-top: 10px;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
:deep(.el-pagination button) {
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li) {
    background: none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li.is-active) {
    background: #021022 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1479ef;
    color: #c7e1ff !important;
}
:deep(.el-pagination__goto) {
    color: #c7e1ff !important;
}
:deep(.el-pagination__classifier) {
    color: #c7e1ff !important;
}
:deep(.el-pager .el-input__wrapper) {
    background: #021022 !important;
    color: #c7e1ff !important;
    border: 1px solid #1479ef !important;
    z-index: 1;
}
.el-table {
    color: #fff;
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: none !important;
    --el-table-text-color: #fff !important;
    --el-table-header-text-color: #fff !important;
    --el-table-row-hover-bg-color: none !important;
    --el-table-current-row-bg-color: none !important;
    --el-table-header-bg-color: none !important;
    --el-table-fixed-box-shadow: none !important;
    --el-table-bg-color: none !important;
    --el-table-tr-bg-color: none !important;
    --el-table-expanded-cell-bg-color: none !important;
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
.el-table__header {
    width: 0 !important;
}

.el-table__body {
    border-collapse: collapse;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
    text-align: center !important;
}

.my-header {
    display: inline-block;
    vertical-align: middle;
@@ -418,18 +365,7 @@
    height: 640px;
    overflow-y: scroll !important;
}
.view {
    width: 53px;
    height: 27px;
    background: #001f4e;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #51a8ff;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
}

// 任务状态颜色
.pending {
    color: #e36913;
@@ -499,45 +435,7 @@
        -webkit-background-clip: text; /* 背景被裁剪成文字的前景色 */
        -webkit-text-fill-color: transparent; /* 文字填充颜色变透明 */
    }
    .el-table__inner-wrapper:before {
        height: 0 !important;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
    }
    .el-table .warning-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 50%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
    .el-table .success-row {
        --el-table-tr-bg-color: #0b1d38;
    }
    .el-table .success-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 79%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
	
    .el-scrollbar__thumb {
        background: #13c6ff !important;
    }

 src/views/Home/HomeLeft/MachineNestList.vue

@@ -1,11 +1,23 @@
<!-- 机巢详情列表 -->
<template>
    <common-title title="机巢概况" text="返回" :style="{ marginLeft: pxToRem(14) }" @details="detailsFun"></common-title>

    <div class="machine-nest-list">
        <MachineNestTotal @searchNickName="handleSearch" />
        <div class="content-wrapper">
            <div class="table-list">
                <div :class="[index % 2 ==1 ? 'table-itemeven':'table-item']" v-for="(item,index) in tableList" :key="index">
            <div
                class="table-list"
                v-if="tableList.length > 0"
                infinite-scroll-distance="6"
                v-infinite-scroll="loadMore"
                :infinite-scroll-disabled="busy"
                infinite-scroll-immediate="true"
            >
                <div
                    :class="[index % 2 == 1 ? 'table-itemeven' : 'table-item']"
                    v-for="(item, index) in tableList"
                    :key="index"
                >
                    <img src="/src/assets/images/home/homeLeft/machinenestlist-sign.png" alt="" />
                    <div class="middle">
                        <div class="title">{{ item.nickname }}</div>
@@ -19,14 +31,17 @@
                            >个 飞行时长：<span>{{ item.hour }}</span
                            >h
                        </div>
                        <div class="numbering">23HK1453</div>
                    </div>
                    <div class="right" :class="item.status === 'WORKING' ? 'atcive' : item.status === 'OFFLINE'? 'offine' :'freetime'      " @click="signMachineNestClick(item)">
                    <div
                        class="right"
                        :class="item.status === 'WORKING' ? 'atcive' : item.status === 'OFFLINE' ? 'offine' : 'freetime'"
                        @click="signMachineNestClick(item)"
                    >
                        {{ item.status === 'OFFLINE' ? '离线中' : item.status === 'WORKING' ? '作业中' : '空闲中' }}
                    </div>
                </div>
            </div>
            <div class="pagination-container">
            <!-- <div class="pagination-container">
                <el-pagination
                    v-model:current-page="pageParams.current"
                    v-model:page-size="pageParams.size"
@@ -37,7 +52,7 @@
                    @current-change="handleCurrentChange"
                    background
                />
            </div>
            </div> -->
        </div>
    </div>
</template>
@@ -49,7 +64,9 @@
import { useStore } from 'vuex'

const store = useStore()

const isMore = ref(true)
// 控制加载状态
const busy = ref(false)
const searchText = ref('')
// 分页参数
const pageParams = ref({
@@ -69,11 +86,18 @@
    }
    selectDevicePage(params).then(res => {
        if (res.data.code !== 0) return
        tableList.value = res.data.data.records
        pageParams.value.total = res.data.data.total
        if (res.data.data.records.length === 0) return (isMore.value = false)
        pageParams.value.current += 1
        tableList.value = [...tableList.value, ...res.data.data.records]
        busy.value = false
    })
}

// 加载更多数据
const loadMore = async () => {
    busy.value = true
    if (!isMore.value) return
    getTableList()
}
// 搜索数据
const handleSearch = name => {
    searchText.value = name
@@ -129,6 +153,13 @@
            font-weight: 500;
            font-size: 16px;
            color: #fff;
            // 滚动条
            &::-webkit-scrollbar {
                width: 0;
                display: none;
            }
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
            .table-item {
                display: flex;
                justify-content: space-between;
@@ -136,7 +167,7 @@
                padding-top: 6px;
                margin-top: 10px;

                height: 120px;
                height: 100px;
                background: linear-gradient(
                    90deg,
                    rgba(0, 122, 255, 0) 0%,
@@ -144,7 +175,7 @@
                    rgba(0, 73, 153, 0) 100%
                );
            }
          .table-itemeven {
            .table-itemeven {
                display: flex;
                justify-content: space-between;
                justify-items: center;
@@ -152,7 +183,6 @@
                margin-top: 10px;

                height: 120px;

            }
            img {
                width: 45px;
@@ -182,15 +212,15 @@
                cursor: pointer;
                font-size: 16px;
            }
      // 离线中
      .offine {
      color: #fff;
      }
      // 空闲中
      .freetime{
      color: #FFA768;
      }
      // 作业中
            // 离线中
            .offine {
                color: #fff;
            }
            // 空闲中
            .freetime {
                color: #ffa768;
            }
            // 作业中
            .atcive {
                color: #04f020;
                background: linear-gradient(90deg, rgba(12, 45, 92, 1) 0%, #154671 50%, rgba(12, 45, 92, 1) 100%),

 src/views/Home/HomeRight/EventOverview.vue

@@ -119,7 +119,7 @@

const eventTypeList = ref([
  { name: '待审核', value: 0, img: overviewImg1, color: '#8CFEA7', status: '2' },
  { name: '待分拨', value: 0, img: overviewImg2, color: '#6FCAFF', status: '1' },
  // { name: '待分拨', value: 0, img: overviewImg2, color: '#6FCAFF', status: '1' },
  { name: '待处理', value: 0, img: overviewImg3, color: '#E36913', status: '0' },
  { name: '处理中', value: 0, img: overviewImg4, color: '#FFC398', status: '3' },
  { name: '已完成', value: 0, img: overviewImg5, color: '#AFD9FB', status: '4' },

 src/views/Home/useMapAggregation/useMapAggregation.js

@@ -1,8 +1,8 @@
import * as Cesium from 'cesium'
import aggregationImg from '@/assets/images/home/useUavHome/aggregation.png'
import eventAggregationImg from '@/assets/images/home/useUavHome/eventAggregationImg.png'
import uavImg from '@/assets/images/home/useUavHome/uavImg.png'

import eventImg from '@/assets/images/home/useEventOperate/event.png'
import eventSingle from '@/assets/images/home/useEventOperate/eventSingle.png'

import DevicePopUpBox from '@/views/Home/useMapAggregation/DevicePopUpBox.vue'
import EventPopUpBox from '@/views/Home/useMapAggregation/EventPopUpBox.vue'
@@ -27,8 +27,8 @@
export const useMapAggregation = type => {
  const { flyTo } = cesiumOperation()

  const singleImg = type === 'device' ? uavImg : eventImg
  const mergeImg = type === 'device' ? aggregationImg : aggregationImg
  const singleImg = type === 'device' ? uavImg : eventSingle
  const mergeImg = type === 'device' ? aggregationImg : eventAggregationImg
  const MapPopUpBox = type === 'device' ? DevicePopUpBox : EventPopUpBox
  const styleTransform = type === 'device' ? 'translateY(-50%)' : 'translate(-50%,-110%)'


 src/views/SignMachineNest/MachineLeft/MachineLeft.vue

@@ -35,7 +35,7 @@
  color: #e7f5ff;
  .do-return {
    position: absolute;
    top: 50px;
    top: 40px;
    right: -50px;
    cursor: pointer;
    img {

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceEvent.vue

@@ -6,7 +6,7 @@
                >件
            </p>
        </div>
        <div class="deviceevent-table">
        <div class="deviceevent-table ztzf-table">
            <el-table :data="list" :row-class-name="tableRowClassName"
            style="width: 100%;"
            :row-style="{ height: '38px', fontSize: '14px', 'text-align': 'center' }"
@@ -19,8 +19,8 @@
            <el-table-column prop="id" label="事件编号" />
            <el-table-column prop="event_name" label="事件名称" />
            <el-table-column prop="event_name" label="所属单位 " />
            <el-table-column prop="media_type" label="事件内容" />
            <el-table-column prop="ai_types" label="关联算法" />
            <el-table-column show-overflow-tooltip prop="media_type" label="事件内容" />
            <el-table-column show-overflow-tooltip prop="ai_types" label="关联算法" />
            <el-table-column prop="status" label="事件状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === 0" type="info">待处理</el-tag>
@@ -33,7 +33,9 @@
            </el-table-column>

            <el-table-column label="操作" width="80">
                <div class="view">查看</div>
                <template #default="scope">
                <div class="ztzf-view" @click="distribution(scope.row)">查看</div>
                </template>
                <!-- <template #default="scope" >
                    <el-button type="success" link @click="examine(scope.row)">审核</el-button>
                    <el-button type="primary" link @click="distribution(scope.row)">查看</el-button>
@@ -42,6 +44,7 @@
        </el-table>
        </div>
        <el-pagination
        class="ztzf-pagination"
            background
            :page-sizes="[10, 20, 30, 50]"
            v-model:current-page="sizeParams.current"
@@ -83,6 +86,9 @@
        list.value = resData.records
        total.value = resData.total
    })
	
	
	
}
const pageChange = val => {
    sizeParams.value.current = val
@@ -100,50 +106,7 @@
    getList()
})
</script>
<style lang="scss">
.deviceevent-container {
    // 表格
    .el-table__inner-wrapper:before {
        height: 0 !important;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
    }
    .el-table .warning-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 50%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
    .el-table .success-row {
        --el-table-tr-bg-color: #0b1d38;
    }
    .el-table .success-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 79%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
}
</style>
<style scoped lang="scss">

// 标题
@@ -171,42 +134,7 @@
.deviceevent-table {
padding: 0 17px;
}
.el-table {
    color: #fff;
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: none !important;
    --el-table-text-color: #fff !important;
    --el-table-header-text-color: #fff !important;
    --el-table-row-hover-bg-color: none !important;
    --el-table-current-row-bg-color: none !important;
    --el-table-header-bg-color: none !important;
    --el-table-fixed-box-shadow: none !important;
    --el-table-bg-color: none !important;
    --el-table-tr-bg-color: none !important;
    --el-table-expanded-cell-bg-color: none !important;
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
.el-table__header {
    width: 0 !important;
}
.el-table__body {
    border-collapse: collapse;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
    text-align: center !important;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
}
:deep(.el-table thead) {
    border-bottom: 1px solid;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
    color: var(--el-table-header-text-color);
    background: #102441;
}

// 分页
:deep(.el-pagination) {
    display: flex;
@@ -217,51 +145,10 @@
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li) {
    background: none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li.is-active) {
    background: #021022 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1479ef;
    color: #c7e1ff !important;
}
:deep(.el-pagination__goto) {
    color: #c7e1ff !important;
}
:deep(.el-pagination__classifier) {
    color: #c7e1ff !important;
}
:deep(.el-pager .el-input__wrapper) {
    background: #021022 !important;
    color: #c7e1ff !important;
    border: 1px solid #1479ef !important;
    z-index: 1;
}
:deep(.el-input__wrapper) {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
:deep(.el-input__inner) {
    color: #fff !important;
}

:deep(.el-tag){
background: none !important;
border:none !important
}
.view {
    width: 53px;
    height: 27px;
    background: #001f4e;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #51a8ff;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
}

</style>

 src/views/SignMachineNest/MachineRight/MachineStatus/MachineTableDetails/DeviceJob/DeviceJob.vue

@@ -6,7 +6,7 @@
                >次
            </p>
        </div>
        <div class="devicelob-table">
        <div class="devicelob-table ztzf-table">
            <el-table
                :data="list"
                :row-class-name="tableRowClassName"
@@ -20,21 +20,21 @@
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="任务编号" />
                <el-table-column prop="name" label="任务名称" />
                <el-table-column prop="industry_type_str" label="任务类型" />
                <el-table-column prop="ai_type_str" label="关联算法" />
                <el-table-column prop="event_number" label="事件工单" />
                <el-table-column show-overflow-tooltip prop="name" label="任务名称" />
                <el-table-column show-overflow-tooltip prop="industry_type_str" label="任务类型" />
                <el-table-column show-overflow-tooltip prop="ai_type_str" label="关联算法" />
                <el-table-column show-overflow-tooltip prop="event_number" label="事件工单" />

                <el-table-column label="操作" width="80">
					
                    <template #default="scope">
                        <div class="view" @click="viewJob(scope.row)">查看</div>
                        <div class="ztzf-view" @click="viewJob(scope.row)">查看</div>
                        <!-- <el-button type="warning" link @click="viewJob(scope.row)">查看</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
        class="ztzf-pagination"
            background
            :page-sizes="[10, 20, 30, 50]"
            v-model:current-page="sizeParams.current"
@@ -99,52 +99,14 @@
<style lang="scss">
.devicejob-container {
    // 表格
    .el-table__inner-wrapper:before {
        height: 0 !important;
    }
    .el-table .warning-row {
        --el-table-tr-bg-color: rgba(22, 43, 74, 0.79);
    }
    .el-table .warning-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 50%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
    .el-table .success-row {
        --el-table-tr-bg-color: #0b1d38;
    }
    .el-table .success-row::after {
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        border-bottom: 1px solid;

        border-image: linear-gradient(
                90deg,
                rgba(25, 162, 255, 0) 10%,
                rgba(20, 125, 202, 1) 79%,
                rgba(25, 162, 255, 0) 90%
            )
            2 2 2 2;
    }
	
}
</style>
<style scoped lang="scss">
// 标题
.machineTableDetailsTitle {
    margin: 0 24px;
    // margin-bottom: 16px;
    margin-bottom: 16px;
    background: url('/src/assets/images/signMachineNest/machineRight/detailtitle.png') no-repeat center;
    background-size: 100% 100%;
    p {
@@ -166,93 +128,15 @@
.devicelob-table {
    padding: 0 17px;
}
.el-table {
    color: #fff;
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: none !important;
    --el-table-text-color: #fff !important;
    --el-table-header-text-color: #fff !important;
    --el-table-row-hover-bg-color: none !important;
    --el-table-current-row-bg-color: none !important;
    --el-table-header-bg-color: none !important;
    --el-table-fixed-box-shadow: none !important;
    --el-table-bg-color: none !important;
    --el-table-tr-bg-color: none !important;
    --el-table-expanded-cell-bg-color: none !important;
    --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);
}
.el-table__header {
    width: 0 !important;
}
.el-table__body {
    border-collapse: collapse;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
    text-align: center !important;
}
:deep(.el-table .el-table__cell) {
    padding: 0 !important;
}
:deep(.el-table thead) {
    border-bottom: 1px solid;
    border: 1px solid;
    border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
    color: var(--el-table-header-text-color);
    background: #102441;
}


// 分页
:deep(.el-pagination) {
    display: flex;
    justify-content: center;

}
:deep(.el-pagination button) {
    background: center center no-repeat none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li) {
    background: none !important;
    color: #8eb8ea !important;
}
:deep(.el-pager li.is-active) {
    background: #021022 !important;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #1479ef;
    color: #c7e1ff !important;
}
:deep(.el-pagination__goto) {
    color: #c7e1ff !important;
}
:deep(.el-pagination__classifier) {
    color: #c7e1ff !important;
}
:deep(.el-pager .el-input__wrapper) {
    background: #021022 !important;
    color: #c7e1ff !important;
    border: 1px solid #1479ef !important;
    z-index: 1;
}
:deep(.el-input__wrapper) {
    background: #021022 !important;
    box-shadow: none !important;
    border: 1px solid #178bff;
    color: #fff !important;
}
:deep(.el-input__inner) {
    color: #fff !important;
}
.view {
    width: 53px;
    height: 27px;
    background: #001f4e;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #51a8ff;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 27px;
    cursor: pointer;
}
</style>