feat:任务工单管理子系统页面结构样式调整

shuishen

2026-01-16 19a8a9601842a42c026c5f74f540221ec3f72d69

feat:任务工单管理子系统页面结构样式调整

 applications/drone-command/public/fonts/PangMen.TTF

Binary files differ

 applications/drone-command/public/fonts/font.css

@@ -46,7 +46,7 @@

@font-face {
  font-family: "PangMen";
  src: url("PANGMENZHENGDAOBIAOTITIMIANFEIBAN-2.TTF") format("truetype");
  src: url("PangMen.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;

 applications/task-work-order/public/fonts/PangMen.TTF

copy from applications/drone-command/public/fonts/PANGMENZHENGDAOBIAOTITIMIANFEIBAN-2.TTF
copy to applications/task-work-order/public/fonts/PangMen.TTF
Binary files differ

 applications/task-work-order/public/fonts/font.css

@@ -41,3 +41,11 @@
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PangMen";
  src: url("PangMen.TTF") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

 applications/task-work-order/public/img/bg/mainLogo.png

 applications/task-work-order/src/assets/images/pageLayout/collapse.png

 applications/task-work-order/src/components/PlaybackVideo/PlaybackVideo.vue

@@ -1,6 +1,6 @@
<template>
    <el-dialog
        class="ztzf-dialog-video playback-dialog"
        class="work-dialog-video playback-dialog"
        v-model="isShow"
        append-to-body
        :close-on-click-modal="false"

 applications/task-work-order/src/components/PlaybackVideo/components/MapContainer.vue

@@ -1,5 +1,5 @@
<template>
    <div class="ztzf-cesium map-box" id="map">
    <div class="work-cesium map-box" id="map">
        <PlanarRouteLineList
            :curRouteLineData="curRouteLineData"
            @routeLineListClick="routeLineListClick"

 applications/task-work-order/src/components/basic-container/main.vue

@@ -2,8 +2,8 @@
 * @Author       : yuan
 * @Date         : 2025-06-14 15:19:16
 * @LastEditors  : yuan
 * @LastEditTime : 2025-06-27 14:34:02
 * @FilePath     : \src\components\basic-container\main.vue
 * @LastEditTime : 2026-01-14 10:10:35
 * @FilePath     : \applications\drone-command\src\components\basic-container\main.vue
 * @Description  : 
 * Copyright 2025 OBKoro1, All Rights Reserved. 
 * 2025-06-14 15:19:16
@@ -47,26 +47,25 @@
.basic-container {
  height: 0;
  flex: 1;

  padding: 10px;
  // box-sizing: border-box;
  // height: 100%;

  .basic-container__card {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    overflow: hidden;
    background: transparent;

    .el-card__body {
    ::v-deep(.el-card__body) {
      padding: 0 !important;
      height: 0 !important;
      flex: 1 !important;
      display: flex;
      flex-direction: column;
      height: 100% !important;
      
      overflow: hidden;
      box-sizing: border-box;

      &>div {
        height: 0;
        flex: 1;
      }
    }
  }

@@ -80,10 +79,6 @@

  &__card {
    width: 100%;
  }

  &:first-child {
    padding-top: 0;
  }
}
</style>

 applications/task-work-order/src/components/commonDialog.vue

@@ -1,5 +1,5 @@
<template>
  <el-dialog class="ztzf-dialog-mange" append-to-body v-model="props.isShowView" :title="props.title"
  <el-dialog class="work-dialog-mange" append-to-body v-model="props.isShowView" :title="props.title"
             :width="props.width" :close-on-click-modal="false" :destroy-on-close="true" @close="cancel">
    <slot name="default" />
    <template #footer v-if="props.addEditView !== 'view'">

 applications/task-work-order/src/components/map-container/device-map-container.vue

@@ -1,5 +1,5 @@
<template>
    <div class="ztzf-cesium map-container" :id="props.containerId"></div>
    <div class="work-cesium map-container" :id="props.containerId"></div>
    <div v-if="props.showLayerControl" class="layer-control-root" :class="{ collapsed: props.leftCollapsed }">
        <div class="layer-control-wrap" ref="layerWrapRef">
            <div class="layer-control" @click="toggleLayerPanel">

 applications/task-work-order/src/components/map-container/mapContainer.vue

@@ -10,7 +10,7 @@
-->
<template>
  <div class="map-container">
    <div class="viewer-container ztzf-cesium" id="viewer-container">
    <div class="viewer-container work-cesium" id="viewer-container">
      <div class="content">
        <slot name="content"></slot>
      </div>

 applications/task-work-order/src/page/index/index.vue

@@ -1,26 +1,40 @@
<template>
  <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
    <div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }">
      <div class="avue-sidebar" v-show="validSidebar">
        <!-- 左侧导航栏 -->
        <logo />
        <sidebar />
      </div>
      <div class="avue-main">
        <!-- 顶部导航栏 -->
        <top ref="top" />
        <!-- 顶部标签卡 -->
        <div class="tags-box">
          <tags />

      <div class="layer-page-leaf-container">
        <div class="avue-sidebar" v-show="validSidebar">
          <!-- 左侧导航栏 -->
          <logo />
          <sidebar />
          <div class="footer">
            <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]">
              <img :src="collapse" alt="" @click="setCollapse">
            </div>
          </div>
        </div>
        <search class="main-avue-view-container" v-show="isSearch"></search>
        <!-- 主体视图层 -->
        <div class="main-avue-view-container" v-show="!isSearch" v-if="isRefresh">
          <router-view #="{ Component }">
            <keep-alive :include="$store.getters.tagsKeep">
              <component :is="Component" />
            </keep-alive>
          </router-view>
      </div>


      <div class="layer-page-right-container">
        <div class="layer-content-top">
          <top ref="top" />

          <div class="tags-box">
            <tags />
          </div>
        </div>

        <div class="layer-content-bottom">
          <div class="avue-main">
            <div class="main-avue-view-container" v-show="!isSearch" v-if="isRefresh">
              <router-view #="{ Component }">
                <keep-alive :include="$store.getters.tagsKeep">
                  <component :is="Component" />
                </keep-alive>
              </router-view>
            </div>
          </div>
        </div>
      </div>
    </div>
@@ -29,16 +43,18 @@
  </div>
</template>
<script>
import index from '@/mixins/index';
import wechat from './wechat.vue';
import index from '@/mixins/index'
import wechat from './wechat.vue'
//import { validatenull } from 'utils/validate';
import { mapGetters } from 'vuex';
import tags from './tags.vue';
import search from './search.vue';
import logo from './logo.vue';
import top from './top/index.vue';
import sidebar from './sidebar/index.vue';
import GlobalWS from '@/page/index/GlobalWS.vue';
import { mapGetters } from 'vuex'
import tags from './tags.vue'
import search from './search.vue'
import logo from './logo.vue'
import top from './top/index.vue'
import sidebar from './sidebar/index.vue'
import GlobalWS from '@/page/index/GlobalWS.vue'

import collapse from '@/assets/images/pageLayout/collapse.png'

export default {
  mixins: [index],
@@ -52,10 +68,15 @@
    wechat,
  },
  name: 'index',
  provide() {
  data () {
    return {
      collapse: collapse
    }
  },
  provide () {
    return {
      index: this,
    };
    }
  },
  computed: {
    ...mapGetters([
@@ -67,27 +88,27 @@
      'menu',
      'setting',
    ]),
    validSidebar() {
    validSidebar () {
      return !(
        (this.$route.meta || {}).menu === false || (this.$route.query || {}).menu === 'false'
      );
      )
    },
  },
  props: [],
  methods: {
    //打开菜单
    openMenu(item = {}) {
    openMenu (item = {}) {
      this.$store.dispatch('GetMenu', item.id).then(data => {
        if (data.length !== 0) {
          this.$router.$avueRouter.formatRoutes(data, true);
          this.$router.$avueRouter.formatRoutes(data, true)

          // 获取url里面的redirect
          const redirect = decodeURIComponent(this.$route.query.redirect || '');
          const redirect = decodeURIComponent(this.$route.query.redirect || '')
          if (redirect) {
            console.log('redirect', redirect);
            const [path, queryString] = redirect.split('?');
            const query = queryString ? Object.fromEntries(new URLSearchParams(queryString)) : {};
            this.$router.push({ path, query });
            console.log('redirect', redirect)
            const [path, queryString] = redirect.split('?')
            const query = queryString ? Object.fromEntries(new URLSearchParams(queryString)) : {}
            this.$router.push({ path, query })
          }
        }
        //当点击顶部菜单后默认打开第一个菜单
@@ -111,10 +132,14 @@
            }, itemActive.meta)
          });
        }*/
      });
      })
    },

    setCollapse () {
      this.$store.commit('SET_COLLAPSE')
    },
  },
};
}
</script>

<style lang="scss" scoped>
@@ -130,9 +155,6 @@
// }

.tags-box {
  background: transparent;
  padding: 0 10px;
  --el-color-primary: rgba(20, 65, 255, 1);
  height: pxToVh(55);
  padding-bottom: 30px;
}
</style>

 applications/task-work-order/src/page/index/logo.vue

@@ -1,3 +1,13 @@
<!--
 * @Author       : yuan
 * @Date         : 2026-01-06 09:47:27
 * @LastEditors  : yuan
 * @LastEditTime : 2026-01-16 14:20:30
 * @FilePath     : \applications\task-work-order\src\page\index\logo.vue
 * @Description  : 
 * Copyright 2026 OBKoro1, All Rights Reserved. 
 * 2026-01-06 09:47:27
-->
<template>
  <div class="avue-logo">
    <transition name="fade">
@@ -10,7 +20,6 @@
      <template v-if="getScreen(!isCollapse)">
        <div class="fadeStyle">
          <img v-if="!hideMenuTopLogo" class="logoImg" src="/img/bg/mainLogo.png" alt=""/>
          <div class="titleName">综合管理平台</div>
          <!-- <span style="font-size: 20px;"  key="1">
              {{ this.parentDeptInfo.sysName }}
          </span> -->
@@ -45,18 +54,26 @@
  box-shadow: none;
}
.avue-logo_subtitle{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  
  .logoImg{
    width: 80%;
    width: 40px;
    height: 40px;
  }
}

.fadeStyle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;

  .logoImg{
    width: 50px;
    height: 20px;
    width: 40px;
    height: 40px;
  }
  .titleName{
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;

 applications/task-work-order/src/page/index/sidebar/index.vue

@@ -39,23 +39,4 @@
};
</script>
<style lang="scss" scoped>
.el-menu{
  :deep(){
    .el-menu-item.is-active{
      background: linear-gradient( 90deg, rgba(179,194,255,0.02) 0%, rgba(20,65,255,0.09) 100%) !important;
      border-radius: 16px 16px 16px 16px;
      i,span{
        color: rgba(20, 65, 255, 1) !important;
      }
    }
    .el-sub-menu i{
      font-size: 16px;
    }
    .el-menu-item i{
      font-size: 16px;
    }

  }
}

</style>

 applications/task-work-order/src/page/index/tags.vue

