统计分析页面开发

src/api/itemManagement/analysis.js

@@ -0,0 +1,33 @@
+import request from '@/router/axios';
+
+export const getApplyLine = (params) => {
+  return request({
+    url: `/api/blade-desk/goodsApply/getApplyLine`,
+    method: 'get',
+    params: params
+  })
+}
+
+export const getDeptApplyGoodsPie = (params) => {
+  return request({
+    url: `/api/blade-desk/goodsApply/getDeptApplyGoodsPie`,
+    method: 'get',
+    params: params
+  })
+}
+
+export const getGoodsBar = (params) => {
+  return request({
+    url: `/api/blade-desk/goodsApply/getGoodsBar`,
+    method: 'get',
+    params: params
+  })
+}
+
+export const getDeptGoodsValueBar = (params) => {
+  return request({
+    url: `/api/blade-desk/goodsApply/getDeptGoodsValueBar`,
+    method: 'get',
+    params: params
+  })
+}

src/page/itemManagement/analysis/index.vue

@@ -0,0 +1,78 @@
+<template>
+	<basic-container class="content">
+		<el-button
+			class="back"
+			@click="goBack()"
+		>返回</el-button>
+		<div class="box">
+			<el-col
+				class="item"
+				:span="11"
+			>
+				<leftTop></leftTop>
+			</el-col>
+			<el-col
+				class="item"
+				:span="11"
+			>
+				<rightTop></rightTop>
+			</el-col>
+			<el-col
+				class="item"
+				:span="11"
+			>
+				<leftBottom></leftBottom>
+			</el-col>
+			<el-col
+				class="item"
+				:span="11"
+			>
+				<rightBottom></rightBottom>
+			</el-col>
+		</div>
+	</basic-container>
+</template> 
+
+<script>
+import leftTop from './leftTop.vue'
+import rightTop from './rightTop.vue'
+import leftBottom from './leftBottom.vue'
+import rightBottom from './rightBottom.vue'
+export default {
+	components: {
+		leftTop,
+		rightTop,
+		leftBottom,
+		rightBottom
+	},
+	methods: {
+		goBack() {
+			this.$router.go(-1)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	.content {
+		height: 100%;
+		background-color: white;
+		padding: 20px !important;
+    }
+	.back {
+		float: right;
+		margin-bottom: 24px;
+	}
+	.box{
+		width: 100%;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		align-items: center;
+		.item {
+			margin: 10px;
+			border: 1px solid rgb(78, 78, 78);
+			padding: 12px;
+		}
+	}
+</style>

src/page/itemManagement/analysis/leftBottom.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="source-situation">
+        <p class="yq-title">物品出入库数量统计</p>
+		<div id="left_bottom"></div>
+    </div>
+</template>
+
+<script>
+import { getGoodsBar } from "@/api/itemManagement/analysis";
+export default {
+  data() {
+    return {
+      intervalTime22: null,
+    };
+  },
+  beforeDestroy() {
+    if (this.intervalTime22) {
+      console.log('clearInterval22')
+      clearInterval(this.intervalTime22);
+      this.intervalTime22 = null;
+    }
+  },
+  mounted() {
+    this.getData();
+    this.intervalTime22 = setInterval(() => {
+      this.getData();
+    },30*60*1000)
+  },
+  methods: {
+    getData() {
+      getGoodsBar().then(res => {
+        const data = res.data.data
+        let name = []
+        let ck = []
+        let rk = []
+        data.forEach(item => {
+          ck.push(item.ck)
+          rk.push(item.rk)
+          name.push(item.name)
+        });
+        let myChart = this.$echarts.init(document.getElementById('left_bottom'))
+        myChart.setOption({
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            legend: {},
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            yAxis: {
+                type: 'value',
+                boundaryGap: [0, 0.01]
+            },
+            xAxis: {
+                type: 'category',
+                data: name
+            },
+            series: [
+                {
+                    name: '出库',
+                    type: 'bar',
+                    data: ck
+                },
+                {
+                    name: '入库',
+                    type: 'bar',
+                    data: rk
+                }
+            ]
+        })
+      })
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.source-situation {
+    height: 370px;
+    margin-bottom: 12px;
+        #left_bottom{
+            width: 100%;
+            height: 360px;
+            // margin-left: 10px;
+        }
+    .yq-title {
+        margin: 0.7rem 0 0 1.5rem;
+        color: black;
+        font-weight: bold;
+    }
+    .search-box {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>

src/page/itemManagement/analysis/leftTop.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="source-situation">
+    <p class="yq-title">单位时间物品消耗</p>
+    <div class="change-time-box">
+      <div class="change-time">
+        <div
+          @click="getData(1)"
+          :style="choseDate == 1 ? 'backgroundColor: rgb(8,166,255); color: white;' : ''"
+        >
+          年
+        </div>
+        <div
+          @click="getData(2)"
+          :style="choseDate == 2 ? 'backgroundColor: rgb(8,166,255); color: white;' : ''"
+        >
+          季度
+        </div>
+        <div
+          @click="getData(3)"
+          :style="choseDate == 3 ? 'backgroundColor: rgb(8,166,255); color: white;' : ''"
+        >
+          月
+        </div>
+      </div>
+    </div>
+		<div id="left_top"></div>
+  </div>
+</template>
+
+<script>
+import { getApplyLine } from "@/api/itemManagement/analysis";
+export default {
+  data() {
+    return {
+      choseDate: 3,
+      intervalTime22: null,
+    };
+  },
+  beforeDestroy() {
+    if (this.intervalTime22) {
+      console.log('clearInterval22')
+      clearInterval(this.intervalTime22);
+      this.intervalTime22 = null;
+    }
+  },
+  mounted() {
+    this.getData(this.choseDate);
+    this.intervalTime22 = setInterval(() => {
+      this.getData(this.choseDate);
+    },30*60*1000)
+  },
+  methods: {
+    getData(type) {
+        console.log('gxh', type)
+        this.choseDate = type
+        getApplyLine({type}).then(res => {
+            console.log(res)
+            let data = res.data.data
+            let seriesData = []
+            let xAxisData = data.dateList
+            data.dataList.forEach(item => {
+                seriesData.push({
+                    name: item.name,
+                    type: 'line',
+                    data: item.consumeList
+                })
+            })
+            let myChart = this.$echarts.init(document.getElementById('left_top'))
+            // const data = {
+            // 	conRate: '0.5',
+            // 	proRate: '0.5'
+            // }
+            myChart.setOption({
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {},
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: xAxisData
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                series: seriesData
+            })
+        })
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.source-situation {
+  height: 370px;
+    #left_top{
+      width: 100%;
+      height: 300px;
+    }
+    .yq-title {
+      margin: 0.7rem 0 0 1.5rem;
+      color: black;
+      font-weight: bold;
+    }
+    .change-time-box {
+      // position: absolute;
+      // right: 1.25rem;
+      display: flex;
+      justify-content: flex-end;
+      margin: 12px 0;
+      cursor: pointer;
+      .change-time {
+        display: inline-flex;
+        border: 1px solid #08a6ff;
+        width: 7.5rem;
+      //   margin-top: 1.875rem;
+        justify-content: flex-start;
+        border-radius: 0.312rem;
+        font-size: 14px;
+        z-index: 100;
+        div {
+          color: black;
+          width: 50%;
+          text-align: center;
+          border-right: 1px solid rgb(8, 166, 255);
+        }
+      }
+      /deep/ .el-date-editor .el-input__inner {
+        background-color: rgb(152, 160, 173);
+        color: rgba(255, 255, 255, 0.7);
+        border-color: rgb(152, 160, 173);
+      }
+
+      /deep/ .el-date-editor .el-input__inner::-webkit-input-placeholder {
+        color: white;
+      }
+    }
+}
+</style>

src/page/itemManagement/analysis/rightBottom.vue

@@ -0,0 +1,93 @@
+<template>
+    <div class="source-situation">
+        <p class="yq-title">部门物品消耗价值</p>
+		<div id="right_bottom"></div>
+    </div>
+</template>
+
+<script>
+import { getDeptGoodsValueBar } from "@/api/itemManagement/analysis";
+export default {
+  data() {
+    return {
+      intervalTime22: null,
+    };
+  },
+  beforeDestroy() {
+    if (this.intervalTime22) {
+      console.log('clearInterval22')
+      clearInterval(this.intervalTime22);
+      this.intervalTime22 = null;
+    }
+  },
+  mounted() {
+    this.getData();
+    this.intervalTime22 = setInterval(() => {
+      this.getData();
+    },30*60*1000)
+  },
+  methods: {
+    getData() {
+      getDeptGoodsValueBar().then(res => {
+        const data = res.data.data
+        let name = []
+        let list = []
+        data.forEach(item => {
+          name.push(item.deptName)
+          list.push(item.value)
+        })
+        let myChart = this.$echarts.init(document.getElementById('right_bottom'))
+        myChart.setOption({
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            legend: {},
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                containLabel: true
+            },
+            yAxis: {
+                type: 'value',
+            },
+            xAxis: {
+                type: 'category',
+                data: name
+            },
+            series: [
+                {
+                    data: list,
+                    type: 'bar'
+                }
+            ]
+        })
+      })
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.source-situation {
+    height: 370px;
+    margin-bottom: 12px;
+        #right_bottom{
+            width: 100%;
+            height: 360px;
+            // margin-left: 10px;
+        }
+    .yq-title {
+        margin: 0.7rem 0 0 1.5rem;
+        color: black;
+        font-weight: bold;
+    }
+    .search-box {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+</style>

src/page/itemManagement/analysis/rightTop.vue

@@ -0,0 +1,156 @@
+<template>
+    <div class="source-situation">
+        <p class="yq-title">部门物品消耗价值占比</p>
+        <div class="search-box">
+            <el-select
+                v-model="deptId"
+                placeholder="请选择部门"
+                @change="getData()"
+                clearable
+            >
+                <el-option
+                    v-for="item in deptList"
+                    :key="item.id"
+                    :label="item.deptName"
+                    :value="item.id">
+                </el-option>
+            </el-select>
+        </div>
+		<div
+            id="right_top"
+            style="height:270px"
+        ></div>
+    </div>
+</template>
+
+<script>
+import { getDeptApplyGoodsPie } from "@/api/itemManagement/analysis";
+import { deptList } from "@/api/itemManagement/itemList";
+export default {
+  data() {
+    return {
+      choseDate: 3,
+      intervalTime22: null,
+      deptId: '',
+      deptList: []
+    };
+  },
+  beforeDestroy() {
+    if (this.intervalTime22) {
+      console.log('clearInterval22')
+      clearInterval(this.intervalTime22);
+      this.intervalTime22 = null;
+    }
+  },
+  mounted() {
+    this.selectDict()
+    this.getData();
+    this.intervalTime22 = setInterval(() => {
+      this.getData();
+    },30*60*1000)
+  },
+  methods: {
+    // 字典
+    async selectDict() {
+        deptList().then(res => {
+            this.deptList = res.data.data[0].children
+        })
+    },
+    getData() {
+        console.log('gxh', {deptId: this.deptId})
+        getDeptApplyGoodsPie({deptId: this.deptId}).then(res => {
+            const data = res.data.data.data
+            const total = res.data.data.total
+            let list = []
+            for (let key in data) {
+                list.push({
+                    name: key,
+                    value: data[key].split('|')[1]
+                })
+            }
+            console.log('list', list)
+            let myChart = this.$echarts.init(document.getElementById('right_top'))
+            // const data = {
+            // 	conRate: '0.5',
+            // 	proRate: '0.5'
+            // }
+            myChart.setOption({
+                tooltip: {
+                    show: true,
+                },
+                title: [{
+                    text: total,
+                    top: '50%',
+                    left: (total+'').length>7?'33.5%':(total+'').length>6?'34.5%':(total+'').length>5?'35.5%':(total+'').length>4?'36.5%':'37.5%',
+                    textStyle: {
+                        fontSize: 20,
+                        fontWeight: 'normal',
+                        color: 'rgb(7,230,234)',
+                        fontFamily:'fantasy'
+                    },
+                }],
+                legend: {
+                    top: '20%',
+                    right: '3%',
+                    textStyle: {
+                        color: "black"
+                    },
+                    orient:'vertical',
+                    itemHeight:6,
+                    itemWidth:18,
+                },
+                series: [
+                    {
+                        name: '消耗价值占比',
+                        type: 'pie',
+                        top:'10%',
+                        right:'20%',
+                        radius: ['50%', '80%'],
+                        avoidLabelOverlap: false,
+                        // legendHoverLink:false,
+                        label: {
+                            show: true,
+                            position: 'outside',
+                            formatter:'{c} | {d}%',
+                            // color:'white'
+                        },
+                        emphasis: {
+                            label: {
+                                show: true,
+                                // fontSize: '40',
+                                fontWeight: 'bold'
+                            },
+                            scale:false,
+                        },
+                        labelLine: {
+                            show: true
+                        },
+                        data: list
+                    }
+                ]
+            })
+        })
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.source-situation {
+    height: 370px;
+        #right_top{
+            width: 100%;
+            // margin-left: 10px;
+        }
+    .yq-title {
+        margin: 0.7rem 0 0 1.5rem;
+        color: black;
+        font-weight: bold;
+    }
+    .search-box {
+        display: flex;
+        justify-content: flex-end;
+        margin: 12px 0;
+    }
+}
+</style>

src/page/itemManagement/itemList/index.vue

@@ -137,6 +137,7 @@
 			<div>
 				<el-button class="register" @click="handleAdd" v-if="vaildData(permission.goods_storage, false)">登记入库</el-button>
 				<el-button v-if="vaildData(permission.goods_remove, false)" class="register" @click="batchDeletion">批量删除</el-button>
+				<el-button class="register" @click="analysis">统计分析</el-button>
 			</div>
 		</div>
 		<div class="content-main">
@@ -798,7 +799,7 @@
 <script>
 	import { findPage, detail, save, goodsApplySave, remove, historyDetail, check, deptList } from "@/api/itemManagement/itemList";
 	import { findDeptInventoryPage } from "@/api/itemManagement/procurementInformation";
-	import {getDictionary} from '@/api/system/dictbiz'
+	import {getDictionary} from '@/api/system/dictbiz';
   	import {mapGetters} from "vuex";
 	export default {
 		data() {
@@ -1063,6 +1064,12 @@
 					})
 				})
 			},
+			// 统计分析
+			analysis() {
+				this.$router.push({
+					path: `/itemManagement/analysis`,
+				});
+			},
 			// 表格更多选项点击
 			handleOperation(type, row) {
 				this.dialogFormType = type
@@ -1350,7 +1357,7 @@
 <style lang="scss" scoped>
 	.content {
 		height: 100%;
-    background-color: white;
+    	background-color: white;
 		padding: 20px !important;
 		.content-top{
 			display: flex;

src/router/views/index.js

@@ -326,6 +326,15 @@ export default [{
 				component: () =>
 					import( /* webpackChunkName: "views" */ '@/page/itemManagement/procurementInformation')
 			},
+			{
+				path: 'analysis',
+				name: '统计分析',
+				meta: {
+					i18n: 'dashboard'
+				},
+				component: () =>
+					import( /* webpackChunkName: "views" */ '@/page/itemManagement/analysis')
+			},
 		]
 	},
 	{