<template>
|
<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">-->
|
<!-- <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 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 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="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>
|
<!-- <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-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>-->
|
<!-- </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>
|
</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-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="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">申请时间：</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">作业票编号：</span>
|
<div class="grid-content topInfo">
|
<el-input
|
v-model="searchParams.workPermitNo"
|
placeholder="请输入作业票编号"
|
size="small"
|
/>
|
</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" v-model="searchParams.applyDepId" @change="changeDep4()" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/>
|
</div>
|
</el-col>
|
<el-button type="primary" style="margin-left: 20px" @click="searchRecord" size="small">查询</el-button>
|
<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="workLocation" label="作业地点" align="center">
|
<template #default="scope">
|
<span>{{scope.row.workLocation?scope.row.workLocation:'--'}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column property="workContent" label="作业内容" align="center">
|
<template #default="scope">
|
<span>{{scope.row.workContent?scope.row.workContent:'--'}}</span>
|
</template>
|
</el-table-column>
|
<!-- <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>-->
|
<video-detail ref="videoRef"></video-detail>
|
<Work-record ref="recordRef"></Work-record>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { initBackEndControlRoutes } from '/@/router/backEnd';
|
import { useUserInfo } from '/@/stores/userInfo';
|
import { Session } from '/@/utils/storage';
|
import { useRouter } from 'vue-router';
|
import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download, FolderChecked, VideoPlay } from '@element-plus/icons-vue';
|
import { ElTable, ElMessage } 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 {
|
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 | null;
|
name: string;
|
}
|
interface status {
|
name: string
|
value: number
|
}
|
interface DepartmentState {
|
depId: number;
|
depName: string;
|
}
|
interface User {
|
name: string;
|
list: [];
|
info: string;
|
}
|
export default defineComponent({
|
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,
|
applyDepId: 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: {
|
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: '盲板抽堵作业' },
|
{ id: 9, 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: '盲板抽堵作业' },
|
{ id: 9, name: '打开作业' }
|
],
|
workStatusList: [
|
{
|
name: '未开始',
|
value: -1
|
},
|
{
|
name: '开始',
|
value: 1
|
},
|
{
|
name: '结束',
|
value: 2
|
}
|
],
|
pieData: [],
|
squareData: [],
|
warningData: [],
|
reviewForm: {
|
advice: ''
|
},
|
reviewRules:{
|
advice: [{ required: true, message: '请填写验收意见', trigger: 'blur' }]
|
}
|
});
|
// 页面载入时执行方法
|
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 changeDep4=()=>{
|
searchRecord()
|
}
|
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 () => {
|
state.pageIndex = 1
|
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 () => {
|
state.pageIndex = 1
|
getMydepList()
|
};
|
// 重置搜索
|
const clearSearch = async () => {
|
state.searchParams = {
|
workType:null,
|
workDepId:null,
|
workPermitNo: '',
|
startTime: '',
|
endTime: '',
|
workAllStatus: null,
|
applyDepId: 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,
|
changeDep4,
|
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);
|
position: relative;
|
box-sizing: border-box;
|
overflow: hidden;
|
overflow-y: scroll;
|
scrollbar-width: none; /* firefox */
|
-ms-overflow-style: none; /* IE 10+ */
|
|
&::-webkit-scrollbar {
|
display: none; /* Chrome Safari */
|
}
|
.full{
|
position:fixed;
|
height: 34px;
|
line-height: 34px;
|
top: 80px;
|
right: 20px;
|
z-index: 9;
|
}
|
|
.demo-tabs {
|
width: 100%;
|
height: 100%;
|
|
&::v-deep(.el-tabs__content) {
|
height: calc(100% - 60px);
|
}
|
|
.el-tab-pane {
|
height: 100%;
|
}
|
}
|
.topChart{
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 20px;
|
height: 50%;
|
&: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%;
|
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;
|
|
:deep(.el-switch__core){
|
width: 100% !important;
|
}
|
}
|
}
|
.filter-part2{
|
:deep(.el-cascader){
|
width: 100% !important;
|
}
|
}
|
|
}
|
.chart{
|
width: 100%;
|
height: 85%;
|
overflow-y: scroll;
|
scrollbar-width: none; /* firefox */
|
-ms-overflow-style: none; /* IE 10+ */
|
.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%;
|
margin-bottom: 4px;
|
}
|
}
|
:deep(.active-ring-info){
|
.active-ring-name{
|
font-size: 1.5rem !important;
|
text-align: center;
|
}
|
}
|
}
|
}
|
.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%;
|
|
.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 {
|
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;
|
}
|
.el-input{
|
width: 100% !important;
|
}
|
::v-deep(.el-date-editor){
|
width: 100%;
|
}
|
.el-select{
|
width: 100%;
|
}
|
:deep(.el-cascader){
|
width: 100% !important;
|
}
|
</style>
|
