<template>
|
<div class="home-container">
|
<div style="height: 100%">
|
<div class="homeCard">
|
<div class="topChart">
|
<div class="chart-item">
|
<div class="chart-tit">
|
<span class="tit">申报特殊作业类别分布图</span>
|
</div>
|
<div class="chart" :id="zyfb"></div>
|
<div style="width: 100%;text-align: center">
|
<el-radio-group v-model="days1" @change="(value)=>changeTime1(value)">
|
<el-radio-button v-for="item in timeList" :label='item.value' border>{{item.label}}</el-radio-button>
|
</el-radio-group>
|
</div>
|
</div>
|
</div>
|
<div class="topChart">
|
<div class="chart-item">
|
<div class="chart-tit">
|
<span class="tit">各事业部申报特殊作业情况</span>
|
<div class="filter-part">
|
<el-select v-model="days2" size="large" :teleported="false" @change="changeTime2()">
|
<el-option
|
v-for="item in timeList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</div>
|
</div>
|
<el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }">
|
<el-table-column property="seDepName" label="事业部" align="center"/>
|
<el-table-column property="totalCount" label="总数" align="center"/>
|
<el-table-column v-for="workType in workTypes" :key="workType.workType" :label="workType.workTypeDesc" :prop="`list.${workType.workType - 1}.count`"></el-table-column>
|
</el-table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</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 * as echarts from "echarts";
|
import {specialIndexApi} from "/@/api/specialWorkSystem/specialIndex";
|
import {ElMessage} from "element-plus/es";
|
import {workApplyApi} from "/@/api/specialWorkSystem/workApply";
|
|
// 定义接口来定义对象的类型
|
interface stateType {
|
startTime1: string
|
startTime2: string
|
endTime: string
|
tableData: Array<any>
|
days1: number
|
days2: number
|
timeList: Array<timeType>
|
workTypes: Array<any>
|
}
|
|
interface timeType{
|
label: string,
|
value: number
|
}
|
|
export default defineComponent({
|
name: 'sbtj',
|
components: {
|
},
|
setup() {
|
const userInfo = useUserInfo();
|
const { userInfos } = storeToRefs(userInfo);
|
const router = useRouter();
|
const zyfb = ref("eChartZyfb" + Date.now() + Math.random())
|
const state = reactive<stateType>({
|
startTime1: '',
|
startTime2: '',
|
days1: 30,
|
days2: 30,
|
endTime: '',
|
tableData: [],
|
timeList:[
|
{
|
label: '昨日',
|
value: 1
|
},
|
{
|
label: '近七天',
|
value: 7
|
},
|
{
|
label: '近30天',
|
value: 30
|
},
|
{
|
label: '近180天',
|
value: 180
|
}
|
],
|
workTypes: [ // 定义工作类型的列表
|
{ workType: 1, workTypeDesc: '动火作业' },
|
{ workType: 2, workTypeDesc: '受限空间作业' },
|
{ workType: 3, workTypeDesc: '吊装作业' },
|
{ workType: 4, workTypeDesc: '动土作业' },
|
{ workType: 5, workTypeDesc: '断路作业' },
|
{ workType: 6, workTypeDesc: '高处作业' },
|
{ workType: 7, workTypeDesc: '临时用电作业' },
|
{ workType: 8, workTypeDesc: '盲板抽堵作业' },
|
],
|
});
|
|
// 折线图
|
const renderMenu = async (value: string) => {
|
Session.set('projectId', value);
|
userInfos.value.projectId = value;
|
await initBackEndControlRoutes();
|
};
|
|
// 页面载入时执行方法
|
onMounted(() => {
|
initTime()
|
getTypePie()
|
getTableData()
|
});
|
|
const getTypePie = async ()=>{
|
const data = {
|
startTime: state.startTime1,
|
endTime:state.endTime
|
}
|
let res = await workApplyApi().getSbtjPie(data)
|
if (res.data.code === '200') {
|
if(res.data.data && res.data.data.length>0){
|
const pieData = res.data.data.map(({workTypeDesc,count})=>({ name: workTypeDesc,value: count})).filter(i=>i.name !== '未知')
|
initZyfb(pieData)
|
}
|
else{
|
initZyfb([])
|
}
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
const getTableData = async ()=>{
|
const data = {
|
startTime: state.startTime2,
|
endTime:state.endTime
|
}
|
let res = await workApplyApi().getSbtjTable(data);
|
if (res.data.code === '200') {
|
state.tableData = res.data.data
|
} else {
|
ElMessage({
|
type: 'warning',
|
message: res.data.msg
|
});
|
}
|
}
|
|
const initTime =()=>{
|
state.startTime1 = getPeriod(30)
|
state.startTime2 = getPeriod(30)
|
state.endTime = formatDate(new Date())
|
}
|
const getPeriod =(num)=> {
|
const currentDate = new Date();
|
const startTime = new Date();
|
startTime.setDate(currentDate.getDate() - num);
|
return formatDate(startTime)
|
}
|
const formatDate =(date)=> {
|
const year = date.getFullYear().toString();
|
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
const day = ('0' + date.getDate()).slice(-2);
|
return `${year}-${month}-${day} 00:00:00`;
|
}
|
|
const changeTime1=(value:number)=>{
|
state.startTime1 = getPeriod(value)
|
getTypePie()
|
}
|
|
const changeTime2=()=>{
|
state.startTime2 = getPeriod(state.days2)
|
getTableData()
|
}
|
|
type EChartsOption = echarts.EChartsOption
|
const initZyfb =(data:Array<any>)=>{
|
let dom = document.getElementById(zyfb.value);
|
let myChart = echarts.init(dom);
|
let option: EChartsOption;
|
option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
orient: 'horizontal',
|
itemStyle: {
|
borderWidth: 0 // 设置图例边框宽度为0
|
}
|
},
|
series: [
|
{
|
name: '作业分布',
|
type: 'pie',
|
radius: ['40%', '70%'],
|
center: ['50%', '52%'],
|
avoidLabelOverlap: false,
|
itemStyle: {
|
borderRadius: 1,
|
borderColor: '#fff',
|
borderWidth: 1
|
},
|
label: {
|
show: true,
|
position: 'outside',
|
overflow: 'truncate',
|
borderWidth: 0,
|
},
|
labelLine: {
|
show: true, // 显示指示线
|
lineStyle: {
|
color: '#ccc',
|
width: 1,
|
type: 'solid'
|
}
|
},
|
emphasis: {
|
itemStyle: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
},
|
},
|
data: data
|
}
|
]
|
}
|
|
option && myChart.setOption(option);
|
window.addEventListener("resize",function (){
|
myChart.resize();
|
});
|
}
|
|
return {
|
zyfb,
|
changeTime1,
|
changeTime2,
|
...toRefs(state)
|
};
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
$homeNavLengh: 8;
|
.home-container {
|
height: calc(100vh - 144px);
|
box-sizing: border-box;
|
overflow: hidden;
|
.homeCard {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
border-radius: 4px;
|
|
.topChart{
|
width: 100%;
|
height: calc(50vh - 102px);
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-start;
|
margin-bottom: 20px;
|
&:last-of-type{
|
margin-bottom: 0;
|
}
|
|
.chart-item{
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background: #fff;
|
padding: 20px;
|
|
.chart-tit{
|
width: 100%;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
margin-bottom: 20px;
|
.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: 100% !important;
|
}
|
.el-switch{
|
width: 25% !important;
|
|
:deep(.el-switch__core){
|
width: 100% !important;
|
}
|
}
|
}
|
.filter-part2{
|
:deep(.el-cascader){
|
width: 100% !important;
|
}
|
}
|
|
}
|
.chart{
|
width: 100%;
|
height: 80%;
|
.el-table{
|
height: 90% !important;
|
:deep(.el-table__inner-wrapper){
|
height: 100% !important;
|
.el-table__header-wrapper {
|
height: 20% !important;
|
.el-table__header{
|
height: 100% !important;
|
th{
|
height: 100% !important;
|
padding: 0 0 !important;
|
.cell{
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
}
|
}
|
}
|
.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;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
:deep(.active-ring-info){
|
.active-ring-name{
|
font-size: 1.5rem !important;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
