修改作业等级名称

马宇豪

2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c

修改作业等级名称

 src/layout/navBars/breadcrumb/user.vue

@@ -1,520 +1,581 @@
<template>
    <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
        <div class="logo">
            <img src="../../../assets/menu/companyLogo.png" />
            <span>{{ systemName }}</span>
  <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
    <div class="logo">
      <!--            <img src="../../../assets/menu/companyLogo.png" />-->
      <h2>智能安全数字化平台</h2>
      <span>{{ systemName }}</span>
    </div>
    <div style="display: flex; align-items: center; padding-right: 5px">
      <div @click="backToMenu()" class="backBtn">返回首页</div>
      <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
        <div class="layout-navbars-breadcrumb-user-icon">
          <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
        </div>
        <div style="display: flex; align-items: center; padding-right: 5px">
            <div @click="backToMenu()" class="backBtn">返回首页</div>
            <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
                <div class="layout-navbars-breadcrumb-user-icon">
                    <i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item>
                        <el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item>
                        <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <!--        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">-->
            <!--            <div class="layout-navbars-breadcrumb-user-icon">-->
            <!--                <i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>-->
            <!--            </div>-->
            <!--            <template #dropdown>-->
            <!--                <el-dropdown-menu>-->
            <!--                    <el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>-->
            <!--                    <el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>-->
            <!--                    <el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>-->
            <!--                </el-dropdown-menu>-->
            <!--            </template>-->
            <!--        </el-dropdown>-->
            <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">-->
            <!--            <el-icon :title="$t('message.user.title2')">-->
            <!--                <ele-Search />-->
            <!--            </el-icon>-->
            <!--        </div>-->
            <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">-->
            <!--            <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>-->
            <!--        </div>-->
            <!--        <div class="layout-navbars-breadcrumb-user-icon">-->
            <!--            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">-->
            <!--                <template #reference>-->
            <!--                    <el-badge :is-dot="true">-->
            <!--                        <el-icon :title="$t('message.user.title4')">-->
            <!--                            <ele-Bell />-->
            <!--                        </el-icon>-->
            <!--                    </el-badge>-->
            <!--                </template>-->
            <!--                <template #default>-->
            <!--                    <UserNews />-->
            <!--                </template>-->
            <!--            </el-popover>-->
            <!--        </div>-->
            <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
                <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
            </div>
            <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{
                $t('message.user.dropdownLarge')
              }}
            </el-dropdown-item>
            <el-dropdown-item command="default" :disabled="disabledSize === 'default'">
              {{ $t('message.user.dropdownDefault') }}
            </el-dropdown-item>
            <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{
                $t('message.user.dropdownSmall')
              }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <!--        <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">-->
      <!--            <div class="layout-navbars-breadcrumb-user-icon">-->
      <!--                <i class="iconfont" :class="disabledI18n === 'en' ? 'icon-fuhao-yingwen' : 'icon-fuhao-zhongwen'" :title="$t('message.user.title1')"></i>-->
      <!--            </div>-->
      <!--            <template #dropdown>-->
      <!--                <el-dropdown-menu>-->
      <!--                    <el-dropdown-item command="zh-cn" :disabled="disabledI18n === 'zh-cn'">简体中文</el-dropdown-item>-->
      <!--                    <el-dropdown-item command="en" :disabled="disabledI18n === 'en'">English</el-dropdown-item>-->
      <!--                    <el-dropdown-item command="zh-tw" :disabled="disabledI18n === 'zh-tw'">繁體中文</el-dropdown-item>-->
      <!--                </el-dropdown-menu>-->
      <!--            </template>-->
      <!--        </el-dropdown>-->
      <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onSearchClick">-->
      <!--            <el-icon :title="$t('message.user.title2')">-->
      <!--                <ele-Search />-->
      <!--            </el-icon>-->
      <!--        </div>-->
      <!--        <div class="layout-navbars-breadcrumb-user-icon" @click="onLayoutSetingClick">-->
      <!--            <i class="icon-skin iconfont" :title="$t('message.user.title3')"></i>-->
      <!--        </div>-->
      <!--        <div class="layout-navbars-breadcrumb-user-icon">-->
      <!--            <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">-->
      <!--                <template #reference>-->
      <!--                    <el-badge :is-dot="true">-->
      <!--                        <el-icon :title="$t('message.user.title4')">-->
      <!--                            <ele-Bell />-->
      <!--                        </el-icon>-->
      <!--                    </el-badge>-->
      <!--                </template>-->
      <!--                <template #default>-->
      <!--                    <UserNews />-->
      <!--                </template>-->
      <!--            </el-popover>-->
      <!--        </div>-->
      <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick">
        <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
           :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
      </div>
      <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick">
                <span class="layout-navbars-breadcrumb-user-link">
                    <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5" style="width: 24px;height: 24px"/>
                    <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5"
                         style="width: 24px;height: 24px"/>
                    {{ userInfos.userName }}
                    <el-icon class="el-icon--right">
                        <ele-ArrowDown />
                        <ele-ArrowDown/>
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="/newMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
                        <el-dropdown-item @click="showPwdDialog = true">修改密码</el-dropdown-item>
                        <!--                    <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
                        <!--                    <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>-->
                        <!--                    <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>-->
                        <!--                    <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>-->
                        <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
          <el-dialog title="修改密码" v-model="showPwdDialog" width="500px">
            <el-form :model="pwdForm" size="default" ref="pwdRef" :rules="pwdFormRules" label-width="110px">
              <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                <el-form-item label="新密码" prop="newPassword">
                  <el-input v-model.trim="pwdForm.newPassword" placeholder="请输入" type="password" show-password>
                  </el-input>
                </el-form-item>
                <el-form-item label="确认新密码" prop="rePassword">
                  <el-input v-model.trim="pwdForm.rePassword" placeholder="请输入" type="password" show-password>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-form>
            <template #footer>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="/newMenu">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
            <el-dropdown-item @click="showPwdDialog = true">修改密码</el-dropdown-item>
            <!--                    <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
            <!--                    <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>-->
            <!--                    <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>-->
            <!--                    <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>-->
            <el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <el-dialog title="修改密码" v-model="showPwdDialog" width="500px">
        <el-form :model="pwdForm" size="default" ref="pwdRef" :rules="pwdFormRules" label-width="110px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model.trim="pwdForm.newPassword" placeholder="请输入" type="password" show-password>
              </el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="rePassword">
              <el-input v-model.trim="pwdForm.rePassword" placeholder="请输入" type="password" show-password>
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
        <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showPwdDialog = !showPwdDialog" size="default">取 消</el-button>
                    <el-button type="primary" v-throttle @click="onPwdSubmit" size="default">确 定</el-button>
                </span>
            </template>
          </el-dialog>
            <Search ref="searchRef" />
        </div>
        </template>
      </el-dialog>
      <Search ref="searchRef"/>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import {ref, getCurrentInstance, computed, reactive, toRefs, onMounted, defineComponent} from 'vue';
import {useRouter} from 'vue-router';
import {ElMessageBox, ElMessage} from 'element-plus';
import screenfull from 'screenfull';
import { useI18n } from 'vue-i18n';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
import { useThemeConfig } from '/@/stores/themeConfig';
import {useI18n} from 'vue-i18n';
import {storeToRefs} from 'pinia';
import {useUserInfo} from '/@/stores/userInfo';
import {useThemeConfig} from '/@/stores/themeConfig';
import other from '/@/utils/other';
import { Session, Local } from '/@/utils/storage';
import {Session, Local} from '/@/utils/storage';
import UserNews from '/@/layout/navBars/breadcrumb/userNews.vue';
import Search from '/@/layout/navBars/breadcrumb/search.vue';
import { useLoginApi } from '/@/api/login';
import { useMenuApi } from '/@/api/systemManage/menu/index';
import {useLoginApi} from '/@/api/login';
import {useMenuApi} from '/@/api/systemManage/menu/index';

const menuApi = useMenuApi();
import { backEndComponent, getBackEndControlRoutes, initBackEndControlRoutes, setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '../../../router/backEnd';
import { NextLoading } from '/@/utils/loading';
import { useRequestOldRoutes } from '/@/stores/requestOldRoutes';
import { dynamicRoutes } from '/@/router/route';
import {
  backEndComponent,
  getBackEndControlRoutes,
  initBackEndControlRoutes,
  setAddRoute,
  setFilterMenuAndCacheTagsViewRoutes
} from '../../../router/backEnd';
import {NextLoading} from '/@/utils/loading';
import {useRequestOldRoutes} from '/@/stores/requestOldRoutes';
import {dynamicRoutes} from '/@/router/route';
import Cookies from 'js-cookie';
import {useRoutesList} from "/@/stores/routesList";
import {verifyPwd} from "/@/utils/toolsValidate";
import {userApi} from "/@/api/systemManage/user";

export default defineComponent({
    name: 'layoutBreadcrumbUser',
    components: { UserNews, Search },
    setup() {
        const { t } = useI18n();
        const { proxy } = <any>getCurrentInstance();
        const router = useRouter();
        const stores = useUserInfo();
        const routeList = storeToRefs(useRoutesList())
        const storesThemeConfig = useThemeConfig();
        const { userInfos } = storeToRefs(stores);
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const searchRef = ref();
      const pwdRef = ref();
      const validatePwd = (rule: any, value: any, callback: any)=>{
        if(value === ''){
          callback(new Error('请输入密码'))
        }else{
          if(!verifyPwd(value)){
            callback(new Error('密码须包含字母、数字、特殊字符，长度在6-16之间'))
          }else{
            callback()
          }
  name: 'layoutBreadcrumbUser',
  components: {UserNews, Search},
  setup() {
    const {t} = useI18n();
    const {proxy} = <any>getCurrentInstance();
    const router = useRouter();
    const stores = useUserInfo();
    const routeList = storeToRefs(useRoutesList())
    const storesThemeConfig = useThemeConfig();
    const {userInfos} = storeToRefs(stores);
    const {themeConfig} = storeToRefs(storesThemeConfig);
    const searchRef = ref();
    const pwdRef = ref();
    const validatePwd = (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (!verifyPwd(value)) {
          callback(new Error('密码须包含字母、数字、特殊字符，长度在6-16之间'))
        } else {
          callback()
        }
      }
      const equalToPassword = (rule: any, value: any, callback: any) => {
        if(value == ''){
          callback(new Error("请再次确认密码"))
        }else if (state.pwdForm.newPassword !== value) {
          callback(new Error("两次输入的密码不一致"))
        } else {
          callback();
        }
      };
        const state = reactive({
            isScreenfull: false,
            disabledI18n: 'zh-cn',
            disabledSize: 'large',
            systemName: '',
          showPwdDialog: false,
          pwdForm: {
            uid: Cookies.get('uid'),
            newPassword: '',
            rePassword: ''
          },
          pwdFormRules: {
            newPassword: [{ required: true, validator: validatePwd, trigger: 'blur' }],
            rePassword: [{ required: true, validator: equalToPassword, trigger: "blur" }]
          }
        });
        // 设置分割样式
        const layoutUserFlexNum = computed(() => {
            let num: string | number = '';
            const { layout, isClassicSplitMenu } = themeConfig.value;
            const layoutArr: string[] = ['defaults', 'columns'];
            if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
            else num = '';
            return num;
        });
    }
    const equalToPassword = (rule: any, value: any, callback: any) => {
      if (value == '') {
        callback(new Error("请再次确认密码"))
      } else if (state.pwdForm.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"))
      } else {
        callback();
      }
    };
    const state = reactive({
      isScreenfull: false,
      disabledI18n: 'zh-cn',
      disabledSize: 'large',
      systemName: '',
      showPwdDialog: false,
      pwdForm: {
        uid: Cookies.get('uid'),
        newPassword: '',
        rePassword: ''
      },
      pwdFormRules: {
        newPassword: [{required: true, validator: validatePwd, trigger: 'blur'}],
        rePassword: [{required: true, validator: equalToPassword, trigger: "blur"}]
      }
    });
    // 设置分割样式
    const layoutUserFlexNum = computed(() => {
      let num: string | number = '';
      const {layout, isClassicSplitMenu} = themeConfig.value;
      const layoutArr: string[] = ['defaults', 'columns'];
      if (layoutArr.includes(layout) || (layout === 'classic' && !isClassicSplitMenu)) num = '1';
      else num = '';
      return num;
    });

      const onPwdSubmit = async () => {
        pwdRef.value.validate(async (valid:Boolean) => {
          if(valid){
            const {rePassword,...data} = state.pwdForm
            let res = await userApi().pwdModSelf(data);
            if (res.data.code === '200') {
              state.showPwdDialog = false
              ElMessage({
                type: 'success',
                message: '密码修改成功，请重新登录',
                duration: 2000
              })
              setTimeout(()=>{
                useLoginApi()
                    .signOut()
                    .then(() => {
                      Session.clear()
                      window.location.href = '/'
                    })
              },2000)
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          }else{
    const onPwdSubmit = async () => {
      pwdRef.value.validate(async (valid: Boolean) => {
        if (valid) {
          const {rePassword, ...data} = state.pwdForm
          let res = await userApi().pwdModSelf(data);
          if (res.data.code === '200') {
            state.showPwdDialog = false
            ElMessage({
              type:'warning',
              message:'请完善信息'
              type: 'success',
              message: '密码修改成功，请重新登录',
              duration: 2000
            })
            setTimeout(() => {
              useLoginApi()
                  .signOut()
                  .then(() => {
                    Session.clear()
                    window.location.href = '/'
                  })
            }, 2000)
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        } else {
          ElMessage({
            type: 'warning',
            message: '请完善信息'
          })
        }
      })
    }

    // 全屏点击时
    const onScreenfullClick = () => {
      if (!screenfull.isEnabled) {
        ElMessage.warning('暂不不支持全屏');
        return false;
      }
      screenfull.toggle();
      screenfull.on('change', () => {
        if (screenfull.isFullscreen) state.isScreenfull = true;
        else state.isScreenfull = false;
      });
    };
    // 布局配置 icon 点击时
    const onLayoutSetingClick = () => {
      proxy.mittBus.emit('openSetingsDrawer');
    };
    // 下拉菜单点击时
    const onHandleCommandClick = (path: string) => {
      if (path === 'logOut') {
        ElMessageBox({
          closeOnClickModal: false,
          closeOnPressEscape: false,
          title: t('message.user.logOutTitle'),
          message: t('message.user.logOutMessage'),
          showCancelButton: true,
          confirmButtonText: t('message.user.logOutConfirm'),
          cancelButtonText: t('message.user.logOutCancel'),
          buttonSize: 'default',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = t('message.user.logOutExit');
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 300);
              }, 700);
            } else {
              done();
            }
          }
        })
      }

        // 全屏点击时
        const onScreenfullClick = () => {
            if (!screenfull.isEnabled) {
                ElMessage.warning('暂不不支持全屏');
                return false;
            }
            screenfull.toggle();
            screenfull.on('change', () => {
                if (screenfull.isFullscreen) state.isScreenfull = true;
                else state.isScreenfull = false;
            });
        };
        // 布局配置 icon 点击时
        const onLayoutSetingClick = () => {
            proxy.mittBus.emit('openSetingsDrawer');
        };
        // 下拉菜单点击时
        const onHandleCommandClick = (path: string) => {
            if (path === 'logOut') {
                ElMessageBox({
                    closeOnClickModal: false,
                    closeOnPressEscape: false,
                    title: t('message.user.logOutTitle'),
                    message: t('message.user.logOutMessage'),
                    showCancelButton: true,
                    confirmButtonText: t('message.user.logOutConfirm'),
                    cancelButtonText: t('message.user.logOutCancel'),
                    buttonSize: 'default',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = t('message.user.logOutExit');
                            setTimeout(() => {
                                done();
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                }, 300);
                            }, 700);
                        } else {
                            done();
                        }
                    }
                })
                    .then(async () => {
                        let res = await useLoginApi().signOut();
                        if (res.data.code === '200') {
                            Session.clear(); // 清除缓存/token等
                            // 使用 reload 时，不需要调用 resetRoute() 重置路由
                            window.location.reload();
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: res.data.msg
                            });
                        }
                    })
                    .catch(() => {});
            } else if (path === 'wareHouse') {
                window.open('https://gitee.com/lyt-top/vue-next-admin');
            } else {
                router.push(path);
            }
        };
        // 菜单搜索点击
        const onSearchClick = () => {
            searchRef.value.openSearch();
        };
        // 组件大小改变
        const onComponentSizeChange = (size: string) => {
            Local.remove('themeConfig');
            themeConfig.value.globalComponentSize = size;
            Local.set('themeConfig', themeConfig.value);
            initComponentSize();
            window.location.reload();
        };
        // 语言切换
        const onLanguageChange = (lang: string) => {
            Local.remove('themeConfig');
            themeConfig.value.globalI18n = lang;
            Local.set('themeConfig', themeConfig.value);
            proxy.$i18n.locale = lang;
            initI18n();
            other.useTitle();
        };
        // 设置 element plus 组件的国际化
        const setI18nConfig = (locale: string) => {
            proxy.mittBus.emit('getI18nConfig', proxy.$i18n.messages[locale]);
        };
        // 初始化言语国际化
        const initI18n = () => {
            switch (Local.get('themeConfig').globalI18n) {
                case 'zh-cn':
                    state.disabledI18n = 'zh-cn';
                    setI18nConfig('zh-cn');
                    break;
                case 'en':
                    state.disabledI18n = 'en';
                    setI18nConfig('en');
                    break;
                case 'zh-tw':
                    state.disabledI18n = 'zh-tw';
                    setI18nConfig('zh-tw');
                    break;
            }
        };
        // 初始化全局组件大小
        const initComponentSize = () => {
            switch (Local.get('themeConfig').globalComponentSize) {
                case 'large':
                    state.disabledSize = 'large';
                    break;
                case 'default':
                    state.disabledSize = 'default';
                    break;
                case 'small':
                    state.disabledSize = 'small';
                    break;
            }
        };

        const getSysName = async () => {
            if (window.nextLoading === undefined) NextLoading.start();
            if (!Cookies.get('token')) return false;
            const res = await menuApi.getMenuAdmin(Cookies.get('projectId') === null ? '' : Cookies.get('projectId'));
            if (res.data.code === '200') {
              if(res.data.data && res.data.data[0]){
                state.systemName = res.data.data[0].project.projectName;
              }else{
                state.systemName = ''
            .then(async () => {
              let res = await useLoginApi().signOut();
              if (res.data.code === '200') {
                Session.clear(); // 清除缓存/token等
                // 使用 reload 时，不需要调用 resetRoute() 重置路由
                window.location.reload();
              } else {
                ElMessage({
                  type: 'warning',
                  message: res.data.msg
                });
              }
            } else {
                console.log('有问题');
            }
        };
        const backToMenu = () => {
            router.push({ path: 'newMenu' }).then(()=>{
                routeList.routesList.value = []
            })
            .catch(() => {
            });
        };
        // const toHome = () => {
        //     router.push({ path: 'newMenu' });
        // };
        // 页面加载时
        onMounted(() => {
            if (Local.get('themeConfig')) {
                initI18n();
                initComponentSize();
            }
            getSysName();
        });
        return {
            userInfos,
          pwdRef,
          onPwdSubmit,
            backToMenu,
            onLayoutSetingClick,
            onHandleCommandClick,
            onScreenfullClick,
            onSearchClick,
            onComponentSizeChange,
            onLanguageChange,
            searchRef,
            layoutUserFlexNum,
            ...toRefs(state)
        };
    }
      } else if (path === 'wareHouse') {
        window.open('https://gitee.com/lyt-top/vue-next-admin');
      } else {
        router.push(path);
      }
    };
    // 菜单搜索点击
    const onSearchClick = () => {
      searchRef.value.openSearch();
    };
    // 组件大小改变
    const onComponentSizeChange = (size: string) => {
      Local.remove('themeConfig');
      themeConfig.value.globalComponentSize = size;
      Local.set('themeConfig', themeConfig.value);
      initComponentSize();
      window.location.reload();
    };
    // 语言切换
    const onLanguageChange = (lang: string) => {
      Local.remove('themeConfig');
      themeConfig.value.globalI18n = lang;
      Local.set('themeConfig', themeConfig.value);
      proxy.$i18n.locale = lang;
      initI18n();
      other.useTitle();
    };
    // 设置 element plus 组件的国际化
    const setI18nConfig = (locale: string) => {
      proxy.mittBus.emit('getI18nConfig', proxy.$i18n.messages[locale]);
    };
    // 初始化言语国际化
    const initI18n = () => {
      switch (Local.get('themeConfig').globalI18n) {
        case 'zh-cn':
          state.disabledI18n = 'zh-cn';
          setI18nConfig('zh-cn');
          break;
        case 'en':
          state.disabledI18n = 'en';
          setI18nConfig('en');
          break;
        case 'zh-tw':
          state.disabledI18n = 'zh-tw';
          setI18nConfig('zh-tw');
          break;
      }
    };
    // 初始化全局组件大小
    const initComponentSize = () => {
      switch (Local.get('themeConfig').globalComponentSize) {
        case 'large':
          state.disabledSize = 'large';
          break;
        case 'default':
          state.disabledSize = 'default';
          break;
        case 'small':
          state.disabledSize = 'small';
          break;
      }
    };

    const getSysName = async () => {
      if (window.nextLoading === undefined) NextLoading.start();
      if (!Cookies.get('token')) return false;
      const res = await menuApi.getMenuAdmin(Cookies.get('projectId') === null ? '' : Cookies.get('projectId'));
      if (res.data.code === '200') {
        if (res.data.data && res.data.data[0]) {
          state.systemName = res.data.data[0].project.projectName;
        } else {
          state.systemName = ''
        }
      } else {
        console.log('有问题');
      }
    };
    const backToMenu = () => {
      router.push({path: 'newMenu'}).then(() => {
        routeList.routesList.value = []
      });
    };
    // const toHome = () => {
    //     router.push({ path: 'newMenu' });
    // };
    // 页面加载时
    onMounted(() => {
      if (Local.get('themeConfig')) {
        initI18n();
        initComponentSize();
      }
      getSysName();
    });
    return {
      userInfos,
      pwdRef,
      onPwdSubmit,
      backToMenu,
      onLayoutSetingClick,
      onHandleCommandClick,
      onScreenfullClick,
      onSearchClick,
      onComponentSizeChange,
      onLanguageChange,
      searchRef,
      layoutUserFlexNum,
      ...toRefs(state)
    };
  }
});
</script>

