From c694cffc8541d921e5256d33e14e3237454de950 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期五, 26 一月 2024 09:43:31 +0800 Subject: [PATCH] 新提交 --- src/views/specialWorkSystem/specialIndex/index.vue | 2376 +++++++++++++++++++++++++++++++++++++++++----------------- 1 files changed, 1,665 insertions(+), 711 deletions(-) diff --git a/src/views/specialWorkSystem/specialIndex/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue index ff31155..9e3b2f9 100644 --- a/src/views/specialWorkSystem/specialIndex/index.vue +++ b/src/views/specialWorkSystem/specialIndex/index.vue @@ -1,149 +1,294 @@ <template> - <div class="home-container"> - <div style="height: 100%"> - <el-row class="homeCard"> - <el-col :span="5" style="display:flex;align-items: center"> - <span style="white-space: nowrap">作业类型:</span> - <div class="grid-content topInfo"> - <el-select v-model="searchWord"> - <el-option - v-for="item in workType" - :key="item.id" - :label="item.name" - :value="item.id" - /> - </el-select> - </div> - </el-col> - <el-col :span="5" style="display:flex;align-items: center"> - <span style="white-space: nowrap">作业状态:</span> - <div class="grid-content topInfo"> - <el-select v-model="searchStatus"> - <el-option - v-for="item in workStatus" - :key="item.value" - :label="item.name" - :value="item.value" - /> - </el-select> - </div> - </el-col> - <el-col :span="5" style="display:flex;align-items: center"> - <span style="white-space: nowrap">作业部门:</span> - <div class="grid-content topInfo"> - <el-cascader v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/> - </div> - </el-col> - <el-col :span="6" style="display:flex;align-items: center;"> - <span style="white-space: nowrap;margin-left: 20px">申请时间:</span> - <div class="grid-content topInfo"> - <el-date-picker - v-model="searchDate" - type="daterange" - unlink-panels - range-separator="至" - start-placeholder="开始日期" - end-placeholder="结束日期" - format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" - /> - </div> - </el-col> - <el-button type="primary" style="margin-left: 20px" @click="searchRecord">查询</el-button> - <el-button plain @click="clearSearch">重置</el-button> - </el-row> - <div class="homeCard"> - <div class="main-card"> - <el-row class="cardTop" style="justify-content: space-between"> - <el-col :span="2" class="mainCardBtn"> - <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新作业申请</el-button> - </el-col> - <el-col :span="22" style="display: flex;justify-content: end;align-items: center"> - <div class="top-info"> - <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon> - 作业编号 - <div v-if="unchecked != 0"> - <el-tooltip - class="box-item" - effect="light" - content="查看预警详情" - placement="bottom-start" - ><span>123456</span></el-tooltip> - </div> - 可燃气体浓度超过18% - ,请及时处理! - </div> - <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" /> - </el-col> - </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="作业证编号" width="180" align="center"/> - <el-table-column property="depName" label="部门" align="center"/> - <el-table-column property="applyUname" label="申请人" align="center"/> - <el-table-column property="operators" label="作业人" align="center"/> - <el-table-column property="workTypeDesc" label="作业类型" align="center"/> - <el-table-column property="workLevelDesc" label="作业等级" align="center"/> - <el-table-column property="applyTime" label="申请时间" width="180" align="center"/> - <el-table-column property="startTime" label="作业开始时间" width="180" align="center"/> - <el-table-column property="endTime" label="作业结束时间" width="180" align="center"/> - <el-table-column label="作业状态" align="center" width="180"> - <template #default="scope"> - <el-tag :type="scope.row.status==2?'success':(scope.row.status==8||scope.row.status==9)?'warning':'danger'">{{ scope.row.statusDesc }}</el-tag> - </template> - </el-table-column> - <el-table-column property="stopReason" label="中止原因" align="center"/> - <el-table-column label="安全预警" align="center" width="180"> - <template #default="scope"> - <el-tag :type="scope.row.saftyWarning==0?'success':(scope.row.saftyWarning==1||scope.row.saftyWarning==2)?'warning':'danger'">{{ scope.row.saftyWarning==0?'正常':'报警' }}</el-tag> - </template> - </el-table-column> - <el-table-column fixed="right" label="操作" align="center" width="250"> - <template #default="scope"> - <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> - <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(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 class="home-container" :class="isFull==true?'container':''" id="bigScreen"> + <div class="full"> + <el-button v-if="isFull==false" type="text" style="height: 34px" @click="toFullscreen"> + <el-icon style="vertical-align: middle"> + <FullScreen /> + </el-icon> + <span style="vertical-align: middle">全屏</span> + </el-button> + <el-button v-else type="text" style="height: 34px" @click="toFullscreen"> + <el-icon style="vertical-align: middle"> + <Close /> + </el-icon> + <span style="vertical-align: middle">退出全屏</span> + </el-button> + </div> + <div class="topChart"> + <div class="chart-item"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> + <div class="chart-tit"> + <span class="tit">八大作业各分类分布图</span> + <div class="filter-part filter-part2"> + <el-cascader :teleported="false" v-model="chartSearch1.depId" @change="changeDep1()" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> + </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> - <template #footer> + <div class="chart" :id="zyfb"></div> + <el-radio-group v-model="chartSearch1.days" size="small" @change="(value)=>changeTime1(value)"> + <el-radio :label='7' border>近7天</el-radio> + <el-radio :label='30' border>近30天</el-radio> + <el-radio :label='90' border>近90天</el-radio> + <el-radio :label='365' border>近一年</el-radio> + </el-radio-group> + </div> + <div class="chart-item"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> + <div class="chart-tit"> + <span class="tit">各事业部关联作业分析</span> + <div class="filter-part"> + <el-cascader :teleported="false" v-model="chartSearch2.depId" @change="changeDep2()" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> + <el-select v-model="chartSearch2.type" size="small" :teleported="false" @change="changeType2()"> + <el-option + v-for="item in workType1" + :key="item.id" + :label="item.name" + :value="item.id" + /> + </el-select> + </div> + </div> + <div class="chart" :id="slfx"></div> + </div> + </div> + <div class="topChart"> + <div class="chart-item"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> + <div class="chart-tit"> + <span class="tit">关联作业趋势图</span> + <div class="filter-part filter-part2"> + <el-cascader :teleported="false" v-model="chartSearch3.depId" @change="changeDep3()" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> + </div> + </div> + <div class="chart" :id="zyqs"></div> + </div> + <div class="chart-item"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> + <div class="chart-tit"> + <span class="tit">作业警报记录</span> + <div class="filter-part"> + <el-switch + v-model="chartSearch4.type" + inline-prompt + style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66" + active-text="作业人" + inactive-text="监护人" + /> + <el-select :teleported="false" v-model="chartSearch4.period" size="small"> + <el-option label="近7天" value="week"/> + <el-option label="近30天" value="month"/> + <el-option label="近90天" value="season"/> + <el-option label="近1年" value="year"/> + </el-select> + <el-select :teleported="false" v-model="chartSearch4.workType" size="small"> + <el-option + v-for="item in workType1" + :key="item.id" + :label="item.name" + :value="item.id" + /> + </el-select> + </div> + </div> + <div class="chart"> + <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" stripe border :header-cell-style="{ background: '#fafafa' }"> + <el-table-column property="name" label="姓名" align="center"/> + <el-table-column property="dep" label="所属部门" align="center"/> + <el-table-column property="warning" label="异常报警次数" align="center"/> + <el-table-column property="role" label="角色" align="center"/> + <el-table-column property="isCard" label="是否持证" align="center"> + <template #default="scope"> + <span>{{scope.row.isCard == 1?'是':'否'}}</span> + </template> + </el-table-column> + </el-table> + <el-button type="text" size="small" style="margin-top: 10px">所有记录>></el-button> + </div> + <!-- <div class="chart" :id="slfx"></div>--> + </div> + </div> + <div> + <div class="homeCard"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> + <el-row> + <el-col :span="5" style="display:flex;align-items: center"> + <span style="white-space: nowrap">作业类型:</span> + <div class="grid-content topInfo"> + <el-select :teleported="false" v-model="searchParams.workType" size="small"> + <el-option + v-for="item in workTypeList" + :key="item.id" + :label="item.name" + :value="item.id" + /> + </el-select> + </div> + </el-col> + <el-col :span="5" style="display:flex;align-items: center"> + <span style="white-space: nowrap">作业状态:</span> + <div class="grid-content topInfo"> + <el-select :teleported="false" v-model="searchParams.workAllStatus" size="small"> + <el-option + v-for="item in workStatusList" + :key="item.value" + :label="item.name" + :value="item.value" + /> + </el-select> + </div> + </el-col> + <el-col :span="5" style="display:flex;align-items: center"> + <span style="white-space: nowrap">作业部门:</span> + <div class="grid-content topInfo"> + <el-cascader :teleported="false" size="small" v-model="searchParams.workDepId" :options="departmentList" :props="casProps" :show-all-levels="false"/> + </div> + </el-col> + <el-col :span="6" style="display:flex;align-items: center;"> + <span style="white-space: nowrap;margin-left: 20px">申请时间:</span> + <div class="grid-content topInfo"> + <el-date-picker + v-model="searchDate" + size="small" + :teleported="false" + type="daterange" + unlink-panels + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期" + format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" + /> + </div> + </el-col> + <el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button> + <el-button plain @click="clearSearch" size="small">重置</el-button> + </el-row> + <div class="main-card"> +<!-- <el-row class="cardTop" style="justify-content: space-between">--> +<!-- <el-col :span="2" class="mainCardBtn">--> +<!-- <el-button type="primary" :icon="Plus" size="default" @click="toApply()">新作业申请</el-button>--> +<!-- </el-col>--> +<!-- <el-col :span="22" style="display: flex;justify-content: end;align-items: center">--> +<!-- <div class="top-info">--> +<!-- <el-icon :size="18" color="#F3001E" style="margin-right: 4px"><BellFilled /></el-icon>--> +<!-- 作业编号--> +<!-- <div v-if="unchecked != 0">--> +<!-- <el-tooltip--> +<!-- class="box-item"--> +<!-- effect="light"--> +<!-- content="查看预警详情"--> +<!-- placement="bottom-start"--> +<!-- ><span>123456</span></el-tooltip>--> +<!-- </div>--> +<!-- 可燃气体浓度超过18%--> +<!-- ,请及时处理!--> +<!-- </div>--> +<!-- <el-button type="primary" :icon="Refresh" size="default" @click="reLoadData()" />--> +<!-- </el-col>--> +<!-- </el-row>--> + <el-table ref="multipleTableRef" stripe border :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }"> + <el-table-column property="workPermitNo" label="作业证编号" align="center"/> + <el-table-column property="workDepName" label="作业单位" align="center"/> + <el-table-column property="applyUname" label="申请人" align="center"/> + <el-table-column property="applyDepName" label="申请单位" align="center"/> + <el-table-column property="applyTime" label="申请时间" align="center"/> + <el-table-column property="startUname" label="开始人" align="center"> + <template #default="scope"> + <span>{{scope.row.startUname?scope.row.startUname:'--'}}</span> + </template> + </el-table-column> + <el-table-column property="finishUname" label="结束人" align="center"> + <template #default="scope"> + <span>{{scope.row.finishUname?scope.row.finishUname:'--'}}</span> + </template> + </el-table-column> + <el-table-column property="workStartTime" label="作业开始时间" align="center"> + <template #default="scope"> + <span>{{scope.row.workStartTime?scope.row.workStartTime:'--'}}</span> + </template> + </el-table-column> + <el-table-column property="workFinishTime" label="作业结束时间" align="center"> + <template #default="scope"> + <span>{{scope.row.workFinishTime?scope.row.workFinishTime:'--'}}</span> + </template> + </el-table-column> + <el-table-column property="acceptUname" label="验收人" align="center"> + <template #default="scope"> + <span>{{scope.row.acceptUname?scope.row.acceptUname:'--'}}</span> + </template> + </el-table-column> + <el-table-column property="workAcceptContent" label="验收内容" align="center"> + <template #default="scope"> + <span>{{scope.row.workAcceptContent?scope.row.workAcceptContent:'--'}}</span> + </template> + </el-table-column> + <el-table-column property="workAcceptTime" label="验收时间" align="center"> + <template #default="scope"> + <span>{{scope.row.workAcceptTime?scope.row.workAcceptTime:'--'}}</span> + </template> + </el-table-column> + <el-table-column property="workTypeDesc" label="作业类型" align="center"/> + <el-table-column property="workLevelDesc" label="作业等级" align="center"/> + <el-table-column property="abortReason" label="中止原因" align="center"> + <template #default="scope"> + <span>{{scope.row.abortReason?scope.row.abortReason:'--'}}</span> + </template> + </el-table-column> + <el-table-column property="workAllStatusDesc" label="作业状态" align="center"/> + <el-table-column fixed="right" label="操作" align="center" width="250"> + <template #default="scope"> + <el-button link + v-if="scope.row.workAllStatus == -1|| scope.row.workAllStatus == 1 || scope.row.workAllStatus == 3 || scope.row.workAllStatus == 7" + type="primary" size="small" :icon="VideoPlay" @click="openVideo(scope.row)">查看监控视频</el-button> + <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row.workApplyId)">查看记录</el-button> + <el-button link type="primary" size="small" :icon="View" @click="viewTicket(scope.row)">查看作业票</el-button> + <el-button link type="primary" size="small" :icon="Download" @click="downLoadTicket(scope.row)">导出作业票</el-button> +<!-- <el-button link type="primary" size="small" :icon="FolderChecked" @click="handleReview(scope.row)">验收</el-button>--> + </template> + </el-table-column> + </el-table> + <div class="pageBtn"> + <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> + </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="dialogReview" title="填报验收意见" center> - <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="120px"> - <el-form-item label="填报验收意见:" prop="advice"> - <el-input - v-model="reviewForm.advice" - :autosize="{ minRows: 4, maxRows: 10 }" - type="textarea" - placeholder="请填写验收意见" - /> - </el-form-item> - </el-form> - <template #footer> - <span class="dialog-footer"> - <el-button type="primary" @click="submitReview(reviewFormRef)">提交验收</el-button> - </span> - </template> - </el-dialog> - </div> + </template> + </el-dialog> +<!-- <el-dialog v-model="dialogReview" title="填报验收意见" center>--> +<!-- <el-form ref="reviewFormRef" :model="reviewForm" :rules="reviewRules" label-width="120px">--> +<!-- <el-form-item label="填报验收意见:" prop="advice">--> +<!-- <el-input--> +<!-- v-model="reviewForm.advice"--> +<!-- :autosize="{ minRows: 4, maxRows: 10 }"--> +<!-- type="textarea"--> +<!-- placeholder="请填写验收意见"--> +<!-- />--> +<!-- </el-form-item>--> +<!-- </el-form>--> +<!-- <template #footer>--> +<!-- <span class="dialog-footer">--> +<!-- <el-button type="primary" @click="submitReview(reviewFormRef)">提交验收</el-button>--> +<!-- </span>--> +<!-- </template>--> +<!-- </el-dialog>--> + <video-detail ref="videoRef"></video-detail> + <Work-record ref="recordRef"></Work-record> + </div> </template> <script lang="ts"> @@ -153,51 +298,69 @@ import { useUserInfo } from '/@/stores/userInfo'; import { Session } from '/@/utils/storage'; import { useRouter } from 'vue-router'; -import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked } from '@element-plus/icons-vue'; +import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked, VideoPlay } from '@element-plus/icons-vue'; import { ElTable, ElMessage } from 'element-plus'; -import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; -import type { TabsPaneContext } from 'element-plus'; +import { specialIndexApi } from '/@/api/specialWorkSystem/specialIndex'; import type { FormInstance, FormRules } from 'element-plus' import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage"; +import { workApplyApi } from '/@/api/specialWorkSystem/workApply' import Cookies from 'js-cookie'; import axios from 'axios'; +import * as echarts from "echarts"; +import screenfull from "screenfull"; +import VideoDetail from "/@/views/specialWorkSystem/specialIndex/components/videoDetail.vue"; +import WorkRecord from "/@/views/specialWorkSystem/specialIndex/components/workRecord.vue"; +import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3' +import {productionDeviceApi} from "/@/api/doublePreventSystem/productionDevice"; // 定义接口来定义对象的类型 interface stateType { - applyData: Array<string>; - workTimeList: Array<string>; - multipleSelection: Array<any>; - casProps: {}; - approveInfo: Object; - dialogDetails: boolean; - dialogReview: boolean; - pageIndex1: number; - pageSize1: number; - chosenIndex: null | number; - searchWord: number | null; - searchStatus: number | null; - searchDep: number | null; - searchDate: Array<any>, - totalSize1: number; - details: {}; - workType: Array<type>; - dialogType: number | null; - departmentList: Array<any>; - departmentRecursionList: Array<DepartmentState>; - workStatus: Array<status>; - reviewForm: object + workData: Array<any>; + workTimeList: Array<string>; + multipleSelection: Array<any>; + casProps: {}; + approveInfo: Object; + dialogDetails: boolean; + dialogReview: boolean; + pageIndex: number; + pageSize: number; + searchParams: {}; + workStatusList: Array<status>; + workTypeList: Array<type>; + searchStatus: number | null; + chartSearch1: object; + chartSearch2: object; + chartSearch3: object; + chartSearch4: object; + searchDep2: number | null; + searchDep: number | null; + searchDate: Array<any>, + totalSize: number; + details: {}; + workType1: Array<type>; + dialogType: number | null; + departmentList: Array<any>; + departmentRecursionList: Array<DepartmentState>; + reviewForm: object; + reviewRules: object; + warningData: Array<any>; + isFull:boolean; + themeColor:string; + endTime:string + pieData: Array<status> + squareData: Array<status> } interface type { - id: number; - name: string; + id: number | null; + name: string; } interface status { name: string value: number } interface DepartmentState { - depId: number; - depName: string; + depId: number; + depName: string; } interface User { name: string; @@ -205,599 +368,1390 @@ info: string; } export default defineComponent({ - name: 'specialIndex', - components: { - fire: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/fireLog.vue')), - space: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/spaceLog.vue')), - hoist: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/hoistLog.vue')), - ground: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/groundLog.vue')), - broken: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/brokenLog.vue')), - height: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/heightLog.vue')), - power: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/powerLog.vue')), - plate: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/wdsq/components/plateLog.vue')) - }, - setup() { - const userInfo = useUserInfo(); - const { userInfos } = storeToRefs(userInfo); - const router = useRouter(); - const reviewFormRef = ref<FormInstance>() - const state = reactive<stateType>({ - pageIndex1: 1, - pageSize1: 10, - totalSize1: 0, - dialogType: null, - dialogReview: false, - departmentList: [], - departmentRecursionList: [], - chosenIndex: null, - searchWord: null, - searchStatus: null, - searchDep: null, - searchDate: [], - applyData: [], - workTimeList: [], - multipleSelection: [], - approveInfo: { - approvalSteps: [], - operators: [] - }, - casProps: { - expandTrigger: 'hover', - emitPath: false, - value: 'depId', - label: 'depName', - checkStrictly: true - }, - dialogDetails: false, - details: {}, - 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: '盲板抽堵作业' } - ], - workStatus: [ - { - name: '作业进行中', - value: 0 - }, - { - name: '作业终止', - value: 1 - }, - { - name: '作业结束待验收', - value: 2 - }, - { - name: '作业完成', - value: 3 - } - ], - reviewForm: { - advice: '' - } - }); - - const reviewRules = reactive<FormRules>({ - advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }] - }) - // 刷新 - const reLoadData = async () => { - getListByPage(); - }; - - // 填写表单 - const toApply = () => { - router.push({ - path: 'zysq' - }); - }; - - // 获取部门列表 - 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); - } else { - ElMessage({ - type: 'warning', - message: res.data.msg - }); - } - }; - - // 分页获取列表 - const getListByPage = async () => { - const dateRange = JSON.parse(JSON.stringify(state.searchDate)) - if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')} - const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} }; - let res = await workApplyApi().getApplyList(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 () => { - if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) { - ElMessage({ - type: 'warning', - message: '请输入查询关键词' - }); - } else { - getListByPage(); - } - }; - // 重置搜索 - const clearSearch = async () => { - state.searchWord = null; - state.searchDep = null; - state.searchDate = [] - getListByPage(); - }; - - 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)); - if(state.details.workDetail.otherSpecialWork == '' || !state.details.workDetail.otherSpecialWork){ - state.details.workDetail.otherSpecialWork=[] - } - else { - const a = state.details.workDetail.otherSpecialWork - state.details.workDetail.otherSpecialWork = a.split(',').map((item) => { - return state.workType.find((i: { id: number }) => i.id === Number(item))?.name; - }); - } - if(state.details.workDetail.involvedDepIds == '' || !state.details.workDetail.involvedDepIds){ - state.details.workDetail.involvedDepIds=[] - } - else { - const a = state.details.workDetail.involvedDepIds - state.details.workDetail.involvedDepIds = a.split(',').map((item) => { - return state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(item))?.depName; - }); - } - if(state.details.workDetail.csDepId){ - state.details.workDetail.csDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.csDepId))?.depName; - } - if(state.details.workDetail.operationDepId){ - state.details.workDetail.operationDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName; - } - if(state.details.workDetail.gbPath){ - state.details.workDetail.gbPath = state.details.workDetail.gbPath.split(',') - } - if(state.details.workDetail.bcPath){ - state.details.workDetail.bcPath = state.details.workDetail.bcPath.split(',') - } - if(state.details.workDetail.bpLocationMapPath){ - state.details.workDetail.bpLocationMapPath = state.details.workDetail.bpLocationMapPath.split(',') - } - state.dialogDetails = true; - }; - - const handleReview = (row)=>{ - state.dialogReview = true + name: 'specialIndex', + components: { + VideoDetail, + WorkRecord, + // fire: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/fireLog.vue')), + // space: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/spaceLog.vue')), + // hoist: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/hoistLog.vue')), + // ground: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/groundLog.vue')), + // broken: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/brokenLog.vue')), + // height: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/heightLog.vue')), + // power: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/powerLog.vue')), + // plate: defineAsyncComponent(() => import('/@/views/newSpecialWorkSystem/workTicket/wdsq/components/plateLog.vue')) + }, + setup() { + const userInfo = useUserInfo() + const { userInfos } = storeToRefs(userInfo) + const router = useRouter() + const reviewFormRef = ref<FormInstance>() + const zyfb = ref("eChartZyfb" + Date.now() + Math.random()) + const slfx = ref("eChartSlfx" + Date.now() + Math.random()) + const zyqs = ref("eChartZyqs" + Date.now() + Math.random()) + const videoRef = ref() + const recordRef = ref() + const state = reactive<stateType>({ + pageIndex: 1, + pageSize: 10, + totalSize: 0, + dialogType: null, + searchParams: { + workType: null, + workDepId: null, + workPermitNo: '', + startTime: '', + endTime: '', + workAllStatus: null + }, + dialogReview: false, + departmentList: [], + departmentRecursionList: [], + searchStatus: null, + endTime: '', + chartSearch1: { + depId: 1, + startTime: '', + days: 30 + }, + chartSearch2: { + depId: 1, + startTime: '', + type: null + }, + chartSearch3: { + depId: 1 + }, + chartSearch4: { + searchDep: null, + startTime: '', + days: 30 + }, + searchDep2: null, + searchDep: null, + searchDate: [], + workData: [], + isFull: false, + themeColor: '#333', + workTimeList: [], + multipleSelection: [], + approveInfo: { + approvalSteps: [], + operators: [] + }, + casProps: { + expandTrigger: 'hover', + emitPath: false, + value: 'depId', + label: 'depName', + checkStrictly: true + }, + dialogDetails: false, + details: {}, + workType1: [ + { id: null, name: '所有作业' }, + { id: 1, name: '动火作业' }, + { id: 2, name: '受限空间作业' }, + { id: 3, name: '吊装作业' }, + { id: 4, name: '动土作业' }, + { id: 5, name: '断路作业' }, + { id: 6, name: '高处作业' }, + { id: 7, name: '临时用电作业' }, + { id: 8, name: '盲板抽堵作业' } + ], + workTypeList: [ + { id: 1, name: '动火作业' }, + { id: 2, name: '受限空间作业' }, + { id: 3, name: '吊装作业' }, + { id: 4, name: '动土作业' }, + { id: 5, name: '断路作业' }, + { id: 6, name: '高处作业' }, + { id: 7, name: '临时用电作业' }, + { id: 8, name: '盲板抽堵作业' } + ], + workStatusList: [ + { + name: '未开始', + value: -1 + }, + { + name: '开始', + value: 1 + }, + { + name: '结束', + value: 2 } + ], + pieData: [], + squareData: [], + warningData: [ + { + name: '黄公子', + dep: '有机事业部', + warning: 69, + role: '作业人', + isCard: 1 + }, + { + name: '李飞飞', + dep: '有机事业部', + warning: 51, + role: '监护人', + isCard: 0 + }, + { + name: '黄公子', + dep: '有机事业部', + warning: 69, + role: '作业人', + isCard: 1 + } + ], + reviewForm: { + advice: '' + }, + reviewRules:{ + advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }] + } + }); + // 页面载入时执行方法 + onMounted(() => { + initTime() + getMydepList() + getAllDepartment(); + getTypePie() + getWorkDep() + getDepMonth() + initZyfb() + initSlfx() + initZyqs() + }); + const initTime =()=>{ + state.chartSearch1.startTime = getPeriod(30) + state.chartSearch2.startTime = getPeriod(30) + state.endTime = formatDate(new Date()) + } + const getPeriod =(num)=> { + const currentDate = new Date(); + const startTime = new Date(); + startTime.setDate(currentDate.getDate() - num); + return formatDate(startTime) + } + const formatDate =(date)=> { + const year = date.getFullYear().toString(); + const month = ('0' + (date.getMonth() + 1)).slice(-2); + const day = ('0' + date.getDate()).slice(-2); + return `${year}-${month}-${day} 00:00:00`; + } + const changeTime1=(value:number)=>{ + state.chartSearch1.startTime = getPeriod(value) + console.log(state.chartSearch1.startTime,state.endTime,'结束段') + getTypePie() + } + const changeDep1=()=>{ + getTypePie() + } - const submitReview = async (formEl: FormInstance | undefined) => { - if (!formEl) return - await formEl.validate((valid, fields) => { - if (valid) { - console.log('submit!') - } else { - console.log('error submit!', fields) + const changeDep2=()=>{ + getWorkDep() + } + const changeType2=()=>{ + getWorkDep() + } + const changeDep3=()=>{ + getDepMonth() + } + const toFullscreen =()=>{ + const element = document.getElementById('bigScreen') + if (!screenfull.isEnabled) { + ElMessage.warning('暂不不支持全屏'); + return false; + } + screenfull.toggle(element); + state.isFull = !state.isFull + if(state.isFull == true){ + state.themeColor = '#11FEEE' + }else{ + state.themeColor = '#333' + } + initZyfb() + initSlfx() + initZyqs() + getMydepList() + } + const getTypePie = async ()=>{ + const data = { + startTime: state.chartSearch1.startTime, + endTime:state.endTime, + depId:state.chartSearch1.depId + } + let res = await specialIndexApi().analyseType(data); + if (res.data.code === '200') { + // console.log('饼图数据>>>', res.data.data) + state.pieData = JSON.parse(JSON.stringify(res.data.data)) + // initZyfb() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + const getWorkDep = async ()=>{ + const data = { + startTime: state.chartSearch2.startTime, + endTime: state.endTime, + depId:state.chartSearch2.depId, + type: state.chartSearch2.type + } + let res = await specialIndexApi().analyseAllWork(data); + if (res.data.code === '200') { + // console.log('条形图数据>>>', res.data.data) + state.squareData = JSON.parse(JSON.stringify(res.data.data)) + // initSlfx() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + const getDepMonth = async ()=>{ + let res = await specialIndexApi().analyseDepMonth(state.chartSearch3.depId); + if (res.data.code === '200') { + // console.log('折线图数据>>>', res.data.data) + state.squareData = JSON.parse(JSON.stringify(res.data.data)) + // initSlfx() + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + const getMydepList = async()=>{ + const dateRange = JSON.parse(JSON.stringify(state.searchDate)) + if(dateRange[1]){ + dateRange[1] = dateRange[1].replace('00:00:00','23:59:59') + state.searchParams.startTime = dateRange[0] + state.searchParams.endTime = dateRange[1] + }else{ + state.searchParams.startTime = '' + state.searchParams.endTime = '' + } + let res = await specialIndexApi().getMydepList({pageIndex: state.pageIndex,pageSize: state.pageSize,searchParams: state.searchParams}) + if (res.data.code === '200') { + state.workData = JSON.parse(JSON.stringify(res.data.data)) + state.totalSize = res.data.total + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + type EChartsOption = echarts.EChartsOption + const initZyfb =()=>{ + let dom = document.getElementById(zyfb.value); + let myChart = echarts.init(dom); + let option: EChartsOption; + option = { + tooltip: { + trigger: 'item' + }, + legend: { + orient: 'vertical', + left: 'left', + top: 'center', + textStyle: { + // 设置默认的文字颜色 + color: state.themeColor, + // fontSize: 12 + }, + itemStyle: { + borderWidth: 0 // 设置图例边框宽度为0 } - }) + }, + series: [ + { + name: '', + type: 'pie', + radius: ['40%', '70%'], + avoidLabelOverlap: false, + itemStyle: { + borderRadius: 1, + borderColor: '#fff', + borderWidth: 1 + }, + label: { + show: true, + position: 'outside', + overflow: 'truncate', + borderWidth: 0, + color: state.themeColor + }, + labelLine: { + show: true, // 显示指示线 + lineStyle: { + color: '#ccc', + width: 1, + type: 'solid' + } + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + }, + }, + data: [ + { value: 0, name: '动火作业' }, + { value: 0, name: '受限空间作业' }, + { value: 0, name: '吊装作业' }, + { value: 0, name: '动土作业' }, + { value: 0, name: '断路作业' }, + { value: 0, name: '高处作业' }, + { value: 0, name: '临时用电作业' }, + { value: 0, name: '盲板抽堵作业' } + ] + } + ] } - // 折线图 - const renderMenu = async (value: string) => { - Session.set('projectId', value); - userInfos.value.projectId = value; - await initBackEndControlRoutes(); - }; - - // 页面载入时执行方法 - onMounted(() => { - getListByPage(); - getAllDepartment() - }); - - return { - View, - Edit, - Delete, - Refresh, - Plus, - Finished, - Download, - FolderChecked, - reviewFormRef, - reviewRules, - handleReview, - submitReview, - reLoadData, - toApply, - toNames, - searchRecord, - clearSearch, - viewRecord, - getListByPage, - handleSizeChange1, - handleCurrentChange1, - ...toRefs(state) - }; + option && myChart.setOption(option); + window.addEventListener("resize",function (){ + myChart.resize(); + }); } + const initSlfx =()=>{ + let dom = document.getElementById(slfx.value); + let myChart = echarts.init(dom); + let option: EChartsOption; + option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + data: ['部门一','部门二','部门三'], + axisTick: { + alignWithLabel: true + }, + axisLabel: { + color: state.themeColor + } + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'Direct', + type: 'bar', + barWidth: '60%', + data: [0,0,0], + } + ] + } + + option && myChart.setOption(option); + window.addEventListener("resize",function (){ + myChart.resize(); + }); + } + const initZyqs =()=>{ + let dom = document.getElementById(zyqs.value); + let myChart = echarts.init(dom); + let option: EChartsOption; + option = { + xAxis: { + type: 'category', + data: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月'], + axisLabel: { + color: state.themeColor + } + }, + yAxis: { + splitLine: { + show: true, + lineStyle: { + color: '#fafafa', + width: 1, + type: 'dashed' + } + }, + axisLabel:{ + color: '#ccc' + } + }, + grid: { + top: '8%', + bottom: '8%' + }, + series: [ + { + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + type: 'line', + label:{ + show: true + } + } + ] + } + + option && myChart.setOption(option); + window.addEventListener("resize",function (){ + myChart.resize(); + }); + } + // 刷新 + const reLoadData = async () => { + getMydepList() + }; + + // 填写表单 + const toApply = () => { + router.push({ + path: 'zysq' + }); + }; + + // 获取部门列表 + 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); + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + }; + + // 分页获取列表 + // const getListByPage = async () => { + // const dateRange = JSON.parse(JSON.stringify(state.searchDate)) + // if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')} + // const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} }; + // let res = await workApplyApi().getApplyList(data); + // if (res.data.code === '200') { + // state.workData = JSON.parse(JSON.stringify(res.data.data)); + // state.workData = state.workData.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 searchRecord = async () => { + getMydepList() + }; + // 重置搜索 + const clearSearch = async () => { + state.searchParams = { + workType:null, + workDepId:null, + workPermitNo: '', + startTime: '', + endTime: '', + workAllStatus: null + } + state.searchDate = [] + getMydepList() + }; + + const handleSizeChange = (val: number) => { + state.pageSize = val; + getMydepList() + }; + const handleCurrentChange = (val: number) => { + state.pageIndex = val; + getMydepList() + }; + + // 查看记录 + // const viewDetail = (row: any) => { + // state.dialogType = row.workType + // state.details = JSON.parse(JSON.stringify(row)); + // if(state.details.workDetail.otherSpecialWork == '' || !state.details.workDetail.otherSpecialWork){ + // state.details.workDetail.otherSpecialWork=[] + // } + // else { + // const a = state.details.workDetail.otherSpecialWork + // state.details.workDetail.otherSpecialWork = a.split(',').map((item) => { + // return state.workTypeList.find((i: { id: number }) => i.id === Number(item))?.name; + // }); + // } + // if(state.details.workDetail.involvedDepIds == '' || !state.details.workDetail.involvedDepIds){ + // state.details.workDetail.involvedDepIds=[] + // } + // else { + // const a = state.details.workDetail.involvedDepIds + // state.details.workDetail.involvedDepIds = a.split(',').map((item) => { + // return state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(item))?.depName; + // }); + // } + // if(state.details.workDetail.csDepId){ + // state.details.workDetail.csDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.csDepId))?.depName; + // } + // if(state.details.workDetail.operationDepId){ + // state.details.workDetail.operationDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName; + // } + // if(state.details.workDetail.gbPath){ + // state.details.workDetail.gbPath = state.details.workDetail.gbPath.split(',') + // } + // if(state.details.workDetail.bcPath){ + // state.details.workDetail.bcPath = state.details.workDetail.bcPath.split(',') + // } + // if(state.details.workDetail.bpLocationMapPath){ + // state.details.workDetail.bpLocationMapPath = state.details.workDetail.bpLocationMapPath.split(',') + // } + // state.dialogDetails = true; + // }; + + // const handleReview = (row: object)=>{ + // state.dialogReview = true + // } + const openVideo = (row:object)=>{ + videoRef.value.openDialog(row) + } + + const viewRecord = (id: string | null)=>{ + recordRef.value.openDialog(id) + } + + const viewTicket = async(row)=>{ + let res = await workApplyApi().viewTicket({id:row.workApplyId}) + if(res.data.code == 200){ + console.log(res.data,666) + } + axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/down/load/pdf`,{id: row.workApplyId},{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.workPermitNo + "(" + row.workTypeDesc +")作业证.pdf"); + window.open(link) + } else { + ElMessage({ + type: 'warning', + message: '预览失败' + }); + } + }) + } + + // 导出方法 + const downLoadTicket = async (row) => { + // let res = await workApplyApi().postPrinting(data); + axios.post(import.meta.env.VITE_API_URL + `/specialwork9step/work/down/load/pdf`,{id: row.workApplyId},{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.workPermitNo + "(" + row.workTypeDesc +")作业证.pdf"); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } else { + ElMessage({ + type: 'warning', + message: '导出失败' + }); + } + }) + } + + // const submitReview = async (formEl: FormInstance | undefined) => { + // if (!formEl) return + // await formEl.validate(async(valid, fields) => { + // if (valid) { + // let res = await workApplyApi().acceptWork(state.reviewForm); + // if (res.data.code === '200') { + // ElMessage({ + // type: 'success', + // message: '作业验收成功', + // duration: 2000 + // }); + // state.dialogReview = false; + // await getMydepList() + // } else { + // ElMessage({ + // type: 'warning', + // message: res.data.msg + // }); + // } + // } else { + // console.log('error submit!', fields) + // } + // }) + // } + + // 折线图 + const renderMenu = async (value: string) => { + Session.set('projectId', value); + userInfos.value.projectId = value; + await initBackEndControlRoutes(); + }; + + return { + View, + Edit, + Delete, + Refresh, + Plus, + Finished, + Download, + FolderChecked, + VideoPlay, + reviewFormRef, + videoRef, + recordRef, + zyfb, + slfx, + zyqs, + changeTime1, + changeDep1, + changeDep2, + changeType2, + changeDep3, + toFullscreen, + // handleReview, + openVideo, + // submitReview, + reLoadData, + toApply, + searchRecord, + clearSearch, + // viewDetail, + viewRecord, + viewTicket, + downLoadTicket, + // getListByPage, + handleSizeChange, + handleCurrentChange, + ...toRefs(state) + }; + } }); </script> <style scoped lang="scss"> $homeNavLengh: 8; .home-container { - height: calc(100vh - 144px); - box-sizing: border-box; - overflow: hidden; - .demo-tabs { - width: 100%; - height: 100%; + height: calc(100vh - 144px); + position: relative; + box-sizing: border-box; + overflow: hidden; + overflow-y: scroll; + scrollbar-width: none; /* firefox */ + -ms-overflow-style: none; /* IE 10+ */ - &::v-deep(.el-tabs__content) { - height: calc(100% - 60px); - } + &::-webkit-scrollbar { + display: none; /* Chrome Safari */ + } + .full{ + position:fixed; + height: 34px; + line-height: 34px; + top: 80px; + right: 20px; + z-index: 9; + } - .el-tab-pane { - height: 100%; - } + .demo-tabs { + width: 100%; + height: 100%; + + &::v-deep(.el-tabs__content) { + height: calc(100% - 60px); } - .homeCard { + + .el-tab-pane { + height: 100%; + } + } + .topChart{ + width: 100%; + display: flex; + justify-content: space-between; + align-items: flex-start; + margin-bottom: 20px; + height: 40%; + &:last-of-type{ + margin-bottom: 0; + } + + .chart-item{ + width: calc(50% - 10px); + height: 100%; + margin-right: 10px; + position: relative; + background: #fff; + padding: 20px; + + &:last-of-type{ + margin-right: 0; + } + + .chart-tit{ width: 100%; - padding: 20px; - box-sizing: border-box; - background: #fff; - border-radius: 4px; + height: 15%; + display: flex; + align-items: flex-start; + justify-content: space-between; + .tit{ + font-size: 1.33rem; + font-weight: bolder; + white-space: nowrap; + } + .filter-part{ + display: flex; + align-items: center; + justify-content: right; + :deep(.el-cascader){ + width: 35% !important; + } + .el-select{ + width: 35% !important; + margin-left: 10px; + } + .el-switch{ + width: 25% !important; - .main-card { - width: 100%; - height: 100%; - .cardTop { - display: flex; - align-items: center; - justify-content: space-between; - margin-bottom: 20px; - .mainCardBtn { - margin: 0; + :deep(.el-switch__core){ + width: 100% !important; + } + } + } + .filter-part2{ + :deep(.el-cascader){ + width: 100% !important; + } + } + + } + .chart{ + width: 100%; + height: 85%; + .el-table{ + height: 90% !important; + :deep(.el-table__inner-wrapper){ + height: 100% !important; + .el-table__header-wrapper { + height: 20% !important; + .el-table__header{ + height: 100% !important; + th{ + height: 100% !important; + padding: 0 0 !important; + .cell{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } - - .top-info { - display: flex; - font-size: 16px; - font-weight: bolder; - align-items: center; - padding: 6px 10px; - background: #ffeb87; - border-radius: 4px; - border: 1px solid #ffae00; - margin-right: 20px; - - & > div { - vertical-align: middle; - white-space: nowrap; - span { - font-size: 22px; - color: #f3001e; - margin: 0 2px; - cursor: pointer; - - &:hover{ - text-decoration: underline; + } + } + .el-table__body-wrapper { + height: 80% !important; + .el-scrollbar__view{ + height: 100% !important; + .el-table__body{ + height: 100% !important; + tbody{ + height: 100% !important; + .el-table__row{ + height: 25% !important; + td{ + height: 25% !important; + padding: 0 0 !important; + .left-info{ + display: flex; + align-items: center; + } + .cell{ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .el-button{ + padding: 0 !important; + } + } } } } } } - .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% - 100px); - } - } - .stepItem { + } + .el-radio-group{ + width: 20%; display: flex; + flex-flow: column nowrap; 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; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-30%); + + .el-radio{ + width: 100%; + margin-bottom: 4px; } - &:first-of-type { - margin-bottom: 0; - border-left: none; + } + :deep(.active-ring-info){ + .active-ring-name{ + font-size: 1.5rem !important; + text-align: center; } - .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 { - font-weight: bolder; - color: #409eff; - } - - &: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 { + } + .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; - &:last-child { - margin-bottom: 0; - } - .grid-content { - align-items: center; - min-height: 36px; + .mainCardBtn { + margin: 0; } - .topInfo { + .top-info { + display: flex; + font-size: 14px; + font-weight: bolder; + align-items: center; + padding: 4px 10px; + background: #ffeb87; + border-radius: 2px; + border: 1px solid #ffae00; + margin-right: 20px; + + & > div { + vertical-align: middle; + white-space: nowrap; + span { + font-size: 18px; + color: #f3001e; + margin: 0 2px; + cursor: pointer; + + &:hover{ + text-decoration: underline; + } + } + } + } + } + .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; + } + } + } + } + .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 { + font-weight: bolder; + color: #409eff; + } + + &: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; - font-size: 16px; - font-weight: bold; + justify-content: space-between; + padding: 10px 0; + border-bottom: 1px solid #c6e2ff; - & > div { - white-space: nowrap; - margin-right: 20px; + & > 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 { + display: flex; + align-items: center; + margin-bottom: 10px; + &:last-child { + margin-bottom: 0; + } + .grid-content { + align-items: center; + min-height: 36px; + } + + .topInfo { + width: 100%; + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + + & > div { + white-space: nowrap; + margin-right: 20px; + } + } + } +} + +.container{ + padding: 20px; + background: url('../../../assets/spwbg.png') no-repeat center; + background-size: 100% 100%; + + .full{ + position:fixed; + background: rgba(0,0,0,.2); + border: 1px solid rgba(54, 252, 252, .6); + border-radius: 17px 1px 1px 17px; + box-shadow: 3px 3px 12px rgba(0,0,0,.2); + height: 32px; + line-height: 30px; + top: 10px; + right: 2px; + display: flex; + justify-content: center; + backdrop-filter: blur(2px); + z-index: 99999; + } + .topChart{ + .chart-item{ + border-radius: 4px; + background: rgba(0, 61, 121, 0.2); + backdrop-filter: blur(5px); + position: relative; + z-index: 2; + &:last-of-type{ + position: relative; + z-index: 1; + } + + .item-bg{ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + .el-radio.is-bordered.is-checked{ + border-color: #11FEEE !important; + :deep(.el-radio__inner){ + border-color: #11FEEE !important; + background: #11FEEE !important; + } + :deep(.el-radio__label){ + color: #11FEEE !important + } + } + .chart-tit{ + .tit{ + color: #11FEEE; + } + ::v-deep(.el-popper){ + background-color: rgba(10,31,92,1); + border: 1px solid rgba(17,254,238,.4); + color: #11FEEE; + .el-cascader-node{ + .in-active-path{ + background: #0049af; + } + &:hover{ + background: #0049af; + } + } + .el-cascader-node__label{ + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + .el-select-dropdown__item{ + color: #11FEEE; + } + .el-select-dropdown__item.hover{ + background: #0049af; + } + } + ::v-deep(.el-popper__arrow){ + &::before{ + background-color: rgba(10,31,92,.6) !important; + border: 1px solid rgba(17,254,238,.4); + } + } + ::v-deep(.el-input__wrapper){ + box-shadow: none; + border: 1px solid rgba(17,254,238,.2); + background: rgba(10,31,92,.6) !important; + height: 1.5rem; + color: #11FEEE; + + input{ + font-size: 0.8rem; + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + } + } + .chart{ + .el-table { + color: #11FEEE !important; + background-color: rgba(0,0,0,0) !important; + :deep(thead){ + color: #11FEEE !important; + background-color: #092846 !important + } + :deep(tr){ + background-color: rgba(0,0,0,0) !important; + .el-table__cell{ + background-color: rgba(0,0,0,0) !important; + } + } + } + .el-button--text{ + color: #11FEEE; + } + } + } + } + .homeCard{ + border-radius: 4px; + background: rgba(0, 61, 121, 0.2); + backdrop-filter: blur(5px); + position: relative; + z-index: 3; + .item-bg{ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } + .el-row{ + &>div{ + &>span{ + color: #11FEEE; + } + } + } + :deep(.el-range-separator){ + color: #11FEEE; + } + .el-table { + color: #11FEEE !important; + background-color: rgba(0,0,0,0) !important; + :deep(thead){ + color: #11FEEE !important; + background-color: #092846 !important + } + :deep(tr){ + background-color: rgba(0,0,0,0) !important; + .el-table__cell{ + background-color: rgba(0,0,0,0) !important; + } + .el-table-fixed-column--right{ + background-color: #092846 !important + } + } + } + + ::v-deep(.el-popper){ + background-color: rgba(10,31,92,1); + border: 1px solid rgba(17,254,238,.4); + color: #11FEEE; + .el-cascader-node{ + .in-active-path{ + background: #0049af; + } + &:hover{ + background: #0049af; + } + } + .el-cascader-node__label{ + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + .el-select-dropdown__item{ + color: #11FEEE; + } + .el-select-dropdown__item.hover{ + background: #0049af; + } + } + ::v-deep(.el-popper__arrow){ + &::before{ + background-color: rgba(10,31,92,.6) !important; + border: 1px solid rgba(17,254,238,.4); + } + } + ::v-deep(.el-input__wrapper){ + box-shadow: none; + border: 1px solid rgba(17,254,238,.2); + background: rgba(10,31,92,.6) !important; + height: 1.5rem; + color: #11FEEE; + + input{ + font-size: 0.8rem; + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + } + } } .el-card { - border: 0; + border: 0; } .el-input{ - width: 100% !important; + width: 100% !important; } ::v-deep(.el-date-editor){ - width: 100%; + width: 100%; } .el-select{ - width: 100%; + width: 100%; } :deep(.el-cascader){ - width: 100% !important; + width: 100% !important; } </style> -- Gitblit v1.9.2