|
|
@@ -5,12 +5,7 @@
|
|
|
<div class="statistics">
|
|
|
<div
|
|
|
class="editDate"
|
|
|
- style="
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 10%;
|
|
|
- "
|
|
|
+ style="background-color: rgba(0, 0, 0, 0); display: block; width: 100%"
|
|
|
>
|
|
|
<!-- 标题装饰组件 -->
|
|
|
<!-- <header-decoration />
|
|
|
@@ -52,24 +47,42 @@
|
|
|
/>
|
|
|
</el-date-picker>
|
|
|
</div> -->
|
|
|
- <div
|
|
|
- style="
|
|
|
- width: 100%;
|
|
|
- height: 45%;
|
|
|
- line-height: 45%;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- margin: 2% 0 1% 1%;
|
|
|
- font-size: 100%;
|
|
|
- color: #fff !important;
|
|
|
- align-items: center;
|
|
|
- display: flex;
|
|
|
- "
|
|
|
- >
|
|
|
- <div style="color: #000">月份：</div>
|
|
|
+ <div class="date-filter-bar">
|
|
|
+ <el-button-group class="date-range-btns">
|
|
|
+ <!-- <el-button
|
|
|
+ size="mini"
|
|
|
+ :type="activeDateRange === 'week' ? 'primary' : 'default'"
|
|
|
+ @click="setDateRange('week')"
|
|
|
+ >
|
|
|
+ 近一周
|
|
|
+ </el-button> -->
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ :type="activeDateRange === 'month' ? 'primary' : 'default'"
|
|
|
+ @click="setDateRange('month')"
|
|
|
+ >
|
|
|
+ 近一月
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ :type="activeDateRange === 'year' ? 'primary' : 'default'"
|
|
|
+ @click="setDateRange('year')"
|
|
|
+ >
|
|
|
+ 本年
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ :type="activeDateRange === 'threeYears' ? 'primary' : 'default'"
|
|
|
+ @click="setDateRange('threeYears')"
|
|
|
+ >
|
|
|
+ 近三年
|
|
|
+ </el-button>
|
|
|
+ </el-button-group>
|
|
|
<el-date-picker
|
|
|
v-model="endDate"
|
|
|
+ class="date-range-picker"
|
|
|
type="monthrange"
|
|
|
+ size="mini"
|
|
|
align="right"
|
|
|
unlink-panels
|
|
|
style="background-color: rgba(0, 0, 0, 0)"
|
|
|
@@ -78,305 +91,309 @@
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始日期"
|
|
|
end-placeholder="结束日期"
|
|
|
- @change="checkYear(endDate, 'end')"
|
|
|
+ @change="onDateRangeChange"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="relOf">
|
|
|
- <s4renYuanPeiXun
|
|
|
- v-if="showAll || showComponents[1]"
|
|
|
- height="200%"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS4renYuanPeiXun()"
|
|
|
- />
|
|
|
- <s4renYuanPeiXunCol
|
|
|
- v-if="zaigangrenyuanfb.length && (showAll || showComponents[2])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS4renYuanPeiXunFB()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!zaigangrenyuanfb.length && (showAll || showComponents[2])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
- </div>
|
|
|
-
|
|
|
- <s5renYuanJianDu
|
|
|
- v-if="showAll || showComponents[3]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS5renYuanJianDu()"
|
|
|
- />
|
|
|
- <s5renYuanJianDuCol
|
|
|
- v-if="gangqianpeixunfb.length && (showAll || showComponents[4])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS5renYuanJianDuFB()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!gangqianpeixunfb.length && (showAll || showComponents[4])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
- </div>
|
|
|
-
|
|
|
- <s7sheBeiJiaoZhun
|
|
|
- v-if="showAll || showComponents[5]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getJiaoYanObjNum()"
|
|
|
- />
|
|
|
- <s7sheBeiJiaoZhunCol
|
|
|
- v-if="jiaoyanMGObj.length && (showAll || showComponents[6])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getJiaoYanObjNumFB()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!jiaoyanMGObj.length && (showAll || showComponents[6])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
- </div>
|
|
|
-
|
|
|
- <s8sheBeiHeCha
|
|
|
- v-if="showAll || showComponents[7]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="gethechaObjNum()"
|
|
|
- />
|
|
|
- <s8sheBeiHeChaCol
|
|
|
- v-if="hechaMGObj.length && (showAll || showComponents[8])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="gethechaObjNumFB()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!hechaMGObj.length && (showAll || showComponents[8])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
- </div>
|
|
|
-
|
|
|
- <s9neiBuZhiLiang
|
|
|
- v-if="showAll || showComponents[9]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS9neiBuZhiLiang()"
|
|
|
- />
|
|
|
- <s9neiBuZhiLiangCol
|
|
|
- v-if="neibuObjfb.length && (showAll || showComponents[10])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS9neiBuZhiLiangFB()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!neibuObjfb.length && (showAll || showComponents[10])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
+ <div class="kanban-tab-bar">
|
|
|
+ <el-tabs v-model="activeKanbanTab">
|
|
|
+ <el-tab-pane label="人员培训" name="personnel" />
|
|
|
+ <el-tab-pane label="设备管理" name="equipment" />
|
|
|
+ <el-tab-pane label="内部比对及外部质评" name="qualityCompare" />
|
|
|
+ <el-tab-pane label="应急预案及风险控制" name="emergency" />
|
|
|
+ <el-tab-pane label="内部审核" name="internalAudit" />
|
|
|
+ <el-tab-pane label="管理评审" name="managementReview" />
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ <div class="w2222" v-if="relOf">
|
|
|
+ <div v-if="activeKanbanTab === 'personnel'" class="kanban-tab-panel">
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--pie">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s4renYuanPeiXun
|
|
|
+ v-if="showAll || showComponents[1]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS4renYuanPeiXun()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s5renYuanJianDu
|
|
|
+ v-if="showAll || showComponents[3]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS5renYuanJianDu()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--bar">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s4renYuanPeiXunCol
|
|
|
+ v-if="showAll || showComponents[2]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS4renYuanPeiXunFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s5renYuanJianDuCol
|
|
|
+ v-if="showAll || showComponents[4]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS5renYuanJianDuFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <s10waiBuNengLi
|
|
|
- v-if="showAll || showComponents[11]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getnengtliObjNum()"
|
|
|
- />
|
|
|
- <s10waiBuNengLiCol
|
|
|
- v-if="waibuObjfb.length && (showAll || showComponents[12])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getnengtliObjNumFB()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!waibuObjfb.length && (showAll || showComponents[12])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
+ <div v-if="activeKanbanTab === 'equipment'" class="kanban-tab-panel">
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--pie">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s7sheBeiJiaoZhun
|
|
|
+ v-if="showAll || showComponents[5]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getJiaoYanObjNum()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s8sheBeiHeCha
|
|
|
+ v-if="showAll || showComponents[7]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="gethechaObjNum()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--bar">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s7sheBeiJiaoZhunCol
|
|
|
+ v-if="showAll || showComponents[6]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getJiaoYanObjNumFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s8sheBeiHeChaCol
|
|
|
+ v-if="showAll || showComponents[8]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="gethechaObjNumFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <s15tousu
|
|
|
- v-if="showAll || showComponents[13]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS3tousu()"
|
|
|
- />
|
|
|
- <s15tousuCol
|
|
|
- v-if="yingjifbObj.length && (showAll || showComponents[14])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS3tousuFB()"
|
|
|
- />
|
|
|
<div
|
|
|
- v-if="!yingjifbObj.length && (showAll || showComponents[14])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
+ v-if="activeKanbanTab === 'qualityCompare'"
|
|
|
+ class="kanban-tab-panel"
|
|
|
>
|
|
|
- 暂无数据
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--pie">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s9neiBuZhiLiang
|
|
|
+ v-if="showAll || showComponents[9]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS9neiBuZhiLiang()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s10waiBuNengLi
|
|
|
+ v-if="showAll || showComponents[11]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getnengtliObjNum()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--bar">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s9neiBuZhiLiangCol
|
|
|
+ v-if="showAll || showComponents[10]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS9neiBuZhiLiangFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s10waiBuNengLiCol
|
|
|
+ v-if="showAll || showComponents[12]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getnengtliObjNumFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <s12fengXian
|
|
|
- v-if="showAll || showComponents[15]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS12fengXian()"
|
|
|
- />
|
|
|
- <s12fengXianCol
|
|
|
- v-if="fengxianfbObj.length && (showAll || showComponents[16])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS12fengXianFB()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!fengxianfbObj.length && (showAll || showComponents[16])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
+ <div v-if="activeKanbanTab === 'emergency'" class="kanban-tab-panel">
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--pie">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s15tousu
|
|
|
+ v-if="showAll || showComponents[13]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS3tousu()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s12fengXian
|
|
|
+ v-if="showAll || showComponents[15]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS12fengXian()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--bar">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s15tousuCol
|
|
|
+ v-if="showAll || showComponents[14]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS3tousuFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s12fengXianCol
|
|
|
+ v-if="showAll || showComponents[16]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS12fengXianFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <s2manYiDu
|
|
|
- v-if="showAll || showComponents[17]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS2manYiDu()"
|
|
|
- />
|
|
|
- <s2manYiDuCol
|
|
|
- v-if="neishenfbObj.length && (showAll || showComponents[18])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS2manYiDuFB()"
|
|
|
- />
|
|
|
<div
|
|
|
- v-if="!neishenfbObj.length && (showAll || showComponents[18])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
+ v-if="activeKanbanTab === 'internalAudit'"
|
|
|
+ class="kanban-tab-panel"
|
|
|
>
|
|
|
- 暂无数据
|
|
|
- </div>
|
|
|
- <s14bufuhexiang
|
|
|
- v-if="bufuheObj.length && (showAll || showComponents[19])"
|
|
|
- height="500%"
|
|
|
- width="100%"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS14bufuhexiang()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!bufuheObj.length && (showAll || showComponents[19])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 100%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--inline">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s2manYiDu
|
|
|
+ v-if="showAll || showComponents[17]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS2manYiDu()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s2manYiDuCol
|
|
|
+ v-if="showAll || showComponents[18]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS2manYiDuFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s14bufuhexiang
|
|
|
+ v-if="showAll || showComponents[19]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS14bufuhexiang()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <s1zhiLiangMuBiao
|
|
|
- v-if="showAll || showComponents[21]"
|
|
|
- height="200%"
|
|
|
- :width="displayType === 'row' ? '25%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS1renwu()"
|
|
|
- />
|
|
|
- <s1zhiLiangMuBiaoCol
|
|
|
- v-if="guanshenfbObj.length && (showAll || showComponents[22])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '75%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getS1renwuFB()"
|
|
|
- />
|
|
|
<div
|
|
|
- v-if="!guanshenfbObj.length && (showAll || showComponents[22])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 75%"
|
|
|
+ v-if="activeKanbanTab === 'managementReview'"
|
|
|
+ class="kanban-tab-panel"
|
|
|
>
|
|
|
- 暂无数据
|
|
|
- </div>
|
|
|
- <s16bzJunZhu
|
|
|
- v-if="gaijinxiangObj.length && (showAll || showComponents[23])"
|
|
|
- height="500%"
|
|
|
- width="100%"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getbzJunZhujNum()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!gaijinxiangObj.length && (showAll || showComponents[23])"
|
|
|
- class="nullDate1"
|
|
|
- style="height: 50%; width: 100%"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
- </div>
|
|
|
- <s11biaoZhunWu
|
|
|
- v-if="buhegelvObj.length && (showAll || showComponents[24])"
|
|
|
- height="500%"
|
|
|
- :width="displayType === 'row' ? '100%' : '100%'"
|
|
|
- :colorw="colorw"
|
|
|
- :direction="direction"
|
|
|
- style="box-shadow: none; width: 100%"
|
|
|
- :data="getyangPinCaiJiObjNum()"
|
|
|
- />
|
|
|
- <div
|
|
|
- v-if="!buhegelvObj.length && (showAll || showComponents[24])"
|
|
|
- class="nullDate"
|
|
|
- >
|
|
|
- 暂无数据
|
|
|
+ <div class="kanban-chart-row kanban-chart-row--inline">
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s1zhiLiangMuBiao
|
|
|
+ v-if="showAll || showComponents[21]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS1renwu()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s1zhiLiangMuBiaoCol
|
|
|
+ v-if="showAll || showComponents[22]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getS1renwuFB()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="kanban-chart-cell">
|
|
|
+ <s16bzJunZhu
|
|
|
+ v-if="showAll || showComponents[23]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getbzJunZhujNum()"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <!-- <div class="kanban-chart-cell">
|
|
|
+ <s11biaoZhunWu
|
|
|
+ v-if="showAll || showComponents[24]"
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :colorw="colorw"
|
|
|
+ :direction="direction"
|
|
|
+ style="box-shadow: none"
|
|
|
+ :data="getyangPinCaiJiObjNum()"
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="clear" />
|
|
|
</div>
|
|
|
@@ -525,6 +542,8 @@ export default {
|
|
|
height: window.screen.height - 200 + 'px',
|
|
|
BeginDate: '',
|
|
|
endDate: '',
|
|
|
+ activeDateRange: '',
|
|
|
+ activeKanbanTab: 'personnel',
|
|
|
jiaoyanObj: [],
|
|
|
jiaoyanMGObj: [],
|
|
|
hechaObj: [],
|
|
|
@@ -634,12 +653,11 @@ export default {
|
|
|
this.isShowComponents()
|
|
|
}
|
|
|
/* 开始及结束时间的默认设置*/
|
|
|
- if (!this.BeginDate && !this.endDate) {
|
|
|
+ if (!Array.isArray(this.endDate) || this.endDate.length !== 2) {
|
|
|
this.BeginDate = this.getDate(1) + ''
|
|
|
this.endDate = this.getDate(0)
|
|
|
- // console.log(this.endDate)
|
|
|
- this.dataScope.push(this.BeginDate)
|
|
|
- this.dataScope.push(this.endDate)
|
|
|
+ this.activeDateRange = 'year'
|
|
|
+ this.dataScope = [this.BeginDate, this.endDate]
|
|
|
}
|
|
|
this.getqualityData()
|
|
|
// 获取统计的配置
|
|
|
@@ -732,37 +750,38 @@ export default {
|
|
|
getConfigData(end, allDept, filterDept) {
|
|
|
console.log(end, allDept, filterDept)
|
|
|
const that = this
|
|
|
- end[2] = end[1]
|
|
|
- end[1] = this.getNextMonth(end[1])
|
|
|
+ const queryEnd = [...end]
|
|
|
+ queryEnd[2] = queryEnd[1]
|
|
|
+ queryEnd[1] = this.getNextMonth(queryEnd[1])
|
|
|
Promise.all([
|
|
|
repostCurd('query', getConfig()),
|
|
|
- repostCurd('query', getyangPinCaiJiObj(end, filterDept)),
|
|
|
- repostCurd('query', getzhiliangzhibiaotitleObj(end, filterDept)),
|
|
|
- repostCurd('query', getzongZLMBObj(end, filterDept)),
|
|
|
- repostCurd('query', getfenzuZLZBObj(end, filterDept)),
|
|
|
- repostCurd('query', getzaigangrenyuanObj(end, allDept)),
|
|
|
- repostCurd('query', getgangqianpeixunObj(end, allDept)),
|
|
|
- repostCurd('query', getJiaoYanObj(end, allDept)),
|
|
|
- repostCurd('query', getJiaoYanObjFB(end, allDept)),
|
|
|
- repostCurd('query', gethechaObj(end, allDept)),
|
|
|
- repostCurd('query', gethechaObjFB(end, allDept)),
|
|
|
- repostCurd('query', getwaibuObj(end, allDept)),
|
|
|
- repostCurd('query', getneibuObj(end, allDept)),
|
|
|
- repostCurd('query', getyingjiObj(end, allDept)),
|
|
|
- repostCurd('query', getfengxianObj(end, allDept)),
|
|
|
- repostCurd('query', getneishenObj(end, allDept)),
|
|
|
- repostCurd('query', getguanshenObj(end, allDept)),
|
|
|
- repostCurd('query', getbufuheObj(end, allDept)),
|
|
|
- repostCurd('query', getgaijinxiangObj(end, allDept)),
|
|
|
- repostCurd('query', getzaigangrenyuanFBObj(end, allDept)),
|
|
|
- repostCurd('query', getgangqianpeixunFBObj(end, allDept)),
|
|
|
- repostCurd('query', getneibuObjFB(end, allDept)),
|
|
|
- repostCurd('query', getwaibuObjFB(end, allDept)),
|
|
|
- repostCurd('query', getyingjiObjFB(end, allDept)),
|
|
|
- repostCurd('query', getfengxianObjFB(end, allDept)),
|
|
|
- repostCurd('query', getneishenObjFB(end, allDept)),
|
|
|
- repostCurd('query', getguanshenObjFB(end, allDept)),
|
|
|
- repostCurd('query', getzhiliangmubiaotitleObj(end, filterDept))
|
|
|
+ repostCurd('query', getyangPinCaiJiObj(queryEnd, filterDept)),
|
|
|
+ repostCurd('query', getzhiliangzhibiaotitleObj(queryEnd, filterDept)),
|
|
|
+ repostCurd('query', getzongZLMBObj(queryEnd, filterDept)),
|
|
|
+ repostCurd('query', getfenzuZLZBObj(queryEnd, filterDept)),
|
|
|
+ repostCurd('query', getzaigangrenyuanObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getgangqianpeixunObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getJiaoYanObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getJiaoYanObjFB(queryEnd, allDept)),
|
|
|
+ repostCurd('query', gethechaObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', gethechaObjFB(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getwaibuObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getneibuObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getyingjiObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getfengxianObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getneishenObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getguanshenObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getbufuheObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getgaijinxiangObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getzaigangrenyuanFBObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getgangqianpeixunFBObj(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getneibuObjFB(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getwaibuObjFB(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getyingjiObjFB(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getfengxianObjFB(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getneishenObjFB(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getguanshenObjFB(queryEnd, allDept)),
|
|
|
+ repostCurd('query', getzhiliangmubiaotitleObj(queryEnd, filterDept))
|
|
|
]).then(
|
|
|
([
|
|
|
response,
|
|
|
@@ -857,22 +876,50 @@ export default {
|
|
|
},
|
|
|
/* 查询全部*/
|
|
|
selectAll() {
|
|
|
- /* 上次查询时间不等于当次查询时间， 开始时间不能等于结束时间， 则开始查询。*/
|
|
|
- // if (this.selectEnd != this.endDate) {
|
|
|
- // this.getConfigData(this.endDate,this.idsStr)
|
|
|
this.getqualityData()
|
|
|
-
|
|
|
- this.relOf = true
|
|
|
- this.timer = setTimeout(() => {
|
|
|
- this.relOf = false
|
|
|
- clearTimeout(this.timer)
|
|
|
- }, 10)
|
|
|
-
|
|
|
- // }
|
|
|
},
|
|
|
checkYear(year, data) {
|
|
|
this.selectAll()
|
|
|
},
|
|
|
+ onDateRangeChange(val) {
|
|
|
+ this.activeDateRange = ''
|
|
|
+ this.checkYear(val, 'end')
|
|
|
+ },
|
|
|
+ formatMonth(date) {
|
|
|
+ const year = date.getFullYear()
|
|
|
+ const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
|
+ return `${year}-${month}`
|
|
|
+ },
|
|
|
+ setDateRange(range) {
|
|
|
+ const now = new Date()
|
|
|
+ const end = this.formatMonth(now)
|
|
|
+ const startDate = new Date()
|
|
|
+ let start
|
|
|
+
|
|
|
+ switch (range) {
|
|
|
+ case 'week':
|
|
|
+ startDate.setDate(startDate.getDate() - 7)
|
|
|
+ start = this.formatMonth(startDate)
|
|
|
+ break
|
|
|
+ case 'month':
|
|
|
+ startDate.setMonth(startDate.getMonth() - 1)
|
|
|
+ start = this.formatMonth(startDate)
|
|
|
+ break
|
|
|
+ case 'year':
|
|
|
+ start = `${now.getFullYear()}-01`
|
|
|
+ break
|
|
|
+ case 'threeYears':
|
|
|
+ startDate.setFullYear(startDate.getFullYear() - 3)
|
|
|
+ start = this.formatMonth(startDate)
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.activeDateRange = range
|
|
|
+ this.endDate = [start, end]
|
|
|
+ this.checkYear(this.endDate, 'end')
|
|
|
+ },
|
|
|
/* 获取当前年份*/
|
|
|
getDate(year) {
|
|
|
year = year || 0
|
|
|
@@ -907,7 +954,7 @@ export default {
|
|
|
},
|
|
|
getzzzbNum() {
|
|
|
// 1. 生成月份数组
|
|
|
- const [startDate, endDate] = [this.endDate[0], this.endDate[2]]
|
|
|
+ const [startDate, endDate] = [this.endDate[0], this.endDate[1]]
|
|
|
const [startYear, startMonth] = startDate.split('-').map(Number)
|
|
|
const [endYear, endMonth] = endDate.split('-').map(Number)
|
|
|
|
|
|
@@ -995,13 +1042,106 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.statistics {
|
|
|
height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
color: #fff;
|
|
|
.editDate {
|
|
|
- display: contents;
|
|
|
- overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
+ min-height: 40px;
|
|
|
+ overflow: visible;
|
|
|
background-color: rgb(249, 255, 255);
|
|
|
position: relative;
|
|
|
}
|
|
|
+ .kanban-tab-bar {
|
|
|
+ width: 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ padding: 0 1%;
|
|
|
+ ::v-deep .el-tabs__header {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tabs__item {
|
|
|
+ color: #606266;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ ::v-deep .el-tabs__item.is-active {
|
|
|
+ color: rgb(0, 191, 191);
|
|
|
+ }
|
|
|
+ ::v-deep .el-tabs__active-bar {
|
|
|
+ background-color: rgb(0, 191, 191);
|
|
|
+ }
|
|
|
+ ::v-deep .el-tabs__nav-wrap::after {
|
|
|
+ background-color: #e4e7ed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .w2222 {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .date-filter-bar {
|
|
|
+ width: 100%;
|
|
|
+ min-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ margin: 8px 0 8px 1%;
|
|
|
+ font-size: 100%;
|
|
|
+ color: #fff !important;
|
|
|
+ align-items: center;
|
|
|
+ display: flex;
|
|
|
+ flex-shrink: 0;
|
|
|
+ gap: 12px;
|
|
|
+ $filter-control-height: 32px;
|
|
|
+ $filter-border: 1px solid #dcdfe6;
|
|
|
+ ::v-deep .date-range-btns {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: stretch;
|
|
|
+ .el-button {
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: $filter-control-height;
|
|
|
+ min-height: $filter-control-height;
|
|
|
+ padding: 0 12px;
|
|
|
+ line-height: calc(#{$filter-control-height} - 2px);
|
|
|
+ border: $filter-border;
|
|
|
+ }
|
|
|
+ .el-button--primary {
|
|
|
+ border-color: rgb(0, 191, 191);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .date-range-picker.el-date-editor.el-range-editor {
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: $filter-control-height !important;
|
|
|
+ min-height: $filter-control-height;
|
|
|
+ line-height: calc(#{$filter-control-height} - 2px);
|
|
|
+ border: $filter-border;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ .el-range-input {
|
|
|
+ height: auto;
|
|
|
+ line-height: 1;
|
|
|
+ margin: 0;
|
|
|
+ color: #000;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ .el-range-separator {
|
|
|
+ height: auto;
|
|
|
+ line-height: 1;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .el-range__icon,
|
|
|
+ .el-range__close-icon {
|
|
|
+ height: auto;
|
|
|
+ line-height: 1;
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.block {
|
|
|
float: left;
|
|
|
font-size: 14px;
|
|
|
@@ -1054,7 +1194,9 @@ export default {
|
|
|
}
|
|
|
.screen {
|
|
|
height: 100%;
|
|
|
-
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
margin: 0 0.5%;
|
|
|
}
|
|
|
.clear {
|
|
|
@@ -1110,6 +1252,37 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
+.kanban-tab-panel {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 0;
|
|
|
+}
|
|
|
+.kanban-chart-row {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ gap: 12px;
|
|
|
+ &--pie {
|
|
|
+ height: 320px;
|
|
|
+ }
|
|
|
+ &--bar {
|
|
|
+ height: 400px;
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+ &--inline {
|
|
|
+ height: 450px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.kanban-chart-cell {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ ::v-deep .statisticsPage {
|
|
|
+ width: 100% !important;
|
|
|
+ height: 100%;
|
|
|
+ float: none;
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.el-year-table .today .cell {
|
|
|
@@ -1118,13 +1291,22 @@ export default {
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-::v-deep .el-input__inner {
|
|
|
+.statistics ::v-deep .date-filter-bar .el-input__inner {
|
|
|
background-color: rgba(0, 0, 0, 0);
|
|
|
- color: #fff;
|
|
|
+ color: #000;
|
|
|
}
|
|
|
-::v-deep .el-dialog__body {
|
|
|
- height: 80%;
|
|
|
- width: 80%;
|
|
|
+.date-range-btns {
|
|
|
+ margin-right: 0;
|
|
|
+ ::v-deep .el-button {
|
|
|
+ background-color: rgba(0, 0, 0, 0);
|
|
|
+ color: #000;
|
|
|
+ border-color: #dcdfe6;
|
|
|
+ }
|
|
|
+ ::v-deep .el-button--primary {
|
|
|
+ background-color: rgb(0, 191, 191);
|
|
|
+ border-color: rgb(0, 191, 191);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
.fade-in {
|
|
|
animation: fadeIn 1s linear forwards;
|
cyy