<style scoped lang="scss">
    @media screen and (min-width: 1400px) {
        .logo{
            img {
                height: 100%;
            }
            span{
                font-size: 32px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
        .backBtn {
            font-size: 16px;
            cursor: pointer;
            margin-right: 20px;

            &:hover {
                color: #409eff;
                font-weight: bolder;
            }
        }
@media screen and (min-width: 1400px) {
  .logo {
    display: flex;
    align-items: center;
    img {
      height: 100%;
    }
    @media screen and (min-width: 1200px) and (max-width: 1400px) {
        .logo{
            img {
                height: 90%;
            }
            span{
                font-size: 28px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
        .backBtn {
            font-size: 14px;
            cursor: pointer;
            margin-right: 20px;

            &:hover {
                color: #409eff;
                font-weight: bolder;
            }
        }
    h2 {
      width: 220px;
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      font-weight: bolder;
      text-align: center;
      color: #409eff;
    }
    @media screen and (max-width: 1024px) {
        .logo{
            img {
                width: 60%;
                height: auto;
            }
            span{
                font-size: 22px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
        .backBtn {
            font-size: 12px;
            cursor: pointer;
            margin-right: 20px;

            &:hover {
                color: #409eff;
                font-weight: bolder;
            }
        }
    span {
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      color: #333;
      font-weight: bolder;
      border-left: 2px solid #409eff;
      padding-left: 15px
    }
    .layout-navbars-breadcrumb-user {
        display: flex;
        align-items: center;
        justify-content: space-between;
  }
  .backBtn {
    font-size: 16px;
    cursor: pointer;
    margin-right: 20px;

        .logo {
            height: 75%;
            padding: 5px 10px;
            display: flex;
            align-items: center;
            overflow: hidden;
            box-sizing: border-box;
        }
        &-link {
            height: 100%;
            display: flex;
            align-items: center;
            white-space: nowrap;
            &-photo {
                width: 25px;
                height: 25px;
                border-radius: 100%;
            }
        }
        &-icon {
            padding: 0 10px;
            cursor: pointer;
            color: var(--next-bg-topBarColor);
            height: 80px;
            line-height: 80px;
            display: flex;
            align-items: center;
            &:hover {
                background: var(--next-color-user-hover);
                i {
                    display: inline-block;
                    animation: logoAnimation 0.3s ease-in-out;
                }
            }
        }
        ::v-deep(.el-dropdown) {
            color: var(--next-bg-topBarColor);
        }
        ::v-deep(.el-badge) {
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
        }
        ::v-deep(.el-badge__content.is-fixed) {
            top: 12px;
        }
    &:hover {
      color: #409eff;
      font-weight: bolder;
    }
  }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
  .logo {
    display: flex;
    align-items: center;
    img {
      height: 100%;
    }

    h2 {
      width: 220px;
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      font-weight: bolder;
      text-align: center;
      color: #409eff;
    }

    span {
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      color: #333;
      font-weight: bolder;
      border-left: 2px solid #409eff;
      padding-left: 15px
    }
  }
  .backBtn {
    font-size: 14px;
    cursor: pointer;
    margin-right: 20px;

    &:hover {
      color: #409eff;
      font-weight: bolder;
    }
  }
}

@media screen and (max-width: 1024px) {
  .logo {
    display: flex;
    align-items: center;
    img {
      height: 100%;
    }

    h2 {
      width: 220px;
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      font-weight: bolder;
      text-align: center;
      color: #409eff;
    }

    span {
      font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem);
      color: #333;
      font-weight: bolder;
      border-left: 2px solid #409eff;
      padding-left: 15px
    }
  }
  .backBtn {
    font-size: 12px;
    cursor: pointer;
    margin-right: 20px;

    &:hover {
      color: #409eff;
      font-weight: bolder;
    }
  }
}

.layout-navbars-breadcrumb-user {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .logo {
    height: 75%;
    padding: 5px 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
  }

  &-link {
    height: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;

    &-photo {
      width: 25px;
      height: 25px;
      border-radius: 100%;
    }
  }

  &-icon {
    padding: 0 10px;
    cursor: pointer;
    color: var(--next-bg-topBarColor);
    height: 80px;
    line-height: 80px;
    display: flex;
    align-items: center;

    &:hover {
      background: var(--next-color-user-hover);

      i {
        display: inline-block;
        animation: logoAnimation 0.3s ease-in-out;
      }
    }
  }

  ::v-deep(.el-dropdown) {
    color: var(--next-bg-topBarColor);
  }

  ::v-deep(.el-badge) {
    height: 40px;
    line-height: 40px;
    display: flex;
    align-items: center;
  }

  ::v-deep(.el-badge__content.is-fixed) {
    top: 12px;
  }
}
</style>

 src/views/intellectInspect/inspectIndex/index.vue

@@ -667,7 +667,6 @@
                  }
                }
                state.depList = newList
                console.log(state.depList,'3434')
            } else {
                ElMessage({
                    type: 'warning',

 src/views/newHome/index.vue

@@ -1,1023 +1,1067 @@
<template>
    <div class="login-container" :key="once">
        <div class="topPanel"></div>
        <div class="topPanelBg"></div>
        <div class="topPanelCont">
            <div class="topLogo">
                <img src="../../assets/newMenu/toplogo.png" />
            </div>
            <div class="userInfo">
                <div @click="onScreenfullClick" style="margin-right: 15px; cursor: pointer">
                    <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
                </div>
                <div class="loginOut" @click="onLoginOut">退出登录</div>
                <span></span>
                <div class="avator">
                    <img src="../../assets/menu/admin.png" />
                    <div>{{userName}}</div>
                </div>
            </div>
  <div class="login-container" :key="once">
    <div class="topPanel"></div>
    <div class="topPanelBg"></div>
    <div class="topPanelCont">
      <div class="topLogo">
        <!--                <img src="../../assets/newMenu/toplogo.png" />-->
        <span style="font-size: 18px;color: #fff">智能安全数字化平台</span>
      </div>
      <div class="userInfo">
        <div @click="onScreenfullClick" style="margin-right: 15px; cursor: pointer">
          <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')"
             :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
        </div>
        <div class="leftCont"></div>
        <div class="topCont">
            <div class="topInfo">
                <div class="topTit">智能安全数字化平台</div>
                <div class="topTime">
                    <div class="time">
                        {{ time }}
                    </div>
                    <span></span>
                    <div class="today">
                        <div>{{ date }}</div>
                        <div>
        <div class="loginOut" @click="onLoginOut">退出登录</div>
        <span></span>
        <div class="avator">
          <img src="../../assets/menu/admin.png"/>
          <div>{{ userName }}</div>
        </div>
      </div>
    </div>
    <div class="leftCont"></div>
    <div class="topCont">
      <div class="topInfo">
        <div class="topTit">智能安全数字化平台</div>
        <div class="topTime">
          <div class="time">
            {{ time }}
          </div>
          <span></span>
          <div class="today">
            <div>{{ date }}</div>
            <div>
                            <span>{{ weekDay }}</span
                            ><span>{{ dayTime }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="line"></div>
          </div>
        </div>
        <div class="menuGrid">
            <div class="gridCont">
<!--                <div class="grid-content grid-content-1 cont-bg-1" v-throttle @click="toRiskPlatform">-->
<!--                    <div class="toplayer">-->
<!--                        <div>-->
<!--                            <img class="iconImg" src="../../assets/newMenu/icon1.png" />-->
<!--                            <div>-->
<!--                                <div class="itemTit1">智能安全风险综合预警<br />预报平台</div>-->
<!--                                <div class="enTit1">Intelligent Security Risk Comprehensive Forewarning and Forecasting Platform</div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg1" src="../../assets/newMenu/card-1.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-1" v-throttle @click="toDoublePrevent">-->
<!--                    <div class="toplayer">-->
<!--                        <img class="iconImg" src="../../assets/newMenu/icon2.png" />-->
<!--                        <div>-->
<!--                            <div class="itemTit">智能安全双重预防系统</div>-->
<!--                            <div class="enTit">Intelligent Security Dual Prevention System</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg" src="../../assets/newMenu/card-4.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-1" v-throttle @click="render('4')">-->
<!--                    <div class="toplayer">-->
<!--                        <img class="iconImg" src="../../assets/newMenu/icon3.png" />-->
<!--                        <div>-->
<!--                            <div class="itemTit">智能安全巡检系统</div>-->
<!--                            <div class="enTit">Intelligent Security Patrol System</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg" src="../../assets/newMenu/card-8.png" />-->
<!--                </div>-->
                <div class="grid-content cont-bg-1" v-throttle @click="render('3')">
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon4.png" />
                        <div>
                            <div class="itemTit">智能安全特殊作业系统</div>
                            <div class="enTit">Intelligent Security Special Operating System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-7.png" />
                </div>
<!--                <div class="grid-content cont-bg-1" v-throttle @click="toManLocation">-->
<!--                  <div class="toplayer">-->
<!--                    <img class="iconImg" src="../../assets/newMenu/icon12.png" />-->
<!--                    <div>-->
<!--                      <div class="itemTit">人员定位系统</div>-->
<!--                      <div class="enTit">Personnel Positioning System</div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <img class="bgImg" src="../../assets/newMenu/card-12.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-2" v-throttle @click="render('12')">-->
<!--                  <div class="toplayer">-->
<!--                    <img class="iconImg" src="../../assets/newMenu/icon14.png" />-->
<!--                    <div>-->
<!--                      <div class="itemTit">监管数据融合互通系统</div>-->
<!--                      <div class="enTit">Regulatory Data Integration and Interoperability System</div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <img class="bgImg" src="../../assets/newMenu/card-14.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-2" v-throttle @click="render('7')">-->
<!--                    <div class="toplayer">-->
<!--                        <img class="iconImg" src="../../assets/newMenu/icon5.png" />-->
<!--                        <div>-->
<!--                            <div class="itemTit">安全目标责任管理系统</div>-->
<!--                            <div class="enTit">Security Target Responsibility Management System</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg" src="../../assets/newMenu/card-2.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-2" v-throttle @click="render('10')">-->
<!--                    <div class="toplayer">-->
<!--                        <img class="iconImg" src="../../assets/newMenu/icon6.png" />-->
<!--                        <div>-->
<!--                            <div class="itemTit">安全知识图谱系统</div>-->
<!--                            <div class="enTit">Security Knowledge Graph System</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg" src="../../assets/newMenu/card-3.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-2" v-throttle @click="render('9')">-->
<!--                    <div class="toplayer">-->
<!--                        <img class="iconImg" src="../../assets/newMenu/icon7.png" />-->
<!--                        <div>-->
<!--                            <div class="itemTit">设备综合管控系统</div>-->
<!--                            <div class="enTit">Equipment Integrated Management and Control System</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg" src="../../assets/newMenu/card-9.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-2" v-throttle @click="render('6')">-->
<!--                    <div class="toplayer">-->
<!--                        <img class="iconImg" src="../../assets/newMenu/icon8.png" />-->
<!--                        <div>-->
<!--                            <div class="itemTit">应急管理系统</div>-->
<!--                            <div class="enTit">Emergency Management System</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg" src="../../assets/newMenu/card-5.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-2" v-throttle @click="renderToNew('11')">-->
<!--                    <div class="toplayer">-->
<!--                        <img class="iconImg" src="../../assets/newMenu/icon9.png" />-->
<!--                        <div>-->
<!--&lt;!&ndash;                            <div class="itemTit">智能安全危险化学品全生命周期管控系统</div>&ndash;&gt;-->
<!--&lt;!&ndash;                            <div class="enTit">Intelligent Security Hazardous Chemicals Life Cycle Safety Management System</div>&ndash;&gt;-->
<!--                            <div class="itemTit">安全教育考试系统</div>-->
<!--                            <div class="enTit">Safety Education Examination System</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg" src="../../assets/newMenu/card-10.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-2" v-throttle @click="render('8')">-->
<!--                    <div class="toplayer">-->
<!--                        <img class="iconImg" src="../../assets/newMenu/icon10.png" />-->
<!--                        <div>-->
<!--                            <div class="itemTit">安全事故管理系统</div>-->
<!--                            <div class="enTit">Security Incident Management System</div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <img class="bgImg" src="../../assets/newMenu/card-6.png" />-->
<!--                </div>-->
<!--                <div class="grid-content cont-bg-2" v-throttle @click="toSmartFactory">-->
<!--                  <div class="toplayer">-->
<!--                    <img class="iconImg" src="../../assets/newMenu/icon13.png" />-->
<!--                    <div>-->
<!--                      <div class="itemTit">智能工厂系统</div>-->
<!--                      <div class="enTit">Intelligent Factory System</div>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <img class="bgImg" src="../../assets/newMenu/card-13.png" />-->
<!--                </div>-->
                <div class="grid-content cont-bg-2" @click="render('1')">
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon11.png" />
                        <div>
                            <div class="itemTit">安全基础信息系统</div>
                            <div class="enTit">Basic Security Information System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-11.png" />
                </div>
            </div>
        </div>
        <div class="bot-rights">
            <img src="../../assets/newMenu/pic_line1.png" />
            <div>技术支持：苏州国科鸿宇智能科技有限公司</div>
            <img src="../../assets/newMenu/pic_line2.png" />
        </div>
      </div>
      <div class="line"></div>
    </div>
    <div class="menuGrid">
      <div class="gridCont">
        <!--                <div class="grid-content grid-content-1 cont-bg-1" v-throttle @click="toRiskPlatform">-->
        <!--                    <div class="toplayer">-->
        <!--                        <div>-->
        <!--                            <img class="iconImg" src="../../assets/newMenu/icon1.png" />-->
        <!--                            <div>-->
        <!--                                <div class="itemTit1">智能安全风险综合预警<br />预报平台</div>-->
        <!--                                <div class="enTit1">Intelligent Security Risk Comprehensive Forewarning and Forecasting Platform</div>-->
        <!--                            </div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg1" src="../../assets/newMenu/card-1.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-1" v-throttle @click="toDoublePrevent">-->
        <!--                    <div class="toplayer">-->
        <!--                        <img class="iconImg" src="../../assets/newMenu/icon2.png" />-->
        <!--                        <div>-->
        <!--                            <div class="itemTit">智能安全双重预防系统</div>-->
        <!--                            <div class="enTit">Intelligent Security Dual Prevention System</div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg" src="../../assets/newMenu/card-4.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-1" v-throttle @click="render('4')">-->
        <!--                    <div class="toplayer">-->
        <!--                        <img class="iconImg" src="../../assets/newMenu/icon3.png" />-->
        <!--                        <div>-->
        <!--                            <div class="itemTit">智能安全巡检系统</div>-->
        <!--                            <div class="enTit">Intelligent Security Patrol System</div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg" src="../../assets/newMenu/card-8.png" />-->
        <!--                </div>-->
        <div class="grid-content cont-bg-1" v-throttle @click="render('3')">
          <div class="toplayer">
            <img class="iconImg" src="../../assets/newMenu/icon4.png"/>
            <div>
              <div class="itemTit">智能安全特殊作业系统</div>
              <div class="enTit">Intelligent Security Special Operating System</div>
            </div>
          </div>
          <img class="bgImg" src="../../assets/newMenu/card-7.png"/>
        </div>
        <!--                <div class="grid-content cont-bg-1" v-throttle @click="toManLocation">-->
        <!--                  <div class="toplayer">-->
        <!--                    <img class="iconImg" src="../../assets/newMenu/icon12.png" />-->
        <!--                    <div>-->
        <!--                      <div class="itemTit">人员定位系统</div>-->
        <!--                      <div class="enTit">Personnel Positioning System</div>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                  <img class="bgImg" src="../../assets/newMenu/card-12.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-2" v-throttle @click="render('12')">-->
        <!--                  <div class="toplayer">-->
        <!--                    <img class="iconImg" src="../../assets/newMenu/icon14.png" />-->
        <!--                    <div>-->
        <!--                      <div class="itemTit">监管数据融合互通系统</div>-->
        <!--                      <div class="enTit">Regulatory Data Integration and Interoperability System</div>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                  <img class="bgImg" src="../../assets/newMenu/card-14.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-2" v-throttle @click="render('7')">-->
        <!--                    <div class="toplayer">-->
        <!--                        <img class="iconImg" src="../../assets/newMenu/icon5.png" />-->
        <!--                        <div>-->
        <!--                            <div class="itemTit">安全目标责任管理系统</div>-->
        <!--                            <div class="enTit">Security Target Responsibility Management System</div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg" src="../../assets/newMenu/card-2.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-2" v-throttle @click="render('10')">-->
        <!--                    <div class="toplayer">-->
        <!--                        <img class="iconImg" src="../../assets/newMenu/icon6.png" />-->
        <!--                        <div>-->
        <!--                            <div class="itemTit">安全知识图谱系统</div>-->
        <!--                            <div class="enTit">Security Knowledge Graph System</div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg" src="../../assets/newMenu/card-3.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-2" v-throttle @click="render('9')">-->
        <!--                    <div class="toplayer">-->
        <!--                        <img class="iconImg" src="../../assets/newMenu/icon7.png" />-->
        <!--                        <div>-->
        <!--                            <div class="itemTit">设备综合管控系统</div>-->
        <!--                            <div class="enTit">Equipment Integrated Management and Control System</div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg" src="../../assets/newMenu/card-9.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-2" v-throttle @click="render('6')">-->
        <!--                    <div class="toplayer">-->
        <!--                        <img class="iconImg" src="../../assets/newMenu/icon8.png" />-->
        <!--                        <div>-->
        <!--                            <div class="itemTit">应急管理系统</div>-->
        <!--                            <div class="enTit">Emergency Management System</div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg" src="../../assets/newMenu/card-5.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-2" v-throttle @click="renderToNew('11')">-->
        <!--                    <div class="toplayer">-->
        <!--                        <img class="iconImg" src="../../assets/newMenu/icon9.png" />-->
        <!--                        <div>-->
        <!--&lt;!&ndash;                            <div class="itemTit">智能安全危险化学品全生命周期管控系统</div>&ndash;&gt;-->
        <!--&lt;!&ndash;                            <div class="enTit">Intelligent Security Hazardous Chemicals Life Cycle Safety Management System</div>&ndash;&gt;-->
        <!--                            <div class="itemTit">安全教育考试系统</div>-->
        <!--                            <div class="enTit">Safety Education Examination System</div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg" src="../../assets/newMenu/card-10.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-2" v-throttle @click="render('8')">-->
        <!--                    <div class="toplayer">-->
        <!--                        <img class="iconImg" src="../../assets/newMenu/icon10.png" />-->
        <!--                        <div>-->
        <!--                            <div class="itemTit">安全事故管理系统</div>-->
        <!--                            <div class="enTit">Security Incident Management System</div>-->
        <!--                        </div>-->
        <!--                    </div>-->
        <!--                    <img class="bgImg" src="../../assets/newMenu/card-6.png" />-->
        <!--                </div>-->
        <!--                <div class="grid-content cont-bg-2" v-throttle @click="toSmartFactory">-->
        <!--                  <div class="toplayer">-->
        <!--                    <img class="iconImg" src="../../assets/newMenu/icon13.png" />-->
        <!--                    <div>-->
        <!--                      <div class="itemTit">智能工厂系统</div>-->
        <!--                      <div class="enTit">Intelligent Factory System</div>-->
        <!--                    </div>-->
        <!--                  </div>-->
        <!--                  <img class="bgImg" src="../../assets/newMenu/card-13.png" />-->
        <!--                </div>-->
        <div class="grid-content cont-bg-1" @click="render('1')">
          <div class="toplayer">
            <img class="iconImg" src="../../assets/newMenu/icon11.png"/>
            <div>
              <div class="itemTit">安全基础信息系统</div>
              <div class="enTit">Basic Security Information System</div>
            </div>
          </div>
          <img class="bgImg" src="../../assets/newMenu/card-11.png"/>
        </div>
      </div>
    </div>
    <div class="bot-rights">
      <img src="../../assets/newMenu/pic_line1.png"/>
      <div>技术支持：苏州国科鸿宇智能科技有限公司</div>
      <img src="../../assets/newMenu/pic_line2.png"/>
    </div>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, computed, defineComponent, onMounted, onUnmounted} from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import {storeToRefs} from 'pinia';
import {useThemeConfig} from '/@/stores/themeConfig';
import logoMini from '/@/assets/logo-mini.svg';
import loginIconTwo from '/@/assets/login-icon-two.svg';
import { NextLoading } from '/@/utils/loading';
import { Session } from '/@/utils/storage';
import { useRoute, useRouter } from 'vue-router';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { useRoutesList } from '/@/stores/routesList';
import {NextLoading} from '/@/utils/loading';
import {Session} from '/@/utils/storage';
import {useRoute, useRouter} from 'vue-router';
import {initBackEndControlRoutes} from '/@/router/backEnd';
import {useUserInfo} from '/@/stores/userInfo';
import {useRoutesList} from '/@/stores/routesList';
import pinia from '/@/stores';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus/es';
import { useLoginApi } from '/@/api/login';
import { useI18n } from 'vue-i18n';
import {useTagsViewRoutes} from '/@/stores/tagsViewRoutes';
import {ElMessage} from 'element-plus';
import {ElMessageBox} from 'element-plus/es';
import {useLoginApi} from '/@/api/login';
import {useI18n} from 'vue-i18n';
import screenfull from 'screenfull';
import router from '../../router';
import Cookies from 'js-cookie';

// 定义接口来定义对象的类型
interface LoginState {
    tabsActiveName: string;
    isScan: boolean;
    count: number;
    projectId: string;
    once: number;
    isScreenfull: boolean;
    time: string;
    date: string;
    weekDay: string;
    dayTime: string;
    timer: null | any
  tabsActiveName: string;
  isScan: boolean;
  count: number;
  projectId: string;
  once: number;
  isScreenfull: boolean;
  time: string;
  date: string;
  weekDay: string;
  dayTime: string;
  timer: null | any
}

export default defineComponent({
    name: 'loginIndex',
    components: {},
    setup() {
        const { t } = useI18n();
        const router = useRouter();
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
        const routeToStore = useRoutesList(pinia);
        const { routesList } = storeToRefs(routeToStore);
        const storesThemeConfig = useThemeConfig();
        const { themeConfig } = storeToRefs(storesThemeConfig);
        // 时间格式化
        const timeForm = {
            hour12: false,
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
        };
        const state = reactive<LoginState>({
            tabsActiveName: 'account',
            isScan: false,
            count: 0,
            projectId: '1',
            once: 0,
            time: '',
            date: '',
            weekDay: '',
            dayTime: '',
            isScreenfull: false,
              timer: null
        });
  name: 'loginIndex',
  components: {},
  setup() {
    const {t} = useI18n();
    const router = useRouter();
    const userInfo = useUserInfo();
    const {userInfos} = storeToRefs(userInfo);
    const routeToStore = useRoutesList(pinia);
    const {routesList} = storeToRefs(routeToStore);
    const storesThemeConfig = useThemeConfig();
    const {themeConfig} = storeToRefs(storesThemeConfig);
    // 时间格式化
    const timeForm = {
      hour12: false,
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit'
    };
    const state = reactive<LoginState>({
      tabsActiveName: 'account',
      isScan: false,
      count: 0,
      projectId: '1',
      once: 0,
      time: '',
      date: '',
      weekDay: '',
      dayTime: '',
      isScreenfull: false,
      timer: null
    });

        const userName = computed(() =>{
            return userInfos.value.userName
        })
        // 获取布局配置信息
        const getThemeConfig = computed(() => {
            return themeConfig.value;
        });
    const userName = computed(() => {
      return userInfos.value.userName
    })
    // 获取布局配置信息
    const getThemeConfig = computed(() => {
      return themeConfig.value;
    });

        // 当前时间
        const getDateTime = () => {
            const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
            state.time = curTime.slice(10, 16);
            state.date = curTime.slice(0, 10);
            let week = ['日', '一', '二', '三', '四', '五', '六'];
            let day = new Date().getDay();
            state.weekDay = '星期' + week[day];
            let curHour = Number(curTime.slice(10, 13));
            if (curHour >= 5 && curHour <= 10) {
                state.dayTime = '上午';
            }
            if (curHour > 10 && curHour <= 12) {
                state.dayTime = '中午';
            }
            if (curHour > 12 && curHour <= 18) {
                state.dayTime = '下午';
            }
            if (curHour > 18 && curHour <= 22) {
                state.dayTime = '晚上';
            }
            if (curHour > 22) {
                state.dayTime = '午夜';
            }
        };
        // 下拉菜单点击时
        const onLoginOut = () => {
            ElMessageBox({
                closeOnClickModal: false,
                closeOnPressEscape: false,
                title: t('message.user.logOutTitle'),
                message: t('message.user.logOutMessage'),
                showCancelButton: true,
                confirmButtonText: t('message.user.logOutConfirm'),
                cancelButtonText: t('message.user.logOutCancel'),
                buttonSize: 'default',
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = t('message.user.logOutExit');
                        setTimeout(() => {
                            done();
                            setTimeout(() => {
                                instance.confirmButtonLoading = false;
                            }, 300);
                        }, 700);
                    } else {
                        done();
                    }
                }
            })
                .then(async () => {
                    let res = await useLoginApi().signOut();
                    if (res.data.code === '200') {
                        Session.clear(); // 清除缓存/token等
                        // 使用 reload 时，不需要调用 resetRoute() 重置路由
                        window.location.reload();
                    } else {
                        ElMessage({
                            type: 'warning',
                            message: res.data.msg
                        });
                    }
                })
                .catch(() => {});
        };
        //选择菜单
        const render = (value: string) => {
            state.projectId = value;
            renderMenu();
        };

        // 全屏点击时
        const onScreenfullClick = () => {
            if (!screenfull.isEnabled) {
                ElMessage.warning('暂不不支持全屏');
                return false;
            }
            screenfull.toggle();
            screenfull.on('change', () => {
                if (screenfull.isFullscreen) state.isScreenfull = true;
                else state.isScreenfull = false;
            });
        };
        // 去风险大屏
        const toRiskPlatform = async() => {
            // router.push({
            //     name: "warningScreen"
            // });
          const routePath = '/warningScreen';
          const resolvedRoute = router.resolve(routePath);
          const fullPath = resolvedRoute.href
          window.open(fullPath, '_blank');

            // window.open('http://39.104.85.193:8585/');
        };

        const toDoublePrevent = () => {
           window.open('http://8.137.115.153:6801/login');
        };
        const toSmartFactory = () =>{
          window.open('http://117.190.40.54:5522/#/login');
    // 当前时间
    const getDateTime = () => {
      const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-');
      state.time = curTime.slice(10, 16);
      state.date = curTime.slice(0, 10);
      let week = ['日', '一', '二', '三', '四', '五', '六'];
      let day = new Date().getDay();
      state.weekDay = '星期' + week[day];
      let curHour = Number(curTime.slice(10, 13));
      if (curHour >= 5 && curHour <= 10) {
        state.dayTime = '上午';
      }
      if (curHour > 10 && curHour <= 12) {
        state.dayTime = '中午';
      }
      if (curHour > 12 && curHour <= 18) {
        state.dayTime = '下午';
      }
      if (curHour > 18 && curHour <= 22) {
        state.dayTime = '晚上';
      }
      if (curHour > 22) {
        state.dayTime = '午夜';
      }
    };
    // 下拉菜单点击时
    const onLoginOut = () => {
      ElMessageBox({
        closeOnClickModal: false,
        closeOnPressEscape: false,
        title: t('message.user.logOutTitle'),
        message: t('message.user.logOutMessage'),
        showCancelButton: true,
        confirmButtonText: t('message.user.logOutConfirm'),
        cancelButtonText: t('message.user.logOutCancel'),
        buttonSize: 'default',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = t('message.user.logOutExit');
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 700);
          } else {
            done();
          }
        }
        const toManLocation = () =>{
          window.open('http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9');
        }
        const throttle = (renderMenu: any, delay: number) => {
            let flag = true;
            let count = 0;
            return function () {
                if (!flag) return;
                flag = false;
                if (count === 0) {
                    renderMenu.apply();
                    count++;
                    flag = true;
                } else {
                    setTimeout(() => {
                        renderMenu.apply();
                        flag = true;
                    }, delay);
                }
            };
        };

        //调用菜单方法
        const renderMenu = throttle(() => {
          // debugger
            renderFun();
        }, 2000);

        //调后台菜单接口
        const renderFun = async () => {
            Cookies.set('projectId', state.projectId);
            userInfos.value.projectId = state.projectId;
            await initBackEndControlRoutes().then(() => {
                let linkToMenu = [...routesList.value];
                if (linkToMenu && linkToMenu.length > 0) {
                    router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[0]));
                } else {
                    ElMessage({ type: 'warning', message: '你没有该子系统的权限' });
                }
            });
        };

        const linkToFirstMenu: any = (value: any) => {
            let returnMenu = value;
            if (returnMenu.children?.length > 0) {
                return linkToFirstMenu(returnMenu.children[0]);
      })
          .then(async () => {
            let res = await useLoginApi().signOut();
            if (res.data.code === '200') {
              Session.clear(); // 清除缓存/token等
              // 使用 reload 时，不需要调用 resetRoute() 重置路由
              window.location.reload();
            } else {
                return returnMenu.path;
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
        };
          })
          .catch(() => {
          });
    };
    //选择菜单
    const render = (value: string) => {
      state.projectId = value;
      renderMenu();
    };

        const renderToNew = () => {
            // window.open('http://222.92.213.22:18001/smartlab/', '_blank');
          window.open('http://47.108.222.15:8000/', '_blank');
        };
        // //点击进入特殊作业
        // const toSpecialWorkSys = () => {
        //     router.push('/layoutPage');
        // };
        // 页面加载时
        onMounted(() => {
            state.once += 1;
            NextLoading.done();
            getDateTime();
            state.timer = setInterval(() => {
                getDateTime();
            }, 30000);
            // loginBg();
            // loginApp()
        })

      onUnmounted(() => {
        clearInterval(state.timer)
    // 全屏点击时
    const onScreenfullClick = () => {
      if (!screenfull.isEnabled) {
        ElMessage.warning('暂不不支持全屏');
        return false;
      }
      screenfull.toggle();
      screenfull.on('change', () => {
        if (screenfull.isFullscreen) state.isScreenfull = true;
        else state.isScreenfull = false;
      });
    };
    // 去风险大屏
    const toRiskPlatform = async () => {
      // router.push({
      //     name: "warningScreen"
      // });
      const routePath = '/warningScreen';
      const resolvedRoute = router.resolve(routePath);
      const fullPath = resolvedRoute.href
      window.open(fullPath, '_blank');

        return {
            render,
            userName,
            logoMini,
            onLoginOut,
            getDateTime,
            renderToNew,
            toRiskPlatform,
            toDoublePrevent,
            toSmartFactory,
            toManLocation,
            onScreenfullClick,
            loginIconTwo,
            getThemeConfig,
            ...toRefs(state)
        };
      // window.open('http://39.104.85.193:8585/');
    };

    const toDoublePrevent = () => {
      window.open('http://8.137.115.153:6801/login');
    };
    const toSmartFactory = () => {
      window.open('http://117.190.40.54:5522/#/login');
    }
    const toManLocation = () => {
      window.open('http://117.190.40.54:8081/location_system_5.4.9/login/login.html?company=GUOTAI&version=5.4.9');
    }
    const throttle = (renderMenu: any, delay: number) => {
      let flag = true;
      let count = 0;
      return function () {
        if (!flag) return;
        flag = false;
        if (count === 0) {
          renderMenu.apply();
          count++;
          flag = true;
        } else {
          setTimeout(() => {
            renderMenu.apply();
            flag = true;
          }, delay);
        }
      };
    };

    //调用菜单方法
    const renderMenu = throttle(() => {
      // debugger
      renderFun();
    }, 2000);

    //调后台菜单接口
    const renderFun = async () => {
      Cookies.set('projectId', state.projectId);
      userInfos.value.projectId = state.projectId;
      await initBackEndControlRoutes().then(() => {
        let linkToMenu = [...routesList.value];
        if (linkToMenu && linkToMenu.length > 0) {
          router.push(linkToFirstMenu(JSON.parse(JSON.stringify(linkToMenu))[0]));
        } else {
          ElMessage({type: 'warning', message: '你没有该子系统的权限'});
        }
      });
    };

    const linkToFirstMenu: any = (value: any) => {
      let returnMenu = value;
      if (returnMenu.children?.length > 0) {
        return linkToFirstMenu(returnMenu.children[0]);
      } else {
        return returnMenu.path;
      }
    };

    const renderToNew = () => {
      // window.open('http://222.92.213.22:18001/smartlab/', '_blank');
      window.open('http://47.108.222.15:8000/', '_blank');
    };
    // //点击进入特殊作业
    // const toSpecialWorkSys = () => {
    //     router.push('/layoutPage');
    // };
    // 页面加载时
    onMounted(() => {
      state.once += 1;
      NextLoading.done();
      getDateTime();
      state.timer = setInterval(() => {
        getDateTime();
      }, 30000);
      // loginBg();
      // loginApp()
    })

    onUnmounted(() => {
      clearInterval(state.timer)
    });

    return {
      render,
      userName,
      logoMini,
      onLoginOut,
      getDateTime,
      renderToNew,
      toRiskPlatform,
      toDoublePrevent,
      toSmartFactory,
      toManLocation,
      onScreenfullClick,
      loginIconTwo,
      getThemeConfig,
      ...toRefs(state)
    };
  }
});
</script>

<style scoped lang="scss">
    @keyframes showDown {
        100% {
            position: absolute;
            top: 60px;
        }
    }
    @keyframes moveDown {
        100% {
            position: absolute;
            top: 0;
        }
    }
    @keyframes moveRight {
        100% {
            position: absolute;
            left: 0;
        }
    }
    @keyframes upDown {
        50% {
            -webkit-transform: translateY(-8px);
            -ms-transform: translateY(-8px);
            -o-transform: translateY(-8px);
            transform: translateY(-8px);
        }
        100% {
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
        }
    }
@keyframes showDown {
  100% {
    position: absolute;
    top: 60px;
  }
}

@keyframes moveDown {
  100% {
    position: absolute;
    top: 0;
  }
}

@keyframes moveRight {
  100% {
    position: absolute;
    left: 0;
  }
}

@keyframes upDown {
  50% {
    -webkit-transform: translateY(-8px);
    -ms-transform: translateY(-8px);
    -o-transform: translateY(-8px);
    transform: translateY(-8px);
  }
  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@media screen and (min-width: 1600px) {
    .gridCont {
        width: 100%;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 200px);
        grid-auto-flow: row;
        justify-content: center;
        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            padding: 0 20px;
            z-index: 99;
  .gridCont {
    width: 100%;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 200px);
    grid-auto-flow: row;
    justify-content: center;

            .itemTit {
                font-size: 28px;
                line-height: 34px;
                margin-bottom: 2px;
                height: 40%;
                color: #072270;
            }
            .enTit {
                font-size: 16px;
                line-height: 20px;
                color: #072270;
            }
    .toplayer {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      padding: 0 20px;
      z-index: 99;

            .iconImg {
                width: 88px;
                height: 88px;
                margin-right: 20px;
            }
        }
        .bgImg {
            position: absolute;
            width: 30%;
            height: auto;
            right: -10px;
            top: 15px;
        }
      .itemTit {
        font-size: 28px;
        line-height: 34px;
        margin-bottom: 2px;
        height: 40%;
        color: #072270;
      }

      .enTit {
        font-size: 16px;
        line-height: 20px;
        color: #072270;
      }

      .iconImg {
        width: 88px;
        height: 88px;
        margin-right: 20px;
      }
    }

    .grid-content-1 {
        grid-row-start: 1;
        grid-row-end: 3;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            z-index: 99;

            & > div {
                display: flex;
                align-items: flex-start;
            }

            .itemTit1 {
                font-size: 32px;
                line-height: 42px;
                height: 40%;
                letter-spacing: 1px;
                color: #072270;
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 18px;
                line-height: 24px;
                color: #072270;
            }
        }
        .bgImg1 {
            position: absolute;
            width: 45%;
            height: auto;
            right: -20px;
            top: 30%;
        }
    .bgImg {
      position: absolute;
      width: 30%;
      height: auto;
      right: -10px;
      top: 15px;
    }
  }

    .bot-rights {
  .grid-content-1 {
    grid-row-start: 1;
    grid-row-end: 3;

    .toplayer {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      z-index: 99;

      & > div {
        display: flex;
        align-items: flex-start;
      }

      .itemTit1 {
        font-size: 32px;
        line-height: 42px;
        height: 40%;
        letter-spacing: 1px;
        color: #072270;
        margin-bottom: 12px;
      }

      .enTit1 {
        font-size: 18px;
        color: #333;
        line-height: 24px;
        color: #072270;
      }
    }

    .bgImg1 {
      position: absolute;
      width: 45%;
      height: auto;
      right: -20px;
      top: 30%;
    }
  }

  .bot-rights {
    font-size: 18px;
    color: #333;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .gridCont {
        width: 100%;
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 120px);
        grid-auto-flow: row;
        justify-content: center;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            padding: 0 20px;
            z-index: 99;

            .itemTit {
                font-size: 22px;
                line-height: 30px;
                height: 40%;
                color: #072270;
                margin-bottom: 2px;
            }
            .enTit {
                font-size: 12px;
                color: #072270;
            }

            .iconImg {
                width: 44px;
                height: 44px;
                margin-right: 10px;
            }
        }
        .bgImg {
            position: absolute;
            width: 30%;
            height: auto;
            right: -10px;
            top: 15px;
        }
    }

    .grid-content-1 {
        grid-row-start: 1;
        grid-row-end: 3;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            z-index: 99;

            & > div {
                display: flex;
                align-items: flex-start;
            }

            .itemTit1 {
                font-size: 24px;
                line-height: 36px;
                height: 40%;
                letter-spacing: 1px;
                color: #072270;
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 14px;
                color: #072270;
            }
        }
        .bgImg1 {
            position: absolute;
            width: 45%;
            height: auto;
            right: -20px;
            top: 30%;
        }
    }
    .bot-rights {
        font-size: 15px;
        color: #333;
    }
}
@media screen and (max-width: 1200px) {
    .gridCont {
        width: 100%;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 96px);
        grid-auto-flow: row;
        justify-content: center;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            padding: 0 15px;
            z-index: 99;

            .itemTit {
                font-size: 14px;
                line-height: 22px;
                color: #072270;
            }
            .enTit {
                font-size: 10px;
                line-height: 14px;
                color: #072270;
            }

            .iconImg {
                width: 32px;
                height: 32px;
                margin-right: 10px;
            }
        }
        .bgImg {
            position: absolute;
            width: 45%;
            height: auto;
            right: -10px;
            top: 15px;
        }
    }

    .grid-content-1 {
        grid-row-start: 1;
        grid-row-end: 3;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            z-index: 99;

            & > div {
                display: flex;
                align-items: flex-start;
            }

            .itemTit1 {
                font-size: 16px;
                line-height: 36px;
                height: 40%;
                letter-spacing: 1px;
                color: #072270;
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 12px;
                color: #072270;
            }
        }
        .bgImg1 {
            position: absolute;
            width: 45%;
            height: auto;
            right: -20px;
            top: 30%;
        }
    }
    .bot-rights {
        font-size: 12px;
        color: #333;
    }
}
.login-container {
  .gridCont {
    width: 100%;
    height: 100%;
    position: relative;
    background: #fff;
    .topPanel {
        width: 100%;
        height: 260px;
        background: url('../../assets/newMenu/topbg.jpg') no-repeat center;
        background-size: 100% 100%;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 120px);
    grid-auto-flow: row;
    justify-content: center;

    .toplayer {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      padding: 0 20px;
      z-index: 99;

      .itemTit {
        font-size: 22px;
        line-height: 30px;
        height: 40%;
        color: #072270;
        margin-bottom: 2px;
      }

      .enTit {
        font-size: 12px;
        color: #072270;
      }

      .iconImg {
        width: 44px;
        height: 44px;
        margin-right: 10px;
      }
    }

    .bgImg {
      position: absolute;
      width: 30%;
      height: auto;
      right: -10px;
      top: 15px;
    }
  }

  .grid-content-1 {
    grid-row-start: 1;
    grid-row-end: 3;

    .toplayer {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      z-index: 99;

      & > div {
        display: flex;
        justify-content: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }
    .topPanelBg {
        position: absolute;
        width: 100%;
        height: 60px;
        top: -60px;
        left: 0;
        background: rgba(255, 255, 255, 0.8);
        z-index: 9;
        animation: moveDown 0.6s 1 ease forwards;
    }
    .topPanelCont {
        position: absolute;
        width: 100%;
        height: 60px;
        padding: 0 50px;
        top: -60px;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 999;
        animation: moveDown 0.6s 1 ease forwards;

        .topLogo {
            display: flex;
            align-items: center;

            img {
                width: 146px;
                height: auto;
            }
        }

        .userInfo {
            display: flex;
            align-items: center;

            .avator {
                display: flex;
                justify-content: right;

                img {
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                }
                div {
                    font-size: 15px;
                    color: #333333;
                    line-height: 20px;
                    margin-left: 6px;
                }
            }
            span {
                width: 1px;
                height: 20px;
                background: #999;
                margin: 0 15px;
            }
            .loginOut {
                font-size: 15px;
                color: #333;
                line-height: 20px;
                cursor: pointer;

                &:hover {
                    color: #006df5;
                }
            }
        }
    }
    .leftCont {
        position: absolute;
        left: -100px;
        top: 0;
        width: 220px;
        height: 100%;
        z-index: 99;
        background: url('../../assets/newMenu/leftbg.png') no-repeat center;
        background-size: 100% 100%;
        animation: moveRight .8s 1 ease forwards;
    }
    .topCont {
        position: absolute;
        width: 100%;
        height: 200px;
        left: 0;
        top: 30px;
        padding: 0 40px 0 120px;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        animation: showDown 0.6s 1 ease forwards;
      }

        .topInfo {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
      .itemTit1 {
        font-size: 24px;
        line-height: 36px;
        height: 40%;
        letter-spacing: 1px;
        color: #072270;
        margin-bottom: 12px;
      }

            .topTit {
                font-size: 44px;
                font-weight: bolder;
                text-align: left;
                color: #fff;
                text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            }

            .topTime {
                padding: 15px 10px;
                box-sizing: border-box;
                background: rgba(6, 64, 195, 0.8);
                border-radius: 8px;
                color: #fff;
                font-family: 'PingFang SC';
                font-weight: 600;
                font-size: 16px;
                display: flex;
                align-items: center;

                .time {
                    font-size: 48px;
                }
                & > span {
                    width: 1px;
                    height: 40px;
                    margin: 0 15px;
                    background: #fff;
                }
                .today {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;

                    span {
                        font-size: 14px;
                    }

                    span:first-of-type {
                        margin-right: 10px;
                    }
                }
            }
        }
        .line {
            width: 120px;
            height: 6px;
            background: #00eeff;
        }
      .enTit1 {
        font-size: 14px;
        color: #072270;
      }
    }
    .menuGrid {
        width: calc(100vw - 220px);
        height: calc(100vh - 320px);
        padding: 20px 20px 0;
        position: absolute;
        top: 260px;
        left: 220px;
      overflow: hidden;
      overflow-y: scroll;
        .gridCont {
            .grid-content {
                border-radius: 16px;
                position: relative;
                overflow: hidden;
                cursor: pointer;
                transition: 0.3s;
                border: 2px solid rgba(255,255,255,0);

                &:hover {
                    border-radius: 16px;
                    background-image: radial-gradient(ellipse farthest-side at 50% 100%, #48a3ff 0%, #fff 120%);
                    box-shadow: -8px -8px 24px rgba(20, 97, 234, 0.2), 8px 8px 24px rgba(20, 97, 234, 0.2);
                    border: 2px solid #fff;

                    .iconImg{
                        animation: upDown 0.3s 1 ease-in-out forwards;
                        filter: drop-shadow(0 0 12px rgba(20, 97, 234, 0.4));
                    }
                }
            }
            .cont-bg-1 {
                background: #d9eaff;
            }
            .cont-bg-2 {
                background: #cdd6ff;
            }

            /*.grid-content-2{*/
            /*    background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
            /*}*/

            /*.grid-content-3{*/
            /*    background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
            /*}*/
        }
    .bgImg1 {
      position: absolute;
      width: 45%;
      height: auto;
      right: -20px;
      top: 30%;
    }
    .bot-rights {
        width: calc(100vw - 240px);
        height: 60px;
        position: absolute;
        bottom: 0;
        left: 240px;
        z-index: 9999;
  }
  .bot-rights {
    font-size: 15px;
    color: #333;
  }
}

@media screen and (max-width: 1200px) {
  .gridCont {
    width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 96px);
    grid-auto-flow: row;
    justify-content: center;

    .toplayer {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      padding: 0 15px;
      z-index: 99;

      .itemTit {
        font-size: 14px;
        line-height: 22px;
        color: #072270;
      }

      .enTit {
        font-size: 10px;
        line-height: 14px;
        color: #072270;
      }

      .iconImg {
        width: 32px;
        height: 32px;
        margin-right: 10px;
      }
    }

    .bgImg {
      position: absolute;
      width: 45%;
      height: auto;
      right: -10px;
      top: 15px;
    }
  }

  .grid-content-1 {
    grid-row-start: 1;
    grid-row-end: 3;

    .toplayer {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      z-index: 99;

      & > div {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: flex-start;
      }

      .itemTit1 {
        font-size: 16px;
        line-height: 36px;
        height: 40%;
        letter-spacing: 1px;
        color: #072270;
        margin-bottom: 12px;
      }

      .enTit1 {
        font-size: 12px;
        color: #072270;
      }
    }

    .bgImg1 {
      position: absolute;
      width: 45%;
      height: auto;
      right: -20px;
      top: 30%;
    }
  }
  .bot-rights {
    font-size: 12px;
    color: #333;
  }
}

.login-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;

  .topPanel {
    width: 100%;
    height: 260px;
    background: url('../../assets/newMenu/topbg.jpg') no-repeat center;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .topPanelBg {
    position: absolute;
    width: 100%;
    height: 60px;
    top: -60px;
    left: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9;
    animation: moveDown 0.6s 1 ease forwards;
  }

  .topPanelCont {
    position: absolute;
    width: 100%;
    height: 60px;
    padding: 0 50px 0 0;
    top: -60px;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    animation: moveDown 0.6s 1 ease forwards;

    .topLogo {
      display: flex;
      align-items: center;
      width: 220px;


      img {
        width: 146px;
        height: auto;
      }

      span {
        width: 100%;
        text-align: center;
      }
    }

    .userInfo {
      display: flex;
      align-items: center;

      .avator {
        display: flex;
        justify-content: right;

        img {
            width: 248px;
            height: 8px;
          width: 20px;
          height: 20px;
          border-radius: 10px;
        }

        div {
            margin: 0 20px;
          font-size: 15px;
          color: #333333;
          line-height: 20px;
          margin-left: 6px;
        }
      }

      span {
        width: 1px;
        height: 20px;
        background: #999;
        margin: 0 15px;
      }

      .loginOut {
        font-size: 15px;
        color: #333;
        line-height: 20px;
        cursor: pointer;

        &:hover {
          color: #006df5;
        }
      }
    }
  }

  .leftCont {
    position: absolute;
    left: -100px;
    top: 0;
    width: 220px;
    height: 100%;
    z-index: 99;
    background: url('../../assets/newMenu/leftbg.png') no-repeat center;
    background-size: 100% 100%;
    animation: moveRight .8s 1 ease forwards;
  }

  .topCont {
    position: absolute;
    width: 100%;
    height: 200px;
    left: 0;
    top: 30px;
    padding: 0 40px 0 120px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    animation: showDown 0.6s 1 ease forwards;

    .topInfo {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .topTit {
        font-size: 44px;
        font-weight: bolder;
        text-align: left;
        color: #fff;
        text-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
      }

      .topTime {
        padding: 15px 10px;
        box-sizing: border-box;
        background: rgba(6, 64, 195, 0.8);
        border-radius: 8px;
        color: #fff;
        font-family: 'PingFang SC';
        font-weight: 600;
        font-size: 16px;
        display: flex;
        align-items: center;

        .time {
          font-size: 48px;
        }

        & > span {
          width: 1px;
          height: 40px;
          margin: 0 15px;
          background: #fff;
        }

        .today {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          span {
            font-size: 14px;
          }

          span:first-of-type {
            margin-right: 10px;
          }
        }
      }
    }

    .line {
      width: 120px;
      height: 6px;
      background: #00eeff;
    }
  }

  .menuGrid {
    width: calc(100vw - 220px);
    height: calc(100vh - 320px);
    padding: 20px 20px 0;
    position: absolute;
    top: 260px;
    left: 220px;

    .gridCont {
      .grid-content {
        border-radius: 8px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: 0.3s;
        border: 2px solid rgba(255, 255, 255, 0);

        &:hover {
          border-radius: 16px;
          background-image: radial-gradient(ellipse farthest-side at 50% 100%, #48a3ff 0%, #fff 120%);
          box-shadow: -8px -8px 24px rgba(20, 97, 234, 0.2), 8px 8px 24px rgba(20, 97, 234, 0.2);
          border: 2px solid #fff;

          .iconImg {
            animation: upDown 0.3s 1 ease-in-out forwards;
            filter: drop-shadow(0 0 12px rgba(20, 97, 234, 0.4));
          }
        }
      }

      .cont-bg-1 {
        background: #d9eaff;
      }

      .cont-bg-2 {
        background: #cdd6ff;
      }

      /*.grid-content-2{*/
      /*    background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
      /*}*/

      /*.grid-content-3{*/
      /*    background-image: linear-gradient(135deg,#006DF5,#1450EA);*/
      /*}*/
    }
  }

  .bot-rights {
    width: calc(100vw - 240px);
    height: 60px;
    position: absolute;
    bottom: 0;
    left: 240px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 248px;
      height: 8px;
    }

    div {
      margin: 0 20px;
    }
  }
}
</style>

 src/views/newSpecialWorkSystem/workTicket/sbtj/index.vue

@@ -31,7 +31,7 @@
                  </div>
                </div>
                <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
                  <el-table-column property="seDepName" label="事业部" align="center"/>
                  <el-table-column property="seDepName" label="部门" align="center"/>
                  <el-table-column property="totalCount" label="总数" align="center"/>
                  <el-table-column v-for="workType in workTypes" :key="workType.workType" :label="workType.workTypeDesc" :prop="`list.${workType.workType - 1}.count`"></el-table-column>
                </el-table>

 src/views/newSpecialWorkSystem/workTicket/sqjl/index.vue

@@ -1,1165 +1,1243 @@
<template>
    <div class="home-container">
<!--        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
<!--            <el-tab-pane label="申请中" name="1">-->
                <div style="height: 100%">
                    <el-row class="homeCard">
                     <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>时间筛选：</span>
                        <el-date-picker v-model="timeRange" value-format="YYYY-MM-DD" type="daterange" @change="giveTime()" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
                      </div>
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>负责人：</span>
                        <el-input v-model.trim="searPara.headUserName" placeholder="负责人"/>
                      </div>
                      <div class="basic-line">
                        <span>事业部：</span>
                        <el-select v-model="searPara.secondDepId">
                          <el-option
                              v-for="item in dep4List"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                          />
                        </el-select>
                      </div>
                      <div class="basic-line">
                        <span>作业类型：</span>
                        <el-select v-model="searPara.workType">
                          <el-option
                              v-for="item in workType"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                          />
                        </el-select>
                      </div>
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>作业票编号：</span>
                        <el-input
                            v-model.trim="searPara.workPermitNo"
                            placeholder="请输入作业票编号"
                        />
                      </div>
                      <div style="margin-left: 20px">
                        <el-button type="primary" @click="searchRecord">查询</el-button>
                        <el-button plain @click="clearSearch">重置</el-button>
                      </div>
                    </el-row>
                    <div class="homeCard">
                        <div class="main-card">
                            <el-row class="cardTop">
                                <el-col :span="12" class="mainCardBtn">
                                    <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新增申报</el-button>
                                    <!--                                    <el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
                                    <!--                                    <el-button type="success" size="default">设置分类</el-button>-->
                                </el-col>
                                <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
                            </el-row>
                            <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                              <el-table-column property="workPermitNo" label="作业编号" align="center">
                                <template #default="scope">
                                  {{scope.row.workPermitNo?scope.row.workPermitNo:'—'}}
                                </template>
                              </el-table-column>
                                <el-table-column property="seDepName" label="事业部" align="center"/>
                                <el-table-column property="applyDepName" label="作业所在车间" align="center"/>
                                <el-table-column property="workContent" label="作业内容" align="center"/>
                                <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
                                <el-table-column label="作业单位" align="center">
                                  <template #default="scope">
                                    <span v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{scope.row.workDepList.map(i=>i.workDepName).join(',')}}</span>
                                    <span v-else>{{scope.row.workDepName }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column property="headList" label="负责人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.headList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('，')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="operatorList" label="作业人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.operatorList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('，')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="guardianList" label="监护人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.guardianList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('，')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="expStartTime" label="作业开始时间" align="center"/>
                                <el-table-column property="expEndTime" label="预计完成时间" align="center"/>
                                <el-table-column label="执法仪编号" align="center">
                                  <template #default="scope">
                                    {{scope.row.workApprovalDeviceList.map(i=>i.deviceNo).join('，')}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="作业人数" align="center">
                                  <template #default="scope">
                                    {{scope.row.operatorList.length}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="监护人数" align="center">
                                  <template #default="scope">
                                    {{scope.row.guardianList.length}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="作业状态" align="center">
                                    <template #default="scope">
                                        <el-tag>{{ statusList.find(i=>i.value === scope.row.status)?.label }}</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" align="center" width="300">
                                    <template #default="scope">
<!--                                        <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">作废</el-button>-->
                                        <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                                        <el-button v-if="(scope.row.working?.workAllStatus == 3 || scope.row.working?.workAllStatus == 4 || scope.row.working?.workAllStatus == 5)&&!scope.row.renewalWorkApplyId" link type="primary" size="small" :icon="Edit" @click="continueRecord(scope.row)">一键续票</el-button>
<!--                                        <el-button link type="success" size="small" :icon="Finished">修改</el-button>-->
<!--                                        <el-button link type="success" size="small" :icon="Download">正式办票</el-button>-->
                                        <el-button link type="primary" size="small" :icon="Download" @click="downLoadRecord(scope.row)">作业票预览</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="pageBtn">
                                <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
                            </div>
                        </div>
                    </div>
                </div>
                <el-dialog v-model="dialogDetails" title="作业申请详情" center>
<!--                    <fire v-if="dialogType == 1" :details = details></fire>-->
<!--                    <space v-else-if="dialogType == 2" :details = details></space>-->
<!--                    <hoist v-else-if="dialogType == 3" :details = details></hoist>-->
<!--                    <ground v-else-if="dialogType == 4" :details = details></ground>-->
<!--                    <broken v-else-if="dialogType == 5" :details = details></broken>-->
<!--                    <height v-else-if="dialogType == 6" :details = details></height>-->
<!--                    <power v-else-if="dialogType == 7" :details = details></power>-->
<!--                    <plate v-else :details = details></plate>-->
                  <detail-log :type=dialogType :statusList=statusList :details = details></detail-log>
                    <template #footer>
  <div class="home-container">
    <!--        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
    <!--            <el-tab-pane label="申请中" name="1">-->
    <div style="height: 100%">
      <el-row class="homeCard">
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>时间筛选：</span>
          <el-date-picker v-model="timeRange" value-format="YYYY-MM-DD" type="daterange" @change="giveTime()"
                          range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/>
        </div>
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>负责人：</span>
          <el-input v-model.trim="searPara.headUserName" placeholder="负责人"/>
        </div>
        <div class="basic-line">
          <span>部门：</span>
          <!--                        <el-select v-model="searPara.secondDepId">-->
          <!--                          <el-option-->
          <!--                              v-for="item in dep4List"-->
          <!--                              :key="item.id"-->
          <!--                              :label="item.name"-->
          <!--                              :value="item.id"-->
          <!--                          />-->
          <!--                        </el-select>-->
          <el-cascader :teleported="false" v-model="searPara.secondDepId" :options="departmentList" :props="casProps"
                       :show-all-levels="false"/>
        </div>
        <div class="basic-line">
          <span>作业类型：</span>
          <el-select v-model="searPara.workType">
            <el-option
                v-for="item in workType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </div>
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>作业票编号：</span>
          <el-input
              v-model.trim="searPara.workPermitNo"
              placeholder="请输入作业票编号"
          />
        </div>
        <div style="margin-left: 20px">
          <el-button type="primary" @click="searchRecord">查询</el-button>
          <el-button plain @click="clearSearch">重置</el-button>
        </div>
      </el-row>
      <div class="homeCard">
        <div class="main-card">
          <el-row class="cardTop">
            <el-col :span="12" class="mainCardBtn">
              <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新增申报</el-button>
              <!--                                    <el-button type="danger" :icon="Delete" size="default">删除</el-button>-->
              <!--                                    <el-button type="success" size="default">设置分类</el-button>-->
            </el-col>
            <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/>
          </el-row>
          <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)"
                    :header-cell-style="{ background: '#fafafa' }">
            <el-table-column property="workPermitNo" label="作业编号" align="center">
              <template #default="scope">
                {{ scope.row.workPermitNo ? scope.row.workPermitNo : '—' }}
              </template>
            </el-table-column>
            <el-table-column property="seDepName" label="事业部" align="center"/>
            <el-table-column property="applyDepName" label="作业所在车间" align="center"/>
            <el-table-column property="workContent" label="作业内容" align="center"/>
            <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
            <el-table-column label="作业单位" align="center">
              <template #default="scope">
                <span
                    v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{ scope.row.workDepList.map(i => i.workDepName).join(',') }}</span>
                <span v-else>{{ scope.row.workDepName }}</span>
              </template>
            </el-table-column>
            <el-table-column property="headList" label="负责人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.headList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join('，')
                }}
              </template>
            </el-table-column>
            <el-table-column property="operatorList" label="作业人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.operatorList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join('，')
                }}
              </template>
            </el-table-column>
            <el-table-column property="guardianList" label="监护人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.guardianList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join('，')
                }}
              </template>
            </el-table-column>
            <el-table-column property="expStartTime" label="作业开始时间" align="center"/>
            <el-table-column property="expEndTime" label="预计完成时间" align="center"/>
            <el-table-column label="执法仪编号" align="center">
              <template #default="scope">
                {{ scope.row.workApprovalDeviceList.map(i => i.deviceNo).join('，') }}
              </template>
            </el-table-column>
            <el-table-column label="作业人数" align="center">
              <template #default="scope">
                {{ scope.row.operatorList.length }}
              </template>
            </el-table-column>
            <el-table-column label="监护人数" align="center">
              <template #default="scope">
                {{ scope.row.guardianList.length }}
              </template>
            </el-table-column>
            <el-table-column label="作业状态" align="center">
              <template #default="scope">
                <el-tag>{{ statusList.find(i => i.value === scope.row.status)?.label }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="300">
              <template #default="scope">
                <!--                                        <el-button link type="danger" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">作废</el-button>-->
                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                <el-button
                    v-if="(scope.row.working?.workAllStatus == 3 || scope.row.working?.workAllStatus == 4 || scope.row.working?.workAllStatus == 5)&&!scope.row.renewalWorkApplyId"
                    link type="primary" size="small" :icon="Edit" @click="continueRecord(scope.row)">一键续票
                </el-button>
                <!--                                        <el-button link type="success" size="small" :icon="Finished">修改</el-button>-->
                <!--                                        <el-button link type="success" size="small" :icon="Download">正式办票</el-button>-->
                <el-button link type="primary" size="small" :icon="Download" @click="downLoadRecord(scope.row)">
                  作业票预览
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBtn">
            <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]"
                           small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1"
                           @size-change="handleSizeChange1" @current-change="handleCurrentChange1"/>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogDetails" title="作业申请详情" center>
      <!--                    <fire v-if="dialogType == 1" :details = details></fire>-->
      <!--                    <space v-else-if="dialogType == 2" :details = details></space>-->
      <!--                    <hoist v-else-if="dialogType == 3" :details = details></hoist>-->
      <!--                    <ground v-else-if="dialogType == 4" :details = details></ground>-->
      <!--                    <broken v-else-if="dialogType == 5" :details = details></broken>-->
      <!--                    <height v-else-if="dialogType == 6" :details = details></height>-->
      <!--                    <power v-else-if="dialogType == 7" :details = details></power>-->
      <!--                    <plate v-else :details = details></plate>-->
      <detail-log :type=dialogType :statusList=statusList :details=details></detail-log>
      <template #footer>
                      <span class="dialog-footer">
                        <el-button type="primary" @click="dialogDetails = false"
                        >确认</el-button
                        >
                      </span>
                    </template>
                </el-dialog>
                <el-dialog v-model="dialogStatus" title="作业申请进度" width="60%">
                    <el-form v-if="approveInfo.operators.length > 0" style="margin-bottom: 40px">
                        <el-form-item label="申请作业人">
                            <el-input v-model="approveInfo.operators" readonly type="textarea" />
                        </el-form-item>
                    </el-form>
                    <div style="display: flex; flex-direction: column-reverse">
                        <div v-for="(item, index) in approveInfo.approvalSteps" class="stepItem">
                            <div class="stepNum">{{ item.stepSerial }}</div>
                            <div class="stepCard">
                                <el-card class="box-card" shadow="always">
                                    <div class="text">
                                        审批结果：<span class="bold-text">{{ item.approvalResultDesc }}</span>
                                    </div>
                                    <div class="text">
                                        审批类型：<span class="bold-text">{{ item.typeDesc }}</span>
                                    </div>
                                    <div class="text" v-if="item.auditTypeDesc">
                                        审批类型：<span class="bold-text">{{ item.auditTypeDesc }}</span>
                                    </div>
                                    <div class="text" v-show="item.startApprovalTime != null">
                                        开始时间：<span>{{ item.startApprovalTime }}</span>
                                    </div>
                                    <div class="approveUnit">
                                        <div class="item-tit"><span>审批人</span><span>审批状态</span></div>
                                        <div class="item-cont" v-for="i in item.stepUnits">
      </template>
    </el-dialog>
    <el-dialog v-model="dialogStatus" title="作业申请进度" width="60%">
      <el-form v-if="approveInfo.operators.length > 0" style="margin-bottom: 40px">
        <el-form-item label="申请作业人">
          <el-input v-model="approveInfo.operators" readonly type="textarea"/>
        </el-form-item>
      </el-form>
      <div style="display: flex; flex-direction: column-reverse">
        <div v-for="(item, index) in approveInfo.approvalSteps" class="stepItem">
          <div class="stepNum">{{ item.stepSerial }}</div>
          <div class="stepCard">
            <el-card class="box-card" shadow="always">
              <div class="text">
                审批结果：<span class="bold-text">{{ item.approvalResultDesc }}</span>
              </div>
              <div class="text">
                审批类型：<span class="bold-text">{{ item.typeDesc }}</span>
              </div>
              <div class="text" v-if="item.auditTypeDesc">
                审批类型：<span class="bold-text">{{ item.auditTypeDesc }}</span>
              </div>
              <div class="text" v-show="item.startApprovalTime != null">
                开始时间：<span>{{ item.startApprovalTime }}</span>
              </div>
              <div class="approveUnit">
                <div class="item-tit"><span>审批人</span><span>审批状态</span></div>
                <div class="item-cont" v-for="i in item.stepUnits">
                                            <span>{{ i.approvalUname }}</span
                                            ><span>{{ i.resultDesc }}</span>
                                        </div>
                                    </div>
                                    <div class="approveItem">
                                        <div class="item-tit">
                                            <span>审批项目</span>