@@ -20,22 +20,6 @@
          </template>
        </el-tab-pane>
      </el-tabs>
      <el-dropdown class="avue-tags__menu">
        <el-button type="primary" style="background: #409eff;border-color: #409eff">
          {{ $t('tagsView.menu') }}
          <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="openSearch">{{ $t('tagsView.search') }}</el-dropdown-item>
            <el-dropdown-item @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}
            </el-dropdown-item>
            <el-dropdown-item @click="closeAllTags">{{ $t('tagsView.closeAll') }}</el-dropdown-item>
            <el-dropdown-item @click="clearCacheTags">{{ $t('tagsView.clearCache') }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
@@ -169,6 +153,5 @@

<style lang="scss" scoped>
.avue-tags{
  border-radius: 4px;
}
</style>

 applications/task-work-order/src/page/index/top/index.vue

@@ -1,40 +1,28 @@
<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="setting.collapse && !isHorizontal">
        <i class="icon-navicon" @click="setCollapse"></i>
      </div>
      任务工单管理子系统
    </div>
    <div class="top-bar__title">
<!--<top-menu ref="topMenu" v-if="setting.menu"></top-menu>-->
      <top-search class="top-bar__item" v-if="setting.search"></top-search>
    </div>
    
    <div class="top-bar__right">
      <div class="icon-box">
        <top-lock v-if="setting.lock"/>
        <top-qna />
        <top-full v-if="setting.fullscreen" title="全屏"/>
        <img class="gateway" @click="jumpMH" src="@/assets/images/mh.svg" alt="进入门户" title="进入门户" width="20" height="20">
      </div>
      <div class="top-user">
        <img class="top-bar__img" :src="userInfo.avatar "  alt=""/>
        <div class="icon-box">
         <img class="gateway" @click="jumpMH" src="@/assets/images/mh.png" alt="进入门户" title="进入门户">
        </div>

        <el-dropdown>
          <span class="el-dropdown-link">
            {{ userInfo.real_name }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
            <img class="top-bar__img" :src="userInfo.avatar" alt="" />
          </span>

          <template #dropdown>
            <el-dropdown-menu>
<!--              <el-dropdown-item>
              <!--              <el-dropdown-item>
                <router-link to="/">{{ $t('navbar.dashboard') }}</router-link>
              </el-dropdown-item>-->
              <el-dropdown-item>
              <!-- <el-dropdown-item>
                <router-link to="/info/index">{{ $t('navbar.userinfo') }}</router-link>
              </el-dropdown-item>
              </el-dropdown-item> -->
              <el-dropdown-item @click="logout" divided>{{ $t('navbar.logOut') }}
              </el-dropdown-item>
            </el-dropdown-menu>
@@ -92,9 +80,6 @@
    ]),
  },
  methods: {
    setCollapse () {
      this.$store.commit('SET_COLLAPSE')
    },
    logout () {
      this.$confirm(this.$t('logoutTip'), this.$t('提示'), {
        confirmButtonText: this.$t('submitText'),
@@ -121,10 +106,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 50px;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  height: 80px;
}

.top-bar__left {
@@ -143,16 +125,20 @@
  display: flex !important;
  align-items: center;
  height: 100%;
  pointer-events: auto;
  box-sizing: border-box;

  .icon-box{
  .icon-box {
    margin-right: 62px;
    display: flex;
    align-items: center;
    gap: 0 20px;
    .gateway{
      width: 25px;
      height: 25px;

    .gateway {
      width: 32px;
      height: 32px;
    }
    >*{

    >* {
      cursor: pointer;
    }
  }
@@ -169,10 +155,9 @@
}

.top-bar__img {
  width: 32px;
  height: 32px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
}

.el-dropdown-link {

 applications/task-work-order/src/page/index/top/top-search.vue

@@ -1,6 +1,6 @@
<template>
  <el-autocomplete
    class="top-search ztzf-top-search"
    class="top-search work-top-search"
    popper-class="my-autocomplete"
    v-model="value"
    :fetch-suggestions="querySearch"
@@ -88,7 +88,7 @@


<style lang="scss">
.ztzf-top-search{
.work-top-search{
  display: flex !important;
  width: 150px;
  align-items: center;

 applications/task-work-order/src/styles/common.scss

@@ -8,6 +8,8 @@
// 地图编辑样式
@import './mapEdit.scss';

@import './common/cockpit.scss';

a {
  text-decoration: none;
  color: #333;
@@ -26,10 +28,11 @@
}

.avue-layout {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  background: url("@/assets/images/layoutBg.png") no-repeat center / 100% 100%;
  background: #EBEEF4;
  overflow: hidden;

  &--horizontal {
@@ -56,21 +59,95 @@
      width: $sidebar_width
    }
  }

  > .layer-page-leaf-container {
    width: 179px;
    height: 100%;
    box-sizing: border-box;

    .avue-sidebar {
      display: flex;
      flex-direction: column;

      .avue-logo {
        height: 76px;
      }

      .footer {
        height: 102px;
        display: flex;
        align-items: center;
        justify-content: center;

        .avue-breadcrumb {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 36px;
          height: 36px;
          cursor: pointer;
        }
      }

      .el-menu-item,
      .el-sub-menu__title {
        height: 56px !important;
        line-height: 56px !important;
      }
    }
  }

  > .layer-page-right-container {
    padding: 0 30px;
    padding-bottom: 30px;
    display: flex;
    flex-direction: column;
    width: 0;
    flex: 1;
    height: 100%;
    box-sizing: border-box;

    .layer-content-bottom {
      width: 100%;
      height: 0;
      flex: 1;
    }
  }
}

.avue-contail {
  width: 100%;
  height: 100%;
  background: #f0f2f5;
  background-size: 100%;
  background-repeat: no-repeat;
}

.avue--collapse {
  
  .avue-layout {
    > .layer-page-leaf-container {
      width: 53px;
      height: 100%;

  .avue-sidebar,
  .avue-logo {
    width: $sidebar_collapse;
      .avue-sidebar {
        width: 100%;

        .el-menu--collapse {
          width: 100%;

          .el-sub-menu__title {
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            i {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
}

@@ -122,7 +199,7 @@
  bottom: 0;
}

.ztzf-cesium {
.work-cesium {
  .cesium-viewer {
    height: 100%;
    overflow: hidden;
@@ -191,7 +268,7 @@
  }
}

.ztzf-cesium {
.work-cesium {
  .cesium-viewer {
    height: 100%;
    overflow: hidden;

 applications/task-work-order/src/styles/common/cockpit.scss

New file
@@ -0,0 +1,1590 @@
/* 下拉菜单整体样式 */
.work-custom-dropdown {
    background: #1A1A2A !important;
    border-radius: 8px;
    border: none !important;

    .el-popper__arrow::before {
        background: #1A1A2A !important;
        border: 1px solid #1A1A2A !important;
    }

    /* 菜单项样式 */
    .el-dropdown-menu {
        background: transparent !important;

        .el-dropdown-menu__item {
            color: #fff !important;
            /* 文字颜色 */

            a {
                color: #fff !important;
                /* 文字颜色 */
            }

            &:hover {
                background: none !important;
            }

            &.is-disabled {
                color: #8f9bb3 !important;
            }
        }

        .el-dropdown-menu__item--divided {
            display: none;
        }
    }
}

// 数据驾驶舱专属
.work-data-cockpit-search-input {
    .el-input__wrapper {
        padding: 0 8px !important;
        background: #DDE2ED;
        box-shadow: none !important;
        border: none;

        .el-input__inner {
            color: #383874;

            &::placeholder {
                color: #A1A3D4;
            }
        }
    }

    &.is-disabled {
        .el-input__wrapper {
            background-color: #DDE2ED;
        }
    }
}

.work-data-cockpit-date-picker {
    box-shadow: none !important;
    background: #DDE2ED;
    border: none;
    border-radius: 5px;
    box-sizing: border-box !important;

    .el-input__wrapper {
        box-shadow: none !important;
        background-color: transparent !important;

        &.is-focus {
            box-shadow: none !important;
        }
    }

    .el-range-input {
        color: #fff;

        &::placeholder {
            color: #A1A3D4;
        }
    }

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

.work-data-cockpit-date-picker-popper {
    background: #DDE2ED !important;
    border: none !important;
    border-radius: 0px 0px 8px 8px;

    .el-date-picker__prev-btn,
    .el-date-picker__next-btn {
        .el-icon {
            color: #fff !important;
        }
    }

    .el-date-picker__header-label {
        color: #fff !important;
    }

    .el-picker-panel {
        .el-picker-panel__body-wrapper {
            .el-picker-panel__body {
                background: #DDE2ED !important;
                color: #fff !important;

                .el-date-range-picker__time-header {
                    .el-input__wrapper {
                        box-shadow: none;
                        background: #DDE2ED !important;
                    }
                }

                .el-date-picker__time-header {
                    border: none;

                    .el-date-picker__editor-wrap {
                        .el-time-panel {
                            background: #DDE2ED !important;
                            border-radius: 0px 0px 8px 8px;
                            border: 1px solid !important;
                            border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1 !important;

                            // 将 time-picker-popper 的样式移到这里
                            .el-time-panel__header {
                                background: #DDE2ED !important;
                                color: #ffffff !important;
                                border-bottom: 1px solid rgba(71, 157, 255, 0.3) !important;
                            }

                            .el-time-panel__content {
                                .el-time-spinner__item {
                                    color: #e6e6e6 !important;

                                    &:hover {
                                        background: rgba(71, 157, 255, 0.3) !important;
                                    }

                                    &.active {
                                        color: #479dff !important;
                                        font-weight: bold;
                                    }
                                }
                            }

                            .el-time-panel__footer {
                                background: #DDE2ED !important;
                                border-top: 1px solid rgba(71, 157, 255, 0.3) !important;

                                .el-button {
                                    color: #fff !important;

                                    &:hover {
                                        color: #479dff !important;
                                    }
                                }

                                .el-time-panel__btn.cancel {
                                    color: #fff !important;

                                    &:hover {
                                        color: #fff !important;
                                    }
                                }
                            }
                        }
                    }
                }

                .el-picker-panel__content {
                    .el-date-range-picker__header {
                        .el-picker-panel__icon-btn {
                            color: #fff !important;

                            &:hover {
                                color: var(--el-color-primary) !important;
                            }

                            .el-icon {
                                &::before {
                                    color: inherit !important;
                                }
                            }
                        }

                        &>div {
                            span {
                                color: #fff !important;
                            }
                        }
                    }

                    .el-date-table {
                        th {
                            color: #fff !important;
                        }

                        td.disabled div {
                            background-color: #00193b !important;
                            color: #505050 !important;
                            cursor: not-allowed;
                        }

                        // td:hover,
                        // td.current:not(.disabled) {
                        //     background: rgba(60, 121, 202) !important;
                        //     color: white !important;
                        // }

                        td.start-date span,
                        td.start-date span,
                        td.end-date span {
                            background-color: #DDE2ED !important;
                        }

                        td.in-range div,
                        td.in-range div:hover,
                        &.is-week-mode .el-date-table__row.current div,
                        &.is-week-mode .el-date-table__row:hover div {
                            background-color: rgba(60, 121, 202) !important;
                        }
                    }
                }
            }
        }
    }

    .el-popper__arrow {
        &::before {
            background: #DDE2ED !important;
            border: 1px solid #DDE2ED !important;
            box-sizing: border-box;
        }
    }

    .el-picker-panel__sidebar {
        background: #DDE2ED;
        color: #fff;

        .el-picker-panel__shortcut {
            color: #ffffff;
        }
    }

    .el-picker-panel__body {
        .el-input.is-disabled .el-input__wrapper {
            background: #DDE2ED;
            box-shadow: 0 0 0 0.1rem#409eff;
            color: #fff;

            .el-input__inner {
                color: #fff !important;
            }
        }

        .el-button.is-disabled,
        .el-button.is-disabled:hover {
            background: #DDE2ED;
        }

        .el-input__wrapper {
            background: #DDE2ED;
            box-shadow: 0 0 0 0.1rem#409eff;
            color: #fff;

            .el-input__inner {
                color: #fff !important;
            }
        }
    }

    .el-picker-panel__footer {
        background: #DDE2ED;
        color: #fff;
        border-top: none;

        .el-button--small {
            box-shadow: 0 0 0 0.1rem#409eff;
            background-color: #DDE2ED;
            color: #fff;
            border: none;

            &:hover {
                background-color: #DDE2ED;
                color: #fff;
                border-color: #409eff;
            }
        }
    }
}

.work-data-cockpit-select {
    .el-select__input {
        color: #8ac3fd !important;
    }

    .el-select__wrapper {
        padding: 0 8px;
        background: #DDE2ED;
        box-shadow: none !important;
        border: none;
        width: 100%;
    }

    .el-select__placeholder {
        &.is-transparent {
            color: #A1A3D4 !important;
        }

        &.el-select__selected-item {
            color: #383874;
        }
    }

    .el-select {
        --el-select-border-color-hover: rgb(0, 162, 255) !important;
    }

    .el-input {
        --el-border-color: rgb(0, 162, 255);
    }

    .el-select .el-input__wrapper {
        background-color: #DDE2ED !important;
    }

    .el-input__wrapper {
        --el-input-text-color: #DDE2ED !important;
    }
}

.work-select-popper.el-select__popper {
    border: none;
    background: #DDE2ED !important;

    .el-select-dropdown {
        overflow-x: hidden !important;
        border: none;

        .el-scrollbar {
            .el-select-dropdown__wrap {
                overflow-x: hidden !important;
                border: none;

                .el-select-dropdown__list {
                    padding: 0 !important;

                    .el-select-dropdown__item {
                        background: transparent !important;
                        color: #383874;

                        &.hover {
                            background-color: rgba(0, 120, 233, 0.63) !important;
                            color: #383874;
                        }

                        &.selected {
                            color: #8ac3fd !important;
                            font-weight: 700;
                        }
                    }
                }
            }
        }

        .el-select-dropdown__empty {
            background: #DDE2ED;
            border-radius: 0px 0px 8px 8px;
        }
    }

    .el-popper__arrow::before {
        background: #DDE2ED !important;
        border: 1px solid #DDE2ED !important;
    }
}

.work-select-popper.el-cascader__dropdown {
    border: none;
    background: #DDE2ED !important;

    .el-popper__arrow::before {
        background: #DDE2ED !important;
        border: 1px solid #DDE2ED !important;
    }
}

// 树形选择
.work-data-cockpit-tree-select-popper {
    background: #DDE2ED !important;
    border: none !important;

    .el-popper__arrow::before {
        background: #DDE2ED !important;
        border: 1px solid #DDE2ED !important;
    }

    .el-tree {
        background: transparent !important;
        color: #fff !important;

        .el-tree-node__content:hover {
            background: none !important;
        }

        .el-tree-node__content:hover {
            background: none !important;
        }

        .el-tree-node.is-current>.el-tree-node__content {
            color: #479dff !important;
        }
    }

    .el-select-dropdown__item {
        background: none !important;
        color: #383874 !important;

        input {
            color: #383874 !important;

            &::placeholder {
                color: #383874 !important;
            }
        }
    }

    .el-tree {
        --el-tree-node-hover-bg-color: none !important;
        color: #fff !important;

        .el-checkbox__inner {
            background: none !important;
            border: 1px solid #3194ef !important;
        }
    }

    .el-select-dropdown__item.is-selected {
        color: #383874 !important;
    }

    .el-popper.is-light {
        background: #012a50 !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 4px !important;
        margin-top: 2px;

        .el-select__selection {
            max-width: 240px !important;

            .el-select__selected-item {
                .el-tag {
                    background: #0b1d38 !important;
                    color: #383874;
                }
            }
        }

        .el-popper__arrow::before {
            background: #012a50 !important;
            border: 1px solid #012a50 !important;
        }
    }
}

.work-data-cockpit-dialog {
    padding: 20px;
    display: flex;
    flex-direction: column;
    width: 1222px;
    height: 835px;
    background: #1A1A2A;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #2E2E46;
    box-sizing: border-box;

    .el-dialog__header {
        padding-bottom: 30px;
        height: auto;

        .el-dialog__title {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .el-dialog__headerbtn {
            .el-icon.el-dialog__close {
                color: #fff;
            }
        }
    }

    .el-dialog__body {
        height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}

.el-form.work-dialog-history-search {
    .el-form-item {
        margin-left: 20px;
    }

    .el-form-item__label {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #C5C9D6;
        font-style: normal;
        text-transform: none;
    }

    .work-data-cockpit-search-input {
        .el-input__wrapper {
            background: #DDE2ED;
        }

        &.is-disabled {
            .el-input__wrapper {
                background-color: #DDE2ED;
            }
        }
    }

    .work-data-cockpit-date-picker {
        background: #DDE2ED;
    }

    .work-data-cockpit-date-picker-popper {
        background: #DDE2ED !important;

        .el-picker-panel {
            .el-picker-panel__body-wrapper {
                .el-picker-panel__body {
                    background: #DDE2ED !important;

                    .el-date-picker__time-header {

                        .el-date-picker__editor-wrap {
                            .el-time-panel {
                                background: #DDE2ED !important;

                                // 将 time-picker-popper 的样式移到这里
                                .el-time-panel__header {
                                    background: #DDE2ED !important;
                                }
                            }
                        }
                    }
                }
            }
        }

        .el-popper__arrow {
            &::before {
                background: #DDE2ED !important;
                border: 1px solid #DDE2ED !important;
                box-sizing: border-box;
            }
        }
    }

    .history-search-actions {
        .el-button {
            width: 96px;
            background: transparent !important;
            border-radius: 4px 4px 4px 4px;
            border: 1px solid rgba(255, 255, 255, 0.3);

            .el-icon {
                font-size: 16px;
                color: #fff;
            }
        }
    }

    .el-input {
        width: 160px;
    }

    .el-date-editor {
        width: 226px;
    }

    .el-select {
        .el-select__wrapper {
            width: 160px;
        }
    }
}

.work-page-history-search {
    .el-form-item__label {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #383874;
        font-style: normal;
        text-transform: none;
    }

    .work-data-cockpit-select {
        .el-select__wrapper {
            background: #DDE2ED;
        }
    }

    .work-data-cockpit-search-input {
        .el-input__wrapper {
            background: #DDE2ED;
        }

        &.is-disabled {
            .el-input__wrapper {
                background-color: #DDE2ED;
            }
        }
    }

    .work-data-cockpit-date-picker {
        background: #DDE2ED;
    }

    .work-data-cockpit-date-picker-popper {
        background: #DDE2ED !important;

        .el-picker-panel {
            .el-picker-panel__body-wrapper {
                .el-picker-panel__body {
                    background: #DDE2ED !important;

                    .el-date-picker__time-header {

                        .el-date-picker__editor-wrap {
                            .el-time-panel {
                                background: #DDE2ED !important;

                                // 将 time-picker-popper 的样式移到这里
                                .el-time-panel__header {
                                    background: #DDE2ED !important;
                                }
                            }
                        }
                    }
                }
            }
        }

        .el-popper__arrow {
            &::before {
                background: #DDE2ED !important;
                border: 1px solid #DDE2ED !important;
                box-sizing: border-box;
            }
        }
    }

    .history-search-actions {
        .el-button {
            width: 80px;
            background: #FFFFFF !important;
            border: none !important;
            border-radius: 4px 4px 4px 4px;

            .el-icon {
                font-size: 16px;
                color: #383874;
            }
        }

        .search-btn {
            background: #383874 !important;

            .el-icon {
                color: #fff;
            }
        }
    }
}

.work-dialog-history-search,
.work-page-history-search {
    padding-bottom: 20px;
    display: flex;

    .el-form-item {
        margin-left: 30px;
        margin-bottom: 0;
        padding: 0;
        display: flex;
        align-items: center;

        &:first-child {
            margin-left: 0;
        }
    }

    .el-form-item__label {
        margin-right: 12px;
        padding: 0 !important;
        height: 36px;
        line-height: 36px;
    }

    .el-input {
        width: 200px;
        height: 36px;
    }

    .el-select {
        .el-select__wrapper {
            width: 200px;
            height: 36px;
        }
    }

    .el-date-editor {
        width: 240px;
        height: 36px;
    }

    .el-button {
        width: 96px;
        height: 36px;
    }

    .history-search-actions {
        .el-button {
            margin-left: 20px;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

.work-table-toolbar {
    padding-bottom: 20px;

    .el-button {
        min-width: 88px;
        border: none;
    }

    .el-button.is-disabled,
    .el-button.is-disabled:hover {
        background: #4C34FF;
        border: none;
    }
}

.work-table-container {
    padding: 12px 20px 30px 20px;
    height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;

    background: #FFFFFF;
    box-shadow: 0px 8px 16px 0px rgba(128, 122, 139, 0.08);
    border-radius: 8px 8px 8px 8px;


    .work-table-content {
        height: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .work-table-content-bg {}
}

.work-data-cockpit-table {
    height: 0;
    flex: 1;
    background: transparent !important;

    .el-table--border .el-table__inner-wrapper:after,
    .el-table--border:after,
    .el-table--border:before,
    .el-table__inner-wrapper:before {
        height: 0;
    }

    tr {
        background: transparent !important;
    }

    th.el-table__cell {
        height: 40px;
        border-bottom: 1px solid #DBDFF1 !important;

        .cell {
            padding: 0;
            padding-left: 16px;

            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #9292C1;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    td.el-table__cell {
        padding: 9px 0;
        height: 56px;

        .cell {
            padding: 0;
            padding-left: 16px;

            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 14px;
            color: #383874;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    td.operation-btns .cell {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        /* 按钮间距（推荐） */
        white-space: nowrap;
        /* 双保险 */

        a {
            min-width: 28px;
            color: #0075FF;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    th.el-table__cell:not(.fixed-column),
    td.el-table__cell:not(.fixed-column) {
        background: transparent !important;
    }

    .fixed-column {
        background-color: #1A1A2A !important;
    }
}

.work-table-pagination {
    padding-top: 30px;
    display: flex;
    justify-content: flex-end;

    .el-pagination__total {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #798492;
        font-style: normal;
        text-transform: none;
    }

    .btn-prev,
    .btn-next {
        background: transparent !important;

        .el-icon {
            color: #C9CDD4;
        }
    }

    .el-pager {
        li {
            margin-left: 8px;
            font-family: Nunito Sans, Nunito Sans;
            font-weight: 600;
            font-size: 14px;
            color: #4E5969;
            font-style: normal;
            text-transform: none;
            background: transparent;

            &:first-child {
                margin-left: 0;
            }

            &.is-active {
                font-family: Nunito Sans, Nunito Sans;
                font-weight: 600;
                font-size: 14px;
                color: #1C4AE5;
                font-style: normal;
                text-transform: none;
                background: rgba(28, 74, 229, 0.1);
            }
        }
    }

    .el-select {
        .el-select__wrapper {
            .el-select__placeholder {
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 14px;
                color: #798492;
                font-style: normal;
                text-transform: none;
            }

            background: #F2F3F5;
            border: none;
            box-shadow: none;
        }
    }
}

.work-page-view-dialog {
    padding: 30px;
    display: flex;
    flex-direction: column;
    width: 770px;

    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;

    .el-dialog__header {
        span {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #383874;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }

        .el-icon {
            color: #383874;
        }
    }

    .el-dialog__body {
        height: 0;
        flex: 1;

        .detail-container {
            padding: 0 10px;

            .detail-title {
                margin-bottom: 30px;
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 500;
                font-size: 18px;
                color: #FFFFFF;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .el-row {
                .el-col {
                    margin-bottom: 20px;
                    display: flex;
                    align-items: center;

                    .label {
                        width: 88px;
                        font-family: Source Han Sans CN, Source Han Sans CN;
                        font-weight: 500;
                        font-size: 14px;
                        color: #D4D5D7;
                        line-height: 22px;
                        text-align: right;
                        font-style: normal;
                        text-transform: none;
                    }

                    .val {
                        margin-left: 12px;
                        font-family: Source Han Sans CN, Source Han Sans CN;
                        font-weight: 400;
                        font-size: 14px;
                        color: #9E9EBA;
                        line-height: 22px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }
                }
            }


            .work-table-container {
                height: 360px;

                .work-table-pagination {
                    justify-content: center;
                }
            }
        }

        .dialog-form {
            .el-form-item {
                display: flex;
                align-items: center;

                .el-form-item__label {
                    display: flex;
                    align-items: center;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 500;
                    font-size: 14px;
                    color: #4E5969;
                    line-height: 22px;
                    text-align: right;
                    font-style: normal;
                    text-transform: none;
                }

                .el-form-item__content {
                    display: flex;
                    align-items: center;

                    .el-input,
                    .el-input-number {
                        width: 0;
                        flex: 1;
                    }

                    .el-cascader {
                        width: 0;
                        flex: 1;
                        display: flex;
                        align-items: center;
                        border: none;

                        .el-input__wrapper {
                            box-shadow: none !important;
                        }
                    }

                    .el-textarea {

                        .el-textarea__inner {
                            color: #fff;
                            background: #DDE2ED !important;
                            border: none;
                            box-shadow: none;
                        }
                    }

                    .el-button {
                        color: #fff;
                        background: #DDE2ED !important;
                        border: none;
                        box-shadow: none;
                    }

                    .work-data-cockpit-date-picker {
                        background: #DDE2ED;
                    }

                    .work-data-cockpit-date-picker-popper {
                        background: #DDE2ED !important;

                        .el-picker-panel {
                            .el-picker-panel__body-wrapper {
                                .el-picker-panel__body {
                                    background: #DDE2ED !important;

                                    .el-date-picker__time-header {

                                        .el-date-picker__editor-wrap {
                                            .el-time-panel {
                                                background: #DDE2ED !important;

                                                // 将 time-picker-popper 的样式移到这里
                                                .el-time-panel__header {
                                                    background: #DDE2ED !important;
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .el-popper__arrow {
                            &::before {
                                background: #DDE2ED !important;
                                border: 1px solid #DDE2ED !important;
                                box-sizing: border-box;
                            }
                        }
                    }
                }

                .el-select {
                    .el-select__wrapper {
                        background: #F2F3F5;

                        .el-select__suffix {
                            .el-icon {
                                color : #4E5969;
                            }
                        }
                    }

                    .el-select__placeholder {
                        &.is-transparent {
                            color: #86909C !important;
                        }

                        &.el-select__selected-item {
                            color: #383874;
                        }
                    }
                }

                .el-input {
                    .el-input__wrapper {
                        padding: 0 8px !important;
                        background: #F2F3F5;
                        box-shadow: none !important;
                        border: none;

                        .el-input__inner {
                            color: #383874;

                            &::placeholder {
                                color: #86909C;
                            }
                        }
                    }

                    &.is-disabled {
                        .el-input__wrapper {
                            background-color: #F2F3F5;
                        }
                    }
                }
            }
        }
    }

    .el-dialog__footer {
        display: flex;
        justify-content: center;

        .el-button {
            margin-left: 16px;
            width: 96px;
            height: 36px;
            color: #161B2C;

            &:first-child {
                margin-left: 0;
            }
        }

        .save-btn {
            color: #FFFFFF;
        }
    }
}

.work-page-view-message-box {
    background: #1A1A2A;
    border-radius: 6px;
    border: 1px solid #2E2E46;

    .el-message-box__header {
        .el-message-box__title {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: bold;
            font-size: 18px;
            color: #FFFFFF;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }

    .el-message-box__content {
        color: #D4D5D7;
    }

    .el-message-box__btns {
        display: flex;
        justify-content: center;

        .el-button {
            margin-left: 16px;
            width: 96px;
            height: 36px;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

.work-message-box-confirm {
    background: #284FE3 !important;
    border-color: #284FE3 !important;
}

.work-message-box-cancel {
    background: #2B2B4C !important;
    border-color: #2B2B4C !important;
    color: #FFFFFF !important;
}

.work-page-map-view-dialog {
    padding: 30px;
    display: flex;
    flex-direction: column;
    width: 80%;
    height: 812px;
    background: #1A1A2A;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #2E2E46;

    .el-dialog__header,
    .el-dialog__footer {
        margin: 0;
        padding: 0;
    }

    .el-dialog__footer {
        .el-button {
            margin-top: 30px;
        }
    }

    .el-dialog__body {
        display: flex;
        flex-direction: column;
        height: 0;
        flex: 1;

        .dialog-container {
            display: flex;
            height: 0;
            flex: 1;

            .left-container {
                width: 0;
                flex: 1;
                height: 100%;

                .leftMap {
                    width: 100%;
                    height: 100%;
                }
            }

            .right-container {
                display: flex;
                flex-direction: column;
                width: 344px;
                height: 100%;

                .header {
                    padding: 0 16px;
                    padding-bottom: 16px;
                    font-family: Source Han Sans CN, Source Han Sans CN;
                    font-weight: 400;
                    font-size: 18px;
                    color: #FFFFFF;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                }

                .dialog-container {
                    padding: 0 16px;
                    height: 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .detail-title {
                        margin-bottom: 30px;
                        font-family: Source Han Sans CN, Source Han Sans CN;
                        font-weight: 500;
                        font-size: 18px;
                        color: #FFFFFF;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;
                    }

                    .el-row {
                        .el-col {
                            margin-bottom: 20px;
                            display: flex;
                            align-items: center;

                            .label {
                                width: 96px;
                                font-family: Source Han Sans CN, Source Han Sans CN;
                                font-weight: 500;
                                font-size: 14px;
                                color: #D4D5D7;
                                line-height: 22px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                            .val {
                                width: 0;
                                flex: 1;
                                margin-left: 12px;
                                font-family: Source Han Sans CN, Source Han Sans CN;
                                font-weight: 400;
                                font-size: 14px;
                                color: #9E9EBA;
                                text-align: left;
                                font-style: normal;
                                text-transform: none;
                            }
                        }
                    }


                    .work-table-container {
                        margin-top: 0;
                        margin-bottom: 20px;

                        .work-table-pagination {
                            justify-content: center;
                        }
                    }
                }

                .dialog-form {
                    padding-left: 16px;
                    height: 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;

                    .el-form-item {
                        display: flex;
                        align-items: center;

                        .el-form-item__label {
                            display: flex;
                            align-items: center;
                            font-family: Source Han Sans CN, Source Han Sans CN;
                            font-weight: 500;
                            font-size: 14px;
                            color: #383874;
                            line-height: 22px;
                            text-align: right;
                            font-style: normal;
                            text-transform: none;
                        }

                        .el-form-item__content {
                            display: flex;
                            align-items: center;

                            .el-input,
                            .el-input-number {
                                width: 0;
                                flex: 1;
                            }

                            .el-textarea {

                                .el-textarea__inner {
                                    color: #fff;
                                    background: #DDE2ED !important;
                                    border: none;
                                    box-shadow: none;
                                }
                            }

                            .el-button {
                                color: #fff;
                                background: #DDE2ED !important;
                                border: none;
                                box-shadow: none;
                            }

                            >div.val {
                                color: #fff;
                            }

                            .work-data-cockpit-date-picker {
                                background: #DDE2ED;
                            }

                            .work-data-cockpit-date-picker-popper {
                                background: #DDE2ED !important;

                                .el-picker-panel {
                                    .el-picker-panel__body-wrapper {
                                        .el-picker-panel__body {
                                            background: #DDE2ED !important;

                                            .el-date-picker__time-header {

                                                .el-date-picker__editor-wrap {
                                                    .el-time-panel {
                                                        background: #DDE2ED !important;

                                                        // 将 time-picker-popper 的样式移到这里
                                                        .el-time-panel__header {
                                                            background: #DDE2ED !important;
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                .el-popper__arrow {
                                    &::before {
                                        background: #DDE2ED !important;
                                        border: 1px solid #DDE2ED !important;
                                        box-sizing: border-box;
                                    }
                                }
                            }
                        }

                        .el-input {
                            .el-input__wrapper {
                                background: #DDE2ED !important;

                                .el-input__inner {
                                    color: #383874;
                                }
                            }
                        }
                    }

                    .search-table-container {
                        height: 0;
                        flex: 1;
                        display: flex;
                        flex-direction: column;

                        .search-box {
                            display: flex;
                            margin-bottom: 18px;

                            .label {
                                display: flex;
                                align-items: center;
                                justify-content: flex-end;

                                padding-right: 12px;
                                width: 96px;

                                font-family: Source Han Sans CN, Source Han Sans CN;
                                font-weight: 500;
                                font-size: 14px;
                                color: #D4D5D7;
                                font-style: normal;
                                text-transform: none;

                                box-sizing: border-box;
                            }

                            .el-input {
                                width: 0;
                                flex: 1;

                                .el-input__wrapper {
                                    background: #DDE2ED !important;

                                    .el-input__inner {
                                        color: #383874;
                                    }
                                }
                            }
                        }

                        .el-form-item {
                            height: 0;
                            flex: 1;
                            display: flex;
                            flex-direction: column;

                            .el-form-item__content {
                                width: 100%;
                                height: 0;
                                flex: 1;
                                display: flex;
                                flex-direction: column;

                                .el-table {
                                    height: 0;
                                    flex: 1;
                                }
                            }
                        }
                    }
                }

                .footer {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .el-button {
                        margin-left: 16px;
                        width: 96px;
                        height: 36px;

                        &:first-child {
                            margin-left: 0;
                        }
                    }
                }
            }
        }
    }
}

.work-dialog-select-popper.el-select__popper {
    border: none;
    background: #F2F3F5 !important;

    .el-select-dropdown {
        .el-scrollbar {
            .el-select-dropdown__wrap {
                .el-select-dropdown__list {
                    .el-select-dropdown__item {
                        color: #4E5969;

                        &.hover {
                            background-color: rgba(0, 120, 233, 0.63) !important;
                            color: #383874;
                        }

                        &.selected {
                            color: #8ac3fd !important;
                            font-weight: 700;
                        }
                    }
                }
            }
        }

        .el-select-dropdown__empty {
            background: #F2F3F5;
            border-radius: 0px 0px 8px 8px;
        }
    }

    .el-popper__arrow::before {
        background: #F2F3F5 !important;
        border: 1px solid #F2F3F5 !important;
    }
}

 applications/task-work-order/src/styles/element-ui.scss

@@ -1,736 +1,111 @@
.el-card.is-always-shadow {
    box-shadow: none;
    border: none !important;
  }
  
  .el-menu {
    border-right: none;
  }
  
  .el-message__icon,
  .el-message__content {
    display: inline-block;
  }
  
  .el-date-editor .el-range-input,
  .el-date-editor .el-range-separator {
    height: auto;
    overflow: hidden;
  }
  
  .el-dialog__wrapper {
    z-index: 2048;
  }
  
  
  .el-col {
    margin-bottom: 8px;
  }
  
  .el-main {
    padding: 0 !important;
  }
  
  .el-dropdown-menu__item--divided:before,
  .el-menu,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover {
    background-color: transparent;
  }
  
  
  .el-dropdown-menu__item--divided:before,
  .el-menu,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
  .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
  .el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover {
    background-color: transparent !important;
  }
  
  .el-collapse-item__header {
    height: auto;
    overflow: hidden;
  }
  
  .el-button.is-text:not(.is-disabled):active {
    background-color: transparent;
  }
  
  .el-button.is-text:not(.is-disabled):focus,
  .el-button.is-text:not(.is-disabled):hover {
    background-color: transparent;
  }
  
  .avue-icon i,
  .avue-icon svg {
    line-height: 20px;
  }
  
  .avue--detail .el-form-item {
    background-color: #fafafa;
  }
  
  .showFullScreenDlg {
    display: flex;
    justify-content: space-between;
  
    .el-dialog {
      position: relative;
      padding: 0;
      overflow: hidden;
  
      .el-dialog__body {
        width: 100%;
        height: 100%;
  
        iframe {
          width: 100%;
          height: 100%;
        }
      }
  
      .el-dialog__header {
        height: 0;
        overflow: hidden;
        padding: 0;
  
        .el-dialog__headerbtn {
          position: absolute;
          left: 0;
          //top: 14px;
  
          .el-dialog__close {
            color: #fff;
            font-size: 35px;
            z-index: 99;
          }
        }
      }
    }
  }
  
  .ztzf-drawer-body-basic-container {
    .el-drawer__header {
      margin-bottom: 0;
    }
    .el-drawer__body {
      display: flex;
      flex-direction: column;
  
    }
  
  }
  .ztzf-el-card__body {
  
     .el-card__body {
      .avue-form{
      padding: 0;}}
  }
  .ztzf-public-general-avue-crud {
    .el-table {
      tr {
        min-height: 30px !important;
        line-height: 30px !important;
        box-sizing: border-box !important;
      }
  
      tr th,
      tr td {
        padding: 6px 0 !important;
        min-height: 30px !important;
        line-height: 30px !important;
        box-sizing: border-box !important;
  
        div.cell {
          min-height: 30px !important;
          line-height: 30px !important;
        }
      }
    }
  }
  .ztzf-layer-input {
      .el-input__wrapper {
          padding: 0 8px !important;
          // background: #2D2D2D;
      background-color: transparent !important;
          box-shadow: none !important;
          border: 1px solid #fff;
	
          .el-input__inner {
              color: #ffffff;
  
              &::placeholder {
          color: rgba(255,255,255,0.37);
              }
          }
      }
  
      &.is-disabled {
          .el-input__wrapper {
              background-color: #012a50;
          }
      }
  }
  .ztzf-button {
    background-color: transparent !important;
    color: #fff !important;
  }
  .ztzf-el-tree {
    background-color: transparent !important;
    --el-tree-node-hover-bg-color:transparent !important;
    color: #fff !important;
  }
  .ztzf-layer-search {
    color: #fff !important;
    background-color: transparent !important;
	
    .el-select__wrapper {
      background-color: transparent !important;
    }
	
    .el-select__popper.el-popper {
      background-color: transparent !important;
    }
	
    .el-popper.is-light {
      background-color: transparent !important;
    }
	
    .el-select__placeholder {
      &.is-transparent {
        color: rgba(255,255,255,0.37) !important;
      }
	  
      &.is-disabled {
        color: rgba(255,255,255,0.37) !important;
      }
    }
	
    .el-select__selected-item {
      color: #ffffff !important;
	  
      &.is-disabled {
        color: rgba(255,255,255,0.37) !important;
        z-index: 99;
      }
    }
  }
  .ztzf-select-popper.el-select__popper {
      border:#2D2D2D !important;
  
      .el-select-dropdown {
          overflow-x: hidden !important;
  
          .el-scrollbar {
              .el-select-dropdown__wrap {
                  background: linear-gradient(180deg, rgba(13, 53, 86, 0.85) 0%, rgba(1, 35, 80, 0.85) 100%);
                  border-radius: 0px 0px 8px 8px;
                  border: 1px solid;
          border-image: linear-gradient(180deg, #fff, #fff) 1 1;
                  overflow-x: hidden !important;
                  margin-right: 0 !important;
  
                  .el-select-dropdown__list {
                      padding: 0 !important;
  
                      .el-select-dropdown__item {
                          background: #2D2D2D !important;
                          color: white;
  
                          &.hover {
                              background-color: #2D2D2D !important;
                              color: white;
                          }
  
                          &.selected {
                              color: #fff !important;
                              font-weight: 700;
                          }
                      }
                  }
              }
          }
  
          .el-select-dropdown__empty {
              background: #2D2D2D;
              border-radius: 0px 0px 8px 8px;
              border: 1px solid;
              border-image: linear-gradient(180deg, #fff, #fff) 1 1;
          }
      }
  
      .el-popper__arrow::before {
          background: #2D2D2D !important;
          border: 1px solid #fff !important;
      }
  }
  //时间日期选择器
  .ztzf-layer-date-picker {
      box-shadow: none !important;
      background: transparent;
      border: 1px solid #fff;
      border-radius: 5px;
      .el-range-editor.is-disabled input {
          background-color: transparent !important;
      }
      .el-range-editor.is-disabled {
          background-color: transparent !important;
      }
      .el-input__wrapper {
          box-shadow: none !important;
          background-color: transparent !important;
      width: 300px;
          &.is-focus {
              box-shadow: none !important;
          }
      }
  
      .el-range-input {
          color: #fff;
  
          &::placeholder {
              color: rgba(255, 255, 255, 0.37);
          }
      }
  
      .el-range-separator {
          color: #ffffff;
      }
  }
  
  // 日期下拉框
  .ztzf-layer-date-picker-popper {
      background: #012350 !important;
      border: 1px solid !important;
      border-radius: 0px 0px 8px 8px;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1 !important;
      .el-picker-panel .el-time-panel{
          background: #012350 !important;
      }
      .el-time-spinner__item {
      color: #fff !important;}
      .el-time-spinner__item:hover:not(.is-disabled):not(.is-active){
          background: transparent !important;
      }
      .el-picker-panel {
          .el-picker-panel__body-wrapper {
              .el-picker-panel__body {
                  background: #012350 !important;
                  color: #fff !important;
  
                  .el-date-picker__time-header {
                      border: none;
  
                      .el-date-picker__editor-wrap {
                          .el-time-panel {
                              background: #012350 !important;
                              border-radius: 0px 0px 8px 8px;
                              border: 1px solid !important;
                              border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1 !important;
  
                              // 将 time-picker-popper 的样式移到这里
                              .el-time-panel__header {
                                  background: #012350 !important;
                                  color: #ffffff !important;
                                  border-bottom: 1px solid rgba(255, 255, 255, 0.37) !important;
                              }
  
                              .el-time-panel__content {
                                  .el-time-spinner__item {
                                      color: #e6e6e6 !important;
  
                                      &:hover {
                                          background: #012350 !important;
                                      }
  
                                      &.active {
                                          color: #479dff !important;
                                          font-weight: bold;
                                      }
                                  }
                              }
  
                              .el-time-panel__footer {
                                  background: #012350 !important;
                                  border-top: 1px solid rgba(71, 157, 255, 0.3) !important;
  
                                  .el-button {
                                      color: #fff !important;
  
                                      &:hover {
                                          color: #479dff !important;
                                      }
                                  }
  
                                  .el-time-panel__btn.cancel {
                                      color: #fff !important;
  
                                      &:hover {
                                          color: #fff !important;
                                      }
                                  }
                              }
                          }
                      }
                  }
  
                  .el-picker-panel__content {
                      .el-date-range-picker__header {
                          .el-picker-panel__icon-btn {
                              color: #fff !important;
  
                              &:hover {
                                  color: var(--el-color-primary) !important;
                              }
  
                              .el-icon {
                                  &::before {
                                      color: inherit !important;
                                  }
                              }
                          }
  
                          & > div {
                              span {
                                  color: #fff !important;
                              }
                          }
                      }
  
                      .el-date-table {
                          th {
                              color: #fff !important;
                          }
  
                          td.disabled div {
                              background-color: #00193b !important;
                              color: #505050 !important;
                              cursor: not-allowed;
                          }
  
                          // td:hover,
                          // td.current:not(.disabled) {
                          //     background: rgba(60, 121, 202) !important;
                          //     color: white !important;
                          // }
  
                          td.start-date span,
                          td.start-date span,
                          td.end-date span {
                              background-color: #012350 !important;
                          }
  
                          td.in-range div,
                          td.in-range div:hover,
                          &.is-week-mode .el-date-table__row.current div,
                          &.is-week-mode .el-date-table__row:hover div {
                              background-color: rgba(60, 121, 202) !important;
                          }
                      }
                  }
              }
          }
      }
  
      .el-popper__arrow {
          &::before {
              background: #0d3556 !important;
              border: 1px solid #0d3556 !important;
              box-sizing: border-box;
          }
      }
  
      .el-picker-panel__sidebar {
          background: #012350;
          color: #fff;
  
          .el-picker-panel__shortcut {
              color: #ffffff;
          }
      }
  
      .el-picker-panel__body {
          .el-input.is-disabled .el-input__wrapper {
              background: #012350;
              box-shadow: 0 0 0 0.1rem#409eff;
              color: #fff;
  
              .el-input__inner {
                  color: #fff !important;
              }
          }
  
          .el-button.is-disabled,
          .el-button.is-disabled:hover {
              background: #012350;
          }
  
          .el-input__wrapper {
              background: #012350;
              box-shadow: 0 0 0 0.1rem#409eff;
              color: #fff;
  
              .el-input__inner {
                  color: #fff !important;
              }
          }
      }
  
      .el-picker-panel__footer {
          background: #012350;
          color: #fff;
          border-top: none;
  
          .el-button--small {
              box-shadow: 0 0 0 0.1rem#409eff;
              background-color: #012350;
              color: #fff;
              border: none;
  
              &:hover {
                  background-color: #012350;
                  color: #fff;
                  border-color: #409eff;
              }
          }
      }
  }
  
  .ztzf-layer-time-picker-popper {
    background: rgba(0,0,0,0.8) !important;
      border-radius: 0px 0px 8px 8px;
      border: 1px solid !important;
      border-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(115, 192, 255, 1)) 1 1 !important;
  
      .el-popper__arrow::before {
          background: rgba(0,0,0,0.8) !important;
          border: 1px solid #479dff !important;
      }
  
      .el-time-panel__header {
          background: rgba(0,0,0,0.8) !important;
          color: #ffffff !important;
          border-bottom: 1px solid rgba(71, 157, 255, 0.3) !important;
      }
  
      .el-time-panel__content {
          // background: #012350 !important;
  
          .el-time-spinner__item {
              color: #e6e6e6 !important;
  
              &:hover {
                  background: rgba(71, 157, 255, 0.3) !important;
              }
  
              &.active {
                  color: #479dff !important;
                  font-weight: bold;
              }
          }
      }
  
      .el-time-panel__footer {
          background: rgba(0,0,0,0.8) !important;
          border-top: 1px solid rgba(71, 157, 255, 0.3) !important;
  
          .el-button {
              color: #fff !important;
  
              &:hover {
                  color: #479dff !important;
              }
          }
  
          .el-time-panel__btn.cancel {
              color: #fff !important;
  
              &:hover {
                  color: #fff !important;
              }
          }
      }
  }
.ztzf-custom-qrcode-popover {
    //background: url("@/assets/images/home/eventOverviewDetail/qrCodeBg.png") no-repeat center center !important;
    //background-size: cover !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 5px;
    min-width: 173px !important;
    height: 180px !important;

    /* 隐藏默认箭头 */
    .el-popper__arrow {
        display: none !important;
    }

    /* 调整二维码内容区域样式 */
    .qrcode-content {
        background: #fff;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 146px;
        height: 130px;
        margin-top: 12px;

        .close-btn {
            position: absolute;
            top: 3px;
            right: 3px;
            width: 20px;
            height: 20px;

            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 100;
        }
    }
    box-shadow: none;
    border: none !important;
}

.ztzf-dialog-video {
    background: #0f1929;
    box-shadow: inset 0px -50px 50px 0px rgba(27, 148, 255, 0.13);
    border-radius: 20px 0px 0px 0px;
    border: 2px solid;
    padding: 0 !important;

    border-image: linear-gradient(180deg,
                    rgba(81, 168, 255, 0),
                    rgba(48, 111, 202, 1),
                    rgba(255, 255, 255, 1),
                    rgba(27, 148, 255, 1)) 2 2;

    .el-dialog__header {
        width: 100%;
        height: 47px;
        //padding: 0;
        margin-bottom: 14px;
        //background: url("/src/assets/images/home/inspection-vector.png") no-repeat center;
        //background-size: 100% 100%;
        font-weight: bold;
        font-size: 16px;
        line-height: 47px;
    }

    .el-dialog__title {
        width: 112px;

        font-family: Segoe UI, Segoe UI;
        font-weight: bold;
        font-size: 16px;

        text-shadow: 0px 0px 5px rgba(154, 218, 255, 0.6);
        text-align: left;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(90deg, #fbfdff 0%, #86d4ff 100%);
        margin-left: 16px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .el-dialog .el-dialog__header {
        padding: 0px !important;
        padding-left: 0px !important;
    }

    .el-scrollbar__thumb {
        background: #13c6ff !important;
    }
.el-menu {
    border-right: none;
}
  //======以下针对表格功能 增删查改样式和弹窗=========
  .ztzf-dialog-mange {
    .el-dialog__body {
      padding: 2rem 2rem 4rem;
      flex: 1;
      overflow: scroll;
      border-top: 0.1rem solid #f0f0f0;
    }
    .el-dialog__footer {
      z-index: 2;
      display: block;
      padding: 1rem 1.6rem;
      box-sizing: border-box;
      border-top: 0.1rem solid #f0f0f0;
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #fff;
      text-align: right;
    }
  }
  .ztzf-search-mange {
    height: 40px;
    .search-contain {
      display: flex;justify-content: space-between;
    }
  }
  .ztzf-form-mange {
    .el-form-item {
      width: 300px;
      .el-form-item__content {
        width: 100%;
      }
      .el-form-item__label {
        width: 120px;
      }
    }
  }
  
  .ztzf-form-search {
    .el-form-item {
      width: 100%;
      .el-form-item__label {
        width: 80px;
      }
      .el-form-item__content {
        display: flex;
        flex: 1;
      }
    }
  }
  
  .ztzf-table-mange {
    th.el-table__cell  {
      color: rgba(0, 0, 0, .85);
      background-color: #fafafa;
    }
  }
  
  .table-view-mange {
    width: 100%;
    border-top: 0.1rem solid #ebeef5;
    border-left: 0.1rem solid #ebeef5;
    margin-left: 0;
    margin-right: 0;
    .el-col {
      padding-left: 0;
      padding-right: 0;
      margin-bottom: 0;
      height: 32px;
      line-height: 32px;
      border-right: 0.1rem solid #ebeef5;
      text-align: center;
      align-items: center;
      .el-input__wrapper {
        box-shadow: none !important;
        border-bottom: 0.1rem solid #ebeef5;
      }
    }
    .label {
      color: #909399;
      box-sizing: border-box;
      background: #fafafa;
    }
  }
  

.el-message__icon,
.el-message__content {
    display: inline-block;
}

.el-date-editor .el-range-input,
.el-date-editor .el-range-separator {
    height: auto;
    overflow: hidden;
}

.el-dialog__wrapper {
    z-index: 2048;
}


.el-col {
    margin-bottom: 8px;
}

.el-main {
    padding: 0 !important;
}

.el-dropdown-menu__item--divided:before,
.el-menu,
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover {
    background-color: transparent;
}


.el-dropdown-menu__item--divided:before,
.el-menu,
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal>.el-sub-menu .el-sub-menu__title:hover {
    background-color: transparent !important;
}

.el-collapse-item__header {
    height: auto;
    overflow: hidden;
}

.el-button.is-text:not(.is-disabled):active {
    background-color: transparent;
}

.el-button.is-text:not(.is-disabled):focus,
.el-button.is-text:not(.is-disabled):hover {
    background-color: transparent;
}

.avue-icon i,
.avue-icon svg {
    line-height: 20px;
}

.avue--detail .el-form-item {
    background-color: #fafafa;
}

.showFullScreenDlg {
    display: flex;
    justify-content: space-between;

    .el-dialog {
        position: relative;
        padding: 0;
        overflow: hidden;

        .el-dialog__body {
            width: 100%;
            height: 100%;

            iframe {
                width: 100%;
                height: 100%;
            }
        }

        .el-dialog__header {
            height: 0;
            overflow: hidden;
            padding: 0;

            .el-dialog__headerbtn {
                position: absolute;
                left: 0;
                //top: 14px;

                .el-dialog__close {
                    color: #fff;
                    font-size: 35px;
                    z-index: 99;
                }
            }
        }
    }
}

 applications/task-work-order/src/styles/sidebar.scss

@@ -1,6 +1,5 @@

.avue-sidebar {
  width: $sidebar_width;
  width: 179px;
  height: 100%;
  user-select: none;
  position: relative;
@@ -11,12 +10,13 @@
  box-sizing: border-box;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);


  .el-scrollbar__wrap {
    overflow-x: hidden;
  }

  .avue-menu {
    height: calc(100% - #{$top_height});
    height: calc(100% - 42px);
  }

  &--tip {
@@ -36,40 +36,83 @@
    background-color: rgba(0, 0, 0, .4);
  }

  .el-menu-item, .el-sub-menu__title {
  .el-menu-item {
  }

  .el-sub-menu {
    .el-sub-menu__title {
    }

    .el-menu-item {
    }

    &.is-active {

      .el-sub-menu__title {
        i,
        span {
          color: #384CFF !important;
        }

        span {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          line-height: 56px;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }

  .el-menu-item,
  .el-sub-menu__title {
    i {
      margin-right: 5px;
    }

    i, span {
    i,
    span {
      color: hsla(0, 0%, 100%, .7);
    }

    &:hover {
      background: transparent;

      i, span {
        color: #fff;
      i,
      span {
        color: #384CFF;
      }
    }

    &.is-active {
      background-color: transparent !important;

      &:before {
        content: '';
        top: 0;
        top: 10px;
        left: 0;
        bottom: 0;
        width: 4px;
        background: var(--el-color-primary);
        bottom: 10px;
        width: 3px;
        background: #384CFF;
        position: absolute;
        border-radius: 0 6px 6px 0;
      }

      background-color: rgba(0, 0, 0, .8);
      i,
      span {
        color: #384CFF !important;
      }

      i, span {
        color: #fff;
      span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        line-height: 56px;
        font-style: normal;
        text-transform: none;
      }
    }
  }

}
}

 applications/task-work-order/src/styles/tags.scss

@@ -1,39 +1,55 @@

.avue-tags {
  user-select: none;
  position: relative;
  padding: 0 10px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border-top: 1px solid #f6f6f6;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);

  .el-tabs--card > .el-tabs__header {
  .el-tabs--card>.el-tabs__header {
    margin: 0;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__nav,
  .el-tabs--card > .el-tabs__header .el-tabs__item,
  .el-tabs--card > .el-tabs__header {
  .el-tabs--card>.el-tabs__header .el-tabs__nav,
  .el-tabs--card>.el-tabs__header .el-tabs__item,
  .el-tabs--card>.el-tabs__header {
    border: none;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item:first-child {
  .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
    border-left-width: 1px
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item {
    margin: 0 3px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-weight: normal;
    color: #ccc;
  .el-tabs--card>.el-tabs__header .el-tabs__item {
    padding: 0 20px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    min-width: 100px;
    height: 36px;

    font-family: PangMen;
    font-weight: 400;
    font-size: 16px;
    color: #4E5969;
    text-align: center;
    font-style: normal;
    text-transform: none;
    background: #DBDFED;

    border-radius: 3px 3px 3px 3px;

    &.is-active {
      color: var(--el-color-primary);
      border-bottom: 3px solid var(--el-color-primary);
      padding: 0 !important;
      padding-left: 20px !important;
      color: #FFFFFF;
      background: #5B6BFF;

      .is-icon-close {
        margin: 0 10px;
      }
    }

    &:first-child {
      margin-left: 0;
    }
  }

@@ -98,4 +114,4 @@
    padding: 1px 0 0 15px;
    box-sizing: border-box;
  }
}
}

 applications/task-work-order/src/styles/top.scss

@@ -1,7 +1,5 @@
.avue-top {
  position: relative;
  background-color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, .65);
  font-size: 28px;
  height: $top_height;
@@ -10,7 +8,9 @@
  white-space: nowrap;

  .el-menu-item {
    i, span {

    i,
    span {
      font-size: 13px;
    }
  }
@@ -69,7 +69,7 @@

.top-bar__left,
.top-bar__right {
  height: $top_height;
  height: 100%;
  position: absolute;
  top: 0;

@@ -79,7 +79,15 @@
}

.top-bar__left {
  left: 10px;
  display: flex;
  align-items: center;
  font-family: PangMen;
  font-weight: 400;
  font-size: 30px;
  color: #161B2C;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.top-bar__right {
@@ -136,4 +144,4 @@
    font-weight: bold;
    color: #fff;
  }
}
}

 applications/task-work-order/src/views/basicManage/index.vue

New file
@@ -0,0 +1,9 @@
<template>
  <basic-container>
    基础管理
  </basic-container>
</template>
<script setup>
</script>
<style scoped lang="scss">
</style>

 applications/task-work-order/src/views/basicManage/maintainRecord/FormDiaLog.vue

New file
@@ -0,0 +1,253 @@
<template>
    <el-dialog class="work-page-view-dialog" v-model="visible" :title="titleEnum[dialogMode]" @closed="handleClosed"
        destroy-on-close>
        <div class="detail-container" v-if="dialogReadonly">
            <div class="detail-title">设备详情</div>
            <el-row>
                <el-col :span="12">
                    <div class="label">设备名称</div>
                    <div class="val">{{ formData.deviceName }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">设备类型</div>
                    <div class="val">{{ getDictLabel(formData.deviceType, dictObj.deviceType) }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">型号</div>
                    <div class="val">{{ formData.deviceModel }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">生产厂商</div>
                    <div class="val">{{ formData.manufacturer }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">所属部门</div>
                    <div class="val">{{ formData.belongDeptName }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">负责人</div>
                    <div class="val">{{ formData.charger }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">维护计划</div>
                    <div class="val">{{ getPlanCycleLabel(formData) }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">维护时间</div>
                    <div class="val">{{ list?.[0]?.maintainTime }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">维护内容</div>
                    <div class="val">{{ formData.manufacturer }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">跟换部件</div>
                    <div class="val">{{ formData.manufacturer }}</div>
                </el-col>
            </el-row>

            <div class="detail-title">维护详情</div>
            <div class="work-table-container" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)">
                <div class="work-table-content">
                    <el-table class="work-data-cockpit-table" :data="list">
                        <el-table-column type="index" width="60" label="序号" />
                        <el-table-column prop="maintainTime" label="维护时间" />
                        <el-table-column prop="maintainContent" label="维护内容" />
                        <el-table-column prop="replacePart" label="跟换部件" />
                    </el-table>
                </div>

                <div class="work-table-pagination">
                    <el-pagination popper-class="work-select-popper work-dialog-select-popper"
                        v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
                        layout="total, prev, pager, next, sizes" :total="total" @change="getList" />
                </div>
            </div>
        </div>

        <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly"
            label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="选择设备" prop="deviceId">
                        <el-select class="work-data-cockpit-select" popper-class="work-select-popper work-dialog-select-popper"
                            v-model="formData.deviceId" placeholder="请选择" filterable clearable>
                            <el-option v-for="item in deviceList" :key="item.id" :label="item.deviceName"
                                :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维护计划周期" prop="planCycleType">
                        <el-select class="work-data-cockpit-select" popper-class="work-select-popper work-dialog-select-popper"
                            v-model="formData.planCycleType" placeholder="请选择" clearable
                            @change="formData.planCycleValue = []">
                            <el-option v-for="item in planCycleOptions" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="维护计划时间" prop="planCycleValue">
                        <el-select class="work-data-cockpit-select" popper-class="work-select-popper work-dialog-select-popper"
                            v-model="formData.planCycleValue" placeholder="请选择" clearable multiple
                            :disabled="!formData.planCycleType">
                            <el-option v-for="item in planCycleValueOptions" :key="item.value" :label="item.value"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button color="#F2F3F5" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
            <el-button class="save-btn" color="#4C34FF" v-if="!dialogReadonly" type="primary" :loading="submitting"
                :disabled="submitting" @click="handleSubmit">
                保存
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fieldRules, getDictLabel } from '@ztzf/utils'
import { fwDeviceMaintainRecordPageApi } from '@/views/basicManage/maintainRecord/fwDeviceMaintainRecord'
import {
    fwDeviceMaintainPlanDetailApi,
    fwDeviceMaintainPlanSubmitApi,
    fwDevicePageApi,
} from '@/views/basicManage/maintainRecord/maintainRecordApi'

const initForm = () => ({
    deviceId: '',
    planCycleType: '',
    planCycleValue: [],
})

const planCycleOptions = inject('planCycleOptions')
const planCycleValueOptions = ref([])

const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = ref(false) // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const submitting = ref(false) // 提交中
const deviceList = ref([]) // 设备列表
const getPlanCycleLabel = inject('getPlanCycleLabel')
const dictObj = inject('dictObj')
const dialogReadonly = computed(() => dialogMode.value === 'view')
const titleEnum = ref({ edit: '编辑', view: '查看', add: '维护计划' })

const planCycleLabel = computed(() => {
    const item = planCycleOptions.find(option => option.value === formData.value.planCycleType)
    return item?.label || formData.value.planCycleType || '-'
})

const rules = {
    deviceId: fieldRules(true),
    planCycleType: fieldRules(true),
    planCycleValue: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
}

// 获取设备列表
function getDeviceList() {
    return fwDevicePageApi({ current: 1, size: 999 }).then(res => {
        deviceList.value = res?.data?.data?.records ?? []
    })
}

// 关闭弹框
function handleCancel() {
    visible.value = false
}

// 提交新增/编辑
async function handleSubmit() {
    const isValid = await formRef.value?.validate().catch(() => false)
    if (!isValid) return
    submitting.value = true
    try {
        await fwDeviceMaintainPlanSubmitApi(formData.value)
        ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
        visible.value = false
        emit('success')
    } finally {
        submitting.value = false
    }
}

// 加载详情
async function loadDetail() {
    if (!formData.value.id) return
    const res = await fwDeviceMaintainPlanDetailApi({ id: formData.value.id })
    formData.value = res?.data?.data ?? {}
    console.log(formData.value, 66)
}

// 关闭后重置
function handleClosed() {
    formData.value = initForm()
}

const initSearchParams = () => ({
    current: 1, // 当前页
    size: 10, // 每页大小
})
const searchParams = ref(initSearchParams())
const total = ref(0) // 总条数
const loading = ref(true) // 列表加载中
const list = ref([]) // 列表数据
async function getList() {
    loading.value = true
    try {
        const params = { ...searchParams.value, planId: formData.value.id }
        const res = await fwDeviceMaintainRecordPageApi(params)
        list.value = res?.data?.data?.records ?? []
        total.value = res?.data?.data?.total ?? 0
    } finally {
        loading.value = false
    }
}

// 打开弹框
async function open({ mode, row } = {}) {
    dialogMode.value = mode || 'add'
    visible.value = true
    await getDeviceList()
    if (dialogMode.value === 'add') {
        formData.value = initForm()
    } else {
        formData.value = row
        await loadDetail()
        getList()
    }
}

defineExpose({ open })

watch(
    () => formData.value?.planCycleType,
    type => {
        planCycleValueOptions.value = []
        if (!type) return
        if (type === '1') {
            ;[...Array(12)].forEach((item, index) => {
                ;[...Array(31)].forEach((item1, index1) => {
                    planCycleValueOptions.value.push({ value: `${index + 1}月${index1 + 1}号` })
                })
            })
        } else if (type === '2') {
            ;[...Array(31)].forEach((item, index) => {
                planCycleValueOptions.value.push({ value: `${index + 1}号` })
            })
        } else if (type === '3') {
            ;[...Array(7)].forEach((item, index) => {
                planCycleValueOptions.value.push({ value: `星期${index + 1}` })
            })
        }
    }
)
</script>

 applications/task-work-order/src/views/basicManage/maintainRecord/MaintenanceDiaLog.vue

New file
@@ -0,0 +1,171 @@
<template>
    <el-dialog class="work-page-view-dialog" v-model="visible" :title="titleEnum[dialogMode]" @closed="handleClosed"
        destroy-on-close>
        <div class="detail-container" v-if="dialogReadonly">
            <div class="detail-title">设备详情</div>
            <el-row>
                <el-col :span="12">
                    <div class="label">设备名称</div>
                    <div class="val">{{ deviceName }}</div>
                </el-col>
                <el-col :span="12">
                    <div class="label">维护计划</div>
                    <div class="val">{{ planCycleLabel }}</div>
                </el-col>
            </el-row>
        </div>
        <el-form class="dialog-form" v-else ref="formRef" :model="formData" :rules="rules"
            :disabled="dialogReadonly" label-width="110px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="维护内容" prop="maintainContent">
                        <el-input
                            class="work-data-cockpit-search-input"
                            v-model="formData.maintainContent"
                            maxlength="200"
                            type="textarea"
                            placeholder="请输入"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="更换部件" prop="replacePart">
                        <el-input
                            class="work-data-cockpit-search-input"
                            v-model="formData.replacePart"
                            maxlength="200"
                            type="textarea"
                            placeholder="请输入"
                            clearable
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="实际维护时间" prop="maintainTime">
                        <el-date-picker
                            class="work-data-cockpit-date-picker"
                            popper-class="work-data-cockpit-date-picker-popper"
                            v-model="formData.maintainTime"
                            type="date"
                            placeholder="选择日期"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            clearable
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button color="#2B2B4C" @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button>
            <el-button
                v-if="!dialogReadonly"
                type="primary"
                color="#284FE3"
                :loading="submitting"
                :disabled="submitting"
                @click="handleSubmit"
            >
                确定
            </el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { fieldRules } from '@ztzf/utils'
import { fwDeviceMaintainRecordSubmitApi } from '@/views/basicManage/maintainRecord/fwDeviceMaintainRecord'
import { fwDeviceMaintainPlanDetailApi } from '@/views/basicManage/maintainRecord/maintainRecordApi'

const initForm = () => ({
    deviceId: '',
    id: '',
    maintainContent: '',
    replacePart: '',
    maintainTime: '',
})

const planCycleOptions = [
    { label: '每年', value: '1' },
    { label: '每月', value: '2' },
    { label: '每周', value: '3' },
]

const emit = defineEmits(['success'])
const formRef = ref(null) // 表单实例
const formData = ref(initForm()) // 表单数据
const visible = ref(false) // 弹框显隐
const dialogMode = ref('add') // 弹框模式
const submitting = ref(false) // 提交中
const deviceList = ref([]) // 设备列表

const dialogReadonly = computed(() => dialogMode.value === 'view')
const titleEnum = ref({ edit: '编辑', view: '查看', add: '维护计划' })

const planCycleLabel = computed(() => {
    const item = planCycleOptions.find(option => option.value === formData.value.planCycleType)
    return item?.label || formData.value.planCycleType || '-'
})
const deviceName = computed(() => {
    const target = deviceList.value.find(item => item.id === formData.value.deviceId)
    return formData.value.deviceName || target?.deviceName || '-'
})

const rules = {
    maintainContent: fieldRules(true, 200),
    replacePart: fieldRules(true, 200),
    maintainTime: fieldRules(true),
}

// 关闭弹框
function handleCancel() {
    visible.value = false
}

// 提交新增/编辑
async function handleSubmit() {
    const isValid = await formRef.value?.validate().catch(() => false)
    if (!isValid) return
    submitting.value = true
    try {
        await fwDeviceMaintainRecordSubmitApi(formData.value)
        ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功')
        visible.value = false
        emit('success')
    } finally {
        submitting.value = false
    }
}

// 加载详情
async function loadDetail() {
    console.log(formData.value)
    if (!formData.value.id) return
    const res = await fwDeviceMaintainPlanDetailApi({ id: formData.value.id })
    formData.value = {
        planId: res?.data?.data?.id,
        deviceId: res?.data?.data.deviceId,
    }
}

// 关闭后重置
function handleClosed() {
    formData.value = initForm()
}

// 打开弹框
async function open({ mode, row } = {}) {
    dialogMode.value = mode || 'add'
    visible.value = true
    if (dialogMode.value === 'add') {
        formData.value = initForm()
    } else {
        formData.value = row
        await loadDetail()
    }
}

defineExpose({ open })
</script>

 applications/task-work-order/src/views/basicManage/maintainRecord/fwDeviceMaintainRecord.js

New file
@@ -0,0 +1,19 @@
import request from '@/axios'

// 分页
export const fwDeviceMaintainRecordPageApi = params => {
    return request({
        url: `/drone-fw/device/fwDeviceMaintainRecord/page`,
        method: 'get',
        params: { descs: 'update_time', ...params },
    })
}

// 新增或修改
export const fwDeviceMaintainRecordSubmitApi = data => {
    return request({
        url: `/drone-fw/device/fwDeviceMaintainRecord/submit`,
        method: 'post',
        data,
    })
}

 applications/task-work-order/src/views/basicManage/maintainRecord/index.vue

New file
@@ -0,0 +1,208 @@
<template>
    <basic-container>
        <el-form ref="queryParamsRef" :model="searchParams" class="work-page-history-search">
            <el-form-item label="设备名称" prop="deviceName">
                <el-input class="work-data-cockpit-search-input" v-model="searchParams.deviceName" placeholder="请输入"
                    clearable @clear="handleSearch" />
            </el-form-item>

            <el-form-item label="设备类型" prop="deviceType">
                <el-select class="work-data-cockpit-select" popper-class="work-select-popper"
                    v-model="searchParams.deviceType" placeholder="请选择" clearable @change="handleSearch">
                    <el-option v-for="item in dictObj.deviceType" :key="item.dictKey" :label="item.dictValue"
                        :value="item.dictKey" />
                </el-select>
            </el-form-item>

            <el-form-item label="所属部门" prop="belongDept">
                <el-tree-select class="work-data-cockpit-select" popper-class="work-data-cockpit-tree-select-popper"
                    v-model="searchParams.belongDept" :data="deptTree" :props="treeProps" node-key="id" check-strictly
                    clearable @change="handleSearch" />
            </el-form-item>

            <el-form-item class="history-search-actions">
                <el-button :icon="RefreshRight" @click="resetForm"></el-button>
                <el-button class="search-btn" :icon="Search" @click="handleSearch"></el-button>
            </el-form-item>
        </el-form>

        <div class="work-table-toolbar">
            <el-button :icon="Plus" color="#4C34FF" type="primary" @click="handleAdd">维护计划</el-button>
            <el-button :icon="Delete" color="#4C34FF" :disabled="!selectedIds.length" @click="handleDelete()">删除</el-button>
        </div>

        <div class="work-table-container" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)">
            <div class="work-table-content work-table-content-bg">
                <el-table class="work-data-cockpit-table" :data="list" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="46" />
                    <el-table-column prop="deviceName" show-overflow-tooltip label="设备名称" />
                    <el-table-column prop="deviceType" show-overflow-tooltip label="设备类型">
                        <template v-slot="{ row }">
                            {{ getDictLabel(row.deviceType, dictObj.deviceType) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="deviceModel" show-overflow-tooltip label="型号" />
                    <el-table-column prop="manufacturer" show-overflow-tooltip label="生产厂商" />
                    <el-table-column prop="belongDeptName" show-overflow-tooltip label="所属部门" />
                    <el-table-column prop="charger" show-overflow-tooltip label="负责人" />
                    <el-table-column prop="maintainReminder" show-overflow-tooltip label="维护提醒" />
                    <el-table-column prop="planCycleType" show-overflow-tooltip label="维护计划">
                        <template v-slot="{ row }">
                            {{ getPlanCycleLabel(row) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" class-name="operation-btns">
                        <template v-slot="{ row }">
                            <el-link @click="handleView(row)">查看</el-link>
                            <el-link @click="maintenance(row)">维护</el-link>
                            <el-link @click="handleDelete(row)">删除</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <div class="work-table-pagination">
                <el-pagination popper-class="work-select-popper"
                    v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
                    layout="total, prev, pager, next, sizes" :total="total" @change="getList" />
            </div>
        </div>

        <FormDiaLog ref="dialogRef" @success="getList" />
        <MaintenanceDiaLog ref="maintenanceDialogRef" @success="getList" />
    </basic-container>
</template>
<script setup>
import { Search, RefreshRight, Plus, Delete } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getDictionaryByCode } from '@/api/system/dictbiz'
import { getDeptTree } from '@/api/system/dept'
import { getDictLabel } from '@ztzf/utils'
import FormDiaLog from './FormDiaLog.vue'
import MaintenanceDiaLog from '@/views/basicManage/maintainRecord/MaintenanceDiaLog.vue'
import {
    fwDeviceMaintainPlanPageApi,
    fwDeviceMaintainPlanRemoveApi,
} from '@/views/basicManage/maintainRecord/maintainRecordApi'

const initSearchParams = () => ({
    deviceName: '', // 设备名称
    deviceType: '', // 设备类型
    belongDept: '', // 所属部门
    current: 1, // 当前页
    size: 10, // 每页大小
})
const searchParams = ref(initSearchParams()) // 查询参数
const total = ref(0) // 总条数
const loading = ref(true) // 列表加载中
const list = ref([]) // 列表数据
const selectedIds = ref([]) // 勾选的ID列表
const queryParamsRef = ref(null) // 查询表单实例
const dialogRef = ref(null) // 弹框实例
const maintenanceDialogRef = ref(null) // 弹框实例
const dictObj = ref({
    deviceType: [], // 设备类型
    deviceAtt: [], // 设备属性
})
provide('dictObj', dictObj)
const deptTree = ref([]) // 部门树
const treeProps = {
    label: 'name',
    children: 'children',
}
const planCycleOptions = [
    { label: '每年', value: '1' },
    { label: '每月', value: '2' },
    { label: '每周', value: '3' },
]
provide('planCycleOptions', planCycleOptions)

// 获取列表
async function getList () {
    loading.value = true
    try {
        const res = await fwDeviceMaintainPlanPageApi(searchParams.value)
        list.value = res?.data?.data?.records ?? []
        total.value = res?.data?.data?.total ?? 0
    } finally {
        loading.value = false
    }
}

// 查询
function handleSearch () {
    searchParams.value.current = 1
    getList()
}

// 重置查询
function resetForm () {
    queryParamsRef.value?.resetFields()
    searchParams.value.current = 1
    getList()
}

// 查看
function handleView (row) {
    dialogRef.value?.open({ mode: 'view', row: { ...row } })
}

// 维护
function maintenance (row) {
    maintenanceDialogRef.value?.open({ mode: 'edit', row: { ...row } })
}

// 删除
async function handleDelete (row) {
    const tips = row ? '该条' : '选中的项'
    await ElMessageBox.confirm(`确认删除${tips}吗？`, '提示', {
        type: 'warning',
        customClass: 'work-page-view-message-box',
        confirmButtonClass: 'work-message-box-confirm',
        cancelButtonClass: 'work-message-box-cancel',
    })
    const ids = row ? row.id : selectedIds.value.join(',')
    await fwDeviceMaintainPlanRemoveApi({ ids })
    ElMessage.success('删除成功')
    selectedIds.value = []
    getList()
}

// 勾选值设置
function handleSelectionChange (rows) {
    selectedIds.value = rows.map(item => item.id)
}

// 获取字典
function getDictList () {
    getDictionaryByCode('deviceType,deviceAtt').then(res => {
        dictObj.value = res.data.data
    })
}

// 获取部门树
function getDeptTreeFun () {
    getDeptTree().then(res => {
        deptTree.value = res.data.data
    })
}

// 新增
function handleAdd () {
    dialogRef.value?.open({ mode: 'add' })
}

function getPlanCycleLabel (row) {
    const item = planCycleOptions.find(option => option.value === row.planCycleType)
    return item?.label + '-' + row.planCycleValue.join(',')
}
provide('getPlanCycleLabel', getPlanCycleLabel)

onMounted(() => {
    getList()
    getDictList()
    getDeptTreeFun()
})
</script>
<style scoped lang="scss"></style>

 applications/task-work-order/src/views/basicManage/maintainRecord/maintainRecordApi.js

New file
@@ -0,0 +1,46 @@
import request from '@/axios'

// 列表
export const fwDeviceMaintainPlanPageApi = params => {
    return request({
        url: `/drone-fw/device/fwDeviceMaintainPlan/page`,
        method: 'get',
        params: { descs: 'update_time', ...params },
    })
}

// 新增或编辑
export const fwDeviceMaintainPlanSubmitApi = data => {
    return request({
        url: `/drone-fw/device/fwDeviceMaintainPlan/submit`,
        method: 'post',
        data,
    })
}

// 删除
export const fwDeviceMaintainPlanRemoveApi = params => {
    return request({
        url: `/drone-fw/device/fwDeviceMaintainPlan/remove`,
        method: 'post',
        params,
    })
}

// 详情
export const fwDeviceMaintainPlanDetailApi = params => {
    return request({
        url: `/drone-fw/device/fwDeviceMaintainPlan/detail`,
        method: 'get',
        params,
    })
}

// 设备分页
export const fwDevicePageApi = params => {
    return request({
        url: `/drone-fw/device/fwDevice/page`,
        method: 'get',
        params: { descs: 'update_time', ...params },
    })
}

 applications/task-work-order/src/views/dataCockpit/components/DeviceHistoryDialog.vue

@@ -1,27 +1,27 @@
<template>
    <el-dialog class="ztzf-data-cockpit-dialog" append-to-body v-model="visibleModel" :title="dialogTitle"
    <el-dialog class="work-data-cockpit-dialog" append-to-body v-model="visibleModel" :title="dialogTitle"
        :close-on-click-modal="false" :destroy-on-close="true">
        <el-form ref="queryParamsRef" :model="searchParams" class="ztzf-dialog-history-search">
        <el-form ref="queryParamsRef" :model="searchParams" class="work-dialog-history-search">
            <el-form-item label="关键字" prop="keyword">
                <el-input class="ztzf-data-cockpit-search-input" v-model="searchParams.keyword" placeholder="名称/序列号"
                <el-input class="work-data-cockpit-search-input" v-model="searchParams.keyword" placeholder="名称/序列号"
                    clearable @clear="handleSearch" />
            </el-form-item>

            <el-form-item prop="dateRange">
                <el-date-picker class="ztzf-data-cockpit-date-picker"
                    popper-class="ztzf-data-cockpit-tree-select-popper" v-model="searchParams.dateRange"
                <el-date-picker class="work-data-cockpit-date-picker"
                    popper-class="work-data-cockpit-tree-select-popper" v-model="searchParams.dateRange"
                    type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                    value-format="YYYY/MM/DD" @change="handleSearch" />
            </el-form-item>

            <el-form-item label="区域" prop="area">
                <el-tree-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-tree-select-popper"
                <el-tree-select class="work-data-cockpit-select" popper-class="work-data-cockpit-tree-select-popper"
                    v-model="searchParams.area" :data="areaTree" :props="areaTreeProps" node-key="value" check-strictly
                    clearable placeholder="请选择" @change="handleSearch" />
            </el-form-item>

            <el-form-item label="无人机类型" prop="droneType">
                <el-select class="ztzf-data-cockpit-select" popper-class="ztzf-data-cockpit-select-popper"
                <el-select class="work-data-cockpit-select" popper-class="work-select-popper"
                    v-model="searchParams.droneType" placeholder="请选择" clearable @change="handleSearch">
                    <el-option v-for="item in droneTypeOptions" :key="item.value" :label="item.label"
                        :value="item.value" />
@@ -34,9 +34,9 @@
            </el-form-item>
        </el-form>

        <div class="ztzf-table-container" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)">
            <div class="ztzf-table-content">
                <el-table class="ztzf-data-cockpit-table" :data="list">
        <div class="work-table-container" v-loading="loading" element-loading-background="rgba(5, 5, 15, 0.6)">
            <div class="work-table-content">
                <el-table class="work-data-cockpit-table" :data="list">
                    <el-table-column type="index" width="60" label="序号" />
                    <el-table-column prop="droneName" label="无人机名称" min-width="120" />
                    <el-table-column prop="droneSerialNo" label="无人机序列号" min-width="140" />
@@ -62,8 +62,8 @@
                </el-table>
            </div>

            <div class="ztzf-table-pagination">
                <el-pagination popper-class="ztzf-data-cockpit-select-popper"
            <div class="work-table-pagination">
                <el-pagination popper-class="work-select-popper"
                    v-model:current-page="searchParams.current" v-model:page-size="searchParams.size"
                    layout="total, prev, pager, next, sizes" :total="total" @change="getList" />
            </div>

 applications/task-work-order/src/views/dataCockpit/components/HistoryWarning.vue

@@ -8,14 +8,14 @@
        <!-- 搜索区（设计稿红框） -->
        <div class="search-box">
            <!-- 关键字 -->
            <el-input v-model="query.keyword" class="ztzf-data-cockpit-search-input" placeholder="请输入数据名称" clearable
            <el-input v-model="query.keyword" class="work-data-cockpit-search-input" placeholder="请输入数据名称" clearable
                @keyup.enter="onSearch">
            </el-input>

            <!-- 日期范围 -->
            <el-date-picker v-model="query.dateRange" 
                  class="ztzf-data-cockpit-date-picker"
                 popper-class="ztzf-data-cockpit-date-picker-popper"
                  class="work-data-cockpit-date-picker"
                 popper-class="work-data-cockpit-date-picker-popper"
                type="daterange" 
                range-separator="~"
                start-placeholder="创建开始日期" end-placeholder="结束日期" format="YYYY年MM月DD日" value-format="YYYY-MM-DD"
@@ -109,7 +109,7 @@
        flex-direction: column;
        gap: 10px;

        ::v-deep(.ztzf-data-cockpit-date-picker) {
        ::v-deep(.work-data-cockpit-date-picker) {
            width: 100% !important;
        }
    }

 applications/task-work-order/src/views/resource/components/spotDetails.vue

@@ -1,6 +1,6 @@
<template>
  <el-dialog
    class="spotDialog ztzf-dialog-mange"
    class="spotDialog work-dialog-mange"
    :title="props.title"
    v-model="uploadPatchDialog"
    width="78%"
@@ -134,7 +134,7 @@
          <img @click="handleCancel" src="@/assets/images/home/territory/cancelbtn.png" alt="" />
        </div>
        <!-- 地图 -->
        <div id="spotMap" v-loading="loading"  element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.7)" class="ztzf-cesium" v-show="uploadPatchDialog"></div>
        <div id="spotMap" v-loading="loading"  element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.7)" class="work-cesium" v-show="uploadPatchDialog"></div>
      </div>
    </div>
  </el-dialog>

 applications/task-work-order/src/views/resource/patchManagement.vue

@@ -41,7 +41,7 @@
      </template>
    </avue-crud>

    <el-dialog title="上传图斑" class="ztzf-dialog-mange" append-to-body align-center v-model="box" width="550px">
    <el-dialog title="上传图斑" class="work-dialog-mange" append-to-body align-center v-model="box" width="550px">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"

 applications/task-work-order/src/views/system/param.vue

@@ -3,7 +3,7 @@
    <div class="avue-crud">
      <el-row :hidden="!search">
        <!-- 查询模块 -->
        <div class="ztzf-form-search">
        <div class="work-form-search">
          <el-form inline :model="query">
            <el-row :gutter="24">
              <el-col :span="8">
@@ -137,7 +137,7 @@
      </el-row>
      <!-- 表单模块 -->
      <el-dialog
        class="ztzf-dialog-mange"
        class="work-dialog-mange"
        :title="title"
        v-model="box"
        width="50%"

 applications/task-work-order/src/views/system/userinfo.vue

@@ -43,23 +43,23 @@
          <el-form :model="userInfo" label-width="120px">
            <el-form-item label="姓名：">
              <el-input
                class="ztzf-input"
                class="work-input"
                :style="{ width: pxToRem(350) }"
                v-model="userInfo.realName"
                disabled
              />
            </el-form-item>
            <!--                        <el-form-item label="昵称：">
                                                    <el-input class="ztzf-input" v-model="userInfo.name" />
                                                    <el-input class="work-input" v-model="userInfo.name" />
                                                </el-form-item>-->
            <el-form-item label="所属部门：">
              <el-input class="ztzf-input" v-model="userInfo.deptName" disabled />
              <el-input class="work-input" v-model="userInfo.deptName" disabled />
            </el-form-item>
            <el-form-item label="手机号：">
              <el-input class="ztzf-input" v-model="userInfo.phone" />
              <el-input class="work-input" v-model="userInfo.phone" />
            </el-form-item>
            <el-form-item label="邮箱：">
              <el-input class="ztzf-input" v-model="userInfo.email" />
              <el-input class="work-input" v-model="userInfo.email" />
            </el-form-item>
          </el-form>
        </div>
@@ -77,7 +77,7 @@
        <el-form :model="passwordForm" label-width="120px">
          <el-form-item label="原始密码：" prop="oldPassword">
            <el-input
              class="ztzf-input"
              class="work-input"
              v-model="passwordForm.oldPassword"
              type="password"
              show-password
@@ -85,7 +85,7 @@
          </el-form-item>
          <el-form-item label="新密码：" prop="newPassword">
            <el-input
              class="ztzf-input"
              class="work-input"
              v-model="passwordForm.newPassword"
              type="password"
              show-password
@@ -93,7 +93,7 @@
          </el-form-item>
          <el-form-item label="确认密码：" prop="newPassword1">
            <el-input
              class="ztzf-input"
              class="work-input"
              v-model="passwordForm.newPassword1"
              type="password"
              show-password