|
@@ -2,29 +2,29 @@
|
|
|
<div class="content-box">
|
|
|
<div class="content-test">
|
|
|
<div class="test-item blue">
|
|
|
- <div class="label">总数量</div>
|
|
|
- <div class="number alibaba">48</div>
|
|
|
+ <div class="label">总审核</div>
|
|
|
+ <div class="number alibaba">{{dataList.length}}</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="label">已通过</div>
|
|
|
+ <div class="number alibaba">{{flowCount.success}}</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="label">审核中</div>
|
|
|
+ <div class="number alibaba">{{flowCount.waiting}}</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="label">未通过</div>
|
|
|
+ <div class="number alibaba">{{flowCount.error}}</div>
|
|
|
<div class="icon">
|
|
|
<i class="iconfont huifont-buhege"></i>
|
|
|
</div>
|
|
@@ -34,279 +34,207 @@
|
|
|
<div class="legend-box">
|
|
|
<div class="legend-item">
|
|
|
<span class="legend-page" style="background:#2DB85C;"></span>
|
|
|
- <span class="legend-name">已处理</span>
|
|
|
+ <span class="legend-name">已通过</span>
|
|
|
</div>
|
|
|
<div class="legend-item">
|
|
|
<span class="legend-page" style="background:#9D60FB;"></span>
|
|
|
- <span class="legend-name">处理中</span>
|
|
|
+ <span class="legend-name">审核中</span>
|
|
|
</div>
|
|
|
<div class="legend-item">
|
|
|
<span class="legend-page" style="background:#F04243;"></span>
|
|
|
- <span class="legend-name">未处理</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"> 设备管理(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">设备管理(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>
|
|
|
+ <device-item v-for="(item,index) in flowItem" :key="index" :node="item"></device-item>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ getWeekDetailByTypeId,
|
|
|
+ } from '@/httpApi/operation'
|
|
|
+ import {
|
|
|
+ getProjectDetailById
|
|
|
+ } from '@/httpApi/space';
|
|
|
+ import deviceItem from './deviceItem.vue'
|
|
|
+ export default {
|
|
|
+ props: ['typeId', 'dateList'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataList: [],
|
|
|
+ flowCount: {
|
|
|
+ allNum: 0,
|
|
|
+ success: 0,
|
|
|
+ waiting: 0,
|
|
|
+ error: 0
|
|
|
+ },
|
|
|
+ projectItemList: [],
|
|
|
+ flowItem: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ getProjectDetailById(this.$store.getters.project.id).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ this.projectItemList = res.data.projectItemList || [];
|
|
|
+ this.init();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ deviceItem
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ getWeekDetailByTypeId(this.typeId).then(res => {
|
|
|
+ if (res.state) {
|
|
|
+ if (res.data.data) {
|
|
|
+ let data = JSON.parse(res.data.data);
|
|
|
+ this.dataList = data;
|
|
|
+ this.flowCount = {
|
|
|
+ allNum: data.length,
|
|
|
+ success: data.filter(node => node.type === 3).length,
|
|
|
+ waiting: data.filter(node => node.type !== 3 && node.type !== 4).length,
|
|
|
+ error: data.filter(node => node.type === 4).length
|
|
|
+ }
|
|
|
+ this.lineChart(data);
|
|
|
+ let obj = {},
|
|
|
+ list = [];
|
|
|
+ for (let i = 0; i < data.length; i++) {
|
|
|
+ if (!obj[data[i].projectItemId]) {
|
|
|
+ obj[data[i].projectItemId] = 1;
|
|
|
+ list.push({
|
|
|
+ id: data[i].projectItemId,
|
|
|
+ name: this.projectItemList.find(node => node.id === data[i]
|
|
|
+ .projectItemId).name,
|
|
|
+ targetList: this.projectItemList.find(node => node.id === data[i]
|
|
|
+ .projectItemId).projectItemTargetList,
|
|
|
+ node: []
|
|
|
+ })
|
|
|
+ }
|
|
|
+ list.find(node => node.id === data[i].projectItemId).node.push(data[i])
|
|
|
+ }
|
|
|
+ this.flowItem = list;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ lineChart(data) {
|
|
|
+ let chartBox1 = [],
|
|
|
+ chartBox2 = [],
|
|
|
+ chartBox3 = [];
|
|
|
+ for (let i = 0; i < this.dateList.length; i++) {
|
|
|
+ chartBox1.push(data.filter(node => this.$dayjs(node.date).format('YYYY-MM-DD') === this.dateList[i] &&
|
|
|
+ node.type === 3).length);
|
|
|
+ chartBox2.push(data.filter(node => this.$dayjs(node.date).format('YYYY-MM-DD') === this.dateList[i] &&
|
|
|
+ node.type !== 3 && node.type !== 4).length);
|
|
|
+ chartBox3.push(data.filter(node => this.$dayjs(node.date).format('YYYY-MM-DD') === this.dateList[i] &&
|
|
|
+ node.type === 4).length);
|
|
|
+ }
|
|
|
+ this.chart(this.$refs.chart1, [chartBox1, chartBox2, chartBox3], ['#2DB85C',
|
|
|
+ '#9D60FB', '#F04243'
|
|
|
+ ], this.dateList);
|
|
|
+ },
|
|
|
+ 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>
|