<!--                                            <span>类型</span>-->
                                            <div>措施标准</div>
                                        </div>
                                        <div class="item-cont" v-for="i in item.stepItems">
                                            <span>{{ i.itemName }}</span>
<!--                                            <span>{{ i.typeDesc }}</span>-->
                                            <div v-if="i.measure !== null">
                                                <div>
                                                    <span>作业类型：</span><span>{{ i.measure.workTypeDesc }}</span>
                                                </div>
                                                <div>
                                                    <span>措施内容：</span><span>{{ i.measure.context }}</span>
                                                </div>
                                            </div>
                                            <div v-if="i.stand !== null">
                                                <div>
                                                    <span>标题名称：</span><span>{{ i.stand.title }}</span>
                                                </div>
                                                <div>
                                                    <span>标准内容：</span><span>{{ i.stand.typeDesc }}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text" v-show="item.expFinishApprovalTime && item.expFinishApprovalTime != null">
                                        期望结束时间：<span>{{ item.expFinishApprovalTime }}</span>
                                    </div>
                                    <div class="text" v-show="item.finishApprovalTime != null">
                                        结束时间：<span>{{ item.finishApprovalTime }}</span>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                </div>
              </div>
              <div class="approveItem">
                <div class="item-tit">
                  <span>审批项目</span>
                  <!--                                            <span>类型</span>-->
                  <div>措施标准</div>
                </div>
                <div class="item-cont" v-for="i in item.stepItems">
                  <span>{{ i.itemName }}</span>
                  <!--                                            <span>{{ i.typeDesc }}</span>-->
                  <div v-if="i.measure !== null">
                    <div>
                      <span>作业类型：</span><span>{{ i.measure.workTypeDesc }}</span>
                    </div>
                </el-dialog>
                <el-dialog v-model="deleteDialog" title="提示" width="30%" center>
                    <span>您确定要取消该条申请吗？</span>
                    <template #footer>
                    <div>
                      <span>措施内容：</span><span>{{ i.measure.context }}</span>
                    </div>
                  </div>
                  <div v-if="i.stand !== null">
                    <div>
                      <span>标题名称：</span><span>{{ i.stand.title }}</span>
                    </div>
                    <div>
                      <span>标准内容：</span><span>{{ i.stand.typeDesc }}</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text" v-show="item.expFinishApprovalTime && item.expFinishApprovalTime != null">
                期望结束时间：<span>{{ item.expFinishApprovalTime }}</span>
              </div>
              <div class="text" v-show="item.finishApprovalTime != null">
                结束时间：<span>{{ item.finishApprovalTime }}</span>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="deleteDialog" title="提示" width="30%" center>
      <span>您确定要取消该条申请吗？</span>
      <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="deleteDialog = false" size="default">取消</el-button>
                            <el-button type="primary" @click="conFirmDelete" size="default">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
                <fire-dialog ref="fireRef" :lists="lists" @refresh="getListByPage"></fire-dialog>
                <plate-dialog ref="plateRef" :lists="lists" @refresh="getListByPage"></plate-dialog>
                <space-dialog ref="spaceRef" :lists="lists" @refresh="getListByPage"></space-dialog>
                <hoist-dialog ref="hoistRef" :lists="lists" @refresh="getListByPage"></hoist-dialog>
                <ground-dialog ref="groundRef" :lists="lists" @refresh="getListByPage"></ground-dialog>
                <broken-dialog ref="brokenRef" :lists="lists" @refresh="getListByPage"></broken-dialog>
                <height-dialog ref="heightRef" :lists="lists" @refresh="getListByPage"></height-dialog>
                <power-dialog ref="powerRef" :lists="lists" @refresh="getListByPage"></power-dialog>
                <open-dialog ref="openRef" :lists="lists" @refresh="getListByPage"></open-dialog>
