From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期一, 08 七月 2024 10:12:16 +0800
Subject: [PATCH] xiugai
---
src/views/specialWorkSystem/specialIndex/index.vue | 2700 ++++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 1,663 insertions(+), 1,037 deletions(-)
diff --git a/src/views/specialWorkSystem/specialIndex/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue
index e7f696e..fb47fb3 100644
--- a/src/views/specialWorkSystem/specialIndex/index.vue
+++ b/src/views/specialWorkSystem/specialIndex/index.vue
@@ -1,237 +1,309 @@
<template>
- <div class="home-container">
- <div class="topChart">
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">八大作业各分类分布图</span>
- <div class="filter-part filter-part2">
- <el-cascader v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- </div>
- </div>
- <div class="chart" :id="zyfb"></div>
- <el-radio-group v-model="chartSearch1.period" size="small">
- <el-radio label="week" border>近7天</el-radio>
- <el-radio label="month" border>近30天</el-radio>
- <el-radio label="season" border>近90天</el-radio>
- <el-radio label="year" border>近一年</el-radio>
- </el-radio-group>
- </div>
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">各事业部关联作业分析</span>
- <div class="filter-part">
- <el-cascader v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- <el-select v-model="chartSearch2.type" 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" :id="slfx"></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>
- <div class="topChart">
- <div class="chart-item">
- <div class="chart-tit">
- <span class="tit">关联作业趋势图</span>
- <div class="filter-part filter-part2">
- <el-cascader v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
- </div>
- </div>
- <div class="chart" :id="zyqs"></div>
+ <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 class="chart-item">
- <div class="chart-tit">
- <span class="tit">异常警报关联人</span>
- <div class="filter-part">
- <el-switch
- v-model="chartSearch4.type"
- class="ml-2"
- inline-prompt
- style="--el-switch-on-color: #13ce66; --el-switch-off-color: #13ce66"
- active-text="作业人"
- inactive-text="监护人"
+ </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.days" size="small" @change="(value)=>changeTime4(value)">
+ <el-option label="近7天" :value="7"/>
+ <el-option label="近30天" :value="30"/>
+ <el-option label="近90天" :value="90"/>
+ <el-option label="近1年" :value="365"/>
+ </el-select>
+ <el-select :teleported="false" v-model="chartSearch4.workType" size="small" @change="changeType4()">
+ <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="operatorUname" label="姓名" align="center"/>
+ <el-table-column property="deptName" label="所属部门" align="center"/>
+ <el-table-column property="warningCount" 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="4" 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 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 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>
+ </el-select>
</div>
- <div class="chart">
- <el-table ref="multipleTableRef" :data="warningData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
- <el-table-column property="name" 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 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>
+ </el-col>
+ <el-col :span="4" 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>
-<!-- <div class="chart" :id="slfx"></div>-->
+ </el-col>
+<!-- <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" 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-col :span="4" style="display:flex;align-items: center">
+ <span style="white-space: nowrap;margin-left: 20px">作业票编号：</span>
+ <div class="grid-content topInfo">
+ <el-input
+ v-model="searchParams.workPermitNo"
+ placeholder="请输入作业票编号"
+ size="small"
+ />
+ </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 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="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 style="height: 100%">
- <div class="homeCard">
- <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 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="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%" :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>
- <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>
+ </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">
@@ -241,59 +313,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;
- chartSearch1: object;
- chartSearch2: object;
- chartSearch3: object;
- chartSearch4: object;
- searchDep2: number | null;
- searchDep: number | null;
- searchDate: Array<any>,
- totalSize1: number;
- details: {};
- workType: Array<type>;
- workType1: Array<type>;
- dialogType: number | null;
- departmentList: Array<any>;
- departmentRecursionList: Array<DepartmentState>;
- workStatus: Array<status>;
- reviewForm: object;
- reviewRules: 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;
@@ -301,844 +383,1388 @@
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 zyfb = ref("eChartZyfb" + Date.now() + Math.random())
- const slfx = ref("eChartSlfx" + Date.now() + Math.random())
- const zyqs = ref("eChartZyqs" + Date.now() + Math.random())
- const state = reactive<stateType>({
- pageIndex1: 1,
- pageSize1: 10,
- totalSize1: 0,
- dialogType: null,
- dialogReview: false,
- departmentList: [],
- departmentRecursionList: [],
- chosenIndex: null,
- searchWord: null,
- searchStatus: null,
- chartSearch1: {
- searchDep: null,
- period: 'month'
- },
- chartSearch2: {
- searchDep: null,
- type: 0
- },
- chartSearch3: {
- searchDep: null
- },
- chartSearch4: {
- searchDep: null
- },
- searchDep2: null,
- searchDep: null,
- searchDate: [],
- applyData: [],
- workTimeList: [],
- multipleSelection: [],
- approveInfo: {
- approvalSteps: [],
- operators: []
- },
- casProps: {
- expandTrigger: 'hover',
- emitPath: false,
- value: 'depId',
- label: 'depName',
- checkStrictly: true
- },
- dialogDetails: false,
- details: {},
- workType1: [
- { id: 0, 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: '盲板抽堵作业' }
- ],
- 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: ''
- },
- reviewRules:{
- advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
- }
- });
- // 页面载入时执行方法
- onMounted(() => {
- getListByPage();
- getAllDepartment();
- initZyfb()
- initSlfx()
- initZyqs()
- });
-
- 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'
- },
- series: [
- {
- name: 'Access From',
- type: 'pie',
- radius: ['40%', '70%'],
- avoidLabelOverlap: false,
- itemStyle: {
- borderRadius: 1,
- borderColor: '#fff',
- borderWidth: 2
- },
- label: {
- show: false,
- position: 'center'
- },
- emphasis: {
- label: {
- show: true,
- fontSize: 40,
- fontWeight: 'bold'
- }
- },
- labelLine: {
- show: true
- },
- data: [
- { value: 1048, name: '动火作业' },
- { value: 735, name: '受限空间作业' },
- { value: 580, name: '吊装作业' },
- { value: 484, name: '动土作业' },
- { value: 735, name: '断路作业' },
- { value: 580, name: '高处作业' },
- { value: 484, name: '临时用电作业' },
- { value: 300, name: '盲板抽堵作业' }
- ]
- }
- ]
+ 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: {
+ startTime: '',
+ days: 30,
+ workType: 1
+ },
+ 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
}
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
+ ],
+ pieData: [],
+ squareData: [],
+ warningData: [],
+ reviewForm: {
+ advice: ''
+ },
+ reviewRules:{
+ advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
}
- 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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
- axisTick: {
- alignWithLabel: true
- }
- }
- ],
- yAxis: [
- {
- type: 'value'
- }
- ],
- series: [
- {
- name: 'Direct',
- type: 'bar',
- barWidth: '60%',
- data: [10, 52, 200, 334, 390, 330, 220]
- }
- ]
- }
-
- 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: ['四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月', '一月', '二月', '三月']
- },
- yAxis: {
- type: 'value'
- },
- grid: {
- top: '8%',
- bottom: '8%'
- },
- series: [
- {
- data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260],
- type: 'line'
- }
- ]
- }
-
- option && myChart.setOption(option);
- window.addEventListener("resize",function (){
- myChart.resize();
- });
- }
- // 刷新
- 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
- }
-
- 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 renderMenu = async (value: string) => {
- Session.set('projectId', value);
- userInfos.value.projectId = value;
- await initBackEndControlRoutes();
- };
-
- return {
- View,
- Edit,
- Delete,
- Refresh,
- Plus,
- Finished,
- Download,
- FolderChecked,
- reviewFormRef,
- zyfb,
- slfx,
- zyqs,
- handleReview,
- submitReview,
- reLoadData,
- toApply,
- toNames,
- searchRecord,
- clearSearch,
- viewRecord,
- getListByPage,
- handleSizeChange1,
- handleCurrentChange1,
- ...toRefs(state)
- };
+ });
+ // 页面载入时执行方法
+ onMounted(() => {
+ initTime()
+ getMydepList()
+ getAllDepartment();
+ getTypePie()
+ getWorkDep()
+ getDepMonth()
+ getWarningList()
+ });
+ const initTime =()=>{
+ state.chartSearch1.startTime = getPeriod(30)
+ state.chartSearch2.startTime = getPeriod(30)
+ state.chartSearch4.startTime = getPeriod(30)
+ state.endTime = formatDate(new Date())
}
+ const getPeriod =(num)=> {
+ const currentDate = new Date();
+ const startTime = new Date();
+ startTime.setDate(currentDate.getDate() - num - 1);
+ 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} 23:59:59`;
+ }
+ const changeTime1=(value:number)=>{
+ state.chartSearch1.startTime = getPeriod(value)
+ getTypePie()
+ }
+ const changeTime4=(value:number)=>{
+ state.chartSearch4.startTime = getPeriod(value)
+ console.log(state.chartSearch4.startTime,state.endTime,'结束段')
+ getWarningList()
+ }
+ const changeDep1=()=>{
+ getTypePie()
+ }
+
+ const changeDep2=()=>{
+ getWorkDep()
+ }
+ const changeType2=()=>{
+ getWorkDep()
+ }
+ const changeType4=()=>{
+ getWarningList()
+ }
+ 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'
+ }
+ initTime()
+ getMydepList()
+ getAllDepartment();
+ getTypePie()
+ getWorkDep()
+ getDepMonth()
+ }
+ 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') {
+ state.squareData = JSON.parse(JSON.stringify(res.data.data))
+ let names = state.squareData.map(i=>i.name)
+ let vals = state.squareData.map(i=>i.value)
+ initSlfx(names,vals)
+ } else {
+ ElMessage({
+ type: 'warning',
+ message: res.data.msg
+ });
+ }
+ }
+ const getDepMonth = async ()=>{
+ let res = await specialIndexApi().analyseDepMonth(state.chartSearch3.depId);
+ if (res.data.code === '200') {
+ state.squareData = JSON.parse(JSON.stringify(res.data.data))
+ let names = state.squareData.map(i=>i.name)
+ let vals = state.squareData.map(i=>i.value)
+ initZyqs(names,vals)
+ } 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
+ });
+ }
+ }
+ const getWarningList = async()=>{
+ const data = {
+ startTime: state.chartSearch4.startTime,
+ endTime: state.endTime,
+ workType:state.chartSearch4.workType
+ }
+ let res = await specialIndexApi().getWorkWarning(data)
+ if (res.data.code === '200') {
+ state.warningData = JSON.parse(JSON.stringify(res.data.data))
+ } 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: state.pieData
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initSlfx =(names:Array<string>,vals:Array<any>)=>{
+ 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: names,
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLabel: {
+ color: state.themeColor
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ barWidth: '60%',
+ data: vals,
+ }
+ ]
+ }
+
+ option && myChart.setOption(option);
+ window.addEventListener("resize",function (){
+ myChart.resize();
+ });
+ }
+ const initZyqs =(names:Array<string>,vals:Array<any>)=>{
+ let dom = document.getElementById(zyqs.value);
+ let myChart = echarts.init(dom);
+ let option: EChartsOption;
+ option = {
+ xAxis: {
+ type: 'category',
+ data: names,
+ 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: vals,
+ 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 = []
+ state.pageIndex = 1
+ 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,
+ changeTime4,
+ changeDep1,
+ changeDep2,
+ changeType2,
+ changeType4,
+ 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);
}
- .topChart{
- width: 100%;
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- margin-bottom: 20px;
- height: 40%;
- .chart-item{
- width: calc(50% - 10px);
- height: 100%;
- margin-right: 10px;
- position: relative;
- background: #fff;
- padding: 20px;
+ .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;
+ }
- &:last-of-type{
- margin-right: 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%;
+ height: 15%;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ .tit{
+ font-size: 1.33rem;
+ font-weight: bolder;
+ white-space: nowrap;
}
-
- .chart-tit{
- width: 100%;
+ .filter-part{
display: flex;
- align-items: flex-start;
- justify-content: space-between;
- .tit{
- font-size: 16px;
- font-weight: bolder;
+ align-items: center;
+ justify-content: right;
+ :deep(.el-cascader){
+ width: 35% !important;
}
- .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;
+ .el-select{
+ width: 35% !important;
+ margin-left: 10px;
+ }
+ .el-switch{
+ width: 25% !important;
- :deep(.el-switch__core){
- width: 100% !important;
- }
- }
- }
- .filter-part2{
- :deep(.el-cascader){
+ :deep(.el-switch__core){
width: 100% !important;
}
}
-
}
- .chart{
+ .filter-part2{
+ :deep(.el-cascader){
+ width: 100% !important;
+ }
+ }
+
+ }
+ .chart{
+ width: 100%;
+ height: 85%;
+ overflow-y: scroll;
+ .el-table{
+ //: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;
+ // }
+ // }
+ // }
+ // }
+ // .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;
+ // }
+ // }
+ // }
+ // }
+ // }
+ // }
+ // }
+ //}
+ }
+ }
+ .el-radio-group{
+ width: 20%;
+ display: flex;
+ flex-flow: column nowrap;
+ align-items: flex-start;
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-30%);
+
+ .el-radio{
width: 100%;
- height: 88%;
+ margin-bottom: 4px;
}
- .el-radio-group{
- width: 20%;
- display: flex;
- flex-flow: column nowrap;
- align-items: flex-start;
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-30%);
-
- .el-radio{
- width: 100%;
- margin-bottom: 4px;
- }
- }
- :deep(.active-ring-info){
- .active-ring-name{
- font-size: 1.5rem !important;
- text-align: center;
- }
+ }
+ :deep(.active-ring-info){
+ .active-ring-name{
+ font-size: 1.5rem !important;
+ text-align: center;
}
}
}
- .homeCard {
+ }
+ .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;
+ }
+
+ .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%;
- padding: 20px;
- box-sizing: border-box;
- background: #fff;
- border-radius: 4px;
- .main-card {
+ .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%;
- height: 100%;
- .cardTop {
+ 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;
- justify-content: space-between;
- margin-bottom: 20px;
- .mainCardBtn {
- margin: 0;
- }
-
- .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;
- }
+ span {
+ width: 45%;
+ &:first-of-type {
+ width: 30%;
}
}
}
}
- .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 {
+ border-bottom: 0;
}
+ }
}
- }
- .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 {
+ .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%;
- margin-top: -30px;
+ display: flex;
+ color: #409eff;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding-bottom: 10px;
+ border-bottom: 1px solid #a0cfff;
- .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;
- }
- }
- }
+ & > span {
+ flex: 1;
}
- }
- &: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 {
+ & > div {
+ flex: 2;
+ 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;
}
+ & > 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