1612 lines
53 KiB
Vue
1612 lines
53 KiB
Vue
<template>
|
|
<div class="main-box">
|
|
<div class="areaTreeBox fullHeight" id="videoTreeBox">
|
|
<div class="areaTreeInner whiteBlock fullHeight">
|
|
<p class="pageTitle">
|
|
承包商/厂区列表
|
|
</p>
|
|
<div class="area-select">
|
|
<el-select
|
|
v-model="areaSelectVal"
|
|
placeholder="请选择"
|
|
style="width: 100%;margin-top: 10px;"
|
|
size="medium"
|
|
>
|
|
<el-option
|
|
v-for="item in areaList"
|
|
:key="item.value"
|
|
:label="item.name"
|
|
:value="item.value"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="treeBox">
|
|
<p class="pageTitle">
|
|
承包商列表
|
|
</p>
|
|
<vue-scroll v-if="level1CompanyData.length > 0">
|
|
<el-tree
|
|
:data="level1CompanyData"
|
|
:props="defaultProps"
|
|
default-expand-all
|
|
node-key="itemId"
|
|
ref="tree"
|
|
>
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
<span
|
|
style="
|
|
width: 160px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
"
|
|
:class="
|
|
data.videoName
|
|
? 'videoName'
|
|
: data.projectName
|
|
? 'projectName'
|
|
: data.companyType == 2
|
|
? 'companyName2'
|
|
: ''
|
|
"
|
|
:title="node.label"
|
|
>{{ node.label }}</span
|
|
>
|
|
</span>
|
|
</el-tree>
|
|
</vue-scroll>
|
|
<div class="placeholderBox" v-else>
|
|
<img src="@/assets/images/noData2.png" alt="" srcset="" />
|
|
<p>{{ $t("message.videoManage.empty") }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gantt-box">
|
|
<div class="header">
|
|
<div class="left-content">
|
|
<div class="item" v-for="(item, index) in headerList" :key="index">
|
|
<div class="color-block" :style="{ background: item.color }"></div>
|
|
<div class="label">{{ item.label }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="gantt-chart" v-if="projects.length > 0">
|
|
<div class="table" @scroll="handleScroll">
|
|
<div class="thead">
|
|
<div class="row">
|
|
<div class="td fixed_1">分部分项工程名称</div>
|
|
<div class="td fixed_2">开始日期</div>
|
|
<div class="td fixed_3" style="border-right: 1px solid #cbd1df">
|
|
完成日期
|
|
</div>
|
|
<div class="td" v-for="date in dateList" :key="date">
|
|
<div class="date">
|
|
<div class="month">
|
|
{{ date }}
|
|
</div>
|
|
<div class="days">
|
|
<div
|
|
class="day"
|
|
v-for="day in getDays(date)"
|
|
:key="day.num"
|
|
>
|
|
{{ day.num }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tbody">
|
|
<div
|
|
class="row-groups"
|
|
:class="{ open: openedIndex === p.id }"
|
|
v-for="(p, i) in projects"
|
|
:key="p.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpen(p, p.id)"
|
|
style="color: #333333; padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndex === p.id && p.children.length > 0"
|
|
:style="{
|
|
visibility:
|
|
openedIndex === p.id && p.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndex != p.id && p.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="p.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ p.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<!-- <div class="td fixed_1" @click="handleOpen(p, i)" style="color: #333333; padding-left: 25px">
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="openedIndex === i && p.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndex === i && p.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndex != i && p.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
></i>
|
|
<el-tooltip effect="dark" :content="p.taskName" placement="top-start">
|
|
<span>{{ p.taskName }}</span>
|
|
</el-tooltip>
|
|
</div> -->
|
|
|
|
<div class="td fixed_2">{{ p.startDate }}</div>
|
|
<div class="td fixed_3">{{ p.finishDate }}</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(p.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in p.gantts"
|
|
:key="index"
|
|
:title="p.taskName + ' ' + headerList[p.status].label"
|
|
@click="openGanttDialog(p)"
|
|
></div>
|
|
</div>
|
|
<!-- 第二层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndex === p.id"
|
|
v-for="child in p.children"
|
|
:key="'child-' + child.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpenSecond(child, child.id)"
|
|
style="padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="
|
|
openedIndexSecond === child.id &&
|
|
child.children.length > 0
|
|
"
|
|
:style="{
|
|
visibility:
|
|
openedIndexSecond === child.id &&
|
|
child.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexSecond != child.id &&
|
|
child.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="child.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ child.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">{{ child.startDate }}</div>
|
|
<div class="td fixed_3">{{ child.finishDate }}</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(child.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in child.gantts"
|
|
:key="index"
|
|
@mouseenter="(e) => handleHover(e, child)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第三层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexSecond === child.id"
|
|
v-for="second in child.children"
|
|
:key="'child-' + second.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpenThird(second, second.id)"
|
|
style="padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="
|
|
openedIndexThird === second.id &&
|
|
second.children.length > 0
|
|
"
|
|
:style="{
|
|
visibility:
|
|
openedIndexThird === second.id &&
|
|
second.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexThird != second.id &&
|
|
second.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="second.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ second.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<div class="td fixed_2">{{ second.startDate }}</div>
|
|
<div class="td fixed_3">{{ second.finishDate }}</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(second.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in second.gantts"
|
|
:key="index"
|
|
@mouseenter="(e) => handleHover(e, second)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第四层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexThird === second.id"
|
|
v-for="third in second.children"
|
|
:key="'child-' + third.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpenFourth(third, third.id)"
|
|
style="padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="
|
|
openedIndexFourth === third.id &&
|
|
third.children.length > 0
|
|
"
|
|
:style="{
|
|
visibility:
|
|
openedIndexFourth === third.id &&
|
|
third.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexFourth != third.id &&
|
|
third.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="third.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ third.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<div class="td fixed_2">{{ third.startDate }}</div>
|
|
<div class="td fixed_3">{{ third.finishDate }}</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(third.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in third.gantts"
|
|
:key="index"
|
|
@mouseenter="(e) => handleHover(e, third)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第五层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexFourth === third.id"
|
|
v-for="fouth in third.children"
|
|
:key="'child-' + fouth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpenFifth(fouth, fouth.id)"
|
|
style="padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="
|
|
openedIndexFifth === fouth.id &&
|
|
fouth.children.length > 0
|
|
"
|
|
:style="{
|
|
visibility:
|
|
openedIndexFifth === fouth.id &&
|
|
fouth.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexFifth != fouth.id &&
|
|
fouth.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="fouth.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ fouth.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
|
|
<div class="td fixed_2">{{ fouth.startDate }}</div>
|
|
<div class="td fixed_3">{{ fouth.finishDate }}</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(fouth.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in fouth.gantts"
|
|
:key="index"
|
|
@mouseenter="(e) => handleHover(e, fouth)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第六层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexFifth === fouth.id"
|
|
v-for="fifth in fouth.children"
|
|
:key="'child-' + fifth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpenSixth(fifth, fifth.id)"
|
|
style="padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="
|
|
openedIndexSixth === fifth.id &&
|
|
fifth.children.length > 0
|
|
"
|
|
:style="{
|
|
visibility:
|
|
openedIndexSixth === fifth.id &&
|
|
fifth.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexSixth != fifth.id &&
|
|
fifth.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="fifth.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ fifth.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">{{ fifth.startDate }}</div>
|
|
<div class="td fixed_3">{{ fifth.finishDate }}</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(fifth.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in fifth.gantts"
|
|
:key="index"
|
|
@mouseenter="(e) => handleHover(e, fifth)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第七层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexSixth === fifth.id"
|
|
v-for="sixth in fifth.children"
|
|
:key="'child-' + sixth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpenSeven(sixth, sixth.id)"
|
|
style="padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="
|
|
openedIndexSixth === sixth.id &&
|
|
sixth.children.length > 0
|
|
"
|
|
:style="{
|
|
visibility:
|
|
openedIndexSixth === sixth.id &&
|
|
sixth.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexSixth != sixth.id &&
|
|
sixth.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="sixth.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ sixth.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">{{ sixth.startDate }}</div>
|
|
<div class="td fixed_3">{{ sixth.finishDate }}</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(sixth.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in sixth.gantts"
|
|
:key="index"
|
|
@mouseenter="(e) => handleHover(e, sixth)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第八层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexSeven === sixth.id"
|
|
v-for="seventh in sixth.children"
|
|
:key="'child-' + seventh.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpenEighth(seventh, seventh.id)"
|
|
style="padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="
|
|
openedIndexSeven === seventh.id &&
|
|
seventh.children.length > 0
|
|
"
|
|
:style="{
|
|
visibility:
|
|
openedIndexSeven === seventh.id &&
|
|
seventh.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexSeven != seventh.id &&
|
|
seventh.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="seventh.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ seventh.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">
|
|
{{ seventh.startDate }}
|
|
</div>
|
|
<div class="td fixed_3">
|
|
{{ seventh.finishDate }}
|
|
</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(seventh.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in seventh.gantts"
|
|
:key="index"
|
|
@mouseenter="(e) => handleHover(e, seventh)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- 第九层 -->
|
|
<div
|
|
class="children"
|
|
v-show="openedIndexEighth === seventh.id"
|
|
v-for="eighth in seventh.children"
|
|
:key="'child-' + eighth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
style="padding-left: 25px"
|
|
>
|
|
<i
|
|
class="el-icon-arrow-down"
|
|
v-if="
|
|
openedIndexEighth === eighth.id &&
|
|
eighth.children.length > 0
|
|
"
|
|
:style="{
|
|
visibility:
|
|
openedIndexEighth === eighth.id &&
|
|
eighth.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<i
|
|
class="el-icon-arrow-right"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexEighth != eighth.id &&
|
|
eighth.children.length > 0
|
|
? 'visible'
|
|
: 'hidden',
|
|
}"
|
|
></i>
|
|
<el-tooltip
|
|
effect="dark"
|
|
:content="eighth.taskName"
|
|
placement="top-start"
|
|
>
|
|
<span>{{ eighth.taskName }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="td fixed_2">
|
|
{{ eighth.startDate }}
|
|
</div>
|
|
<div class="td fixed_3">
|
|
{{ eighth.finishDate }}
|
|
</div>
|
|
<div
|
|
class="td"
|
|
v-for="date in dateList"
|
|
:key="date + 'grid-date'"
|
|
>
|
|
<div class="grids">
|
|
<div
|
|
class="grid"
|
|
v-for="day in getDays(date)"
|
|
:key="'grid' + day.num"
|
|
:ref="setItemRef(eighth.id, day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in eighth.gantts"
|
|
:key="index"
|
|
@mouseenter="(e) => handleHover(e, eighth)"
|
|
@mouseleave="handleLeave"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tooltips" :style="tooltipsStyle">
|
|
{{ tooltipContent.taskName }}
|
|
<span>
|
|
{{
|
|
tooltipContent.mppStatus == 0
|
|
? "未开始"
|
|
: tooltipContent.mppStatus == 1
|
|
? "进行中"
|
|
: tooltipContent.mppStatus == 2
|
|
? "已完成"
|
|
: "已逾期"
|
|
}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="noData">
|
|
<img src="@/assets/images/notoDataImg.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getParentChildTaskListApi } from "@/assets/js/api/progressManagement";
|
|
import { getComapnyStatisticsListApi } from "@/assets/js/api/company/project";
|
|
export default {
|
|
data() {
|
|
return {
|
|
defaultProps: {
|
|
children: "list",
|
|
label: "name",
|
|
},
|
|
areaSelectVal: "",
|
|
areaList: [{ name: "123厂区", value: 1 }],
|
|
level1CompanyData: [],
|
|
searchSn: "",
|
|
headerList: [
|
|
{ label: "未开始", color: "#3a7bff" },
|
|
{ label: "进行中", color: "#f1d520" },
|
|
{ label: "已完成", color: "#4fd389" },
|
|
{ label: "已逾期", color: "#F80840" },
|
|
],
|
|
colors: ["#3a7bff", "#f1d520", "#4fd389", "#F80840"],
|
|
projects: [],
|
|
itemRefs: [],
|
|
scrollLeft: 0,
|
|
scrollTimer: 0,
|
|
openedIndex: 9999,
|
|
openedIndexSecond: 9999,
|
|
openedIndexThird: 9999,
|
|
openedIndexFourth: 9999,
|
|
openedIndexFifth: 9999,
|
|
openedIndexSixth: 9999,
|
|
openedIndexSeven: 9999,
|
|
openedIndexEighth: 9999,
|
|
openedIndexNinth: 9999,
|
|
openedIndexTenth: 9999,
|
|
|
|
tooltipsStyle: [
|
|
{
|
|
display: "none",
|
|
left: 0,
|
|
top: 0,
|
|
},
|
|
],
|
|
tooltipContent: {
|
|
day: 0,
|
|
name: "",
|
|
},
|
|
dateList: [],
|
|
};
|
|
},
|
|
created() {
|
|
this.searchSn = this.$store.state.projectSn;
|
|
this.getDataList();
|
|
this.loadData();
|
|
},
|
|
computed: {
|
|
dates() {
|
|
let dates = [];
|
|
const mapDates = (data) => {
|
|
data.map((p) => {
|
|
dates.push(p.startDate);
|
|
dates.push(p.finishDate);
|
|
p.children && mapDates(p.children);
|
|
});
|
|
};
|
|
mapDates(this.projects);
|
|
dates = dates.map((date) => date.slice(0, 7)).sort();
|
|
dates = [...new Set(dates)];
|
|
console.log("dateList----", dates);
|
|
return dates;
|
|
},
|
|
},
|
|
watch: {
|
|
dates: {
|
|
immediate: true,
|
|
handler(newDates) {
|
|
this.dateList = newDates;
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
loadData() {
|
|
let sn = this.$store.state.projectSn;
|
|
// let projectType = 1; // 展示项目列表
|
|
// if (this.$store.state.userInfo.addProjectType == 1) {
|
|
// projectType = 0; // 不展示项目列表
|
|
// }
|
|
// getComapnyStatisticsListApi({
|
|
// sn: sn,
|
|
// projectType: projectType,
|
|
// }).then((res) => {
|
|
// this.level1CompanyData = res.result
|
|
// });
|
|
this.level1CompanyData = [{name: 123,list: []}]
|
|
console.log(this.level1CompanyData);
|
|
},
|
|
//获取甘特图数据
|
|
getDataList() {
|
|
getParentChildTaskListApi({
|
|
projectSn: this.searchSn,
|
|
}).then((res) => {
|
|
this.projects = this.dealArr(res.result);
|
|
console.log("获取甘特图数据", this.projects);
|
|
var that = this;
|
|
setTimeout(function() {
|
|
that.setGantts(that.projects);
|
|
}, 300);
|
|
});
|
|
},
|
|
dealArr(arr) {
|
|
arr.map((item) => {
|
|
item.gantts = [];
|
|
item.delay = 0;
|
|
if (item.children && item.children.length > 0) {
|
|
this.dealArr(item.children);
|
|
}
|
|
});
|
|
return arr;
|
|
},
|
|
|
|
setItemRef(id, date) {
|
|
var val = id + "@|@" + date;
|
|
return val;
|
|
|
|
// return val;
|
|
},
|
|
getGanttStyle(project) {
|
|
console.log("进入 getGanttStyle --- ", project.id, project.startDate);
|
|
|
|
let { startDate, finishDate, id } = project;
|
|
const startArr = startDate.split("-");
|
|
const endArr = finishDate.split("-");
|
|
let startRef = null;
|
|
let endRef = null;
|
|
// 抹灰工程1-1-2022/09/03
|
|
|
|
const a = !(startArr[2] % 2);
|
|
console.log(a, ":!(startArr[2] % 2:");
|
|
if (a) {
|
|
const day = startArr[2] - 1;
|
|
startArr[2] = day < 10 ? "0" + day : day;
|
|
startDate = startArr.join("-");
|
|
}
|
|
const b = !(endArr[2] % 2);
|
|
console.log(a, ":!(endArr[2] % 2):");
|
|
if (!(endArr[2] % 2)) {
|
|
const day = endArr[2] - 1;
|
|
endArr[2] = day < 10 ? "0" + day : day;
|
|
finishDate = endArr.join("-");
|
|
}
|
|
|
|
console.log("finishDate ------------", this.$refs);
|
|
let startRefVal = id + "@|@" + startDate;
|
|
let endRefVal = id + "@|@" + finishDate;
|
|
console.log(
|
|
"this.$refs[startRefVal] startRefVal------------",
|
|
this.$refs[startRefVal]
|
|
);
|
|
if (this.$refs[startRefVal] == undefined) {
|
|
return { left: 0 + "px", width: 0 + "px" };
|
|
}
|
|
startRef = this.$refs[startRefVal][0];
|
|
|
|
endRef = this.$refs[endRefVal][0];
|
|
|
|
const startLeft = startRef.offsetLeft;
|
|
|
|
const endWidth = endRef.offsetWidth;
|
|
|
|
const endLeft = endRef.offsetLeft;
|
|
const ganttWidth = endLeft - startLeft + endWidth;
|
|
|
|
return { left: startLeft + "px", width: ganttWidth + "px" };
|
|
},
|
|
|
|
setGantts(projects) {
|
|
console.log("进入渲染 setGantts projects-- ", JSON.stringify(projects));
|
|
projects.map((project) => {
|
|
let { finishDate, id, gantts } = project;
|
|
const gantt = this.getGanttStyle(project);
|
|
gantt.background = this.colors[project.mppStatus];
|
|
console.log("进入渲染 setGantts -- ", id, gantt);
|
|
if (gantts) {
|
|
gantts.push(gantt);
|
|
} else {
|
|
project.gantts = [gantt];
|
|
}
|
|
if (project.children.length > 0) {
|
|
// project.children = this.setGantts(project.children)
|
|
project.children && this.setGantts(project.children);
|
|
}
|
|
// return project
|
|
// project.children && this.setGantts(project.children);
|
|
});
|
|
},
|
|
increaseDate(date, delay) {
|
|
const timestamp =
|
|
new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24;
|
|
return new Date(timestamp)
|
|
.toISOString()
|
|
.replace(/-/g, "-")
|
|
.slice(0, 10);
|
|
},
|
|
getDays(date) {
|
|
const year = date.split("-")[0];
|
|
const month = +date.split("-")[1];
|
|
const large = [1, 3, 5, 7, 8, 10, 12];
|
|
const normal = [4, 6, 9, 11];
|
|
const small = [2];
|
|
let count = 0;
|
|
switch (true) {
|
|
case large.includes(month):
|
|
count = 31;
|
|
break;
|
|
case normal.includes(month):
|
|
count = 30;
|
|
break;
|
|
case small.includes(month):
|
|
count = year % 4 ? 28 : 29;
|
|
break;
|
|
}
|
|
return (() => {
|
|
const days = new Array(count)
|
|
.fill(0)
|
|
.map((item, index) => {
|
|
let num = index + 1;
|
|
let fulldate = date + (num < 10 ? "-0" + num : "-" + num);
|
|
return { num, date: fulldate };
|
|
})
|
|
.filter((item) => item.num % 2);
|
|
if (count === 28) {
|
|
days.push({ num: 28, date: date + "-28" });
|
|
} else if (count === 30) {
|
|
days.push({ num: 30, date: date + "-30" });
|
|
}
|
|
return days;
|
|
})();
|
|
},
|
|
handleOpen(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndex) {
|
|
this.openedIndex = 9999;
|
|
} else {
|
|
this.openedIndex = index;
|
|
}
|
|
var that = this;
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value];
|
|
that.setGantts(arr);
|
|
}, 300);
|
|
},
|
|
handleOpenSecond(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexSecond) {
|
|
this.openedIndexSecond = 9999;
|
|
} else {
|
|
this.openedIndexSecond = index;
|
|
}
|
|
var that = this;
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value];
|
|
that.setGantts(arr);
|
|
}, 300);
|
|
},
|
|
handleOpenThird(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexThird) {
|
|
this.openedIndexThird = 9999;
|
|
} else {
|
|
this.openedIndexThird = index;
|
|
}
|
|
var that = this;
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value];
|
|
that.setGantts(arr);
|
|
}, 300);
|
|
},
|
|
handleOpenFourth(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexFourth) {
|
|
this.openedIndexFourth = 9999;
|
|
} else {
|
|
this.openedIndexFourth = index;
|
|
}
|
|
var that = this;
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value];
|
|
that.setGantts(arr);
|
|
}, 300);
|
|
},
|
|
handleOpenFifth(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexFifth) {
|
|
this.openedIndexFifth = 9999;
|
|
} else {
|
|
this.openedIndexFifth = index;
|
|
}
|
|
var that = this;
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value];
|
|
that.setGantts(arr);
|
|
}, 300);
|
|
},
|
|
handleOpenSixth(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexSixth) {
|
|
this.openedIndexSixth = 9999;
|
|
} else {
|
|
this.openedIndexSixth = index;
|
|
}
|
|
var that = this;
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value];
|
|
that.setGantts(arr);
|
|
}, 300);
|
|
},
|
|
handleOpenSeven(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexSeven) {
|
|
this.openedIndexSeven = 9999;
|
|
} else {
|
|
this.openedIndexSeven = index;
|
|
}
|
|
var that = this;
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value];
|
|
that.setGantts(arr);
|
|
}, 300);
|
|
},
|
|
handleOpenEighth(value, index) {
|
|
// console.log(index)
|
|
// console.log(this.openedIndex)
|
|
if (index === this.openedIndexEighth) {
|
|
this.openedIndexEighth = 9999;
|
|
} else {
|
|
this.openedIndexEighth = index;
|
|
}
|
|
var that = this;
|
|
setTimeout(function() {
|
|
// console.log('进入 setTimeoutthis.setGantts', value)
|
|
let arr = [value];
|
|
that.setGantts(arr);
|
|
}, 300);
|
|
},
|
|
|
|
handleScroll(e) {
|
|
console.log("进入 handleScroll");
|
|
if (this.scrollTimer) {
|
|
clearTimeout(this.scrollTimer);
|
|
}
|
|
this.scrollTimer = setTimeout(() => {
|
|
this.scrollLeft = e.target.scrollLeft;
|
|
this.scrollTimer = null;
|
|
}, 100);
|
|
const fixedElement1 = document.querySelectorAll(".fixed_1");
|
|
const fixedElement2 = document.querySelectorAll(".fixed_2");
|
|
const fixedElement3 = document.querySelectorAll(".fixed_3");
|
|
console.log("fixedElement1 :" + fixedElement1);
|
|
console.log("fixedElement1 :" + fixedElement1[0]);
|
|
console.log("fixedElement1 :" + fixedElement1.length);
|
|
for (let i = 0; i < fixedElement1.length; i++) {
|
|
fixedElement1[i].style.left = e.target.scrollLeft + "px";
|
|
}
|
|
for (let i = 0; i < fixedElement2.length; i++) {
|
|
fixedElement2[i].style.left = e.target.scrollLeft + "px";
|
|
}
|
|
for (let i = 0; i < fixedElement3.length; i++) {
|
|
fixedElement3[i].style.left = e.target.scrollLeft + "px";
|
|
}
|
|
},
|
|
handleHover(e, item) {
|
|
console.log(666);
|
|
console.log("鼠标", e);
|
|
console.log(item);
|
|
// if (item.mppStatus == 0 || item.state == 5 || item.state == 6) {
|
|
const { clientX, clientY } = e;
|
|
const decreaseLeft = clientX - 80;
|
|
const decreaseTop = clientY - 250;
|
|
this.tooltipsStyle = {
|
|
left: decreaseLeft + this.scrollLeft + "px",
|
|
top: decreaseTop + "px",
|
|
display: "block",
|
|
};
|
|
this.tooltipContent = {
|
|
taskName: item.taskName,
|
|
mppStatus: item.mppStatus,
|
|
};
|
|
// }
|
|
},
|
|
handleLeave() {
|
|
this.tooltipsStyle.display = "none";
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.noData {
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
img {
|
|
position: absolute;
|
|
top: 25%;
|
|
left: 40%;
|
|
width: 15%;
|
|
}
|
|
}
|
|
.treeStyle() {
|
|
/deep/.el-tree {
|
|
font-size: 15px;
|
|
width: 100%;
|
|
background-color: transparent;
|
|
.el-tree-node {
|
|
white-space: normal;
|
|
&:focus > .el-tree-node__content {
|
|
background-color: transparent;
|
|
}
|
|
&.is-current > .el-tree-node__content {
|
|
background-color: rgba(81, 129, 246, 0.14);
|
|
color: #5181f6;
|
|
}
|
|
}
|
|
.el-tree-node__content {
|
|
// height: 32px;
|
|
padding: 7px 0;
|
|
height: auto;
|
|
line-height: 16px;
|
|
position: relative;
|
|
// margin-bottom: 7px;
|
|
&:hover {
|
|
background-color: rgba(81, 129, 246, 0.14);
|
|
color: #5181f6;
|
|
}
|
|
|
|
.videoName {
|
|
font-size: 14px;
|
|
}
|
|
.projectName {
|
|
font-size: 14px;
|
|
width: calc(100% - 55px);
|
|
display: inline-block;
|
|
}
|
|
.companyName2 {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
width: 192px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.el-tree-node__expand-icon {
|
|
font-size: 16px;
|
|
padding: 0 6px;
|
|
&.is-leaf {
|
|
color: transparent !important;
|
|
}
|
|
}
|
|
.treeTitle {
|
|
background-color: #f7f7f7;
|
|
margin-bottom: 10px;
|
|
}
|
|
}
|
|
}
|
|
.main-box {
|
|
display: flex;
|
|
align-items: center;
|
|
overflow-x: scroll;
|
|
width: 100%;
|
|
height: 100%;
|
|
.areaTreeBox {
|
|
display: flex;
|
|
position: relative;
|
|
.treeStyle();
|
|
}
|
|
.areaTreeInner {
|
|
// background-color: rgba(0, 0, 0, 0.7);
|
|
width: 300px;
|
|
margin-right: 20px;
|
|
padding: 20px 15px;
|
|
height: calc(100% - 40px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
.treeBox {
|
|
flex: 1;
|
|
background-color: rgba(216, 216, 216, 0.2);
|
|
padding-top: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
.gantt-box {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
height: 100%;
|
|
padding: 18px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 60px;
|
|
|
|
.left-content {
|
|
display: flex;
|
|
width: 65%;
|
|
height: 100%;
|
|
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
// width: calc(100% / 4);
|
|
margin-right: 30px;
|
|
|
|
.color-block {
|
|
margin-right: 10px;
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.label {
|
|
color: #29304d;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.gantt-chart {
|
|
height: calc(100% - 60px);
|
|
overflow: hidden;
|
|
|
|
.table {
|
|
position: relative;
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: #e6f2ff;
|
|
}
|
|
|
|
.thead {
|
|
width: max-content;
|
|
// border-left: 1px solid #0a769a;
|
|
|
|
.row {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.fixed_1,
|
|
.fixed_2,
|
|
.fixed_3 {
|
|
width: 200px;
|
|
position: relative;
|
|
background: #e2ebff;
|
|
z-index: 10;
|
|
}
|
|
|
|
.fixed_1 {
|
|
border-left: 1px solid #cbd1df;
|
|
left: 0;
|
|
}
|
|
|
|
.fixed_2 {
|
|
left: 0px;
|
|
}
|
|
|
|
.fixed_3 {
|
|
left: 0px;
|
|
}
|
|
|
|
.td {
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
background-color: #e2ebff;
|
|
color: #666666;
|
|
font-size: 16px;
|
|
border-top: 1px solid #cbd1df;
|
|
|
|
.date {
|
|
line-height: 21px;
|
|
border-left: 1px solid #cbd1df;
|
|
|
|
.month {
|
|
border-bottom: 1px solid #cbd1df;
|
|
}
|
|
|
|
.days {
|
|
display: flex;
|
|
|
|
.day {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
padding-left: 30px;
|
|
width: 200px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&:not(:nth-child(1)) {
|
|
width: 100px;
|
|
text-align: center;
|
|
}
|
|
|
|
&:nth-child(n + 4) {
|
|
width: 400px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tbody {
|
|
width: max-content;
|
|
// border-left: 1px solid #0a769a;
|
|
|
|
.row-groups {
|
|
position: relative;
|
|
height: 42px;
|
|
// &::before {
|
|
// content: "";
|
|
// position: absolute;
|
|
// left: 26px;
|
|
// top: 16px;
|
|
// width: 0;
|
|
// height: 0;
|
|
// border-top: 4px solid transparent;
|
|
// border-right: 4px solid transparent;
|
|
// border-bottom: 4px solid transparent;
|
|
// border-left: 4px solid #5be1f4;
|
|
// z-index: 99;
|
|
// }
|
|
|
|
&.open {
|
|
height: unset;
|
|
|
|
// &::before {
|
|
// border-left-color: transparent;
|
|
// border-top-color: #5be1f4;
|
|
// }
|
|
}
|
|
|
|
> .row .td:first-child {
|
|
user-select: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.row {
|
|
position: relative;
|
|
display: flex;
|
|
border-top: 1px solid #cbd1df;
|
|
|
|
.fixed_1,
|
|
.fixed_2,
|
|
.fixed_3 {
|
|
width: 200px;
|
|
position: relative;
|
|
background: #092945;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.fixed_1 {
|
|
left: 0;
|
|
border-left: 1px solid #cbd1df;
|
|
}
|
|
|
|
.fixed_2 {
|
|
left: 0px;
|
|
}
|
|
|
|
.fixed_3 {
|
|
left: 0px;
|
|
}
|
|
|
|
.td {
|
|
flex-shrink: 0;
|
|
box-sizing: border-box;
|
|
height: 42px;
|
|
line-height: 42px;
|
|
background-color: #fff;
|
|
border-right: 1px solid #cbd1df;
|
|
border-bottom: 1px solid #cbd1df;
|
|
border-top: 1px solid #cbd1df;
|
|
color: #333333;
|
|
font-size: 16px;
|
|
|
|
.grids {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.grid {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 100%;
|
|
|
|
&:not(:last-child) {
|
|
border-right: 1px solid #cbd1df;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
padding-left: 40px;
|
|
min-width: 200px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
&:not(:nth-child(1)) {
|
|
width: 100px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
}
|
|
|
|
&:nth-child(n + 4) {
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
flex-shrink: 0;
|
|
position: absolute;
|
|
top: calc(50% - 7px);
|
|
width: 20px;
|
|
height: 14px;
|
|
background: #557dee;
|
|
}
|
|
}
|
|
|
|
.children {
|
|
.td {
|
|
height: 38px;
|
|
line-height: 38px;
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltips {
|
|
text-align: center;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 10px 25px;
|
|
height: 25px;
|
|
border-radius: 5px;
|
|
background-color: #3d4258;
|
|
box-shadow: 1px 1px 10px #ccc;
|
|
color: #fff;
|
|
line-height: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.no-data {
|
|
height: calc(100% - 145px);
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/.tabs-option {
|
|
display: none;
|
|
}
|
|
</style>
|