1963 lines
54 KiB
Vue
1963 lines
54 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="small"
|
|
clearable
|
|
@change="selectChange"
|
|
>
|
|
<el-option style="height: auto; width: 100%; padding: 0" :value="[]">
|
|
<!-- <el-tree :data="areaList" node-key="id" ref="groupTree"
|
|
:default-expanded-keys="defaultExpandArr" :props="defaultAreaProps"
|
|
:default-expand-all="false" @node-click="treeAreaClick"
|
|
>
|
|
</el-tree> -->
|
|
<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-content">
|
|
<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>
|
|
<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-show="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 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" ref="tbodyRef">
|
|
<div class="row-groups" :class="{ open: openedIndex === p.id }" v-for="p 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"
|
|
:title="child.taskName + ' ' + headerList[child.status].label"
|
|
></div>
|
|
<!-- @mouseenter="(e) => handleHover(e, child)"
|
|
@mouseleave="handleLeave" -->
|
|
</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"
|
|
:title="second.taskName + ' ' + headerList[second.status].label"
|
|
></div>
|
|
<!-- @mouseenter="(e) => handleHover(e, second)"
|
|
@mouseleave="handleLeave" -->
|
|
</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"
|
|
:title="third.taskName + ' ' + headerList[third.status].label"
|
|
></div>
|
|
<!-- @mouseenter="(e) => handleHover(e, third)"
|
|
@mouseleave="handleLeave" -->
|
|
</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"
|
|
:title="fouth.taskName + ' ' + headerList[fouth.status].label"
|
|
></div>
|
|
<!-- @mouseenter="(e) => handleHover(e, fouth)"
|
|
@mouseleave="handleLeave" -->
|
|
</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"
|
|
:title="fifth.taskName + ' ' + headerList[fifth.status].label"
|
|
></div>
|
|
<!-- @mouseenter="(e) => handleHover(e, fifth)"
|
|
@mouseleave="handleLeave" -->
|
|
</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"
|
|
:title="sixth.taskName + ' ' + headerList[sixth.status].label"
|
|
></div>
|
|
<!-- @mouseenter="(e) => handleHover(e, sixth)"
|
|
@mouseleave="handleLeave" -->
|
|
</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"
|
|
:title="seventh.taskName + ' ' + headerList[seventh.status].label"
|
|
></div>
|
|
<!-- @mouseenter="(e) => handleHover(e, seventh)"
|
|
@mouseleave="handleLeave" -->
|
|
</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"
|
|
: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.mppStatus == 0
|
|
? "未开始"
|
|
: tooltipContent.mppStatus == 1
|
|
? "进行中"
|
|
: tooltipContent.mppStatus == 2
|
|
? "已完成"
|
|
: "已逾期"
|
|
}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-show="projects.length == 0" class="noData">
|
|
<img src="@/assets/images/notoDataImg.png" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, watch, nextTick, reactive, computed } from "vue";
|
|
import { ElMessage } from "element-plus";
|
|
import { GlobalStore } from "@/stores";
|
|
import {
|
|
getDelayEventTypeApi,
|
|
getProgressContentApi,
|
|
getCountTaskProgressApi,
|
|
getQualityRegionListApi,
|
|
selectHierarchyEnterpriseListApi,
|
|
getXzParentChildTaskListApi
|
|
} 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 {
|
|
// getPositionList()
|
|
getHierarchyEnterpriseList();
|
|
// getXzMilestoneListData();
|
|
}
|
|
// getMemberCountList(true)
|
|
}
|
|
|
|
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 areaSelectVal = ref("" as any);
|
|
const areaList = ref([] as any);
|
|
const progressData = ref({
|
|
projectSurplusDayNum: 0,
|
|
projectTotalDayNum: 0,
|
|
projectTotalProgress: 0,
|
|
enterpriseTotalProgress: 0
|
|
} as any);
|
|
const defaultExpandArr = ref([] as any);
|
|
const defaultAreaProps = ref({
|
|
children: "children",
|
|
label: "regionName"
|
|
} as any);
|
|
const defaultProps = ref({
|
|
children: "children",
|
|
label: "enterpriseName"
|
|
} as any);
|
|
const selectRef = ref();
|
|
const tree = ref();
|
|
const groupTree = ref();
|
|
const tbodyRef = ref();
|
|
const level1CompanyData = ref([] as any);
|
|
const treeData = ref({} as any);
|
|
const projects = ref([] as any);
|
|
const colors = ref(["#35e5fd", "#f1d520", "#4fd389", "#F80840"] as any);
|
|
const tbodyHeight = ref(0 as any);
|
|
const tooltipsStyle = ref([
|
|
{
|
|
display: "none",
|
|
left: 0,
|
|
top: 0
|
|
}
|
|
] as any);
|
|
const scrollLeft = ref(0 as any);
|
|
const tooltipContent = ref({
|
|
day: 0,
|
|
name: ""
|
|
} as any);
|
|
const dateList = ref([] as any);
|
|
const openedIndex = ref(9999 as any);
|
|
const openedIndexSecond = ref(9999 as any);
|
|
const openedIndexThird = ref(9999 as any);
|
|
const openedIndexFourth = ref(9999 as any);
|
|
const openedIndexFifth = ref(9999 as any);
|
|
const openedIndexSixth = ref(9999 as any);
|
|
const openedIndexSeven = ref(9999 as any);
|
|
const openedIndexEighth = ref(9999 as any);
|
|
const openedIndexNinth = ref(9999 as any);
|
|
const openedIndexTenth = ref(9999 as any);
|
|
|
|
const headerList = ref([
|
|
{ label: "未开始", color: "#3a7bff" },
|
|
{ label: "进行中", color: "#f1d520" },
|
|
{ label: "已完成", color: "#4fd389" },
|
|
{ label: "已逾期", color: "#F80840" }
|
|
] as any);
|
|
|
|
const selectChange = async (val: any) => {
|
|
if (!val) {
|
|
selectVal.value = "";
|
|
// areaSelectVal.value = "";
|
|
treeData.value = "";
|
|
getDataList();
|
|
}
|
|
};
|
|
//获取承包商/厂区
|
|
const getPositionList = async () => {
|
|
let data: any = {
|
|
projectSn: store.sn
|
|
};
|
|
await getQualityRegionListApi(data).then((res: any) => {
|
|
if (res.code == 200) {
|
|
areaList.value = res.result;
|
|
}
|
|
});
|
|
};
|
|
// 获取承包商列表
|
|
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];
|
|
// tree.value.setCurrentKey(level1CompanyData.value[0].id);//换掉tree
|
|
groupTree.value.setCurrentKey(level1CompanyData.value[0].id);
|
|
getDataList(); //123
|
|
getCountFn(); //123
|
|
});
|
|
}
|
|
// this.enterpriseTreeData = res.result
|
|
}
|
|
});
|
|
};
|
|
// 树形控件点击
|
|
const treeAreaClick = async (data: any) => {
|
|
if (data.status == 1) {
|
|
ElMessage({
|
|
message: "无法选中已禁用组织",
|
|
type: "warning"
|
|
});
|
|
} else {
|
|
selectVal.value = data.enterpriseName;
|
|
// areaSelectVal.value = data.id;
|
|
// treeData.value = data.id;
|
|
treeData.value = data;
|
|
selectRef.value.blur();
|
|
getDataList();
|
|
// getXzMilestoneListData();
|
|
|
|
//区域
|
|
// selectVal.value = data.regionName;
|
|
// areaSelectVal.value = data.id;
|
|
// selectRef.value.blur();
|
|
// console.log(selectVal.value)
|
|
// console.log(areaSelectVal.value)
|
|
// // getDataList();
|
|
// // getXzMilestoneListData();
|
|
}
|
|
};
|
|
|
|
// 获取当前项目总进度
|
|
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 getDataList = async () => {
|
|
// getXzParentChildTaskListApi({
|
|
// projectSn: store.sn,
|
|
// // qualityRegionId: areaSelectVal.value,
|
|
// enterpriseId: treeData.value.id,
|
|
// }).then((res:any) => {
|
|
// projects.value = dealArr(res.result);
|
|
// console.log("获取甘特图数据", projects.value);
|
|
// // var that = this;
|
|
// setTimeout( async () => {
|
|
|
|
// await setGantts(projects.value);
|
|
// if (tbodyRef.value) {
|
|
// tbodyHeight.value = tbodyRef.value.offsetHeight;
|
|
// }
|
|
// }, 3000);
|
|
// });
|
|
// }
|
|
// const dealArr = async(arr:any) => {
|
|
// arr.map((item:any) => {
|
|
// item.gantts = [];
|
|
// item.delay = 0;
|
|
// if (item.children && item.children.length > 0) {
|
|
// dealArr(item.children);
|
|
// }
|
|
// });
|
|
// return arr;
|
|
// }
|
|
|
|
// 获取甘特图数据
|
|
const getDataList = async () => {
|
|
try {
|
|
const res: any = await getXzParentChildTaskListApi({
|
|
projectSn: store.sn,
|
|
// qualityRegionId: areaSelectVal.value,
|
|
enterpriseId: treeData.value.id
|
|
});
|
|
projects.value = await dealArr(res.result);
|
|
console.log("获取甘特图数据", projects.value);
|
|
setTimeout(async () => {
|
|
await setGantts(projects.value);
|
|
if (tbodyRef.value) {
|
|
tbodyHeight.value = tbodyRef.value.offsetHeight;
|
|
}
|
|
}, 300);
|
|
} catch (error) {
|
|
console.error("获取数据时出错:", error);
|
|
}
|
|
};
|
|
|
|
const dealArr = async (arr: any[]) => {
|
|
arr.forEach(item => {
|
|
item.gantts = [];
|
|
item.delay = 0;
|
|
if (item.children && item.children.length > 0) {
|
|
dealArr(item.children);
|
|
}
|
|
});
|
|
return arr;
|
|
};
|
|
|
|
const setGantts = async (projects: any) => {
|
|
console.log("进入渲染 setGantts projects-- ", JSON.stringify(projects));
|
|
console.log("进入渲染 setGantts projects-- ", projects);
|
|
projects.map((project: any) => {
|
|
let { finishDate, id, gantts } = project;
|
|
const gantt: any = getGanttStyle(project);
|
|
gantt.background = colors.value[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 && setGantts(project.children);
|
|
}
|
|
// return project
|
|
// project.children && this.setGantts(project.children);
|
|
});
|
|
};
|
|
const itemRefs = [] as any;
|
|
// 点击抽屉的工程名称更新页面
|
|
const onUpdate = async () => {
|
|
getDataList();
|
|
ElMessage.success("页面已更新");
|
|
};
|
|
const setItemRef = async (id: any, date: any) => {
|
|
var val = id + "@|@" + date;
|
|
return val;
|
|
|
|
// return val;
|
|
};
|
|
const getGanttStyle = async (project: any) => {
|
|
// 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 = true;
|
|
// console.log(a, ":!(startArr[2] % 2:");
|
|
// if (a) {
|
|
// const day = +startArr[2];
|
|
// startArr[2] = day < 10 ? "0" + day : day;
|
|
// startDate = startArr.join("-");
|
|
// }
|
|
// const b = true;
|
|
// console.log(a, ":!(endArr[2] % 2):");
|
|
// if (b) {
|
|
// const day = +endArr[2];
|
|
// endArr[2] = day < 10 ? "0" + day : day;
|
|
// finishDate = endArr.join("-");
|
|
// }
|
|
|
|
// 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;
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// const startLeft = startRef.offsetLeft;
|
|
// const endWidth = endRef.offsetWidth;
|
|
// const endLeft = endRef.offsetLeft;
|
|
// const ganttWidth = endLeft - startLeft + endWidth;
|
|
// return { left: startLeft + "px", width: ganttWidth + "px" };
|
|
|
|
//2
|
|
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 = true;
|
|
console.log(a, ":!(startArr[2] % 2:");
|
|
if (a) {
|
|
const day = +startArr[2];
|
|
startArr[2] = day < 10 ? "0" + day : day;
|
|
startDate = startArr.join("-");
|
|
}
|
|
const b = true;
|
|
console.log(a, ":!(endArr[2] % 2):");
|
|
if (b) {
|
|
const day = +endArr[2];
|
|
endArr[2] = day < 10 ? "0" + day : day;
|
|
finishDate = endArr.join("-");
|
|
}
|
|
|
|
console.log("finishDate ------------", ref);
|
|
let startRefVal = id + "@|@" + startDate;
|
|
let endRefVal = id + "@|@" + finishDate;
|
|
// console.log(
|
|
// "startRefVal ------------",
|
|
// ref.value[startRefVal]
|
|
// );
|
|
if (ref.value[startRefVal] == undefined) {
|
|
return { left: 0 + "px", width: 0 + "px" };
|
|
}
|
|
startRef = ref.value[startRefVal][0];
|
|
|
|
endRef = ref.value[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" };
|
|
|
|
//3
|
|
// 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 = true;
|
|
// console.log(a, ":!(startArr[2] % 2:");
|
|
// if (a) {
|
|
// const day = +startArr[2];
|
|
// startArr[2] = day < 10 ? "0" + day : day;
|
|
// startDate = startArr.join("-");
|
|
// }
|
|
// const b = true;
|
|
// console.log(a, ":!(endArr[2] % 2):");
|
|
// if (b) {
|
|
// const day = +endArr[2];
|
|
// 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" };
|
|
};
|
|
|
|
//获取里程碑列表数据
|
|
const getXzMilestoneListData = async () => {
|
|
// let that = this;
|
|
// let data = {
|
|
// projectSn: this.$store.state.projectSn,
|
|
// enterpriseId: this.treeData.id,
|
|
// qualityRegionId: this.areaSelectVal,
|
|
// };
|
|
// getXzMilestoneListApi(data).then((res) => {
|
|
// if (res.code == 200) {
|
|
// that.listData = res.result;
|
|
// }
|
|
// });
|
|
};
|
|
|
|
const handleHover = async (e: any, item: any) => {
|
|
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;
|
|
tooltipsStyle.value = {
|
|
left: decreaseLeft + scrollLeft.value + "px",
|
|
top: decreaseTop + "px",
|
|
display: "block"
|
|
};
|
|
tooltipContent.value = {
|
|
taskName: item.taskName,
|
|
mppStatus: item.mppStatus
|
|
};
|
|
// }
|
|
};
|
|
const handleLeave = async () => {
|
|
tooltipsStyle.value.display = "none";
|
|
};
|
|
//甘特图代码结束位置
|
|
|
|
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: 15.65%;
|
|
left: 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;
|
|
// flex: 1;
|
|
width: calc(100% - 350px);
|
|
height: 100%;
|
|
padding: 18px;
|
|
background: #ffffff;
|
|
// border-radius: 8px;
|
|
.top-content {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.top-count {
|
|
span {
|
|
margin-right: 50px;
|
|
}
|
|
}
|
|
.update-operate {
|
|
}
|
|
}
|
|
.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% - 94px);
|
|
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: 30;
|
|
}
|
|
|
|
.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;
|
|
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;
|
|
width: max-content;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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: 30;
|
|
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 {
|
|
width: 25px;
|
|
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;
|
|
width: max-content;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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>
|