<!--                <el-dialog v-model="downLoadDialog" title="提示" width="30%" center>-->
<!--                    <span>您确定要导出该条记录吗？</span>-->
<!--                    <template #footer>-->
<!--                                <span class="dialog-footer">-->
<!--                                    <el-button @click="downLoadDialog = false" size="default">取消</el-button>-->
<!--                                    <el-button type="primary" @click="conFirmDownLoad" size="default">确认</el-button>-->
<!--                                </span>-->
<!--                    </template>-->
<!--                </el-dialog>-->
<!--            </el-tab-pane>-->
<!--            <el-tab-pane label="已通过" name="2">-->
<!--                <div style="height: 100%">-->
<!--                    <el-row class="homeCard">-->
<!--                        <el-col :span="8">-->
<!--                            <div class="grid-content topInfo">-->
<!--                                <el-input v-model="searchWord" placeholder="作业证名称"></el-input>-->
<!--                                <el-button type="primary">查询</el-button>-->
<!--                                <el-button plain>重置</el-button>-->
<!--                            </div>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
<!--                    <div class="homeCard">-->
<!--                        <div class="main-card">-->
<!--                            <el-table ref="multipleTableRef" :data="passedData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">-->
<!--                                <el-table-column type="selection" width="55" />-->
<!--                                <el-table-column type="index" label="编号" width="200" />-->
<!--                                <el-table-column property="level" label="作业证等级" width="180" sortable />-->
<!--                                <el-table-column property="applyDate" label="申请日期" sortable />-->
<!--                                <el-table-column property="name" label="申请人" width="180" />-->
<!--                                <el-table-column property="department" label="申请部门" width="180" />-->
<!--                                <el-table-column label="申请状态" width="180">-->
<!--                                    <template #default="scope">-->
<!--                                        <el-tag type="success">{{ scope.row.status }}</el-tag>-->
<!--                                    </template>-->
<!--                                </el-table-column>-->
<!--                            </el-table>-->
<!--                            <div class="pageBtn">-->
<!--                                <el-pagination v-model:currentPage="pageIndex2" v-model:page-size="pageSize2" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </el-tab-pane>-->
<!--        </el-tabs>-->
    </div>
      </template>
    </el-dialog>
    <fire-dialog ref="fireRef" :lists="lists" @refresh="getListByPage"></fire-dialog>
    <plate-dialog ref="plateRef" :lists="lists" @refresh="getListByPage"></plate-dialog>
    <space-dialog ref="spaceRef" :lists="lists" @refresh="getListByPage"></space-dialog>
    <hoist-dialog ref="hoistRef" :lists="lists" @refresh="getListByPage"></hoist-dialog>
    <ground-dialog ref="groundRef" :lists="lists" @refresh="getListByPage"></ground-dialog>
    <broken-dialog ref="brokenRef" :lists="lists" @refresh="getListByPage"></broken-dialog>
    <height-dialog ref="heightRef" :lists="lists" @refresh="getListByPage"></height-dialog>
    <power-dialog ref="powerRef" :lists="lists" @refresh="getListByPage"></power-dialog>
    <open-dialog ref="openRef" :lists="lists" @refresh="getListByPage"></open-dialog>
    <!--                <el-dialog v-model="downLoadDialog" title="提示" width="30%" center>-->
    <!--                    <span>您确定要导出该条记录吗？</span>-->
    <!--                    <template #footer>-->
    <!--                                <span class="dialog-footer">-->
    <!--                                    <el-button @click="downLoadDialog = false" size="default">取消</el-button>-->
    <!--                                    <el-button type="primary" @click="conFirmDownLoad" size="default">确认</el-button>-->
    <!--                                </span>-->
    <!--                    </template>-->
    <!--                </el-dialog>-->
    <!--            </el-tab-pane>-->
    <!--            <el-tab-pane label="已通过" name="2">-->
    <!--                <div style="height: 100%">-->
    <!--                    <el-row class="homeCard">-->
    <!--                        <el-col :span="8">-->
    <!--                            <div class="grid-content topInfo">-->
    <!--                                <el-input v-model="searchWord" placeholder="作业证名称"></el-input>-->
    <!--                                <el-button type="primary">查询</el-button>-->
    <!--                                <el-button plain>重置</el-button>-->
    <!--                            </div>-->
    <!--                        </el-col>-->
    <!--                    </el-row>-->
    <!--                    <div class="homeCard">-->
    <!--                        <div class="main-card">-->
    <!--                            <el-table ref="multipleTableRef" :data="passedData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">-->
    <!--                                <el-table-column type="selection" width="55" />-->
    <!--                                <el-table-column type="index" label="编号" width="200" />-->
    <!--                                <el-table-column property="level" label="作业证等级" width="180" sortable />-->
    <!--                                <el-table-column property="applyDate" label="申请日期" sortable />-->
    <!--                                <el-table-column property="name" label="申请人" width="180" />-->
    <!--                                <el-table-column property="department" label="申请部门" width="180" />-->
    <!--                                <el-table-column label="申请状态" width="180">-->
    <!--                                    <template #default="scope">-->
    <!--                                        <el-tag type="success">{{ scope.row.status }}</el-tag>-->
    <!--                                    </template>-->
    <!--                                </el-table-column>-->
    <!--                            </el-table>-->
    <!--                            <div class="pageBtn">-->
    <!--                                <el-pagination v-model:currentPage="pageIndex2" v-model:page-size="pageSize2" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </el-tab-pane>-->
    <!--        </el-tabs>-->
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router';
import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download } from '@element-plus/icons-vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import type { TabsPaneContext } from 'element-plus';
import {storeToRefs} from 'pinia';
import {initBackEndControlRoutes} from '/@/router/backEnd';
import {useUserInfo} from '/@/stores/userInfo';
import {Session} from '/@/utils/storage';
import {useRouter} from 'vue-router';
import {Edit, View, Plus, Delete, Refresh, Search, Finished, Download} from '@element-plus/icons-vue';
import {ElTable} from 'element-plus';
import {FormInstance, FormRules, ElMessage} from 'element-plus';
import {workApplyApi} from '/@/api/specialWorkSystem/workApply';
import type {TabsPaneContext} from 'element-plus';
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
import Cookies from 'js-cookie';
import axios from 'axios';

