|
@@ -0,0 +1,818 @@
|
|
|
+<template>
|
|
|
+ <div class="hui-flex hui-content organization-week">
|
|
|
+ <div class="hui-content-title">
|
|
|
+ <div class="back" @click="$router.back()">
|
|
|
+ <i class="el-icon-back"></i>
|
|
|
+ <span>返回</span>
|
|
|
+ </div>
|
|
|
+ <div :class="'hui-title-item' + (item.type === nowTitle.type?' active':'') " v-for="item in titleList"
|
|
|
+ :key="item.id" @click="nowTitle = item">
|
|
|
+ {{item.name}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="hui-flex-box">
|
|
|
+ <div class="week-content">
|
|
|
+ <div class="content-title">
|
|
|
+ {{nowTitle.name}}
|
|
|
+ </div>
|
|
|
+ <div class="content-box" v-show="nowTitle.type === 6">
|
|
|
+ <div class="alarm-table-boxs">
|
|
|
+ <div class="alarm-title">
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">序号</span>
|
|
|
+ <span class="tr-flex">单位工程</span>
|
|
|
+ <span class="tr-flex">进度计划</span>
|
|
|
+ <span class="tr-flex">计划完成情况</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-table">
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">01</span>
|
|
|
+ <span class="tr-flex">1号楼</span>
|
|
|
+ <span class="tr-flex">进度计划进度计划进度计划</span>
|
|
|
+ <span class="tr-flex">
|
|
|
+ <div class="progress-item">
|
|
|
+ <div class="line">
|
|
|
+ <div class="progress" style="width: 56.32%;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="alibaba hui-ellipsis">56.32%</div>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">02</span>
|
|
|
+ <span class="tr-flex">2号楼</span>
|
|
|
+ <span class="tr-flex">进度计划进度计划进度计划</span>
|
|
|
+ <span class="tr-flex">
|
|
|
+ <div class="progress-item">
|
|
|
+ <div class="line">
|
|
|
+ <div class="progress" style="width: 76.32%;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="alibaba hui-ellipsis">76.32%</div>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">03</span>
|
|
|
+ <span class="tr-flex">3号楼</span>
|
|
|
+ <span class="tr-flex">进度计划进度计划进度计划</span>
|
|
|
+ <span class="tr-flex">
|
|
|
+ <div class="progress-item">
|
|
|
+ <div class="line">
|
|
|
+ <div class="progress" style="width: 44%;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="alibaba hui-ellipsis">44%</div>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">04</span>
|
|
|
+ <span class="tr-flex">4号楼</span>
|
|
|
+ <span class="tr-flex">进度计划进度计划进度计划</span>
|
|
|
+ <span class="tr-flex">
|
|
|
+ <div class="progress-item">
|
|
|
+ <div class="line">
|
|
|
+ <div class="progress" style="width: 66%;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="alibaba hui-ellipsis">66%</div>
|
|
|
+ </div>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-box" v-show="nowTitle.type === 7">
|
|
|
+ <div class="alarm-table-boxs">
|
|
|
+ <div class="alarm-title">
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">序号</span>
|
|
|
+ <span class="tr-flex">单位工程</span>
|
|
|
+ <span class="tr-flex">本周协调的问题</span>
|
|
|
+ <span class="tr-80">级别</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-table">
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">01</span>
|
|
|
+ <span class="tr-flex">1号楼</span>
|
|
|
+ <span class="tr-flex">本周协调的问题本周协调的问题</span>
|
|
|
+ <span class="tr-80 color-red">重要</span>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">02</span>
|
|
|
+ <span class="tr-flex">2号楼</span>
|
|
|
+ <span class="tr-flex">本周协调的问题本周协调的问题</span>
|
|
|
+ <span class="tr-80 color-red">重要</span>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">03</span>
|
|
|
+ <span class="tr-flex">3号楼</span>
|
|
|
+ <span class="tr-flex">本周协调的问题本周协调的问题</span>
|
|
|
+ <span class="tr-80 color-red">重要</span>
|
|
|
+ </div>
|
|
|
+ <div class="alarm-tr">
|
|
|
+ <span class="tr-100">04</span>
|
|
|
+ <span class="tr-flex">4号楼</span>
|
|
|
+ <span class="tr-flex">本周协调的问题本周协调的问题</span>
|
|
|
+ <span class="tr-80 color-red">重要</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-box" v-show="nowTitle.type === 8">
|
|
|
+ <div class="image-list">
|
|
|
+ <div class="image-item">
|
|
|
+ <div class="image-box">
|
|
|
+ <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2ea93eeee135418ce92f968219509b6526e5c572c690e63b8f57430c7e9f4290"
|
|
|
+ alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="label">运营图片</div>
|
|
|
+ </div>
|
|
|
+ <div class="image-item">
|
|
|
+ <div class="image-box">
|
|
|
+ <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2ea93eeee135418ce92f968219509b6526e5c572c690e63b8f57430c7e9f4290"
|
|
|
+ alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="label">运营图片</div>
|
|
|
+ </div>
|
|
|
+ <div class="image-item">
|
|
|
+ <div class="image-box">
|
|
|
+ <img src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng2ea93eeee135418ce92f968219509b6526e5c572c690e63b8f57430c7e9f4290"
|
|
|
+ alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="label">运营图片</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-box" v-show="nowTitle.type !== 6 && nowTitle.type !== 7 && nowTitle.type !== 8">
|
|
|
+ <div class="content-test">
|
|
|
+ <div class="test-item blue">
|
|
|
+ <div class="label">报警总数</div>
|
|
|
+ <div class="number alibaba">48</div>
|
|
|
+ <div class="icon">
|
|
|
+ <i class="iconfont huifont-zongshuliang"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-item green">
|
|
|
+ <div class="label">已处理</div>
|
|
|
+ <div class="number alibaba">44</div>
|
|
|
+ <div class="icon">
|
|
|
+ <i class="iconfont huifont-hege"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-item purple">
|
|
|
+ <div class="label">处理中</div>
|
|
|
+ <div class="number alibaba">4</div>
|
|
|
+ <div class="icon">
|
|
|
+ <i class="iconfont huifont-zhenggaizhong"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="test-item red">
|
|
|
+ <div class="label">未处理</div>
|
|
|
+ <div class="number alibaba">0</div>
|
|
|
+ <div class="icon">
|
|
|
+ <i class="iconfont huifont-buhege"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-chart">
|
|
|
+ <div class="legend-box">
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-page" style="background:#2DB85C;"></span>
|
|
|
+ <span class="legend-name">已处理</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-page" style="background:#9D60FB;"></span>
|
|
|
+ <span class="legend-name">处理中</span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-page" style="background:#F04243;"></span>
|
|
|
+ <span class="legend-name">未处理</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart1" class="chart-box"></div>
|
|
|
+ </div>
|
|
|
+ <div class="project-list">
|
|
|
+ <div class="project-item">
|
|
|
+ <div class="project-item-title">创业园区-1号楼</div>
|
|
|
+ <div class="project-test">
|
|
|
+ <div class="test-item blue">
|
|
|
+ <span>总数量</span>
|
|
|
+ <span class="alibaba number color-blue">28</span>
|
|
|
+ </div>
|
|
|
+ <div class="test-item green">
|
|
|
+ <span>已处理</span>
|
|
|
+ <span class="alibaba number color-green">22</span>
|
|
|
+ </div>
|
|
|
+ <div class="test-item purple">
|
|
|
+ <span>处理中</span>
|
|
|
+ <span class="alibaba number color-purple">6</span>
|
|
|
+ </div>
|
|
|
+ <div class="test-item red">
|
|
|
+ <span>未处理</span>
|
|
|
+ <span class="alibaba number color-red">0</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="project-flow">
|
|
|
+ <div class="project-chart">
|
|
|
+ <div ref="chart2" class="pie-chart"></div>
|
|
|
+ <div class="chart-legend">
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-bage"></span>
|
|
|
+ <span class="legend-label">周界报警</span>
|
|
|
+ <span class="legend-label">
|
|
|
+ <span class="alibaba">3</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-bage blue"></span>
|
|
|
+ <span class="legend-label">电子巡更</span>
|
|
|
+ <span class="legend-label">
|
|
|
+ <span class="alibaba">2</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-bage yellow"></span>
|
|
|
+ <span class="legend-label">消防设施</span>
|
|
|
+ <span class="legend-label">
|
|
|
+ <span class="alibaba">1</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-bage orange"></span>
|
|
|
+ <span class="legend-label">危险品</span>
|
|
|
+ <span class="legend-label">
|
|
|
+ <span class="alibaba">1</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-view">
|
|
|
+ <div class="flow-title"> {{nowTitle.name}}(4)</div>
|
|
|
+ <div class="flow-box">
|
|
|
+ <div class="flow-test">
|
|
|
+ <div class="flow-test-item">
|
|
|
+ <div class="label">总数量</div>
|
|
|
+ <div class="alibaba number color-blue">7</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-test-item">
|
|
|
+ <div class="label">已处理</div>
|
|
|
+ <div class="alibaba number color-green">7</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-test-item">
|
|
|
+ <div class="label">处理中</div>
|
|
|
+ <div class="alibaba number color-purple">0</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-test-item">
|
|
|
+ <div class="label">为处理</div>
|
|
|
+ <div class="alibaba number color-red">0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-list">
|
|
|
+ <div class="flow-item">
|
|
|
+ <div class="flow-icon">
|
|
|
+ <div>1号楼</div>
|
|
|
+ <div>1F</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-content">
|
|
|
+ <div class="flow-name">
|
|
|
+ <span class="name">周界报警</span>
|
|
|
+ <div class="hui-tag hui-tag-success">合格</div>
|
|
|
+ </div>
|
|
|
+ <div class="date">2020-01-01</div>
|
|
|
+ </div>
|
|
|
+ <span class="color-primary">查看详情</span>
|
|
|
+ </div>
|
|
|
+ <div class="flow-item">
|
|
|
+ <div class="flow-icon">
|
|
|
+ <div>1号楼</div>
|
|
|
+ <div>2F</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-content">
|
|
|
+ <div class="flow-name">
|
|
|
+ <span class="name">周界报警</span>
|
|
|
+ <div class="hui-tag hui-tag-success">合格</div>
|
|
|
+ </div>
|
|
|
+ <div class="date">2020-01-01</div>
|
|
|
+ </div>
|
|
|
+ <span class="color-primary">查看详情</span>
|
|
|
+ </div>
|
|
|
+ <div class="flow-item">
|
|
|
+ <div class="flow-icon">
|
|
|
+ <div>1号楼</div>
|
|
|
+ <div>3F</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-content">
|
|
|
+ <div class="flow-name">
|
|
|
+ <span class="name">周界报警</span>
|
|
|
+ <div class="hui-tag hui-tag-success">合格</div>
|
|
|
+ </div>
|
|
|
+ <div class="date">2020-01-01</div>
|
|
|
+ </div>
|
|
|
+ <span class="color-primary">查看详情</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="project-item">
|
|
|
+ <div class="project-item-title">创业园区-2号楼</div>
|
|
|
+ <div class="project-test">
|
|
|
+ <div class="test-item blue">
|
|
|
+ <span>总数量</span>
|
|
|
+ <span class="alibaba number color-blue">28</span>
|
|
|
+ </div>
|
|
|
+ <div class="test-item green">
|
|
|
+ <span>已处理</span>
|
|
|
+ <span class="alibaba number color-green">22</span>
|
|
|
+ </div>
|
|
|
+ <div class="test-item purple">
|
|
|
+ <span>处理中</span>
|
|
|
+ <span class="alibaba number color-purple">6</span>
|
|
|
+ </div>
|
|
|
+ <div class="test-item red">
|
|
|
+ <span>未处理</span>
|
|
|
+ <span class="alibaba number color-red">0</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="project-flow">
|
|
|
+ <div class="project-chart">
|
|
|
+ <div ref="chart3" class="pie-chart"></div>
|
|
|
+ <div class="chart-legend">
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-bage"></span>
|
|
|
+ <span class="legend-label">周界报警</span>
|
|
|
+ <span class="legend-label">
|
|
|
+ <span class="alibaba">3</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-bage blue"></span>
|
|
|
+ <span class="legend-label">电子巡更</span>
|
|
|
+ <span class="legend-label">
|
|
|
+ <span class="alibaba">2</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-bage yellow"></span>
|
|
|
+ <span class="legend-label">消防设施</span>
|
|
|
+ <span class="legend-label">
|
|
|
+ <span class="alibaba">1</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="legend-item">
|
|
|
+ <span class="legend-bage orange"></span>
|
|
|
+ <span class="legend-label">危险品</span>
|
|
|
+ <span class="legend-label">
|
|
|
+ <span class="alibaba">1</span>
|
|
|
+ <span class="unit">条</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-view">
|
|
|
+ <div class="flow-title"> {{nowTitle.name}}(4)</div>
|
|
|
+ <div class="flow-box">
|
|
|
+ <div class="flow-test">
|
|
|
+ <div class="flow-test-item">
|
|
|
+ <div class="label">总数量</div>
|
|
|
+ <div class="alibaba number color-blue">7</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-test-item">
|
|
|
+ <div class="label">已处理</div>
|
|
|
+ <div class="alibaba number color-green">7</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-test-item">
|
|
|
+ <div class="label">处理中</div>
|
|
|
+ <div class="alibaba number color-purple">0</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-test-item">
|
|
|
+ <div class="label">为处理</div>
|
|
|
+ <div class="alibaba number color-red">0</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-list">
|
|
|
+ <div class="flow-item">
|
|
|
+ <div class="flow-icon">
|
|
|
+ <div>2号楼</div>
|
|
|
+ <div>1F</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-content">
|
|
|
+ <div class="flow-name">
|
|
|
+ <span class="name">周界报警</span>
|
|
|
+ <div class="hui-tag hui-tag-success">合格</div>
|
|
|
+ </div>
|
|
|
+ <div class="date">2020-01-01</div>
|
|
|
+ </div>
|
|
|
+ <span class="color-primary">查看详情</span>
|
|
|
+ </div>
|
|
|
+ <div class="flow-item">
|
|
|
+ <div class="flow-icon">
|
|
|
+ <div>2号楼</div>
|
|
|
+ <div>2F</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-content">
|
|
|
+ <div class="flow-name">
|
|
|
+ <span class="name">周界报警</span>
|
|
|
+ <div class="hui-tag hui-tag-success">合格</div>
|
|
|
+ </div>
|
|
|
+ <div class="date">2020-01-01</div>
|
|
|
+ </div>
|
|
|
+ <span class="color-primary">查看详情</span>
|
|
|
+ </div>
|
|
|
+ <div class="flow-item">
|
|
|
+ <div class="flow-icon">
|
|
|
+ <div>2号楼</div>
|
|
|
+ <div>3F</div>
|
|
|
+ </div>
|
|
|
+ <div class="flow-content">
|
|
|
+ <div class="flow-name">
|
|
|
+ <span class="name">周界报警</span>
|
|
|
+ <div class="hui-tag hui-tag-success">合格</div>
|
|
|
+ </div>
|
|
|
+ <div class="date">2020-01-01</div>
|
|
|
+ </div>
|
|
|
+ <span class="color-primary">查看详情</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="week-common">
|
|
|
+ <div class="week-detail">
|
|
|
+ <div class="detail-title">
|
|
|
+ <div class="title">
|
|
|
+ <div class="icon">
|
|
|
+ 第一周
|
|
|
+ </div>
|
|
|
+ <div class="name">项目工程周报</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-date">
|
|
|
+ 2023-10-31至2023-11-07
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-list">
|
|
|
+ <div class="detail-item">
|
|
|
+ <div class="key">项目编号</div>
|
|
|
+ <div class="value">001</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <div class="key">编制单位</div>
|
|
|
+ <div class="value">温州新能源制造有限公司</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <div class="key">项目经理</div>
|
|
|
+ <div class="value">周大生</div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-item">
|
|
|
+ <div class="key">生成日期</div>
|
|
|
+ <div class="value">2023年11月07日</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="week-wather">
|
|
|
+ <div class="wather-item" v-for="(item,index) in weekWeatherList" :key="index">
|
|
|
+ <div class="label">{{returnWeekDate(item.week)}}</div>
|
|
|
+ <div class="label">{{$dayjs(item.date).format('MM/DD')}}</div>
|
|
|
+ <div class="wather-icon">
|
|
|
+ <weather-icon :name="item.dayweatherIcon" width="20" height="20"></weather-icon>
|
|
|
+ </div>
|
|
|
+ <div class="label">{{item.dayweather}}</div>
|
|
|
+ <div class="label">{{item.nighttemp}}~{{item.daytemp}}°C</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import weatherIcon from '@/components/common/weatherIcon'
|
|
|
+ import Crypto from '@/uitls/crypto'
|
|
|
+ import {
|
|
|
+ getWeekDetailById
|
|
|
+ } from '@/httpApi/operation'
|
|
|
+ import {
|
|
|
+ pinyin
|
|
|
+ } from 'pinyin-pro';
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ titleList: [],
|
|
|
+ nowTitle: {},
|
|
|
+ detailId: '',
|
|
|
+ weekWeatherList: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ weatherIcon
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.detailId = Crypto.AES.decrypt(decodeURIComponent(this.$route.query.id), 'bosshand');
|
|
|
+ if (!this.detailId) return;
|
|
|
+ this.init();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getWeekDetailById(this.detailId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ let list = res.data.filter(node => node.name != '天气情况' && node.name != '周报文档')
|
|
|
+ this.nowTitle = list[0];
|
|
|
+ this.titleList = list;
|
|
|
+ if (res.data[0].data) {
|
|
|
+ let weatherList = [];
|
|
|
+ for (let i = 0; i < JSON.parse(res.data[0].data).length; i++) {
|
|
|
+ let casts = JSON.parse(JSON.parse(res.data[0].data)[i].weather).forecasts[0].casts;
|
|
|
+ let nowDateWearther = casts.filter(node => node.date === JSON.parse(res.data[0]
|
|
|
+ .data)[i].date)[0];
|
|
|
+ nowDateWearther['dayweatherIcon'] = pinyin(nowDateWearther.dayweather, {
|
|
|
+ toneType: 'none',
|
|
|
+ }).replaceAll(' ', '');
|
|
|
+ weatherList.push(nowDateWearther);
|
|
|
+ }
|
|
|
+ this.weekWeatherList = weatherList.splice(0, 7);
|
|
|
+ }
|
|
|
+ this.initChart();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ initChart() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.chart(this.$refs.chart1, [
|
|
|
+ [1, 3, 2, 6, 1, 1, 3],
|
|
|
+ [2, 3, 1, 4, 4, 2, 3],
|
|
|
+ [3, 4, 3, 4, 5, 3, 2]
|
|
|
+ ], ['#2DB85C', '#9D60FB', '#F04243'], ['2023-12-1', '2023-12-2', '2023-12-3',
|
|
|
+ '2023-12-4',
|
|
|
+ '2023-12-5', '2023-12-6', '2023-12-7'
|
|
|
+ ])
|
|
|
+ this.charts(this.$refs.chart2);
|
|
|
+ this.charts(this.$refs.chart3);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ returnWeekDate(week) {
|
|
|
+ let str = '-';
|
|
|
+ switch (week) {
|
|
|
+ case '1':
|
|
|
+ str = '周一'
|
|
|
+ break;
|
|
|
+ case '2':
|
|
|
+ str = '周二'
|
|
|
+ break;
|
|
|
+ case '3':
|
|
|
+ str = '周三'
|
|
|
+ break;
|
|
|
+ case '4':
|
|
|
+ str = '周四'
|
|
|
+ break;
|
|
|
+ case '5':
|
|
|
+ str = '周五'
|
|
|
+ break;
|
|
|
+ case '6':
|
|
|
+ str = '周六'
|
|
|
+ break;
|
|
|
+ case '7':
|
|
|
+ str = '周日'
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ charts(elem) {
|
|
|
+ let chart = echarts.init(elem);
|
|
|
+ let title = '周界报警',
|
|
|
+ len = "42.86"
|
|
|
+ let option = {
|
|
|
+ title: {
|
|
|
+ text: ("{name|" + title + "}" + "\n{percent|" + len + "}{name|%}"),
|
|
|
+ left: 'center',
|
|
|
+ top: 'center',
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ color: "rgba(255,255,255,0.6)",
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 16
|
|
|
+ },
|
|
|
+ percent: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 28,
|
|
|
+ lineHeight: 34,
|
|
|
+ fontFamily: 'alibabaMedium'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ color: ['#73DEB3', '#73A0FA', '#F7C739', '#EB7E65'],
|
|
|
+ series: [{
|
|
|
+ type: 'pie',
|
|
|
+ center: ['50%', '50%'],
|
|
|
+ radius: ['60%', '90%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ itemStyle: {
|
|
|
+ borderColor: '#0E131C',
|
|
|
+ borderWidth: 5
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: (params) => {
|
|
|
+ return ("{name|" + params.name + "}" + "\n{percent|" +
|
|
|
+ params.percent.toFixed(2) + "}{name|%}");
|
|
|
+ },
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ color: "rgba(255,255,255,0.6)",
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 16
|
|
|
+ },
|
|
|
+ percent: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 28,
|
|
|
+ lineHeight: 34,
|
|
|
+ fontFamily: 'alibabaMedium'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 3,
|
|
|
+ name: "周界报警"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: "电子巡更"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: "消防设施"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: "危险品"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ chart.setOption(option);
|
|
|
+ // 高亮时
|
|
|
+ chart.on('highlight', (e) => {
|
|
|
+ chart.setOption({
|
|
|
+ title: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 取消高亮时
|
|
|
+ chart.on('downplay', (e) => {
|
|
|
+ chart.setOption({
|
|
|
+ title: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 鼠标移入数据时
|
|
|
+ chart.on('mouseover', {
|
|
|
+ componentType: 'series',
|
|
|
+ seriesType: 'pie'
|
|
|
+ }, (params) => {
|
|
|
+ chart.setOption({
|
|
|
+ title: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // 鼠标移出数据时
|
|
|
+ chart.on('mouseout', {
|
|
|
+ componentType: 'series',
|
|
|
+ seriesType: 'pie'
|
|
|
+ }, (params) => {
|
|
|
+ chart.setOption({
|
|
|
+ title: {
|
|
|
+ show: true
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ chart(elem, data, color, x) {
|
|
|
+ let chart = echarts.init(elem);
|
|
|
+ let series = [];
|
|
|
+ for (var i = 0; i < data.length; i++) {
|
|
|
+ series = series.concat([{
|
|
|
+ data: data[i],
|
|
|
+ type: 'line',
|
|
|
+ symbolSize: 6,
|
|
|
+ color: color[i],
|
|
|
+ lineStyle: {
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ z: 99
|
|
|
+ }, {
|
|
|
+ data: data[i],
|
|
|
+ type: 'line',
|
|
|
+ showSymbol: false,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: '#D0DEEE'
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ color: color[i],
|
|
|
+ z: 99
|
|
|
+ }]);
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: 'axis',
|
|
|
+ formatter: function() {
|
|
|
+ return ''
|
|
|
+ },
|
|
|
+ backgroundColor: 'rgba(255,255,255,0)',
|
|
|
+ borderWidth: 0,
|
|
|
+ padding: 0,
|
|
|
+ axisPointer: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'solid',
|
|
|
+ color: '#4E5561',
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '15',
|
|
|
+ top: '30',
|
|
|
+ right: '15',
|
|
|
+ bottom: '25',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: x,
|
|
|
+ axisLabel: {
|
|
|
+ margin: 4,
|
|
|
+ color: '#D0DEEE',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ boundaryGap: true,
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#6C8097'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ name: '数量',
|
|
|
+ type: 'value',
|
|
|
+ nameTextStyle: {
|
|
|
+ color: '#D0DEEE',
|
|
|
+ fontSize: 12,
|
|
|
+ align: 'right',
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ margin: 10,
|
|
|
+ color: '#D0DEEE',
|
|
|
+ fontSize: 12
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: 'rgba(108,128,151,0.3)',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: series
|
|
|
+ };
|
|
|
+ chart.setOption(option);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ @import '@/assets/scss/week.scss'
|
|
|
+</style>
|