2344 lines
63 KiB
Vue
2344 lines
63 KiB
Vue
<template>
|
|
<div class="political-outlook">
|
|
|
|
<div class="tabBox">
|
|
<div :class="{'danger':true,active: currentTab == 'reason' ? true : false}">
|
|
<span @click="handleChangeTab('reason')">影响进度计划因素</span>
|
|
</div>
|
|
<div :class="{'danger':true,active: currentTab == 'overview' ? true : false}">
|
|
<span @click="handleChangeTab('overview')">项目总览</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="content" v-if="currentTab == 'reason'">
|
|
<div class="top-data-show">
|
|
<div class="top-left">
|
|
<el-date-picker
|
|
v-model="dateTime"
|
|
type="month"
|
|
placeholder="请选择日期"
|
|
value-format="YYYY-MM"
|
|
:clearable="false"
|
|
@change="dateChange"
|
|
/>
|
|
<el-calendar v-model="calendarVal" style="width: 95%; margin-top: 15px" />
|
|
</div>
|
|
<div class="top-right">
|
|
<div class="right-title-data">
|
|
<div>
|
|
<span>{{ topStatisticData.dayNum }}</span>
|
|
<span>天</span>
|
|
</div>
|
|
<span>本月影响天数</span>
|
|
</div>
|
|
<div class="right-inspect-data">
|
|
<div class="inspect-data-item">
|
|
<div class="inspect-style inspect-one"></div>
|
|
<span>人为因素</span>
|
|
<span>{{ topStatisticData.data ? topStatisticData.data[0].count : 0 }}</span>
|
|
</div>
|
|
<div class="inspect-data-item">
|
|
<div class="inspect-style inspect-two"></div>
|
|
<span>环境因素</span>
|
|
<span>{{ topStatisticData.data ? topStatisticData.data[1].count : 0 }}</span>
|
|
</div>
|
|
<div class="inspect-data-item">
|
|
<div class="inspect-style inspect-three"></div>
|
|
<span>不可抗力因素</span>
|
|
<span>{{ topStatisticData.data ? topStatisticData.data[2].count : 0 }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="table-one">
|
|
<div class="tabList">
|
|
<div>序号</div>
|
|
<div>区域</div>
|
|
<div>单位名称</div>
|
|
<div>延期误工类型</div>
|
|
<div>延期误工原因</div>
|
|
<div>图片</div>
|
|
</div>
|
|
<el-scrollbar class="listBox" ref="refScrollbar">
|
|
<div v-for="(item, index) in partyMemberList" class="listStyle" :key="item.id">
|
|
<div>{{ index + 1 }}</div>
|
|
<div>{{ item.regionName }}</div>
|
|
<div>{{ item.enterpriseName }}</div>
|
|
<div>{{ delayEvent(item.delayEventType) }}</div>
|
|
<div>
|
|
<el-tooltip class="box-item" effect="dark" :content="item.delayEventReason" placement="top-start">
|
|
<span>{{ item.delayEventReason }}</span>
|
|
</el-tooltip>
|
|
</div>
|
|
<div class="list-img">
|
|
<!-- :src="BASEURL + '/image/' + item.image"
|
|
:preview-src-list="[BASEURL + '/image/' + item.image]" -->
|
|
<el-image
|
|
fit="contain"
|
|
class="el-img"
|
|
:src="
|
|
item.image && JSON.parse(item.image) instanceof Array
|
|
? JSON.parse(item.image)[0].url
|
|
: BASEURL + '/image/' + item.image
|
|
"
|
|
:preview-src-list="
|
|
item.image && JSON.parse(item.image) instanceof Array
|
|
? JSON.parse(item.image).map((ele) => ele.url)
|
|
: [BASEURL + '/image/' + item.image]
|
|
"
|
|
>
|
|
<template #error>
|
|
<el-image :src="noDataImage" :preview-src-list="[noDataImage]" fit="contain" class="el-no-img" alt="" />
|
|
</template>
|
|
</el-image>
|
|
<!-- <img :src="item.fieldAcquisitionUrl" alt="" srcset=""> -->
|
|
</div>
|
|
</div>
|
|
<div class="notoDta" v-if="partyMemberList.length == 0">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</el-scrollbar>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content" v-if="currentTab == 'overview'">
|
|
|
|
<div class="searchLine">
|
|
<el-select ref="selectRef" v-model="selectVal"
|
|
placeholder="请选择" style="width: 100%; margin-top: 10px"
|
|
size="medium" clearable @change="selectChange"
|
|
>
|
|
<el-option style="height: auto;width:100%;padding:0;" :value="[]">
|
|
<el-tree :data="level1CompanyData" node-key="id" ref="groupTree"
|
|
:default-expanded-keys="defaultExpandArr" :props="defaultProps"
|
|
:default-expand-all="false" @node-click="treeAreaClick"
|
|
>
|
|
</el-tree>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="gantt-box">
|
|
<div class="top-count">
|
|
<span>项目总进度：{{ progressData.projectTotalProgress || 0 }}%</span>
|
|
<span>承包商进度：{{ progressData.enterpriseTotalProgress || 0 }}%</span>
|
|
<span>项目总天数：{{ progressData.projectTotalDayNum || 0 }}天</span>
|
|
<span>项目剩余天数：{{ progressData.projectSurplusDayNum || 0 }}天</span>
|
|
</div>
|
|
<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 class="right-content">备注：更新（进度填报）内容后该甘特图将自动更新</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 #3e5a8d">完成日期</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 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
|
|
class="tip-show"
|
|
:style="{ height: tbodyHeight + 20 + 'px' }"
|
|
v-show="isShowTopTip(date, day.num)"
|
|
>
|
|
<img src="@/assets/images/lcbTip.png" />
|
|
<div class="dash-line"></div>
|
|
<div class="info-show">
|
|
<div class="info-show-title">查看里程碑节点</div>
|
|
<div class="info-show-content">
|
|
<span>日期：{{ isShowDate(date, day.num) }}</span>
|
|
<span
|
|
>里程碑：{{ isShowLcText(date, day.num) }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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.id)" style="color: #fff; padding-left: 25px">
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndex === p.id && p.children.length > 0"
|
|
:style="{ visibility: openedIndex === p.id && p.children.length > 0 ? 'visible' : 'hidden' }"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{ visibility: openedIndex != p.id && p.children.length > 0 ? 'visible' : 'hidden' }"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, 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-if="openedIndex === p.id" v-for="child in p.children" :key="'child-' + child.taskName">
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenSecond(child.id)" style="color: #fff; padding-left: 25px">
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndexSecond === child.id && child.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexSecond === child.id && child.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{ visibility: openedIndexSecond != child.id && child.children.length > 0 ? 'visible' : 'hidden' }"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, child.id + '@|@' + day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in child.gantts"
|
|
:key="index"
|
|
:title="child.taskName + ' ' + headerList[child.status].label"
|
|
></div>
|
|
<!-- @mouseenter="e => handleHover(e, child)"
|
|
@mouseleave="handleLeave" -->
|
|
</div>
|
|
|
|
<!-- 第三层 -->
|
|
<div
|
|
class="children"
|
|
v-if="openedIndexSecond === child.id"
|
|
v-for="second in child.children"
|
|
:key="'child-' + second.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenThird(second.id)" style="color: #fff; padding-left: 25px">
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndexThird === second.id && second.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexThird === second.id && second.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexThird != second.id && second.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, second.id + '@|@' + day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in second.gantts"
|
|
:key="index"
|
|
:title="second.taskName + ' ' + headerList[second.status].label"
|
|
></div>
|
|
<!-- @mouseenter="e => handleHover(e, second)"
|
|
@mouseleave="handleLeave" -->
|
|
</div>
|
|
|
|
<!-- 第四层 -->
|
|
<div
|
|
class="children"
|
|
v-if="openedIndexThird === second.id"
|
|
v-for="third in second.children"
|
|
:key="'child-' + third.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenFourth(third.id)" style="color: #fff; padding-left: 25px">
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndexFourth === third.id && third.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexFourth === third.id && third.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexFourth != third.id && third.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, third.id + '@|@' + day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in third.gantts"
|
|
:key="index"
|
|
:title="fouth.taskName + ' ' + headerList[fouth.status].label"
|
|
></div>
|
|
<!-- @mouseenter="e => handleHover(e, third)"
|
|
@mouseleave="handleLeave" -->
|
|
</div>
|
|
|
|
<!-- 第五层 -->
|
|
<div
|
|
class="children"
|
|
v-if="openedIndexFourth === third.id"
|
|
v-for="fouth in third.children"
|
|
:key="'child-' + fouth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenFifth(fouth.id)" style="color: #fff; padding-left: 25px">
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndexFifth === fouth.id && fouth.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexFifth === fouth.id && fouth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexFifth != fouth.id && fouth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, fouth.id + '@|@' + day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in fouth.gantts"
|
|
:key="index"
|
|
:title="fifth.taskName + ' ' + headerList[fifth.status].label"
|
|
></div>
|
|
<!-- @mouseenter="e => handleHover(e, fouth)"
|
|
@mouseleave="handleLeave" -->
|
|
</div>
|
|
|
|
<!-- 第六层 -->
|
|
<div
|
|
class="children"
|
|
v-if="openedIndexFifth === fouth.id"
|
|
v-for="fifth in fouth.children"
|
|
:key="'child-' + fifth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenSixth(fifth.id)" style="color: #fff; padding-left: 25px">
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndexSixth === fifth.id && fifth.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexSixth === fifth.id && fifth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexSixth != fifth.id && fifth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, fifth.id + '@|@' + day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in fifth.gantts"
|
|
:key="index"
|
|
:title="fifth.taskName + ' ' + headerList[fifth.status].label"
|
|
></div>
|
|
<!-- @mouseenter="e => handleHover(e, fifth)"
|
|
@mouseleave="handleLeave" -->
|
|
</div>
|
|
|
|
<!-- 第七层 -->
|
|
<div
|
|
class="children"
|
|
v-if="openedIndexSixth === fifth.id"
|
|
v-for="sixth in fifth.children"
|
|
:key="'child-' + sixth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" @click="handleOpenSeven(sixth.id)" style="color: #fff; padding-left: 25px">
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndexSixth === sixth.id && sixth.children.length > 0"
|
|
:style="{
|
|
visibility: openedIndexSixth === sixth.id && sixth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{
|
|
visibility: openedIndexSixth != sixth.id && sixth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, sixth.id + '@|@' + day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in sixth.gantts"
|
|
:key="index"
|
|
:title="sixth.taskName + ' ' + headerList[sixth.status].label"
|
|
></div>
|
|
<!-- @mouseenter="e => handleHover(e, sixth)"
|
|
@mouseleave="handleLeave" -->
|
|
</div>
|
|
|
|
<!-- 第八层 -->
|
|
<div
|
|
class="children"
|
|
v-if="openedIndexSeven === sixth.id"
|
|
v-for="seventh in sixth.children"
|
|
:key="'child-' + seventh.taskName"
|
|
>
|
|
<div class="row">
|
|
<div
|
|
class="td fixed_1"
|
|
@click="handleOpenEighth(seventh.id)"
|
|
style="color: #fff; padding-left: 25px"
|
|
>
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndexSeven === seventh.id && seventh.children.length > 0"
|
|
:style="{
|
|
visibility:
|
|
openedIndexSeven === seventh.id && seventh.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexSeven != seventh.id && seventh.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, seventh.id + '@|@' + day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in seventh.gantts"
|
|
:key="index"
|
|
:title="seventh.taskName + ' ' + headerList[seventh.status].label"
|
|
></div>
|
|
<!-- @mouseenter="e => handleHover(e, seventh)"
|
|
@mouseleave="handleLeave" -->
|
|
</div>
|
|
|
|
<!-- 第九层 -->
|
|
<div
|
|
class="children"
|
|
v-if="openedIndexEighth === seventh.id"
|
|
v-for="eighth in seventh.children"
|
|
:key="'child-' + eighth.taskName"
|
|
>
|
|
<div class="row">
|
|
<div class="td fixed_1" style="color: #fff; padding-left: 25px">
|
|
<el-icon
|
|
size="16"
|
|
v-if="openedIndexEighth === eighth.id && eighth.children.length > 0"
|
|
:style="{
|
|
visibility:
|
|
openedIndexEighth === eighth.id && eighth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-bottom
|
|
/></el-icon>
|
|
<el-icon
|
|
size="16"
|
|
v-else
|
|
:style="{
|
|
visibility:
|
|
openedIndexEighth != eighth.id && eighth.children.length > 0 ? 'visible' : 'hidden'
|
|
}"
|
|
><caret-right
|
|
/></el-icon>
|
|
<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="(el: any) => setItemRef(el, eighth.id + '@|@' + day.date)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="progress"
|
|
:style="gantt"
|
|
v-for="(gantt, index) in eighth.gantts"
|
|
:key="index"
|
|
:title="eighth.taskName + ' ' + headerList[eighth.status].label"
|
|
></div>
|
|
<!-- @mouseenter="e => handleHover(e, eighth)"
|
|
@mouseleave="handleLeave" -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tooltips" :style="tooltipsStyle">
|
|
{{ tooltipContent.taskName }}
|
|
<span>
|
|
{{
|
|
tooltipContent.status == 0
|
|
? "未开始"
|
|
: tooltipContent.status == 1
|
|
? "进行中"
|
|
: tooltipContent.status == 2
|
|
? "已完成"
|
|
: "已逾期"
|
|
}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="no-data" v-else>
|
|
<img src="@/assets/images/noData.png" alt="notData" />
|
|
<div>暂无数据</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, watch, nextTick,reactive,computed, onBeforeMount } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { GlobalStore } from "@/stores";
|
|
import { getDelayEventTypeApi, getProgressContentApi,
|
|
getCountTaskProgressApi,getQualityRegionListApi,selectHierarchyEnterpriseListApi,getXzParentChildTaskListApi,getXzMilestoneListApi
|
|
} from "@/api/modules/agjtCommandApi";
|
|
import noDataImage from "@/assets/images/vehicleManagement/car.png";
|
|
import moment from "moment";
|
|
const store = GlobalStore();
|
|
const props = defineProps(["tip"]);
|
|
const BASEURL = import.meta.env.VITE_API_URL;
|
|
const dateTime: any = ref(null);
|
|
const calendarVal: any = ref();
|
|
let pageNo = ref(1 as any);
|
|
let moreScroll = ref(true as any);
|
|
const refScrollbar = ref(null as any); // 绑定到滚动的盒子上
|
|
const tableParams = ref({
|
|
calendarVal: ""
|
|
});
|
|
|
|
//tab控制属性
|
|
const currentTab = ref('reason' as any)
|
|
function handleChangeTab(val: any){
|
|
currentTab.value = val
|
|
if(currentTab.value == 'reason'){
|
|
partyMemberList.value = []
|
|
pageNo.value = 1
|
|
}else{
|
|
treeData.value = ''
|
|
selectVal.value = '';
|
|
getHierarchyEnterpriseList()
|
|
// getCountFn()
|
|
// getDataList()
|
|
}
|
|
}
|
|
|
|
const partyMemberList = ref([] as any[]);
|
|
const topStatisticData = ref({} as any);
|
|
const delayEvent = (type: string) => {
|
|
const arrType = ["人为因素", "环境因素", "不可抵抗因素"];
|
|
const arr = type.split(",");
|
|
return arr.map((item: any) => arrType[item - 1]).join("、");
|
|
};
|
|
// 日期切换
|
|
const dateChange = async () => {
|
|
calendarVal.value = dateTime.value;
|
|
getDelayEventTypeFn();
|
|
};
|
|
// 获取顶部数据
|
|
const getDelayEventTypeFn = async () => {
|
|
let requestData: any = {
|
|
projectSn: store.sn,
|
|
auditType: 2,
|
|
month: dateTime.value
|
|
};
|
|
const res: any = await getDelayEventTypeApi(requestData);
|
|
topStatisticData.value = res.result;
|
|
};
|
|
//获取数据
|
|
const getMemberCountList = async (tip: any) => {
|
|
let requestData: any = {
|
|
projectSn: store.sn,
|
|
auditType: 2,
|
|
date: tableParams.value.calendarVal,
|
|
pageNo: tip == "search" ? 1 : pageNo.value,
|
|
pageSize: 100,
|
|
hasDelayEvent: 1
|
|
};
|
|
const res: any = await getProgressContentApi(requestData);
|
|
if (tip == "more") {
|
|
partyMemberList.value = partyMemberList.value.concat(res.result.records);
|
|
} else {
|
|
partyMemberList.value = res.result.records;
|
|
}
|
|
// 为图片拼接IP
|
|
// partyMemberList.value.map((item:any) => {
|
|
// item.fieldAcquisitionUrl = BASEURL + '/image/' + item.fieldAcquisitionUrl
|
|
// })
|
|
if (res.result.pages == pageNo.value) {
|
|
moreScroll.value = false;
|
|
} else {
|
|
pageNo.value = pageNo.value + 1;
|
|
}
|
|
};
|
|
watch(
|
|
() => calendarVal.value,
|
|
newVal => {
|
|
if (newVal) {
|
|
// props.xData = newVal;
|
|
tableParams.value.calendarVal = moment(newVal).format("YYYY-MM-DD");
|
|
dateTime.value = moment(newVal).format("YYYY-MM-DD");
|
|
getMemberCountList("search");
|
|
}
|
|
}
|
|
);
|
|
const state = reactive({
|
|
projects: [],
|
|
dateList: [],
|
|
}as any);
|
|
|
|
const dates = computed(() => {
|
|
let dates:any = [];
|
|
const mapDates = (data:any) => {
|
|
data.map((p:any) => {
|
|
dates.push(p.startDate);
|
|
dates.push(p.finishDate);
|
|
p.children && mapDates(p.children);
|
|
});
|
|
};
|
|
mapDates(state.projects);
|
|
dates = dates.map((date:any) => date.slice(0, 7)).sort();
|
|
dates = [...new Set(dates)];
|
|
// 计算两个日期之间相差的月数
|
|
let startDate = moment(dates[0]);
|
|
let endDate = moment(dates[dates.length - 1]);
|
|
if (dates.length > 0) {
|
|
let countArr = [dates[0]];
|
|
const months = endDate.diff(startDate,'months');
|
|
for (let i = 0; i < months; i++) {
|
|
countArr.push(startDate.add(1,'month').format('YYYY-MM'));
|
|
}
|
|
return countArr;
|
|
} else {
|
|
return dates;
|
|
}
|
|
});
|
|
|
|
watch(dates, (newDates) => {
|
|
state.dateList = newDates;
|
|
}, { immediate: true });
|
|
|
|
//甘特图代码起始位置
|
|
const selectVal = ref(''as any)
|
|
const level1CompanyData = ref([] as any);
|
|
const defaultExpandArr = ref([]as any)
|
|
const defaultProps = ref({
|
|
children: "children",
|
|
label: "enterpriseName",
|
|
}as any)
|
|
const treeData = ref({} as any);
|
|
const selectRef = ref();
|
|
const groupTree = ref();
|
|
const progressData = ref ({
|
|
projectSurplusDayNum: 0,
|
|
projectTotalDayNum: 0,
|
|
projectTotalProgress: 0,
|
|
enterpriseTotalProgress: 0,
|
|
}as any)
|
|
|
|
// 获取当前项目总进度
|
|
const getCountFn = async() => {
|
|
let requestData = {
|
|
projectSn: store.sn,
|
|
enterpriseId: treeData.value.id,
|
|
};
|
|
await getCountTaskProgressApi(requestData).then((res:any) => {
|
|
if (res.code == 200 && res.result) {
|
|
progressData.value = res.result;
|
|
}
|
|
});
|
|
}
|
|
|
|
const selectChange = async(val:any) => {
|
|
if (!val) {
|
|
selectVal.value = "";
|
|
// areaSelectVal.value = "";
|
|
treeData.value = "";
|
|
getCountFn()
|
|
getDataList();
|
|
}
|
|
}
|
|
// 树形控件点击
|
|
const treeAreaClick = async(data:any) => {
|
|
if (data.status == 1) {
|
|
ElMessage({
|
|
message:"无法选中已禁用组织",
|
|
type:"warning"
|
|
});
|
|
} else {
|
|
selectVal.value = data.enterpriseName;
|
|
treeData.value = data;
|
|
selectRef.value.blur();
|
|
getCountFn()
|
|
getDataList();
|
|
}
|
|
}
|
|
// 获取承包商列表
|
|
const getHierarchyEnterpriseList = async() => {
|
|
let data = {
|
|
projectSn: store.sn,
|
|
};
|
|
selectHierarchyEnterpriseListApi(data).then((res:any) => {
|
|
console.log(res, "承包商列表");
|
|
if (res.code == 200) {
|
|
level1CompanyData.value = res.result;
|
|
if (level1CompanyData.value && level1CompanyData.value.length > 0) {
|
|
nextTick(() => {
|
|
// treeData.value = level1CompanyData.value[0];
|
|
// selectVal.value = level1CompanyData.value[0].enterpriseName
|
|
// groupTree.value.setCurrentKey(level1CompanyData.value[0].id);
|
|
getDataList();//123
|
|
getCountFn();//123
|
|
});
|
|
}
|
|
// this.enterpriseTreeData = res.result
|
|
}
|
|
});
|
|
}
|
|
|
|
// 甘特图详情弹窗
|
|
const ganttDetailRef = ref();
|
|
const openGanttDialog = (type: any) => {
|
|
ganttDetailRef.value.openDialog(type);
|
|
// console.log(ganttDetailRef.value);
|
|
};
|
|
|
|
// const activeValue = ref(store.activeType);
|
|
const searchSn = ref("" as any);
|
|
const headerList = reactive([
|
|
{ label: "未开始", color: "#35e5fd" },
|
|
{ label: "进行中", color: "#f1d520" },
|
|
{ label: "已完成", color: "#4fd389" },
|
|
{ label: "已逾期", color: "#F80840" }
|
|
// { label: "逾期未开始", color: "#F80840" },
|
|
// { label: "逾期进行中", color: "#fc6f8e" },
|
|
// { label: "逾期已完成", color: "#C13F5B" }
|
|
]);
|
|
const colors = ref(["#35e5fd", "#f1d520", "#4fd389", "#F80840"] as any);
|
|
const projects = ref([] as any);
|
|
// const projects = ref([
|
|
// {
|
|
// pName: "抹灰工程1",
|
|
// startTime: "2023/05/29",
|
|
// endTime: "2023/07/29",
|
|
// status: 1,
|
|
// delay: 0,
|
|
// gantts: [],
|
|
// children: [
|
|
// {
|
|
// pName: "抹灰工程1-1",
|
|
// startTime: "2023/05/29",
|
|
// endTime: "2023/07/29",
|
|
// status: 1,
|
|
// delay: 0,
|
|
// gantts: []
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// pName: "抹灰工程2",
|
|
// startTime: "2023/06/29",
|
|
// endTime: "2023/08/29",
|
|
// status: 1,
|
|
// delay: 0,
|
|
// gantts: [],
|
|
// children: [
|
|
// {
|
|
// pName: "抹灰工程2-1",
|
|
// startTime: "2023/06/29",
|
|
// endTime: "2023/07/29",
|
|
// status: 1,
|
|
// delay: 0,
|
|
// gantts: []
|
|
// }
|
|
// ]
|
|
// },
|
|
// {
|
|
// pName: "抹灰工程3",
|
|
// startTime: "2023/07/29",
|
|
// endTime: "2023/09/29",
|
|
// status: 1,
|
|
// delay: 0,
|
|
// gantts: [],
|
|
// children: [
|
|
// {
|
|
// pName: "抹灰工程3-1",
|
|
// startTime: "2023/07/29",
|
|
// endTime: "2023/10/29",
|
|
// status: 1,
|
|
// delay: 0,
|
|
// gantts: []
|
|
// }
|
|
// ]
|
|
// }
|
|
// ]);
|
|
|
|
const itemRefs = [];
|
|
// 点击抽屉的工程名称更新页面
|
|
const onUpdate = async () => {
|
|
getDataList();
|
|
ElMessage.success("页面已更新");
|
|
};
|
|
const setItemRef = (el: any, va: any) => {
|
|
if (el) {
|
|
const b = va.split("@|@");
|
|
|
|
const dataItem = {
|
|
refData: va,
|
|
item: el
|
|
};
|
|
if (itemRefs.length == 0) {
|
|
const itemList = [];
|
|
itemList.push(dataItem);
|
|
const data = {
|
|
name: b[0],
|
|
itemS: itemList
|
|
};
|
|
itemRefs.push(data);
|
|
} else {
|
|
let isCheck = true;
|
|
for (let index = 0; index < itemRefs.length; index++) {
|
|
const element = itemRefs[index];
|
|
if (element.name === b) {
|
|
isCheck = false;
|
|
element.itemS.push(dataItem);
|
|
break;
|
|
}
|
|
}
|
|
if (isCheck) {
|
|
const itemList = [];
|
|
itemList.push(dataItem);
|
|
const data = {
|
|
name: b[0],
|
|
itemS: itemList
|
|
};
|
|
itemRefs.push(data);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
const scrollLeft = ref(0);
|
|
const scrollTimer = ref(0);
|
|
const openedIndex = ref(9999);
|
|
const openedIndexSecond = ref(9999);
|
|
const openedIndexThird = ref(9999);
|
|
const openedIndexFourth = ref(9999);
|
|
const openedIndexFifth = ref(9999);
|
|
const openedIndexSixth = ref(9999);
|
|
const openedIndexSeven = ref(9999);
|
|
const openedIndexEighth = ref(9999);
|
|
const openedIndexNinth = ref(9999);
|
|
const openedIndexTenth = ref(9999);
|
|
|
|
const tooltipsStyle = ref({
|
|
display: "none",
|
|
left: 0,
|
|
top: 0
|
|
});
|
|
const tooltipContent = ref({
|
|
day: 0,
|
|
name: ""
|
|
});
|
|
// const getDataList = async () => {
|
|
// let requestData = {};
|
|
// if (activeValue.value == "eng") {
|
|
// requestData.engineeringSn = searchSn.value;
|
|
// } else if (activeValue.value == "project") {
|
|
// requestData.projectSn = searchSn.value;
|
|
// }
|
|
// if (requestData.engineeringSn || requestData.projectSn) {
|
|
// const res = await getParentChildTaskListApi(requestData);
|
|
// console.log(res);
|
|
// if (res) {
|
|
// const arr = dealArr(res.result);
|
|
// projects.value = arr;
|
|
// }
|
|
// } else {
|
|
// projects.value = [];
|
|
// }
|
|
// setTimeout(function () {
|
|
// setGantts();
|
|
// }, 300);
|
|
// };
|
|
|
|
function getDataList() {
|
|
getXzParentChildTaskListApi({
|
|
projectSn: searchSn.value,
|
|
enterpriseId: treeData.value.id
|
|
}).then(res => {
|
|
projects.value = dealArr(res.result);
|
|
// console.log("获取甘特图数据", projects.value);
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
const dealArr = arr => {
|
|
arr.map(item => {
|
|
item.gantts = [];
|
|
item.delay = 0;
|
|
if (item.children && item.children.length > 0) {
|
|
dealArr(item.children);
|
|
}
|
|
});
|
|
return arr;
|
|
};
|
|
|
|
// 监听右侧抽屉值的变化
|
|
watch(
|
|
() => store.sn,
|
|
n => {
|
|
searchSn.value = store.sn;
|
|
onUpdate();
|
|
}
|
|
);
|
|
// 监听右侧抽屉类型的变化
|
|
onBeforeMount(() => {
|
|
searchSn.value = store.sn;
|
|
});
|
|
const getGanttStyle = (project: any) => {
|
|
// console.log("进入 getGanttStyle --- ", project);
|
|
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(dateList, "finishDate ------------", itemRefs.length);
|
|
// console.log(id, "甘特图");
|
|
|
|
for (let index = 0; index < itemRefs.length; index++) {
|
|
const data = itemRefs[index];
|
|
// console.log(data, "循环里面甘特图", id);
|
|
if (data.name === id) {
|
|
for (let index = 0; index < data.itemS.length; index++) {
|
|
const element = data.itemS[index];
|
|
if (element.refData === id + "@|@" + startDate) {
|
|
startRef = data.itemS[index].item;
|
|
}
|
|
|
|
if (element.refData === id + "@|@" + finishDate) {
|
|
endRef = data.itemS[index].item;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// console.log(startRef, endRef, "甘特图");
|
|
|
|
const startLeft = startRef?.offsetLeft;
|
|
|
|
const endWidth = endRef?.offsetWidth;
|
|
|
|
const endLeft = endRef?.offsetLeft;
|
|
const ganttWidth = endLeft - startLeft + endWidth;
|
|
|
|
return { left: startLeft + "px", width: ganttWidth + "px" };
|
|
};
|
|
const setGantts = () => {
|
|
const configGantts = (projects: any) => {
|
|
// console.log("进入渲染 setGantts -- ", projects);
|
|
projects.map(project => {
|
|
let { finishDate, name, gantts } = project;
|
|
const gantt = getGanttStyle(project);
|
|
// gantt.background = colors.value[project.state - 1];
|
|
gantt.background = colors.value[project.mppStatus];
|
|
if (gantts) {
|
|
gantts.push(gantt);
|
|
} else {
|
|
project.gantts = [gantt];
|
|
}
|
|
if (project.delay) {
|
|
const delayStartTime = increaseDate(finishDate, 1);
|
|
const delayEndTime = increaseDate(finishDate, project.delay);
|
|
const gantt = getGanttStyle({
|
|
startDate: delayStartTime,
|
|
finishDate: delayEndTime,
|
|
name
|
|
});
|
|
gantt.background = colors.value[3];
|
|
gantts.push(gantt);
|
|
}
|
|
project.children && configGantts(project.children);
|
|
});
|
|
};
|
|
configGantts(projects.value);
|
|
};
|
|
const increaseDate = (date: any, delay: any) => {
|
|
const timestamp = new Date(date).getTime() + (delay + 1) * 1000 * 60 * 60 * 24;
|
|
return new Date(timestamp).toISOString().replace(/-/g, "-").slice(0, 10);
|
|
};
|
|
const getDays = (date: any) => {
|
|
// 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;
|
|
// })();
|
|
|
|
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;
|
|
})();
|
|
|
|
|
|
};
|
|
const handleOpen = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndex.value) {
|
|
openedIndex.value = 9999;
|
|
} else {
|
|
openedIndex.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
|
|
const handleOpenSecond = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexSecond.value) {
|
|
openedIndexSecond.value = 9999;
|
|
} else {
|
|
openedIndexSecond.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
const handleOpenThird = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexThird.value) {
|
|
openedIndexThird.value = 9999;
|
|
} else {
|
|
openedIndexThird.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
const handleOpenFourth = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexFourth.value) {
|
|
openedIndexFourth.value = 9999;
|
|
} else {
|
|
openedIndexFourth.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
const handleOpenFifth = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexFifth.value) {
|
|
openedIndexFifth.value = 9999;
|
|
} else {
|
|
openedIndexFifth.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
|
|
const handleOpenSixth = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexSixth.value) {
|
|
openedIndexSixth.value = 9999;
|
|
} else {
|
|
openedIndexSixth.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
|
|
const handleOpenSeven = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexSeven.value) {
|
|
openedIndexSeven.value = 9999;
|
|
} else {
|
|
openedIndexSeven.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
const handleOpenEighth = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexEighth.value) {
|
|
openedIndexEighth.value = 9999;
|
|
} else {
|
|
openedIndexEighth.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
const handleOpenNinth = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexNinth.value) {
|
|
openedIndexNinth.value = 9999;
|
|
} else {
|
|
openedIndexNinth.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
const handleOpenTenth = (index: any) => {
|
|
// console.log(666);
|
|
console.log(index);
|
|
// console.log(openedIndex.value);
|
|
if (index === openedIndexTenth.value) {
|
|
openedIndexTenth.value = 9999;
|
|
} else {
|
|
openedIndexTenth.value = index;
|
|
}
|
|
setTimeout(function () {
|
|
setGantts();
|
|
}, 300);
|
|
};
|
|
|
|
//获取里程碑开始代码
|
|
const listData = ref([]as any)
|
|
const isShowDate = async(date:any, day:any) => {
|
|
let dateEntiry = "";
|
|
if (day < 10) {
|
|
dateEntiry = date + "-0" + day;
|
|
} else {
|
|
dateEntiry = date + "-" + day;
|
|
}
|
|
return dateEntiry;
|
|
}
|
|
const isShowLcText = async (date:any, day:any) => {
|
|
let dateEntiry = "";
|
|
if (day < 10) {
|
|
dateEntiry = date + "-0" + day;
|
|
} else {
|
|
dateEntiry = date + "-" + day;
|
|
}
|
|
let item = listData.value.find((item:any) => {
|
|
return item.milestoneTime == dateEntiry;
|
|
});
|
|
return item ? item.milestoneName : "";
|
|
}
|
|
//获取里程碑列表数据
|
|
const getXzMilestoneListData = async () => {
|
|
let data = {
|
|
projectSn: store.sn,
|
|
enterpriseId: treeData.id,
|
|
};
|
|
getXzMilestoneListApi(data).then((res:any) => {
|
|
if (res.code == 200) {
|
|
listData.value = res.result;
|
|
}
|
|
});
|
|
}
|
|
const isShowTopTip = async(date:any, day:any) => {
|
|
let dateEntiry = "";
|
|
if (day < 10) {
|
|
dateEntiry = date + "-0" + day;
|
|
} else {
|
|
dateEntiry = date + "-" + day;
|
|
}
|
|
let index = listData.value.findIndex((item:any) => {
|
|
if (item.milestoneTime == dateEntiry) {
|
|
console.log(item.milestoneTime);
|
|
console.log(dateEntiry);
|
|
}
|
|
return item.milestoneTime == dateEntiry;
|
|
});
|
|
return index != -1 ? true : false;
|
|
}
|
|
|
|
//获取里程碑结束代码
|
|
|
|
const handleScroll = (e: any) => {
|
|
if (scrollTimer.value) {
|
|
clearTimeout(scrollTimer.value);
|
|
}
|
|
scrollTimer.value = setTimeout(() => {
|
|
scrollLeft.value = e.target.scrollLeft;
|
|
scrollTimer.value = null;
|
|
}, 100);
|
|
const fixedElement1 = document.querySelectorAll(".fixed_1");
|
|
const fixedElement2 = document.querySelectorAll(".fixed_2");
|
|
const fixedElement3 = document.querySelectorAll(".fixed_3");
|
|
console.log(fixedElement1);
|
|
// console.log(fixedElement1[0]);
|
|
// console.log(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";
|
|
}
|
|
};
|
|
const handleHover = (e: any, item: any) => {
|
|
// console.log(666);
|
|
console.log(e);
|
|
console.log(item);
|
|
if (item.state == 4 || item.state == 5 || item.state == 6) {
|
|
const { clientX, clientY } = e;
|
|
const decreaseLeft = clientX - 380;
|
|
const decreaseTop = clientY - 200;
|
|
tooltipsStyle.value = {
|
|
left: decreaseLeft + scrollLeft.value + "px",
|
|
top: decreaseTop + "px",
|
|
display: "block"
|
|
};
|
|
tooltipContent.value = {
|
|
taskName: item.taskName,
|
|
status: item.status
|
|
};
|
|
}
|
|
};
|
|
const handleLeave = () => {
|
|
tooltipsStyle.value.display = "none";
|
|
};
|
|
const dateList = computed(() => {
|
|
let dates = [];
|
|
const mapDates = data => {
|
|
data.map(p => {
|
|
dates.push(p.startDate);
|
|
dates.push(p.finishDate);
|
|
p.children && mapDates(p.children);
|
|
});
|
|
};
|
|
mapDates(projects.value);
|
|
dates = dates.map(date => date.slice(0, 7)).sort();
|
|
dates = [...new Set(dates)];
|
|
console.log("dateList----", dates);
|
|
return dates;
|
|
});
|
|
//甘特图代码结束位置
|
|
|
|
onMounted(async () => {
|
|
dateTime.value = moment(new Date()).format("YYYY-MM");
|
|
calendarVal.value = moment(new Date()).format("YYYY-MM-DD");
|
|
await getDelayEventTypeFn();
|
|
await getMemberCountList("search");
|
|
// refScrollbar.value.wrapRef.addEventListener("scroll", (e: any) => {
|
|
// const scrollTop = e.target.scrollTop;
|
|
// const scrollHeight = e.target.scrollHeight;
|
|
// const clientHeight = e.target.clientHeight;
|
|
// // 向上加载更多
|
|
// if (scrollTop >= scrollHeight - clientHeight - 1) {
|
|
// if (moreScroll.value) {
|
|
// getMemberCountList("more");
|
|
// }
|
|
// }
|
|
// });
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@mixin flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.political-outlook {
|
|
height: 97%;
|
|
margin: 0 60px;
|
|
.tabBox{
|
|
position: absolute;
|
|
top: 6%;
|
|
left: 3.5%;
|
|
width:350px;
|
|
height:50px;
|
|
// background-color: #fff;
|
|
color: gray;
|
|
font-weight: bold;
|
|
font-size: 20px;
|
|
font-style: italic;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
.danger{
|
|
width:50%;
|
|
height:100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.special{
|
|
width:50%;
|
|
height:100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
.active{
|
|
color:#fff
|
|
}
|
|
}
|
|
.content {
|
|
height: 95%;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
// background: url("@/assets/images/cardImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 20px 15px;
|
|
.searchLine{
|
|
color:#fff;
|
|
position: absolute;
|
|
top:14%;
|
|
left:7.5%;
|
|
}
|
|
.top-statistics {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
grid-gap: 20px;
|
|
color: white;
|
|
margin: 0 5%;
|
|
.statistics-item {
|
|
width: 240px;
|
|
height: 95px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
.title {
|
|
position: absolute;
|
|
top: 4%;
|
|
left: 4%;
|
|
}
|
|
&-content {
|
|
display: inline-block;
|
|
width: 50%;
|
|
height: auto;
|
|
text-indent: 1.5em;
|
|
}
|
|
&-content:nth-child(2) {
|
|
margin-top: 8%;
|
|
}
|
|
&-content:nth-child(3) {
|
|
margin-top: 8%;
|
|
}
|
|
}
|
|
.statistics-item:nth-child(1) {
|
|
background: url("@/assets/images/commandScreen/bg6.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.statistics-item:nth-child(2) {
|
|
background: url("@/assets/images/commandScreen/bg2.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.statistics-item:nth-child(3) {
|
|
background: url("@/assets/images/commandScreen/bg4.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.statistics-item:nth-child(4) {
|
|
background: url("@/assets/images/commandScreen/bg1.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.statistics-item:nth-child(5) {
|
|
background: url("@/assets/images/commandScreen/bg3.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.statistics-item:nth-child(6) {
|
|
background: url("@/assets/images/commandScreen/bg5.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
.top-data-show {
|
|
display: flex;
|
|
.top-left {
|
|
width: 60%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
:deep() {
|
|
.el-calendar {
|
|
background-color: transparent;
|
|
}
|
|
.el-calendar__header {
|
|
display: none;
|
|
}
|
|
.el-calendar__body {
|
|
padding: 0px;
|
|
}
|
|
.el-calendar-table thead {
|
|
background-color: #143a85;
|
|
th {
|
|
color: white;
|
|
}
|
|
th:nth-child(1) {
|
|
border-left: 1px solid #284a8e;
|
|
}
|
|
th:last-child {
|
|
border-right: 1px solid #284a8e;
|
|
}
|
|
}
|
|
.el-calendar-table .el-calendar-day:hover {
|
|
color: white;
|
|
background-color: #143a85;
|
|
}
|
|
.el-calendar-table td.is-today,
|
|
.el-calendar-table td.is-selected {
|
|
color: white;
|
|
background-color: #143a85;
|
|
}
|
|
.el-calendar-table tbody {
|
|
.el-calendar-table__row {
|
|
.prev,
|
|
.current,
|
|
.next {
|
|
border-color: #35538c;
|
|
color: white;
|
|
.el-calendar-day {
|
|
text-align: center;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.top-right {
|
|
width: 40%;
|
|
color: white;
|
|
.right-title-data {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
> div {
|
|
span:nth-child(1) {
|
|
font-size: 18px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
> span {
|
|
margin-top: 5px;
|
|
}
|
|
}
|
|
.right-inspect-data {
|
|
margin-top: 12%;
|
|
.inspect-data-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 3%;
|
|
.inspect-style {
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 1px solid #fff;
|
|
margin-right: 5px;
|
|
margin-top: 2px;
|
|
}
|
|
.inspect-one {
|
|
background-color: #ee1a1a;
|
|
}
|
|
.inspect-two {
|
|
background-color: #079caf;
|
|
}
|
|
.inspect-three {
|
|
background-color: #ffdf00;
|
|
}
|
|
> span:nth-child(2) {
|
|
margin-right: auto;
|
|
}
|
|
> span:nth-child(3) {
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.table-one {
|
|
height: 50%;
|
|
.tabList {
|
|
display: flex;
|
|
// width: 100%;
|
|
height: 10%;
|
|
background: url("@/assets/images/vehicleManagement/ListTitleImg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
// position: absolute;
|
|
left: 75.5%;
|
|
top: 75%;
|
|
color: #ccc;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
line-height: 30px;
|
|
align-items: center;
|
|
margin-top: 1%;
|
|
div {
|
|
text-align: center;
|
|
width: 17%;
|
|
}
|
|
}
|
|
.listBox {
|
|
height: 69%;
|
|
.listStyle {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
margin-bottom: 5px;
|
|
.list-img {
|
|
.el-img {
|
|
width: 30px;
|
|
height: 30px;
|
|
img {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.el-no-img {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
div {
|
|
width: 17%;
|
|
white-space: nowrap; //单行
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
.listStyle:hover {
|
|
background: #091f3f;
|
|
}
|
|
}
|
|
}
|
|
:deep() {
|
|
.el-tabs__item {
|
|
color: white;
|
|
}
|
|
.el-tabs__item.is-active {
|
|
color: var(--el-color-primary);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.gantt-box {
|
|
box-sizing: border-box;
|
|
min-width: 1120px;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 18px;
|
|
// background: #ffffff;
|
|
border-radius: 8px;
|
|
.top-count {
|
|
color: #fff;
|
|
font-size: 16px;
|
|
position: absolute;
|
|
left: 25%;
|
|
top: 16.5%;
|
|
span {
|
|
margin-right: 50px;
|
|
}
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
height: 60px;
|
|
|
|
.left-content {
|
|
display: flex;
|
|
width: 65%;
|
|
height: 105%;
|
|
transform: translateX(-10px);
|
|
.item {
|
|
display: flex;
|
|
align-items: center;
|
|
// width: calc(100% / 4);
|
|
margin-right: 50px;
|
|
.color-block {
|
|
margin-right: 10px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.label {
|
|
color: #fff;
|
|
font-size: 14px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-content {
|
|
font-size: 16px;
|
|
line-height: 60px;
|
|
color: #cccccc;
|
|
}
|
|
}
|
|
.gantt-chart {
|
|
height: calc(90% - 45px);
|
|
transform: translateX(-10px);
|
|
overflow: hidden;
|
|
.table {
|
|
position: relative;
|
|
height: 100%;
|
|
overflow-x: auto;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&::-webkit-scrollbar-thumb {
|
|
border-radius: 10px;
|
|
background-color: #d3d3d3;
|
|
}
|
|
|
|
.thead {
|
|
width: max-content;
|
|
// background-color: rgba(64, 94, 151, 1);
|
|
// height: 12%;
|
|
// border-left: 1px solid #0a769a;
|
|
|
|
.row {
|
|
display: flex;
|
|
position: relative;
|
|
.fixed_1,
|
|
.fixed_2,
|
|
.fixed_3 {
|
|
width: 200px;
|
|
position: relative;
|
|
z-index: 10;
|
|
// background: #e2ebff;
|
|
}
|
|
.fixed_1 {
|
|
border-left: 1px solid #3e5a8d;
|
|
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: #1e3862;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
border-top: 1px solid #3e5a8d;
|
|
.date {
|
|
line-height: 21px;
|
|
border-left: 1px solid #3e5a8d;
|
|
// background-color: #fff;
|
|
.month {
|
|
border-bottom: 1px solid #3e5a8d;
|
|
}
|
|
|
|
.days {
|
|
display: flex;
|
|
|
|
.day {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
.date {
|
|
line-height: 21px;
|
|
border-left: 1px solid #cbd1df;
|
|
|
|
.month {
|
|
border-bottom: 1px solid #cbd1df;
|
|
}
|
|
|
|
.days {
|
|
display: flex;
|
|
|
|
.day {
|
|
// flex: 1;
|
|
width: 26px;
|
|
position: relative;
|
|
text-align: left;
|
|
.tip-show {
|
|
position: absolute;
|
|
top: -20px;
|
|
left: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// align-items: center;
|
|
align-items: flex-end;
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
// .tip-box {
|
|
// width: 180px;
|
|
// height: 150px;
|
|
// position: absolute;
|
|
// z-index: 10;
|
|
// }
|
|
.dash-line {
|
|
border: 1px dashed #d81e06;
|
|
height: 100%;
|
|
width: 0px;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: -2px;
|
|
z-index: 20;
|
|
}
|
|
.info-show {
|
|
width: 180px;
|
|
height: 150px;
|
|
border: 1px solid #ccc;
|
|
background-color: white;
|
|
padding: 10px 15px;
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 20px;
|
|
z-index: 30;
|
|
display: none;
|
|
transition: 0.5s;
|
|
&-title {
|
|
text-align: left;
|
|
text-indent: 0.5em;
|
|
border-left: 2px solid #0894f0;
|
|
}
|
|
&-content {
|
|
margin-top: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
span {
|
|
margin-top: 15px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tip-show img:hover ~ .info-show {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&: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 #3e5a8d;
|
|
.fixed_1,
|
|
.fixed_2,
|
|
.fixed_3 {
|
|
width: 200px;
|
|
position: relative;
|
|
background: #11306a;
|
|
z-index: 10;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.fixed_1 {
|
|
left: 0;
|
|
border-left: 1px solid #3e5a8d;
|
|
}
|
|
.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 #3e5a8d;
|
|
border-bottom: 1px solid #3e5a8d;
|
|
border-top: 1px solid #3e5a8d;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
|
|
.grids {
|
|
height: 100%;
|
|
display: flex;
|
|
|
|
.grid {
|
|
position: relative;
|
|
flex: 1;
|
|
height: 100%;
|
|
|
|
&:not(:last-child) {
|
|
border-right: 1px solid #3e5a8d;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:nth-child(1) {
|
|
padding-left: 40px;
|
|
width: 200px;
|
|
}
|
|
|
|
&: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;
|
|
cursor: pointer;
|
|
background: #557dee;
|
|
}
|
|
}
|
|
|
|
.children {
|
|
.td {
|
|
height: 38px;
|
|
line-height: 38px;
|
|
font-size: 14px;
|
|
}
|
|
// .row {
|
|
// position: relative;
|
|
// display: flex;
|
|
// border-top: 1px solid #3e5a8d;
|
|
// .fixed_1,
|
|
// .fixed_2,
|
|
// .fixed_3 {
|
|
// width: 200px;
|
|
// position: relative;
|
|
// background: #11306a;
|
|
// z-index: 10;
|
|
// overflow: hidden;
|
|
// white-space: nowrap;
|
|
// text-overflow: ellipsis;
|
|
// }
|
|
// .fixed_1 {
|
|
// left: 0;
|
|
// border-left: 1px solid #3e5a8d;
|
|
// }
|
|
// .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 #3e5a8d;
|
|
// border-bottom: 1px solid #3e5a8d;
|
|
// border-top: 1px solid #3e5a8d;
|
|
// color: #fff;
|
|
// font-size: 16px;
|
|
|
|
// .grids {
|
|
// height: 100%;
|
|
// display: flex;
|
|
|
|
// .grid {
|
|
// position: relative;
|
|
// flex: 1;
|
|
// height: 100%;
|
|
|
|
// &:not(:last-child) {
|
|
// border-right: 1px solid #3e5a8d;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// &:nth-child(1) {
|
|
// padding-left: 40px;
|
|
// width: 200px;
|
|
// }
|
|
|
|
// &: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;
|
|
// cursor: pointer;
|
|
// background: #557dee;
|
|
// }
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
|
|
.tooltips {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
width: 160px;
|
|
height: 65px;
|
|
border-radius: 8px;
|
|
// background-color: #50a6b3;
|
|
box-shadow: 1px 1px 10px #ccc;
|
|
// background-color: white;
|
|
.status {
|
|
// display: inline-block;
|
|
margin-bottom: 6px;
|
|
height: 20px;
|
|
width: 100px;
|
|
line-height: 20px;
|
|
font-size: 14px;
|
|
border-radius: 10px;
|
|
// background-color: #ff6c7f;
|
|
background-color: #e83030;
|
|
color: white;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
}
|
|
.charger {
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.no-data {
|
|
height: calc(100% - 145px);
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
img{
|
|
height: 33%;
|
|
width: 10%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|
|
.notoDta {
|
|
top: 15%;
|
|
width: 20%;
|
|
left: 40%;
|
|
position: absolute;
|
|
text-align: center;
|
|
img {
|
|
width: 40%;
|
|
margin: 5% 30%;
|
|
}
|
|
p {
|
|
color: #fff;
|
|
font-size: calc(100vw * 14 / 1920);
|
|
margin: -6% 37%;
|
|
}
|
|
}
|
|
// element 组件样式
|
|
:deep() {
|
|
.el-date-editor .el-range-input,
|
|
.el-range-separator {
|
|
color: #fff;
|
|
}
|
|
.el-input__wrapper {
|
|
background: #112d59;
|
|
}
|
|
.el-input__inner {
|
|
color: #fff;
|
|
}
|
|
.el-button {
|
|
background-color: #2758c0;
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
.el-tree-node__label{
|
|
word-wrap: break-word;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
// ::v-deep .el-select .el-input .el-select__caret {
|
|
// color: #fff;
|
|
// }
|
|
</style>
|