// 定义接口来定义对象的类型
interface stateType {
    applyData: Array<string>;
    workTimeList: Array<string>;
    multipleSelection: Array<any>;
    deleteArr: Array<any>;
    approveInfo: Object;
    dialogDetails: boolean;
    dialogStatus: boolean;
    deleteDialog: boolean;
    pageIndex1: number;
    pageSize1: number;
    chosenIndex: null | number;
    deleteId: null | number;
    totalSize1: number;
    activeName: string;
    addRecord: {};
    details: {};
    statusInfo: {};
    workType: Array<type>;
    dialogType: number | null;
    departmentList: Array<any>;
    departmentRecursionList: Array<DepartmentState>;
    statusList: Array<any>;
    dep4List: Array<type>;
    searPara: {}
    timeRange: Array<string>;
    lists: {}
  applyData: Array<string>;
  workTimeList: Array<string>;
  multipleSelection: Array<any>;
  deleteArr: Array<any>;
  approveInfo: Object;
  dialogDetails: boolean;
  dialogStatus: boolean;
  deleteDialog: boolean;
  pageIndex1: number;
  pageSize1: number;
  chosenIndex: null | number;
  deleteId: null | number;
  totalSize1: number;
  activeName: string;
  addRecord: {};
  details: {};
  statusInfo: {};
  workType: Array<type>;
  dialogType: number | null;
  departmentList: Array<any>;
  departmentRecursionList: Array<DepartmentState>;
  statusList: Array<any>;
  dep4List: Array<type>;
  searPara: {}
  timeRange: Array<string>;
  lists: {}
  casProps: {}
}

interface type {
    id: number;
    name: string;
  id: number;
  name: string;
}

interface DepartmentState {
    depId: number;
    depName: string;
  depId: number;
  depName: string;
}

export default defineComponent({
    name: 'applys',
    components: {
      detailLog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/detailLog.vue')),
      fireDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/fireDialog.vue')),
      plateDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/plateDialog.vue')),
      spaceDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceDialog.vue')),
      hoistDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistDialog.vue')),
      groundDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/groundDialog.vue')),
      brokenDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenDialog.vue')),
      heightDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/heightDialog.vue')),
      powerDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/powerDialog.vue')),
      openDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/openDialog.vue'))
    },
    setup() {
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
        const router = useRouter();
        const state = reactive<stateType>({
            lists: {
              workerList: [],
              departList: [],
              departList2: [],
              deviceList: [],
              otherWorks: [],
              spList: [],
              riskList: []
            },
            pageIndex1: 1,
            pageSize1: 10,
            totalSize1: 0,
            dialogType: null,
            activeName: '1',
            departmentList: [],
            departmentRecursionList: [],
            chosenIndex: null,
            searPara:{
              startTime: '',
              endTime: '',
              workPermitNo: '',
              workType: null,
              headUserName: '',
              secondDepId: null
            },
            applyData: [],
            workTimeList: [],
            multipleSelection: [],
            approveInfo: {
                approvalSteps: [],
                operators: []
            },
            dialogDetails: false,
            dialogStatus: false,
            deleteDialog: false,
            addRecord: {},
            details: {},
            statusInfo: {},
            deleteId: null,
            deleteArr: [],
            dep4List: [
              {id:49,name:'电石事业部'},
              {id:50,name:'电力事业部'},
              {id:48,name:'有机化工事业部'},
              {id:32,name:'甲醇事业部'},
              {id:10,name:'后勤中心'},
              {id:41,name:'安全环保部'},
              {id:46,name:'供销中心'},
              {id:47,name:'技术中心'}
            ],
            workType: [
              { id: 1, name: '动火作业' },
              { id: 2, name: '受限空间作业' },
              { id: 3, name: '吊装作业' },
              { id: 4, name: '动土作业' },
              { id: 5, name: '断路作业' },
              { id: 6, name: '高处作业' },
              { id: 7, name: '临时用电作业' },
              { id: 8, name: '盲板抽堵作业' }
            ],
          statusList: [
            {
              value: 0,
              label: '风险研判'
            },
            {
              value: 1,
              label: '票证办理'
            },
            {
              value: 2,
              label: '气体分析'
            },
            {
              value: 3,
              label: '安全措施确认，培训交底'
            },
            {
              value: 4,
              label: '安全措施确认'
            },
            {
              value: 5,
              label: '培训交底'
            },
            {
              value: 6,
              label: '部门审批'
            },
            {
              value: 7,
              label: '作业票填报结束'
            },
            {
              value: 8,
              label: '作业气体分析不合格'
            },
            {
              value: 9,
              label: '审批未通过'
            },
            {
              value: 10,
              label: '开始'
            },
            {
              value: 11,
              label: '监护'
            },
            {
              value: 12,
              label: '结束'
            },
            {
              value: 13,
              label: '待验收'
            },
            {
              value: 14,
              label: '验收完成'
            },
            {
              value: 15,
              label: '取消'
            },
            {
              value: 16,
              label: '废止作业票'
            }
          ],
          timeRange: []
        });
      const fireRef = ref()
      const plateRef = ref()
      const spaceRef = ref()
      const hoistRef = ref()
      const groundRef = ref()
      const brokenRef = ref()
      const heightRef = ref()
      const powerRef = ref()
      const openRef = ref()
      // 页面载入时执行方法
      onMounted(() => {
        getListByPage();
        getAllDepartment()
        spWorker()
        getOpList()
        getAll()
        getAllDevice()
        getAllRisks()
        getOtherWork()
  name: 'applys',
  components: {
    detailLog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/detailLog.vue')),
    fireDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/fireDialog.vue')),
    plateDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/plateDialog.vue')),
    spaceDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceDialog.vue')),
    hoistDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistDialog.vue')),
    groundDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/groundDialog.vue')),
    brokenDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenDialog.vue')),
    heightDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/heightDialog.vue')),
    powerDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/powerDialog.vue')),
    openDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/openDialog.vue'))
  },
  setup() {
    const userInfo = useUserInfo();
    const {userInfos} = storeToRefs(userInfo);
    const router = useRouter();
    const state = reactive<stateType>({
      lists: {
        workerList: [],
        departList: [],
        deviceList: [],
        otherWorks: [],
        spList: [],
        riskList: []
      },
      casProps: {
        emitPath: false,
        value: 'depId',
        label: 'depName',
        checkStrictly: true
      },
      pageIndex1: 1,
      pageSize1: 10,
      totalSize1: 0,
      dialogType: null,
      activeName: '1',
      departmentList: [],
      departmentRecursionList: [],
      chosenIndex: null,
      searPara: {
        startTime: '',
        endTime: '',
        workPermitNo: '',
        workType: null,
        headUserName: '',
        secondDepId: null
      },
      applyData: [],
      workTimeList: [],
      multipleSelection: [],
      approveInfo: {
        approvalSteps: [],
        operators: []
      },
      dialogDetails: false,
      dialogStatus: false,
      deleteDialog: false,
      addRecord: {},
      details: {},
      statusInfo: {},
      deleteId: null,
      deleteArr: [],
      dep4List: [
        {id: 49, name: '电石事业部'},
        {id: 50, name: '电力事业部'},
        {id: 48, name: '有机化工事业部'},
        {id: 32, name: '甲醇事业部'},
        {id: 10, name: '后勤中心'},
        {id: 41, name: '安全环保部'},
        {id: 46, name: '供销中心'},
        {id: 47, name: '技术中心'}
      ],
      workType: [
        {id: 1, name: '动火作业'},
        {id: 2, name: '受限空间作业'},
        {id: 3, name: '吊装作业'},
        {id: 4, name: '动土作业'},
        {id: 5, name: '断路作业'},
        {id: 6, name: '高处作业'},
        {id: 7, name: '临时用电作业'},
        {id: 8, name: '盲板抽堵作业'}
      ],
      statusList: [
        {
          value: 0,
          label: '风险研判'
        },
        {
          value: 1,
          label: '票证办理'
        },
        {
          value: 2,
          label: '气体分析'
        },
        {
          value: 3,
          label: '安全措施确认，培训交底'
        },
        {
          value: 4,
          label: '安全措施确认'
        },
        {
          value: 5,
          label: '培训交底'
        },
        {
          value: 6,
          label: '部门审批'
        },
        {
          value: 7,
          label: '作业票填报结束'
        },
        {
          value: 8,
          label: '作业气体分析不合格'
        },
        {
          value: 9,
          label: '审批未通过'
        },
        {
          value: 10,
          label: '开始'
        },
        {
          value: 11,
          label: '监护'
        },
        {
          value: 12,
          label: '结束'
        },
        {
          value: 13,
          label: '待验收'
        },
        {
          value: 14,
          label: '验收完成'
        },
        {
          value: 15,
          label: '取消'
        },
        {
          value: 16,
          label: '废止作业票'
        }
      ],
      timeRange: []
    });
    const fireRef = ref()
    const plateRef = ref()
    const spaceRef = ref()
    const hoistRef = ref()
    const groundRef = ref()
    const brokenRef = ref()
    const heightRef = ref()
    const powerRef = ref()
    const openRef = ref()
    // 页面载入时执行方法
    onMounted(() => {
      getListByPage();
      getAllDepartment()
      spWorker()
      getOpList()
      getAll()
      getAllDevice()
      getAllRisks()
      getOtherWork()
    });
    const giveTime = () => {
      if (state.timeRange && state.timeRange !== null) {
        state.searPara.startTime = state.timeRange[0];
        state.searPara.endTime = state.timeRange[1];
      } else {
        state.searPara.startTime = '';
        state.searPara.endTime = '';
      }
    };

    const continueRecord = (row) => {
      if (row.workType == 1) {
        fireRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 2) {
        spaceRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 3) {
        hoistRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 4) {
        groundRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 5) {
        brokenRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 6) {
        heightRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 7) {
        powerRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 8) {
        plateRef.value.openDialog(row, 'continue')
      }
      if (row.workType == 9) {
        openRef.value.openDialog(row, 'continue')
      }
    }

    // 刷新
    const reLoadData = async () => {
      getListByPage();
    };

    // 填写表单
    const toApply = () => {
      router.push({
        path: 'zysq'
      });
      const giveTime = () => {
        if (state.timeRange && state.timeRange !== null) {
          state.searPara.startTime = state.timeRange[0];
          state.searPara.endTime = state.timeRange[1];
    };

    const handleClick = (tab: TabsPaneContext, event: Event) => {
    };

    // 获取部门列表
    const getAllDepartment = async () => {
      let res = await teamManageApi().getAllDepartment();
      if (res.data.code === '200') {
        state.departmentList = JSON.parse(JSON.stringify(res.data.data))
        recursion(state.departmentList);
        state.lists.departList = state.departmentList
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    const recursion = (value: any) => {
      for (let i of value) {
        if (i.children.length !== 0) {
          state.departmentRecursionList.push(i);
          recursion(i.children);
        } else {
          state.searPara.startTime = '';
          state.searPara.endTime = '';
        }
      };

      const continueRecord = (row)=>{
        if(row.workType == 1){
          fireRef.value.openDialog(row,'continue')
        }
        if(row.workType == 2){
          spaceRef.value.openDialog(row,'continue')
        }
        if(row.workType == 3){
          hoistRef.value.openDialog(row,'continue')
        }
        if(row.workType == 4){
          groundRef.value.openDialog(row,'continue')
        }
        if(row.workType == 5){
          brokenRef.value.openDialog(row,'continue')
        }
        if(row.workType == 6){
          heightRef.value.openDialog(row,'continue')
        }
        if(row.workType == 7){
          powerRef.value.openDialog(row,'continue')
        }
        if(row.workType == 8){
          plateRef.value.openDialog(row,'continue')
        }
        if(row.workType == 9){
          openRef.value.openDialog(row,'continue')
          state.departmentRecursionList.push(i);
        }
      }
    };

        // 刷新
        const reLoadData = async () => {
            getListByPage();
        };
    // 分页获取
    const getListByPage = async () => {
      const data = {pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: state.searPara};
      let res = await workApplyApi().getAllNewApplyListPage(data);
      if (res.data.code === '200') {
        state.applyData = JSON.parse(JSON.stringify(res.data.data));
        state.applyData = state.applyData.map((item) => {
          if (item.operators == null || item.operators == []) {
            item.operators = [];
          } else {
            item.operators = Array.from(item.operators, ({operatorUname}) => operatorUname);
          }
          return item;
        });
        state.totalSize1 = res.data.total;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

        // 填写表单
        const toApply = () => {
            router.push({
                path: 'zysq'
    // 表格数据格式化
    const toNames = (row, column, cellValue, index) => {
      if (row.list == []) {
        return [];
      } else {
        const nameList = [];
        for (let i = 0; i < row.list.length; i++) {
          for (let t = 0; t < state.workTimeList.length; t++) {
            if (row.list[i] == state.workTimeList[t].id) {
              nameList.push(state.workTimeList[t].name);
            }
          }
        }
        return nameList.join();
      }
    };

    const spWorker = async () => {
      for (let id of ['18', '19']) {
        const res = await workApplyApi().getSpList({roleId: id})
        if (id == '18') {
          if (res.data.code === '200') {
            state.lists.spList.jhList = JSON.parse(JSON.stringify(res.data.data))
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
        };

        const handleClick = (tab: TabsPaneContext, event: Event) => {
        };

        // 获取部门列表
        const getAllDepartment = async () => {
            let res = await teamManageApi().getAllDepartment();
            if (res.data.code === '200') {
                state.departmentList = JSON.parse(JSON.stringify(res.data.data))
                recursion(state.departmentList);
                state.lists.departList = state.departmentList
                state.lists.departList2 = JSON.parse(JSON.stringify(res.data.data))[0].children[0].children.filter(i=>i.depId == 32 || i.depId == 48 || i.depId == 49 || i.depId == 50 || i.depId == 10 || i.depId == 41 || i.depId == 46 || i.depId == 47)
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const recursion = (value: any) => {
            for (let i of value) {
                if (i.children.length !== 0) {
                    state.departmentRecursionList.push(i);
                    recursion(i.children);
                } else {
                    state.departmentRecursionList.push(i);
                }
            }
        };

        // 分页获取
        const getListByPage = async () => {
            const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: state.searPara };
            let res = await workApplyApi().getAllNewApplyListPage(data);
            if (res.data.code === '200') {
                state.applyData = JSON.parse(JSON.stringify(res.data.data));
                state.applyData = state.applyData.map((item) => {
                    if (item.operators == null || item.operators == []) {
                        item.operators = [];
                    } else {
                        item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
                    }
                    return item;
                });
                state.totalSize1 = res.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 表格数据格式化
        const toNames = (row, column, cellValue, index) => {
            if (row.list == []) {
                return [];
            } else {
                const nameList = [];
                for (let i = 0; i < row.list.length; i++) {
                    for (let t = 0; t < state.workTimeList.length; t++) {
                        if (row.list[i] == state.workTimeList[t].id) {
                            nameList.push(state.workTimeList[t].name);
                        }
                    }
                }
                return nameList.join();
            }
        };

      const spWorker = async ()=>{
        for(let id of ['18','19']){
          const res = await workApplyApi().getSpList({roleId: id})
          if(id == '18'){
            if (res.data.code === '200') {
              state.lists.spList.jhList = JSON.parse(JSON.stringify(res.data.data))
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          }
          if(id == '19'){
            if (res.data.code === '200') {
              state.lists.spList.sfList = JSON.parse(JSON.stringify(res.data.data))
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
        }
        if (id == '19') {
          if (res.data.code === '200') {
            state.lists.spList.sfList = JSON.parse(JSON.stringify(res.data.data))
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        }
      }
    }

      const getOpList = async()=>{
        const res = await workApplyApi().getOpList()
        if(res.data.code == '200'){
          if(res.data.data && res.data.data.length>0){
            state.lists.spList.opList = JSON.parse(JSON.stringify(res.data.data)).map(i=>{
              if(i.certList && i.certList.length>0){
                i.certList = i.certList.map(item=>{
                  item['realName'] = i.realName + '(' + item.certTypeName +'：'+ item.certExpiredAt + ')'
                  item['uid'] = item.certNo + ',' + item.certExpiredAt
                  return item
                })
              }
              return i
            })
          }
        }else{
          ElMessage({
            type: 'warning',
            message: res.data.msg
    const getOpList = async () => {
      const res = await workApplyApi().getOpList()
      if (res.data.code == '200') {
        if (res.data.data && res.data.data.length > 0) {
          state.lists.spList.opList = JSON.parse(JSON.stringify(res.data.data)).map(i => {
            if (i.certList && i.certList.length > 0) {
              i.certList = i.certList.map(item => {
                item['realName'] = i.realName + '(' + item.certTypeName + '：' + item.certExpiredAt + ')'
                item['uid'] = item.certNo + ',' + item.certExpiredAt
                return item
              })
            }
            return i
          })
        }
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        })
      }

      // 获取用户列表
      const getAll = async ()=>{
        const res = await workApplyApi().getAllUsers()
        if (res.data.code === '200') {
          state.lists.workerList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };

      // 获取设备列表
      const getAllDevice = async ()=>{
        const res = await workApplyApi().getAllDevices()
        if (res.data.code === '200') {
          state.lists.deviceList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

      // 获取设备列表
      const getAllRisks = async ()=>{
        const res = await workApplyApi().getAllRiskIdentity()
        if (res.data.code === '200') {
          // state.allDevices = JSON.parse(JSON.stringify(res.data.data))
          state.lists.riskList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      }

      const getOtherWork = async () => {
        let res = await workApplyApi().getOtherWork({pageSize: 999, pageIndex: 1, searchParams: {workPermitNo: '', workType: null}})
        if (res.data.code === '200') {
          state.lists.otherWorks = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };

        // 关键词查询记录
        const searchRecord = async () => {
            state.pageIndex1 = 1
            getListByPage();
        };
        // 重置搜索
        const clearSearch = async () => {
            state.timeRange = []
            state.searPara = {
              startTime: '',
              endTime: '',
              workPermitNo: '',
              workType: null,
              headUserName: '',
              secondDepId: null
            };
            state.pageIndex1 = 1
            getListByPage();
        };

        // 查看进度
        const viewStatus = (row) => {
            getStatus({ workApplyId: row.workApplyId });
            state.dialogStatus = true;
        };

        // 查询进度方法
        const getStatus = async (data: any) => {
            let res = await workApplyApi().getStatus(data);
            if (res.data.code === '200') {
                state.approveInfo = JSON.parse(JSON.stringify(res.data.data));
                state.approveInfo.operators = Array.from(state.approveInfo.operators, ({ operatorUname }) => operatorUname);
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const deleteRecordBtn = (row) => {
            state.deleteId = row.workApplyId;
            state.deleteDialog = true;
        };

        // 取消申请方法
        const deleteRecord = async (data: any) => {
            let res = await workApplyApi().cancelApply(data);
            if (res.data.code === '200') {
                ElMessage({
                    type: 'success',
                    message: '删除成功！'
                });
                getListByPage();
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const conFirmDelete = () => {
            deleteRecord({ workApplyId: state.deleteId });
            state.deleteDialog = false;
        };


        // 导出方法
        const downLoadRecord = (row: any) => {
            // let res = await workApplyApi().postPrinting(data);
            axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/down/load/pdf`,{ id: row.id},{headers:{'Content-Type': 'application/json','Authorization': `${Cookies.get('token')}`,'uid':`${Cookies.get('uid')}`},responseType: 'blob'}).then(res=>{
                if (res) {
                    const link = document.createElement('a')
                    let blob = new Blob([res.data],{type: 'application/pdf'})
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob); // 创建URL
                    link.setAttribute("download", row.workTypeDesc + row.workPermitNo + "作业证.pdf");
                    document.body.appendChild(link)
                    window.open(link.href)
                    document.body.removeChild(link)
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            })

        };

        const handleSizeChange1 = (val: number) => {
            state.pageSize1 = val;
            getListByPage();
        };
        const handleCurrentChange1 = (val: number) => {
            state.pageIndex1 = val;
            getListByPage();
        };

        // 查看记录
        const viewRecord = (row: any) => {
            state.dialogType = row.workType
            state.details = JSON.parse(JSON.stringify(row));
            state.dialogDetails = true;
        };

        // 折线图
        const renderMenu = async (value: string) => {
            Session.set('projectId', value);
            userInfos.value.projectId = value;
            await initBackEndControlRoutes();
        };

        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            Finished,
            Download,
            fireRef,
            plateRef,
            spaceRef,
            hoistRef,
            groundRef,
            brokenRef,
            heightRef,
            powerRef,
            openRef,
          continueRecord,
            giveTime,
            reLoadData,
            toApply,
            handleClick,
            toNames,
            searchRecord,
            clearSearch,
            viewRecord,
            viewStatus,
            deleteRecordBtn,
            downLoadRecord,
            conFirmDelete,
            getListByPage,
            handleSizeChange1,
            handleCurrentChange1,
            ...toRefs(state)
        };
    }

    // 获取用户列表
    const getAll = async () => {
      const res = await workApplyApi().getAllUsers()
      if (res.data.code === '200') {
        state.lists.workerList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    // 获取设备列表
    const getAllDevice = async () => {
      const res = await workApplyApi().getAllDevices()
      if (res.data.code === '200') {
        state.lists.deviceList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    }

    // 获取设备列表
    const getAllRisks = async () => {
      const res = await workApplyApi().getAllRiskIdentity()
      if (res.data.code === '200') {
        // state.allDevices = JSON.parse(JSON.stringify(res.data.data))
        state.lists.riskList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    }

    const getOtherWork = async () => {
      let res = await workApplyApi().getOtherWork({
        pageSize: 999,
        pageIndex: 1,
        searchParams: {workPermitNo: '', workType: null}
      })
      if (res.data.code === '200') {
        state.lists.otherWorks = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    // 关键词查询记录
    const searchRecord = async () => {
      state.pageIndex1 = 1
      getListByPage();
    };
    // 重置搜索
    const clearSearch = async () => {
      state.timeRange = []
      state.searPara = {
        startTime: '',
        endTime: '',
        workPermitNo: '',
        workType: null,
        headUserName: '',
        secondDepId: null
      };
      state.pageIndex1 = 1
      getListByPage();
    };

    // 查看进度
    const viewStatus = (row) => {
      getStatus({workApplyId: row.workApplyId});
      state.dialogStatus = true;
    };

    // 查询进度方法
    const getStatus = async (data: any) => {
      let res = await workApplyApi().getStatus(data);
      if (res.data.code === '200') {
        state.approveInfo = JSON.parse(JSON.stringify(res.data.data));
        state.approveInfo.operators = Array.from(state.approveInfo.operators, ({operatorUname}) => operatorUname);
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    const deleteRecordBtn = (row) => {
      state.deleteId = row.workApplyId;
      state.deleteDialog = true;
    };

    // 取消申请方法
    const deleteRecord = async (data: any) => {
      let res = await workApplyApi().cancelApply(data);
      if (res.data.code === '200') {
        ElMessage({
          type: 'success',
          message: '删除成功！'
        });
        getListByPage();
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    const conFirmDelete = () => {
      deleteRecord({workApplyId: state.deleteId});
      state.deleteDialog = false;
    };


    // 导出方法
    const downLoadRecord = (row: any) => {
      // let res = await workApplyApi().postPrinting(data);
      axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/down/load/pdf`, {id: row.id}, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `${Cookies.get('token')}`,
          'uid': `${Cookies.get('uid')}`
        }, responseType: 'blob'
      }).then(res => {
        if (res) {
          const link = document.createElement('a')
          let blob = new Blob([res.data], {type: 'application/pdf'})
          link.style.display = "none";
          link.href = URL.createObjectURL(blob); // 创建URL
          link.setAttribute("download", row.workTypeDesc + row.workPermitNo + "作业证.pdf");
          document.body.appendChild(link)
          window.open(link.href)
          document.body.removeChild(link)
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      })

    };

    const handleSizeChange1 = (val: number) => {
      state.pageSize1 = val;
      getListByPage();
    };
    const handleCurrentChange1 = (val: number) => {
      state.pageIndex1 = val;
      getListByPage();
    };

    // 查看记录
    const viewRecord = (row: any) => {
      state.dialogType = row.workType
      state.details = JSON.parse(JSON.stringify(row));
      state.dialogDetails = true;
    };

    // 折线图
    const renderMenu = async (value: string) => {
      Session.set('projectId', value);
      userInfos.value.projectId = value;
      await initBackEndControlRoutes();
    };

    return {
      View,
      Edit,
      Delete,
      Refresh,
      Plus,
      Finished,
      Download,
      fireRef,
      plateRef,
      spaceRef,
      hoistRef,
      groundRef,
      brokenRef,
      heightRef,
      powerRef,
      openRef,
      continueRecord,
      giveTime,
      reLoadData,
      toApply,
      handleClick,
      toNames,
      searchRecord,
      clearSearch,
      viewRecord,
      viewStatus,
      deleteRecordBtn,
      downLoadRecord,
      conFirmDelete,
      getListByPage,
      handleSizeChange1,
      handleCurrentChange1,
      ...toRefs(state)
    };
  }
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;

  .demo-tabs {
    width: 100%;
    height: 100%;

    &::v-deep(.el-tabs__content) {
      height: calc(100% - 60px);
    }

    .el-tab-pane {
      height: 100%;
    }
  }

  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .demo-tabs {
        width: 100%;
        height: 100%;
    background: #fff;
    border-radius: 4px;

        &::v-deep(.el-tabs__content) {
            height: calc(100% - 60px);
        }
    .main-card {
      width: 100%;
      height: 100%;

        .el-tab-pane {
            height: 100%;
        }
    }
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 130px);
        }
    }
    .stepItem {
        display: flex;
        align-items: flex-start;
        margin-top: 30px;
        margin-left: 30px;
        padding-bottom: 30px;
        padding-left: 40px;
        border-left: 1px solid #a0cfff;
        position: relative;
        &:first-of-type {
            margin-top: 30px;
        }
        &:first-of-type {
            margin-bottom: 0;
            border-left: none;
        }
        .stepNum {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 20px;
            box-sizing: border-box;
            font-size: 18px;
            color: #333;
            border: 1px solid #a0cfff;
            line-height: 38px;
            text-align: center;
            left: -20px;
            top: -30px;
            background: #d9ecff;
        }
        .stepCard {
            width: 100%;
            margin-top: -30px;

            .box-card {
                width: 100%;

                .card-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    span {
                        font-weight: bold;
                        margin-left: 10px;
                    }
                }

                .text {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 10px;
                    padding-left: 10px;

                    span {
                        color: #409eff;
                    }

                    .bold-text{
                        font-weight: bolder;
                    }

                    &:last-of-type {
                        margin-bottom: 0;
                    }
                }
                .approveUnit {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 20px;
                    padding: 10px 15px;
                    border: 1px solid #fff;
                    background: #ecf8ff;
                    border-radius: 6px;
                    .item-tit {
                        width: 100%;
                        display: flex;
                        color: #409eff;
                        align-items: flex-start;
                        justify-content: space-between;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #a0cfff;

                        & > span {
                            flex: 1;
                            &:last-of-type{
                                text-align: center;
                            }
                        }
                        & > div {
                            flex: 1;
                            text-align: center;
                        }
                    }
                    .item-cont {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 0;
                        border-bottom: 1px solid #c6e2ff;

                        & > span {
                            flex: 1;
                            &:last-of-type{
                                text-align: center;
                            }
                        }
                        & > div {
                            flex: 1;
                            text-align: center;

                            & > div {
                                text-align: left;
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                span {
                                    width: 45%;
                                    &:first-of-type {
                                        width: 30%;
                                    }
                                }
                            }
                        }
                        &:last-of-type {
                            border-bottom: 0;
                        }
                    }
                }
                .approveItem {
                    width: 100%;
                    font-size: 14px;
                    margin-bottom: 20px;
                    padding: 10px 15px;
                    background: #ecf8ff;
                    border: 1px solid #fff;
                    border-radius: 6px;
                    .item-tit {
                        width: 100%;
                        display: flex;
                        color: #409eff;
                        align-items: flex-start;
                        justify-content: space-between;
                        padding-bottom: 10px;
                        border-bottom: 1px solid #a0cfff;

                        & > span {
                            flex: 1;
                        }
                        & > div {
                            flex: 2;
                            text-align: center;
                        }
                    }
                    .item-cont {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10px 0;
                        border-bottom: 1px solid #c6e2ff;

                        & > span {
                            flex: 1;
                        }
                        & > div {
                            flex: 2;
                            text-align: center;

                            & > div {
                                text-align: left;
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: flex-start;
                                margin-bottom: 10px;
                                span {
                                    width: 50%;
                                    &:first-of-type {
                                        width: 25%;
                                    }
                                }
                            }
                        }
                        &:last-of-type {
                            border-bottom: 0;
                        }
                    }
                }
            }
        }
        &:hover .card-header {
            color: #0098f5;
        }
        &:hover .stepNum {
            border: 2px solid #0098f5;
            color: #0098f5;
        }
    }
    .el-row {
      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;

        .mainCardBtn {
          margin: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
      }

      .pageBtn {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: right;

        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }

        .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }

    &:last-of-type {
      height: calc(100% - 130px);
    }
  }

  .stepItem {
    display: flex;
    align-items: flex-start;
    margin-top: 30px;
    margin-left: 30px;
    padding-bottom: 30px;
    padding-left: 40px;
    border-left: 1px solid #a0cfff;
    position: relative;

    &:first-of-type {
      margin-top: 30px;
    }

    &:first-of-type {
      margin-bottom: 0;
      border-left: none;
    }

    .stepNum {
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      box-sizing: border-box;
      font-size: 18px;
      color: #333;
      border: 1px solid #a0cfff;
      line-height: 38px;
      text-align: center;
      left: -20px;
      top: -30px;
      background: #d9ecff;
    }

    .stepCard {
      width: 100%;
      margin-top: -30px;

      .box-card {
        width: 100%;

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          span {
            font-weight: bold;
            margin-left: 10px;
          }
        }

        .text {
          width: 100%;
          font-size: 14px;
          margin-bottom: 10px;
          padding-left: 10px;

          span {
            color: #409eff;
          }

          .bold-text {
            font-weight: bolder;
          }

          &:last-of-type {
            margin-bottom: 0;
          }
        }

        .approveUnit {
          width: 100%;
          font-size: 14px;
          margin-bottom: 20px;
          padding: 10px 15px;
          border: 1px solid #fff;
          background: #ecf8ff;
          border-radius: 6px;

          .item-tit {
            width: 100%;
            display: flex;
            color: #409eff;
            align-items: flex-start;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #a0cfff;

            & > span {
              flex: 1;

              &:last-of-type {
                text-align: center;
              }
            }

            & > div {
                white-space: nowrap;
                margin-right: 20px;
              flex: 1;
              text-align: center;
            }
          }

          .item-cont {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #c6e2ff;

            & > span {
              flex: 1;

              &:last-of-type {
                text-align: center;
              }
            }

            & > div {
              flex: 1;
              text-align: center;

              & > div {
                text-align: left;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                  width: 45%;

                  &:first-of-type {
                    width: 30%;
                  }
                }
              }
            }

            &:last-of-type {
              border-bottom: 0;
            }
          }
        }

        .approveItem {
          width: 100%;
          font-size: 14px;
          margin-bottom: 20px;
          padding: 10px 15px;
          background: #ecf8ff;
          border: 1px solid #fff;
          border-radius: 6px;

          .item-tit {
            width: 100%;
            display: flex;
            color: #409eff;
            align-items: flex-start;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #a0cfff;

            & > span {
              flex: 1;
            }

            & > div {
              flex: 2;
              text-align: center;
            }
          }

          .item-cont {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #c6e2ff;

            & > span {
              flex: 1;
            }

            & > div {
              flex: 2;
              text-align: center;

              & > div {
                text-align: left;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: flex-start;
                margin-bottom: 10px;

                span {
                  width: 50%;

                  &:first-of-type {
                    width: 25%;
                  }
                }
              }
            }

            &:last-of-type {
              border-bottom: 0;
            }
          }
        }
      }
    }
    .el-card {
        border: 0;

    &:hover .card-header {
      color: #0098f5;
    }

    &:hover .stepNum {
      border: 2px solid #0098f5;
      color: #0098f5;
    }
  }

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

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

    .grid-content {
      align-items: center;
      min-height: 36px;
    }

    .topInfo {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }

  .el-card {
    border: 0;
  }
}
</style>

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenDialog.vue

@@ -6,7 +6,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="applyDepId">
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -645,7 +645,7 @@
      }

      const findParent = ()=>{
        state.form.seDepId = findTopLevelId(props.lists.departList2,state.form.applyDepId)
        state.form.seDepId = findTopLevelId(props.lists.departList,state.form.applyDepId)
      }

      function findTopLevelId(tree, targetId) {

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/fireDialog.vue

@@ -6,7 +6,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="applyDepId">
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -680,7 +680,7 @@
      const findParent = ()=>{
        // state.form.applyDepId = state.form.depIdList[state.form.depIdList.length - 1]
        // state.form.seDepId = state.form.depIdList[0]
        state.form.seDepId = findTopLevelId(props.lists.departList2,state.form.applyDepId)
        state.form.seDepId = findTopLevelId(props.lists.departList,state.form.applyDepId)
      }

      const singleSelect=(value,type)=>{

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/groundDialog.vue

@@ -6,7 +6,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="applyDepId">
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -610,7 +610,7 @@
      }

      const findParent = ()=>{
        state.form.seDepId = findTopLevelId(props.lists.departList2,state.form.applyDepId)
        state.form.seDepId = findTopLevelId(props.lists.departList,state.form.applyDepId)
      }

      function findTopLevelId(tree, targetId) {

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/heightDialog.vue

@@ -6,7 +6,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="applyDepId">
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -365,7 +365,7 @@
            value: 6
          },
          {
            label: "特级高处作业",
            label: "四级高处作业",
            value: 7
          }
        ],
@@ -544,7 +544,7 @@
      }

      const findParent = ()=>{
        state.form.seDepId = findTopLevelId(props.lists.departList2,state.form.applyDepId)
        state.form.seDepId = findTopLevelId(props.lists.departList,state.form.applyDepId)
      }

      function findTopLevelId(tree, targetId) {

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistDialog.vue

@@ -6,7 +6,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="applyDepId">
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -615,7 +615,7 @@
      }

      const findParent = ()=>{
        state.form.seDepId = findTopLevelId(props.lists.departList2,state.form.applyDepId)
        state.form.seDepId = findTopLevelId(props.lists.departList,state.form.applyDepId)
      }

      function findTopLevelId(tree, targetId) {

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/openDialog.vue

@@ -6,7 +6,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="applyDepId">
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/plateDialog.vue

@@ -6,7 +6,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="applyDepId">
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -692,7 +692,7 @@
      }

      const findParent = ()=>{
        state.form.seDepId = findTopLevelId(props.lists.departList2,state.form.applyDepId)
        state.form.seDepId = findTopLevelId(props.lists.departList,state.form.applyDepId)
      }

      function findTopLevelId(tree, targetId) {

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/powerDialog.vue

@@ -657,7 +657,7 @@
      }

      const findParent = ()=>{
        state.form.seDepId = findTopLevelId(props.lists.departList2,state.form.applyDepId)
        state.form.seDepId = findTopLevelId(props.lists.departList,state.form.applyDepId)
      }

      function findTopLevelId(tree, targetId) {

 src/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceDialog.vue

@@ -6,7 +6,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="applyDepId">
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.applyDepId" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -552,7 +552,7 @@
      }

      const findParent = ()=>{
        state.form.seDepId = findTopLevelId(props.lists.departList2,state.form.applyDepId)
        state.form.seDepId = findTopLevelId(props.lists.departList,state.form.applyDepId)
      }

      function findTopLevelId(tree, targetId) {

 src/views/newSpecialWorkSystem/workTicket/wdsq/index.vue

@@ -1,893 +1,942 @@
<template>
    <div class="home-container">
<!--        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
<!--            <el-tab-pane label="申请中" name="1">-->
                <div style="height: 100%">
                    <el-row class="homeCard">
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>时间筛选：</span>
                        <el-date-picker v-model="timeRange" value-format="YYYY-MM-DD" type="daterange" @change="giveTime" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" />
                      </div>
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>负责人：</span>
                        <el-input v-model="searPara.headUserName" placeholder="负责人"/>
                      </div>
                      <div class="basic-line">
                        <span>事业部：</span>
                        <el-select v-model="searPara.secondDepId">
                          <el-option
                              v-for="item in dep4List"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                          />
                        </el-select>
                      </div>
                      <div class="basic-line">
                        <span>作业类型：</span>
                        <el-select v-model="searPara.workType">
                          <el-option
                              v-for="item in workType"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id"
                          />
                        </el-select>
                      </div>
                      <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
                        <span>作业票编号：</span>
                        <el-input
                            v-model="searPara.workPermitNo"
                            placeholder="请输入作业票编号"
                        />
                      </div>
                      <div style="margin-left: 20px">
                        <el-button type="primary" @click="searchRecord">查询</el-button>
                        <el-button plain @click="clearSearch">重置</el-button>
                      </div>
                    </el-row>
                    <div class="homeCard">
                        <div class="main-card">
                            <el-row class="cardTop">
                                <el-col :span="12" class="mainCardBtn">
                                    <el-button type="primary" :icon="Plus" size="default" @click="toApply()">申请</el-button>
                                    <el-button type="primary" :icon="Download" size="default" @click="exportSheet()">导出记录</el-button>
                                </el-col>
                                <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />
                            </el-row>
                            <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)" :header-cell-style="{ background: '#fafafa' }">
                                <el-table-column property="workPermitNo" label="作业编号" align="center">
                                  <template #default="scope">
                                    {{scope.row.workPermitNo?scope.row.workPermitNo:'—'}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="seDepName" label="事业部" align="center"/>
                                <el-table-column property="applyDepName" label="作业所在车间" align="center"/>
                                <el-table-column property="workContent" label="作业内容" align="center"/>
                                <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
                                <el-table-column label="作业单位" align="center">
                                  <template #default="scope">
                                    <span v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{scope.row.workDepList.map(i=>i.workDepName).join(',')}}</span>
                                    <span v-else>{{scope.row.workDepName }}</span>
                                  </template>
                                </el-table-column>
                                <el-table-column property="headList" label="负责人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.headList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('，')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="operatorList" label="作业人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.operatorList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('，')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="guardianList" label="监护人及电话" align="center">
                                  <template #default="scope">
                                    {{scope.row.guardianList.map(i=>{return i.userName + '(' + i.phone+ ')' }).join('，')}}
                                  </template>
                                </el-table-column>
                                <el-table-column property="expStartTime" label="作业开始时间" align="center"/>
                                <el-table-column property="expEndTime" label="预计完成时间" align="center"/>
                                <el-table-column label="执法仪编号" align="center">
                                  <template #default="scope">
                                    {{scope.row.workApprovalDeviceList.map(i=>i.deviceNo).join('，')}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="作业人数" align="center">
                                  <template #default="scope">
                                    {{scope.row.operatorList.length}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="监护人数" align="center">
                                  <template #default="scope">
                                    {{scope.row.guardianList.length}}
                                  </template>
                                </el-table-column>
                                <el-table-column label="风险研判" align="center">
                                    <template #default="scope">
                                        <el-button v-if="scope.row.status == 0" link type="primary" size="small" @click="openReport('上传', scope.row)">上传研判报告</el-button>
                                        <el-tag type="danger" v-else-if="scope.row.status == 15">已取消</el-tag>
                                        <el-tag type="danger" v-else-if="scope.row.status == 16">已废止</el-tag>
                                        <el-button v-else link type="primary" size="small" @click="openReport('查看', scope.row)">查看研判报告</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" label="操作" align="center" width="150">
                                    <template #default="scope">
                                        <span v-if="scope.row.status == 16">已废止</span>
                                        <span v-if="scope.row.status == 15">已取消</span>
                                        <el-button v-if="scope.row.status == 0 || scope.row.status == 1" link type="danger" size="small" :icon="Delete" @click="abortRecordBtn(scope.row)">取消</el-button>
                                        <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                                        <el-button v-if="scope.row.status == 0 || scope.row.status == 1" link type="primary" size="small" v-throttle :icon="Edit" @click="openEdit(scope.row)">修改</el-button>
                                        <el-button link type="success" v-throttle v-if="scope.row.status == 0 || scope.row.status == 1" size="small" :icon="Download" @click="checkTicket(scope.row)">正式办票</el-button>
<!--                                        <el-button :disabled="scope.row.status == 7 ? false : true" link type="primary" size="small" :icon="Download" @click="downLoadBtn(scope.row)">导出作业票</el-button>-->
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div class="pageBtn">
                                <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
                            </div>
                        </div>
                    </div>
                </div>
                <el-dialog v-model="dialogDetails" title="作业申请详情" center>
<!--                    <fire v-if="dialogType == 1" :details = details></fire>-->
<!--                    <space v-else-if="dialogType == 2" :details = details></space>-->
<!--                    <hoist v-else-if="dialogType == 3" :details = details></hoist>-->
<!--                    <ground v-else-if="dialogType == 4" :details = details></ground>-->
<!--                    <broken v-else-if="dialogType == 5" :details = details></broken>-->
<!--                    <height v-else-if="dialogType == 6" :details = details></height>-->
<!--                    <power v-else-if="dialogType == 7" :details = details></power>-->
<!--                    <plate v-else :details = details></plate>-->
                  <detail-log :type=dialogType :statusList=statusList :details = details></detail-log>
                    <template #footer>
  <div class="home-container">
    <!--        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">-->
    <!--            <el-tab-pane label="申请中" name="1">-->
    <div style="height: 100%">
      <el-row class="homeCard">
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>时间筛选：</span>
          <el-date-picker v-model="timeRange" value-format="YYYY-MM-DD" type="daterange" @change="giveTime"
                          range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"/>
        </div>
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>负责人：</span>
          <el-input v-model="searPara.headUserName" placeholder="负责人"/>
        </div>
        <div class="basic-line">
          <span>部门：</span>
          <el-cascader :teleported="false" v-model="searPara.secondDepId" :options="departmentList" :props="casProps" :show-all-levels="false"/>
        </div>
        <div class="basic-line">
          <span>作业类型：</span>
          <el-select v-model="searPara.workType">
            <el-option
                v-for="item in workType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </div>
        <div class="basic-line" style="display:flex;white-space:nowrap;line-height: 40px">
          <span>作业票编号：</span>
          <el-input
              v-model="searPara.workPermitNo"
              placeholder="请输入作业票编号"
          />
        </div>
        <div style="margin-left: 20px">
          <el-button type="primary" @click="searchRecord">查询</el-button>
          <el-button plain @click="clearSearch">重置</el-button>
        </div>
      </el-row>
      <div class="homeCard">
        <div class="main-card">
          <el-row class="cardTop">
            <el-col :span="12" class="mainCardBtn">
              <el-button type="primary" :icon="Plus" size="default" @click="toApply()">申请</el-button>
              <el-button type="primary" :icon="Download" size="default" @click="exportSheet()">导出记录</el-button>
            </el-col>
            <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()"/>
          </el-row>
          <el-table ref="multipleTableRef" :data="applyData" style="width: 100%" height="calc(100% - 100px)"
                    :header-cell-style="{ background: '#fafafa' }">
            <el-table-column property="workPermitNo" label="作业编号" align="center">
              <template #default="scope">
                {{ scope.row.workPermitNo ? scope.row.workPermitNo : '—' }}
              </template>
            </el-table-column>
            <el-table-column property="seDepName" label="部门" align="center"/>
            <el-table-column property="applyDepName" label="作业所在车间" align="center"/>
            <el-table-column property="workContent" label="作业内容" align="center"/>
            <el-table-column property="workTypeDesc" label="作业类型" align="center"/>
            <el-table-column label="作业单位" align="center">
              <template #default="scope">
                <span
                    v-if="scope.row.workDepList && scope.row.workDepList.length>0">{{ scope.row.workDepList.map(i => i.workDepName).join(',') }}</span>
                <span v-else>{{ scope.row.workDepName }}</span>
              </template>
            </el-table-column>
            <el-table-column property="headList" label="负责人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.headList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join('，')
                }}
              </template>
            </el-table-column>
            <el-table-column property="operatorList" label="作业人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.operatorList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join('，')
                }}
              </template>
            </el-table-column>
            <el-table-column property="guardianList" label="监护人及电话" align="center">
              <template #default="scope">
                {{
                  scope.row.guardianList.map(i => {
                    return i.userName + '(' + i.phone + ')'
                  }).join('，')
                }}
              </template>
            </el-table-column>
            <el-table-column property="expStartTime" label="作业开始时间" align="center"/>
            <el-table-column property="expEndTime" label="预计完成时间" align="center"/>
            <el-table-column label="执法仪编号" align="center">
              <template #default="scope">
                {{ scope.row.workApprovalDeviceList.map(i => i.deviceNo).join('，') }}
              </template>
            </el-table-column>
            <el-table-column label="作业人数" align="center">
              <template #default="scope">
                {{ scope.row.operatorList.length }}
              </template>
            </el-table-column>
            <el-table-column label="监护人数" align="center">
              <template #default="scope">
                {{ scope.row.guardianList.length }}
              </template>
            </el-table-column>
            <el-table-column label="风险研判" align="center">
              <template #default="scope">
                <el-button v-if="scope.row.status == 0" link type="primary" size="small"
                           @click="openReport('上传', scope.row)">上传研判报告
                </el-button>
                <el-tag type="danger" v-else-if="scope.row.status == 15">已取消</el-tag>
                <el-tag type="danger" v-else-if="scope.row.status == 16">已废止</el-tag>
                <el-button v-else link type="primary" size="small" @click="openReport('查看', scope.row)">查看研判报告
                </el-button>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="150">
              <template #default="scope">
                <span v-if="scope.row.status == 16">已废止</span>
                <span v-if="scope.row.status == 15">已取消</span>
                <el-button v-if="scope.row.status == 0 || scope.row.status == 1" link type="danger" size="small"
                           :icon="Delete" @click="abortRecordBtn(scope.row)">取消
                </el-button>
                <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button>
                <el-button v-if="scope.row.status == 0 || scope.row.status == 1" link type="primary" size="small"
                           v-throttle :icon="Edit" @click="openEdit(scope.row)">修改
                </el-button>
                <el-button link type="success" v-throttle v-if="scope.row.status == 0 || scope.row.status == 1"
                           size="small" :icon="Download" @click="checkTicket(scope.row)">正式办票
                </el-button>
                <!--                                        <el-button :disabled="scope.row.status == 7 ? false : true" link type="primary" size="small" :icon="Download" @click="downLoadBtn(scope.row)">导出作业票</el-button>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="pageBtn">
            <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]"
                           small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1"
                           @size-change="handleSizeChange1" @current-change="handleCurrentChange1"/>
          </div>
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogDetails" title="作业申请详情" center>
      <!--                    <fire v-if="dialogType == 1" :details = details></fire>-->
      <!--                    <space v-else-if="dialogType == 2" :details = details></space>-->
      <!--                    <hoist v-else-if="dialogType == 3" :details = details></hoist>-->
      <!--                    <ground v-else-if="dialogType == 4" :details = details></ground>-->
      <!--                    <broken v-else-if="dialogType == 5" :details = details></broken>-->
      <!--                    <height v-else-if="dialogType == 6" :details = details></height>-->
      <!--                    <power v-else-if="dialogType == 7" :details = details></power>-->
      <!--                    <plate v-else :details = details></plate>-->
      <detail-log :type=dialogType :statusList=statusList :details=details></detail-log>
      <template #footer>
                      <span class="dialog-footer">
                        <el-button type="primary" @click="dialogDetails = false">确认</el-button>
                      </span>
                    </template>
                </el-dialog>
                <report-log ref="reportDialogRef" @refresh="getListByPage"></report-log>
                <fire-dialog ref="fireRef" :lists="lists" @refresh="getListByPage"></fire-dialog>
                <plate-dialog ref="plateRef" :lists="lists" @refresh="getListByPage"></plate-dialog>
                <space-dialog ref="spaceRef" :lists="lists" @refresh="getListByPage"></space-dialog>
                <hoist-dialog ref="hoistRef" :lists="lists" @refresh="getListByPage"></hoist-dialog>
                <ground-dialog ref="groundRef" :lists="lists" @refresh="getListByPage"></ground-dialog>
                <broken-dialog ref="brokenRef" :lists="lists" @refresh="getListByPage"></broken-dialog>
                <height-dialog ref="heightRef" :lists="lists" @refresh="getListByPage"></height-dialog>
                <power-dialog ref="powerRef" :lists="lists" @refresh="getListByPage"></power-dialog>
                <open-dialog ref="openRef" :lists="lists" @refresh="getListByPage"></open-dialog>
    </div>
      </template>
    </el-dialog>
    <report-log ref="reportDialogRef" @refresh="getListByPage"></report-log>
    <fire-dialog ref="fireRef" :lists="lists" @refresh="getListByPage"></fire-dialog>
    <plate-dialog ref="plateRef" :lists="lists" @refresh="getListByPage"></plate-dialog>
    <space-dialog ref="spaceRef" :lists="lists" @refresh="getListByPage"></space-dialog>
    <hoist-dialog ref="hoistRef" :lists="lists" @refresh="getListByPage"></hoist-dialog>
    <ground-dialog ref="groundRef" :lists="lists" @refresh="getListByPage"></ground-dialog>
    <broken-dialog ref="brokenRef" :lists="lists" @refresh="getListByPage"></broken-dialog>
    <height-dialog ref="heightRef" :lists="lists" @refresh="getListByPage"></height-dialog>
    <power-dialog ref="powerRef" :lists="lists" @refresh="getListByPage"></power-dialog>
    <open-dialog ref="openRef" :lists="lists" @refresh="getListByPage"></open-dialog>
  </div>
</template>

<script lang="ts">
import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue';
import { storeToRefs } from 'pinia';
import { initBackEndControlRoutes } from '/@/router/backEnd';
import { useUserInfo } from '/@/stores/userInfo';
import { Session } from '/@/utils/storage';
import { useRouter } from 'vue-router';
import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download } from '@element-plus/icons-vue';
import { ElTable } from 'element-plus';
import { FormInstance, FormRules, ElMessage, ElMessageBox } from 'element-plus';
import { workApplyApi } from '/@/api/specialWorkSystem/workApply';
import type { TabsPaneContext } from 'element-plus';
import {storeToRefs} from 'pinia';
import {initBackEndControlRoutes} from '/@/router/backEnd';
import {useUserInfo} from '/@/stores/userInfo';
import {Session} from '/@/utils/storage';
import {useRouter} from 'vue-router';
import {Edit, View, Plus, Delete, Refresh, Search, Finished, Download} from '@element-plus/icons-vue';
import {ElTable} from 'element-plus';
import {FormInstance, FormRules, ElMessage, ElMessageBox} from 'element-plus';
import {workApplyApi} from '/@/api/specialWorkSystem/workApply';
import type {TabsPaneContext} from 'element-plus';
import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage";
import Cookies from 'js-cookie';
import axios from 'axios';

// 定义接口来定义对象的类型
interface stateType {
    applyData: Array<string>;
    workTimeList: Array<string>;
    multipleSelection: Array<any>;
    deleteArr: Array<any>;
    approveInfo: Object;
    dialogDetails: boolean;
    dialogStatus: boolean;
    pageIndex1: number;
    pageSize1: number;
    chosenIndex: null | number;
    downLoadId: null | number;
    downLoadName: string;
    totalSize1: number;
    activeName: string;
    addRecord: {};
    details: {};
    statusInfo: {};
    workType: Array<type>;
    dialogType: number | null;
    departmentList: Array<any>;
    departmentRecursionList: Array<DepartmentState>;
    statusList: Array<any>;
    searPara: {}
    timeRange: Array<string>;
    dep4List: Array<type>;
    lists: {}
  applyData: Array<string>;
  workTimeList: Array<string>;
  multipleSelection: Array<any>;
  deleteArr: Array<any>;
  approveInfo: Object;
  dialogDetails: boolean;
  dialogStatus: boolean;
  pageIndex1: number;
  pageSize1: number;
  chosenIndex: null | number;
  downLoadId: null | number;
  downLoadName: string;
  totalSize1: number;
  activeName: string;
  addRecord: {};
  details: {};
  statusInfo: {};
  workType: Array<type>;
  dialogType: number | null;
  departmentList: Array<any>;
  departmentRecursionList: Array<DepartmentState>;
  statusList: Array<any>;
  searPara: {}
  timeRange: Array<string>;
  dep4List: Array<type>;
  lists: {}
  casProps: {}
}

interface type {
    id: number;
    name: string;
  id: number;
  name: string;
}

interface DepartmentState {
    depId: number;
    depName: string;
  depId: number;
  depName: string;
}

export default defineComponent({
    name: 'myApply',
    components: {
      detailLog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/detailLog.vue')),
      reportLog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/jsaReportDialog.vue')),
      fireDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/fireDialog.vue')),
      plateDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/plateDialog.vue')),
      spaceDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceDialog.vue')),
      hoistDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistDialog.vue')),
      groundDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/groundDialog.vue')),
      brokenDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenDialog.vue')),
      heightDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/heightDialog.vue')),
      powerDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/powerDialog.vue')),
      openDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/openDialog.vue'))
    },
    setup() {
        const userInfo = useUserInfo();
        const { userInfos } = storeToRefs(userInfo);
        const router = useRouter();
        const reportDialogRef = ref();
        const fireRef = ref()
        const plateRef = ref()
        const spaceRef = ref()
        const hoistRef = ref()
        const groundRef = ref()
        const brokenRef = ref()
        const heightRef = ref()
        const powerRef = ref()
        const openRef = ref()
        const state = reactive<stateType>({
            pageIndex1: 1,
            pageSize1: 10,
            totalSize1: 0,
            dialogType: null,
            activeName: '1',
            departmentList: [],
            departmentRecursionList: [],
            chosenIndex: null,
            searPara:{
              startTime: '',
              endTime: '',
              workPermitNo: '',
              workType: null,
              headUserName: '',
              secondDepId: null
            },
            timeRange: [],
            applyData: [],
            workTimeList: [],
            multipleSelection: [],
            approveInfo: {
                approvalSteps: [],
                operators: []
            },
            dialogDetails: false,
            dialogStatus: false,
            addRecord: {},
            details: {},
            statusInfo: {},
            downLoadId: null,
            downLoadName: '',
            deleteArr: [],
            workType: [
                { id: 1, name: '动火作业' },
                { id: 2, name: '受限空间作业' },
                { id: 3, name: '吊装作业' },
                { id: 4, name: '动土作业' },
                { id: 5, name: '断路作业' },
                { id: 6, name: '高处作业' },
                { id: 7, name: '临时用电作业' },
                { id: 8, name: '盲板抽堵作业' },
                { id: 9, name: '打开作业' }
            ],
          lists: {
            workerList: [],
            departList: [],
            departList2: [],
            deviceList: [],
            otherWorks: [],
            spList: [],
            riskList: []
          },
          dep4List: [
            {id:49,name:'电石事业部'},
            {id:50,name:'电力事业部'},
            {id:48,name:'有机化工事业部'},
            {id:32,name:'甲醇事业部'}
          ],
          statusList: [
            {
              value: 0,
              label: '风险研判'
            },
            {
              value: 1,
              label: '票证办理'
            },
            {
              value: 2,
              label: '气体分析'
            },
            {
              value: 3,
              label: '安全措施确认，培训交底'
            },
            {
              value: 4,
              label: '安全措施确认'
            },
            {
              value: 5,
              label: '培训交底'
            },
            {
              value: 6,
              label: '部门审批'
            },
            {
              value: 7,
              label: '作业票填报结束'
            },
            {
              value: 8,
              label: '作业气体分析不合格'
            },
            {
              value: 9,
              label: '审批未通过'
            },
            {
              value: 10,
              label: '开始'
            },
            {
              value: 11,
              label: '监护'
            },
            {
              value: 12,
              label: '结束'
            },
            {
              value: 13,
              label: '待验收'
            },
            {
              value: 14,
              label: '验收完成'
            },
            {
              value: 15,
              label: '取消'
            },
            {
              value: 16,
              label: '废止作业票'
            }
          ]
        });

      // 页面载入时执行方法
      onMounted(() => {
        getListByPage();
        getAllDepartment()
        spWorker()
        getOpList()
        getAll()
        getAllDevice()
        getAllRisks()
        getOtherWork()
      });

        const openEdit = (row)=>{
          if(row.workType == 1){
            fireRef.value.openDialog(row,'edit')
          }
          if(row.workType == 2){
            spaceRef.value.openDialog(row,'edit')
          }
          if(row.workType == 3){
            hoistRef.value.openDialog(row,'edit')
          }
          if(row.workType == 4){
            groundRef.value.openDialog(row,'edit')
          }
          if(row.workType == 5){
            brokenRef.value.openDialog(row,'edit')
          }
          if(row.workType == 6){
            heightRef.value.openDialog(row,'edit')
          }
          if(row.workType == 7){
            powerRef.value.openDialog(row,'edit')
          }
          if(row.workType == 8){
            plateRef.value.openDialog(row,'edit')
          }
          if(row.workType == 9){
            openRef.value.openDialog(row,'edit')
          }
  name: 'myApply',
  components: {
    detailLog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/detailLog.vue')),
    reportLog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/jsaReportDialog.vue')),
    fireDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/fireDialog.vue')),
    plateDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/plateDialog.vue')),
    spaceDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceDialog.vue')),
    hoistDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistDialog.vue')),
    groundDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/groundDialog.vue')),
    brokenDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenDialog.vue')),
    heightDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/heightDialog.vue')),
    powerDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/powerDialog.vue')),
    openDialog: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/openDialog.vue'))
  },
  setup() {
    const userInfo = useUserInfo();
    const {userInfos} = storeToRefs(userInfo);
    const router = useRouter();
    const reportDialogRef = ref();
    const fireRef = ref()
    const plateRef = ref()
    const spaceRef = ref()
    const hoistRef = ref()
    const groundRef = ref()
    const brokenRef = ref()
    const heightRef = ref()
    const powerRef = ref()
    const openRef = ref()
    const state = reactive<stateType>({
      pageIndex1: 1,
      pageSize1: 10,
      totalSize1: 0,
      dialogType: null,
      activeName: '1',
      departmentList: [],
      departmentRecursionList: [],
      chosenIndex: null,
      searPara: {
        startTime: '',
        endTime: '',
        workPermitNo: '',
        workType: null,
        headUserName: '',
        secondDepId: null
      },
      casProps: {
        emitPath: false,
        value: 'depId',
        label: 'depName',
        checkStrictly: true
      },
      timeRange: [],
      applyData: [],
      workTimeList: [],
      multipleSelection: [],
      approveInfo: {
        approvalSteps: [],
        operators: []
      },
      dialogDetails: false,
      dialogStatus: false,
      addRecord: {},
      details: {},
      statusInfo: {},
      downLoadId: null,
      downLoadName: '',
      deleteArr: [],
      workType: [
        {id: 1, name: '动火作业'},
        {id: 2, name: '受限空间作业'},
        {id: 3, name: '吊装作业'},
        {id: 4, name: '动土作业'},
        {id: 5, name: '断路作业'},
        {id: 6, name: '高处作业'},
        {id: 7, name: '临时用电作业'},
        {id: 8, name: '盲板抽堵作业'},
        {id: 9, name: '打开作业'}
      ],
      lists: {
        workerList: [],
        departList: [],
        departList2: [],
        deviceList: [],
        otherWorks: [],
        spList: [],
        riskList: []
      },
      dep4List: [],
      statusList: [
        {
          value: 0,
          label: '风险研判'
        },
        {
          value: 1,
          label: '票证办理'
        },
        {
          value: 2,
          label: '气体分析'
        },
        {
          value: 3,
          label: '安全措施确认，培训交底'
        },
        {
          value: 4,
          label: '安全措施确认'
        },
        {
          value: 5,
          label: '培训交底'
        },
        {
          value: 6,
          label: '部门审批'
        },
        {
          value: 7,
          label: '作业票填报结束'
        },
        {
          value: 8,
          label: '作业气体分析不合格'
        },
        {
          value: 9,
          label: '审批未通过'
        },
        {
          value: 10,
          label: '开始'
        },
        {
          value: 11,
          label: '监护'
        },
        {
          value: 12,
          label: '结束'
        },
        {
          value: 13,
          label: '待验收'
        },
        {
          value: 14,
          label: '验收完成'
        },
        {
          value: 15,
          label: '取消'
        },
        {
          value: 16,
          label: '废止作业票'
        }
      ]
    });

      const spWorker = async ()=>{
        for(let id of ['18','19']){
          const res = await workApplyApi().getSpList({roleId: id})
          if(id == '18'){
            if (res.data.code === '200') {
              state.lists.spList.jhList = JSON.parse(JSON.stringify(res.data.data))
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          }
          if(id == '19'){
            if (res.data.code === '200') {
              state.lists.spList.sfList = JSON.parse(JSON.stringify(res.data.data))
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          }
        }
    // 页面载入时执行方法
    onMounted(() => {
      getListByPage();
      getAllDepartment()
      spWorker()
      getOpList()
      getAll()
      getAllDevice()
      getAllRisks()
      getOtherWork()
    });

    const openEdit = (row) => {
      if (row.workType == 1) {
        fireRef.value.openDialog(row, 'edit')
      }

      const getOpList = async()=>{
        const res = await workApplyApi().getOpList()
        if(res.data.code == '200'){
          if(res.data.data && res.data.data.length>0){
            state.lists.spList.opList = JSON.parse(JSON.stringify(res.data.data)).map(i=>{
              if(i.certList && i.certList.length>0){
                i.certList = i.certList.map(item=>{
                  item['realName'] = i.realName + '(' + item.certTypeName +'：'+ item.certExpiredAt + ')'
                  item['uid'] = item.certNo + ',' + item.certExpiredAt
                  return item
                })
              }
              return i
            })
          }
        }else{
          ElMessage({
            type: 'warning',
            message: res.data.msg
          })
        }
      if (row.workType == 2) {
        spaceRef.value.openDialog(row, 'edit')
      }

      // 获取用户列表
      const getAll = async ()=>{
        const res = await workApplyApi().getAllUsers()
        if (res.data.code === '200') {
          state.lists.workerList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      };

      // 获取设备列表
      const getAllDevice = async ()=>{
        const res = await workApplyApi().getAllDevices()
        if (res.data.code === '200') {
          state.lists.deviceList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      if (row.workType == 3) {
        hoistRef.value.openDialog(row, 'edit')
      }

      // 获取设备列表
      const getAllRisks = async ()=>{
        const res = await workApplyApi().getAllRiskIdentity()
        if (res.data.code === '200') {
          // state.allDevices = JSON.parse(JSON.stringify(res.data.data))
          state.lists.riskList = JSON.parse(JSON.stringify(res.data.data))
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      if (row.workType == 4) {
        groundRef.value.openDialog(row, 'edit')
      }
      if (row.workType == 5) {
        brokenRef.value.openDialog(row, 'edit')
      }
      if (row.workType == 6) {
        heightRef.value.openDialog(row, 'edit')
      }
      if (row.workType == 7) {
        powerRef.value.openDialog(row, 'edit')
      }
      if (row.workType == 8) {
        plateRef.value.openDialog(row, 'edit')
      }
      if (row.workType == 9) {
        openRef.value.openDialog(row, 'edit')
      }
    }

        const giveTime = () => {
          if (state.timeRange && state.timeRange !== null) {
            state.searPara.startTime = state.timeRange[0];
            state.searPara.endTime = state.timeRange[1]
          } else {
            state.searPara.startTime = '';
            state.searPara.endTime = '';
          }
        };

        // 刷新
        const reLoadData = async () => {
            getListByPage();
        };

        // 填写表单
        const toApply = () => {
            router.push({
                path: 'zysq'
            });
        };

        const handleClick = (tab: TabsPaneContext, event: Event) => {
        };

        // 获取部门列表
        const getAllDepartment = async () => {
            let res = await teamManageApi().getAllDepartment();
            if (res.data.code === '200') {
                state.departmentList = JSON.parse(JSON.stringify(res.data.data))
                recursion(state.departmentList);
                state.lists.departList = JSON.parse(JSON.stringify(res.data.data))
                state.lists.departList2 = JSON.parse(JSON.stringify(res.data.data))[0].children[0].children.filter(i=>i.depId == 32 || i.depId == 48 || i.depId == 49 || i.depId == 50 || i.depId == 10 || i.depId == 41 || i.depId == 46 || i.depId == 47)
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };
        const getOtherWork = async () => {
          let res = await workApplyApi().getOtherWork({pageSize: 999, pageIndex: 1, searchParams: {workPermitNo: '', workType: null}})
    const spWorker = async () => {
      for (let id of ['18', '19']) {
        const res = await workApplyApi().getSpList({roleId: id})
        if (id == '18') {
          if (res.data.code === '200') {
            state.lists.otherWorks = JSON.parse(JSON.stringify(res.data.data))
            state.lists.spList.jhList = JSON.parse(JSON.stringify(res.data.data))
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        };

        const recursion = (value: any) => {
            for (let i of value) {
                if (i.children.length !== 0) {
                    state.departmentRecursionList.push(i);
                    recursion(i.children);
                } else {
                    state.departmentRecursionList.push(i);
                }
            }
        };

        // 分页获取
        const getListByPage = async () => {
            const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: state.searPara };
            let res = await workApplyApi().getNewApplyListPage(data);
            if (res.data.code === '200') {
                state.applyData = JSON.parse(JSON.stringify(res.data.data));
                state.applyData = state.applyData.map((item) => {
                    if (item.operators == null || item.operators == []) {
                        item.operators = [];
                    } else {
                        item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname);
                    }
                    return item;
                });
                state.totalSize1 = res.data.total;
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        // 表格数据格式化
        const toNames = (row, column, cellValue, index) => {
            if (row.list == []) {
                return [];
            } else {
                const nameList = [];
                for (let i = 0; i < row.list.length; i++) {
                    for (let t = 0; t < state.workTimeList.length; t++) {
                        if (row.list[i] == state.workTimeList[t].id) {
                            nameList.push(state.workTimeList[t].name);
                        }
                    }
                }
                return nameList.join();
            }
        };

        // 关键词查询记录
        const searchRecord = async () => {
          state.pageIndex1 = 1
          getListByPage();
        };
        // 重置搜索
        const clearSearch = async () => {
          state.timeRange = []
          state.searPara = {
            startTime: '',
            endTime: '',
            workPermitNo: '',
            workType: null,
            headUserName: '',
            secondDepId: null
          };
          state.pageIndex1 = 1
          getListByPage();
        };

        // 查看进度
        const viewStatus = (row) => {
            getStatus({ workApplyId: row.workApplyId });
            state.dialogStatus = true;
        };

        // 查询进度方法
        const getStatus = async (data: any) => {
            let res = await workApplyApi().getStatus(data);
            if (res.data.code === '200') {
                state.approveInfo = JSON.parse(JSON.stringify(res.data.data));
                state.approveInfo.operators = Array.from(state.approveInfo.operators, ({ operatorUname }) => operatorUname);
            } else {
                ElMessage({
                    type: 'warning',
                    message: res.data.msg
                });
            }
        };

        const abortRecordBtn = (row:object) => {
          ElMessageBox.confirm(
              '是否作废该项申报？',
              '申报作废',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消'
              }
          )
              .then(async () => {
                let res = await workApplyApi().abolishTicket({id: row.id});
                if (res.data.code === '200') {
                  ElMessage({
                    type: 'success',
                    message: '作废成功！'
                  });
                  getListByPage();
                } else {
                  ElMessage({
                    type: 'warning',
                    message: res.data.msg
                  });
                }
              })
              .catch(() => {
                console.log('取消废票')
              })
        };

        // 正式办票
        const checkTicket = (row:object) =>{
          ElMessageBox.confirm(
              '是否进行正式办票操作？',
              '正式办票',
              {
                confirmButtonText: '确认',
                cancelButtonText: '取消'
              }
          )
              .then(async () => {
                let res = await workApplyApi().checkTicket({id: row.id});
                if (res.data.code === '200') {
                  ElMessage({
                    type: 'success',
                    message: '办票成功！'
                  });
                  getListByPage();
                } else {
                  ElMessage({
                    type: 'warning',
                    message: res.data.msg
                  });
                }
              })
              .catch(() => {
                console.log('取消办票')
              })
        }

        // 导出图表
        const downLoadBtn = (row:any) =>{
            state.downLoadId = row.workApplyId;
            state.downLoadName = row.workTypeDesc + row.workPermitNo
        if (id == '19') {
          if (res.data.code === '200') {
            state.lists.spList.sfList = JSON.parse(JSON.stringify(res.data.data))
          } else {
            ElMessage({
              type: 'warning',
              message: res.data.msg
            });
          }
        }

        // 导出方法
        const exportSheet = async () => {
            // let res = await workApplyApi().postPrinting(data);
            axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/export/excel`,{startTime: state.searPara.startTime,endTime: state.searPara.endTime,secondDepId: state.searPara.secondDepId},{headers:{'Content-Type': 'application/json','Authorization': `${Cookies.get('token')}`,'uid':`${Cookies.get('uid')}`},responseType: 'blob'}).then(res=>{
                if (res) {
                    const link = document.createElement('a')
                    let blob = new Blob([res.data],{type: 'application/excel'})
                    link.style.display = "none";
                    link.href = URL.createObjectURL(blob); // 创建URL
                    if(state.searPara.startTime !== '' && state.searPara.endTime !==''){
                      link.setAttribute("download", state.searPara.startTime + '—' + state.searPara.endTime +"作业申报记录.xlsx")
                    }else{
                      link.setAttribute("download", "作业申报记录.xlsx")
                    }
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                } else {
                    ElMessage({
                        type: 'warning',
                        message: res.data.msg
                    });
                }
            })

        };

        const handleSizeChange1 = (val: number) => {
            state.pageSize1 = val;
            getListByPage();
        };
        const handleCurrentChange1 = (val: number) => {
            state.pageIndex1 = val;
            getListByPage();
        };

        const openReport = (type: string, value: {}) => {
          reportDialogRef.value.showReportDialog(type, value);
        };

        // 查看记录
        const viewRecord = (row: any) => {
            state.dialogType = row.workType
            state.details = JSON.parse(JSON.stringify(row));
            state.dialogDetails = true;
        };

        // 折线图
        const renderMenu = async (value: string) => {
            Session.set('projectId', value);
            userInfos.value.projectId = value;
            await initBackEndControlRoutes();
        };

        return {
            View,
            Edit,
            Delete,
            Refresh,
            Plus,
            Finished,
            Download,
          reportDialogRef,
          fireRef,
          plateRef,
          spaceRef,
          hoistRef,
          groundRef,
          brokenRef,
          heightRef,
          powerRef,
          openRef,
          openEdit,
          getAllDepartment,
          checkTicket,
            giveTime,
            reLoadData,
            toApply,
            handleClick,
            toNames,
            searchRecord,
            clearSearch,
            openReport,
            viewRecord,
            viewStatus,
            abortRecordBtn,
            downLoadBtn,
            exportSheet,
            getListByPage,
            handleSizeChange1,
            handleCurrentChange1,
            ...toRefs(state)
        };
      }
    }

    const getOpList = async () => {
      const res = await workApplyApi().getOpList()
      if (res.data.code == '200') {
        if (res.data.data && res.data.data.length > 0) {
          state.lists.spList.opList = JSON.parse(JSON.stringify(res.data.data)).map(i => {
            if (i.certList && i.certList.length > 0) {
              i.certList = i.certList.map(item => {
                item['realName'] = i.realName + '(' + item.certTypeName + '：' + item.certExpiredAt + ')'
                item['uid'] = item.certNo + ',' + item.certExpiredAt
                return item
              })
            }
            return i
          })
        }
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        })
      }
    }

    // 获取用户列表
    const getAll = async () => {
      const res = await workApplyApi().getAllUsers()
      if (res.data.code === '200') {
        state.lists.workerList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    // 获取设备列表
    const getAllDevice = async () => {
      const res = await workApplyApi().getAllDevices()
      if (res.data.code === '200') {
        state.lists.deviceList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    }

    // 获取设备列表
    const getAllRisks = async () => {
      const res = await workApplyApi().getAllRiskIdentity()
      if (res.data.code === '200') {
        // state.allDevices = JSON.parse(JSON.stringify(res.data.data))
        state.lists.riskList = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    }

    const giveTime = () => {
      if (state.timeRange && state.timeRange !== null) {
        state.searPara.startTime = state.timeRange[0];
        state.searPara.endTime = state.timeRange[1]
      } else {
        state.searPara.startTime = '';
        state.searPara.endTime = '';
      }
    };

    // 刷新
    const reLoadData = async () => {
      getListByPage();
    };

    // 填写表单
    const toApply = () => {
      router.push({
        path: 'zysq'
      });
    };

    const handleClick = (tab: TabsPaneContext, event: Event) => {
    };

    // 获取部门列表
    const getAllDepartment = async () => {
      let res = await teamManageApi().getAllDepartment();
      if (res.data.code === '200') {
        state.departmentList = JSON.parse(JSON.stringify(res.data.data))
        recursion(state.departmentList);
        state.lists.departList = JSON.parse(JSON.stringify(res.data.data))
        // state.lists.departList2 = JSON.parse(JSON.stringify(res.data.data))[0].children[0].children.filter(i=>i.depId == 32 || i.depId == 48 || i.depId == 49 || i.depId == 50 || i.depId == 10 || i.depId == 41 || i.depId == 46 || i.depId == 47)
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };
    const getOtherWork = async () => {
      let res = await workApplyApi().getOtherWork({
        pageSize: 999,
        pageIndex: 1,
        searchParams: {workPermitNo: '', workType: null}
      })
      if (res.data.code === '200') {
        state.lists.otherWorks = JSON.parse(JSON.stringify(res.data.data))
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    const recursion = (value: any) => {
      for (let i of value) {
        if (i.children.length !== 0) {
          state.departmentRecursionList.push(i);
          recursion(i.children);
        } else {
          state.departmentRecursionList.push(i);
        }
      }
    };

    // 分页获取
    const getListByPage = async () => {
      const data = {pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: state.searPara};
      let res = await workApplyApi().getNewApplyListPage(data);
      if (res.data.code === '200') {
        state.applyData = JSON.parse(JSON.stringify(res.data.data));
        state.applyData = state.applyData.map((item) => {
          if (item.operators == null || item.operators == []) {
            item.operators = [];
          } else {
            item.operators = Array.from(item.operators, ({operatorUname}) => operatorUname);
          }
          return item;
        });
        state.totalSize1 = res.data.total;
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    // 表格数据格式化
    const toNames = (row, column, cellValue, index) => {
      if (row.list == []) {
        return [];
      } else {
        const nameList = [];
        for (let i = 0; i < row.list.length; i++) {
          for (let t = 0; t < state.workTimeList.length; t++) {
            if (row.list[i] == state.workTimeList[t].id) {
              nameList.push(state.workTimeList[t].name);
            }
          }
        }
        return nameList.join();
      }
    };

    // 关键词查询记录
    const searchRecord = async () => {
      state.pageIndex1 = 1
      getListByPage();
    };
    // 重置搜索
    const clearSearch = async () => {
      state.timeRange = []
      state.searPara = {
        startTime: '',
        endTime: '',
        workPermitNo: '',
        workType: null,
        headUserName: '',
        secondDepId: null
      };
      state.pageIndex1 = 1
      getListByPage();
    };

    // 查看进度
    const viewStatus = (row) => {
      getStatus({workApplyId: row.workApplyId});
      state.dialogStatus = true;
    };

    // 查询进度方法
    const getStatus = async (data: any) => {
      let res = await workApplyApi().getStatus(data);
      if (res.data.code === '200') {
        state.approveInfo = JSON.parse(JSON.stringify(res.data.data));
        state.approveInfo.operators = Array.from(state.approveInfo.operators, ({operatorUname}) => operatorUname);
      } else {
        ElMessage({
          type: 'warning',
          message: res.data.msg
        });
      }
    };

    const abortRecordBtn = (row: object) => {
      ElMessageBox.confirm(
          '是否作废该项申报？',
          '申报作废',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消'
          }
      )
          .then(async () => {
            let res = await workApplyApi().abolishTicket({id: row.id});
            if (res.data.code === '200') {
              ElMessage({
                type: 'success',
                message: '作废成功！'
              });
              getListByPage();
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          })
          .catch(() => {
            console.log('取消废票')
          })
    };

    // 正式办票
    const checkTicket = (row: object) => {
      ElMessageBox.confirm(
          '是否进行正式办票操作？',
          '正式办票',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消'
          }
      )
          .then(async () => {
            let res = await workApplyApi().checkTicket({id: row.id});
            if (res.data.code === '200') {
              ElMessage({
                type: 'success',
                message: '办票成功！'
              });
              getListByPage();
            } else {
              ElMessage({
                type: 'warning',
                message: res.data.msg
              });
            }
          })
          .catch(() => {
            console.log('取消办票')
          })
    }

    // 导出图表
    const downLoadBtn = (row: any) => {
      state.downLoadId = row.workApplyId;
      state.downLoadName = row.workTypeDesc + row.workPermitNo
    }

    // 导出方法
    const exportSheet = async () => {
      // let res = await workApplyApi().postPrinting(data);
      axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/export/excel`, {
        startTime: state.searPara.startTime,
        endTime: state.searPara.endTime,
        secondDepId: state.searPara.secondDepId
      }, {
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `${Cookies.get('token')}`,
          'uid': `${Cookies.get('uid')}`
        }, responseType: 'blob'
      }).then(res => {
        if (res) {
          const link = document.createElement('a')
          let blob = new Blob([res.data], {type: 'application/excel'})
          link.style.display = "none";
          link.href = URL.createObjectURL(blob); // 创建URL
          if (state.searPara.startTime !== '' && state.searPara.endTime !== '') {
            link.setAttribute("download", state.searPara.startTime + '—' + state.searPara.endTime + "作业申报记录.xlsx")
          } else {
            link.setAttribute("download", "作业申报记录.xlsx")
          }
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          ElMessage({
            type: 'warning',
            message: res.data.msg
          });
        }
      })

    };

    const handleSizeChange1 = (val: number) => {
      state.pageSize1 = val;
      getListByPage();
    };
    const handleCurrentChange1 = (val: number) => {
      state.pageIndex1 = val;
      getListByPage();
    };

    const openReport = (type: string, value: {}) => {
      reportDialogRef.value.showReportDialog(type, value);
    };

    // 查看记录
    const viewRecord = (row: any) => {
      state.dialogType = row.workType
      state.details = JSON.parse(JSON.stringify(row));
      state.dialogDetails = true;
    };

    // 折线图
    const renderMenu = async (value: string) => {
      Session.set('projectId', value);
      userInfos.value.projectId = value;
      await initBackEndControlRoutes();
    };

    return {
      View,
      Edit,
      Delete,
      Refresh,
      Plus,
      Finished,
      Download,
      reportDialogRef,
      fireRef,
      plateRef,
      spaceRef,
      hoistRef,
      groundRef,
      brokenRef,
      heightRef,
      powerRef,
      openRef,
      openEdit,
      getAllDepartment,
      checkTicket,
      giveTime,
      reLoadData,
      toApply,
      handleClick,
      toNames,
      searchRecord,
      clearSearch,
      openReport,
      viewRecord,
      viewStatus,
      abortRecordBtn,
      downLoadBtn,
      exportSheet,
      getListByPage,
      handleSizeChange1,
      handleCurrentChange1,
      ...toRefs(state)
    };
  }
});
</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
    height: calc(100vh - 144px);
  height: calc(100vh - 144px);
  box-sizing: border-box;
  overflow: hidden;

  .demo-tabs {
    width: 100%;
    height: 100%;

    &::v-deep(.el-tabs__content) {
      height: calc(100% - 60px);
    }

    .el-tab-pane {
      height: 100%;
    }
  }

  .homeCard {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .demo-tabs {
        width: 100%;
        height: 100%;
    background: #fff;
    border-radius: 4px;

        &::v-deep(.el-tabs__content) {
            height: calc(100% - 60px);
        }
    .main-card {
      width: 100%;
      height: 100%;

        .el-tab-pane {
            height: 100%;
        }
    }
    .homeCard {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 4px;

        .main-card {
            width: 100%;
            height: 100%;
            .cardTop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 20px;
                .mainCardBtn {
                    margin: 0;
                }
            }
            .pageBtn {
                height: 60px;
                display: flex;
                align-items: center;
                justify-content: right;

                .demo-pagination-block + .demo-pagination-block {
                    margin-top: 10px;
                }
                .demo-pagination-block .demonstration {
                    margin-bottom: 16px;
                }
            }
        }
        &:last-of-type {
            height: calc(100% - 130px);
        }
    }
    .el-row {
      .cardTop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;

        .mainCardBtn {
          margin: 0;
        }
        .grid-content {
            align-items: center;
            min-height: 36px;
      }

      .pageBtn {
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: right;

        .demo-pagination-block + .demo-pagination-block {
          margin-top: 10px;
        }

        .topInfo {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: bold;

            & > div {
                white-space: nowrap;
                margin-right: 20px;
            }
        .demo-pagination-block .demonstration {
          margin-bottom: 16px;
        }
      }
    }
    .el-card {
        border: 0;

    &:last-of-type {
      height: calc(100% - 130px);
    }
  }

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

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

    .grid-content {
      align-items: center;
      min-height: 36px;
    }

    .topInfo {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: bold;

      & > div {
        white-space: nowrap;
        margin-right: 20px;
      }
    }
  }

  .el-card {
    border: 0;
  }
}
</style>

 src/views/newSpecialWorkSystem/workTicket/zysq/components/broken.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -114,7 +114,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -566,7 +566,6 @@
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/components/fire.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -140,7 +140,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -595,7 +595,6 @@
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/components/ground.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -97,7 +97,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -552,7 +552,6 @@
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/components/height.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -120,7 +120,7 @@
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -359,7 +359,7 @@
            value: 6
          },
          {
            label: "特级高处作业",
            label: "四级高处作业",
            value: 7
          }
        ],
@@ -484,7 +484,6 @@
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/components/hoist.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -154,7 +154,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -562,7 +562,6 @@
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/components/open.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -97,7 +97,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -534,7 +534,6 @@
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/components/plate.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
@@ -207,7 +207,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -609,7 +609,6 @@
        headUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/components/power.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -157,7 +157,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple filterable clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -549,7 +549,6 @@
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/components/space.vue

@@ -5,7 +5,7 @@
      <el-row>
        <el-col :span="12">
          <el-form-item label="作业申请单位" prop="depIdList">
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList2" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
            <el-cascader style="width: 100%" v-model="form.depIdList" :options="lists.departList" :props="props1" :show-all-levels="false" placeholder="明确到具体车间" @change="findParent" clearable/>
          </el-form-item>
        </el-col>
      </el-row>
@@ -126,7 +126,7 @@
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="绑定执法仪" prop="cameraIds">
          <el-form-item label="绑定执法仪">
            <el-select v-model="form.cameraIds" multiple clearable>
              <el-option
                  v-for="item in lists.deviceList"
@@ -487,7 +487,6 @@
        analystUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        guardianUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        riskIdentification: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        cameraIds: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expStartTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        expEndTime: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        safetyMeasureUids: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],

 src/views/newSpecialWorkSystem/workTicket/zysq/index.vue

@@ -94,7 +94,6 @@
        lists: {
          workerList: [],
          departList: [],
          departList2: [],
          deviceList: [],
          otherWorks: [],
          spList: [],
@@ -234,7 +233,6 @@
                    // state.departmentList = JSON.parse(JSON.stringify(res.data.data))
          // state.departmentList2 = state.departmentList[0].children[0].children.filter(i=>i.depId == 32 || i.depId == 48 || i.depId == 49 || i.depId == 50)
          state.lists.departList = JSON.parse(JSON.stringify(res.data.data))
          state.lists.departList2 = JSON.parse(JSON.stringify(res.data.data))[0].children[0].children.filter(i=>i.depId == 32 || i.depId == 48 || i.depId == 49 || i.depId == 50 || i.depId == 10 || i.depId == 41 || i.depId == 46 || i.depId == 47)
                } else {
                    ElMessage({
                        type: 'warning',

 src/views/specialWorkSystem/flow/ruleofApp/components/approveRuleDialog.vue

@@ -314,7 +314,7 @@
            } else if (data.approveRuleForm.workType === 6) {
                data.approveRuleForm.workLevel = null;
                data.workLevelList = [
                    { id: 7, name: '特级高处作业' },
                    { id: 7, name: '四级高处作业' },
                    { id: 4, name: '一级高处作业' },
                    { id: 5, name: '二级高处作业' },
                    { id: 6, name: '三级高处作业' },

 src/views/specialWorkSystem/flow/ruleofApp/index.vue

@@ -152,7 +152,7 @@
                { id: 3, name: '特级动火作业' },
                { id: 1, name: '一级动火作业' },
                { id: 2, name: '二级动火作业' },
                { id: 7, name: '特级高处作业' },
                { id: 7, name: '四级高处作业' },
                { id: 4, name: '一级高处作业' },
                { id: 5, name: '二级高处作业' },
                { id: 6, name: '三级高处作业' },

 src/views/specialWorkSystem/foundationSet/goods/index.vue

@@ -439,7 +439,7 @@
                    value: 6
                },
                {
                    label: "特级高处作业",
                    label: "四级高处作业",
                    value: 7
                }
            ],

 src/views/specialWorkSystem/specialIndex/index.vue

@@ -123,7 +123,7 @@
          <el-col :span="4" style="display:flex;align-items: center">
            <span style="white-space: nowrap">申请事业部：</span>
            <div class="grid-content topInfo">
              <el-cascader :teleported="false" v-model="searchParams.seDepId" @change="changeDep4()" :options="depList" :props="casProps" :show-all-levels="false" size="small"/>
              <el-cascader :teleported="false" v-model="searchParams.seDepId" @change="changeDep4()" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
            </div>
          </el-col>
          <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button>
@@ -335,7 +335,6 @@
  workType1: Array<type>;
  dialogType: number | null;
  departmentList: Array<any>;
  depList: Array<any>;
  departmentRecursionList: Array<DepartmentState>;
  reviewForm: object;
  reviewRules: object;
@@ -407,7 +406,6 @@
      },
      dialogReview: false,
      departmentList: [],
      depList: [],
      departmentRecursionList: [],
      searchStatus: null,
      endTime: '',
@@ -861,10 +859,9 @@
      let res = await teamManageApi().getAllDepartment();
      if (res.data.code === '200') {
        state.departmentList = JSON.parse(JSON.stringify(res.data.data))
        state.depList = JSON.parse(JSON.stringify(res.data.data))[0].children[0].children.filter(i=>i.depId == 32 || i.depId == 48 || i.depId == 49 || i.depId == 50 || i.depId == 10 || i.depId == 41 || i.depId == 46 || i.depId == 47)
        // state.depList = JSON.parse(JSON.stringify(res.data.data))[0].children[0].children.filter(i=>i.depId == 32 || i.depId == 48 || i.depId == 49 || i.depId == 50 || i.depId == 10 || i.depId == 41 || i.depId == 46 || i.depId == 47)
        recursion(state.departmentList);
        state.lists.departList = state.departmentList
        state.lists.departList2 = state.depList
      } else {
        ElMessage({
          type: 'warning',

 src/views/system/menu/index.vue

@@ -92,17 +92,17 @@
            menuTableData: [],
            projectList: [
                { id: '1', name: '安全基础信息系统', key: 0 },
                { id: '2', name: '智能安全双重预防系统', key: 1 },
                // { id: '2', name: '智能安全双重预防系统', key: 1 },
                { id: '3', name: '智能安全特殊作业系统', key: 2 },
                { id: '4', name: '智能安全巡检系统', key: 3 },
                { id: '5', name: '智能安全风险综合预警预报平台', key: 4 },
                { id: '6', name: '应急管理系统', key: 5 },
                { id: '12', name: '监管数据融合互通系统', key: 11 },
                { id: '7', name: '安全目标责任管理系统', key: 6 },
                { id: '8', name: '安全事故管理系统', key: 7 },
                { id: '9', name: '设备综合管控系统', key: 8 },
                { id: '10', name: '安全知识图谱系统', key: 9 },
                { id: '11', name: '智能安全危险化学品全生命周期管控系统', key: 10 }
                // { id: '4', name: '智能安全巡检系统', key: 3 },
                // { id: '5', name: '智能安全风险综合预警预报平台', key: 4 },
                // { id: '6', name: '应急管理系统', key: 5 },
                // { id: '12', name: '监管数据融合互通系统', key: 11 },
                // { id: '7', name: '安全目标责任管理系统', key: 6 },
                // { id: '8', name: '安全事故管理系统', key: 7 },
                // { id: '9', name: '设备综合管控系统', key: 8 },
                // { id: '10', name: '安全知识图谱系统', key: 9 },
                // { id: '11', name: '智能安全危险化学品全生命周期管控系统', key: 10 }
            ]
        });
        // // 获取 vuex 中的路由