From 7672bba9fc11315da4c42cba74504b7fd417df0c Mon Sep 17 00:00:00 2001 From: su1124 <1583764726@qq.com> Date: 星期五, 08 三月 2024 15:43:58 +0800 Subject: [PATCH] su --- src/views/standard/renshunum/index.vue | 318 ++++++++++++++++++++++++++++++----------------------- 1 files changed, 180 insertions(+), 138 deletions(-) diff --git a/src/views/standard/renshunum/index.vue b/src/views/standard/renshunum/index.vue index 8174a66..291416b 100644 --- a/src/views/standard/renshunum/index.vue +++ b/src/views/standard/renshunum/index.vue @@ -1,22 +1,37 @@ <template> - <div> - <el-form :model="queryParams" ref="tableList" :inline="true" label-width="76px" style="margin: 10px 10px"> - <el-form-item label="浣撴鏃堕棿" prop="date"> - <el-date-picker v-model="startTime" type="datetimerange" align="right" :picker-options="pickerOptions" - style="width: 310px" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" - :default-time="['00:00:00', '23:00:00']" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" - @change="dateChangebirthday1"> - </el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" @click="submitForm">鎼滅储</el-button> - </el-form-item> - </el-form> + <div> + <el-form + :model="queryParams" + ref="tableList" + :inline="true" + label-width="76px" + style="margin: 10px 10px" + > + <el-form-item label="浣撴鏃堕棿" prop="date"> + <el-date-picker + v-model="startTime" + type="datetimerange" + align="right" + :picker-options="pickerOptions" + style="width: 310px" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + :default-time="['00:00:00', '23:00:00']" + format="yyyy-MM-dd HH:mm" + value-format="yyyy-MM-dd HH:mm" + @change="dateChangebirthday1" + > + </el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="submitForm">鎼滅储</el-button> + </el-form-item> + </el-form> - <div class="data-view"> - <div id="main"></div> - </div> + <div class="data-view"> + <div id="main"></div> </div> + </div> </template> @@ -27,143 +42,170 @@ require("echarts/lib/component/tooltip"); require("echarts/lib/component/legend"); require("echarts/lib/chart/pie"); +import { getNewDateList } from "@/api/hosp/order"; +import moment from "moment"; export default { - name: "chart", - data() { - return { - pickerOptions: { - shortcuts: [{ - text: '鏈�杩戜竴鍛�', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); - picker.$emit('pick', [start, end]); - } - }, { - text: '鏈�杩戜竴涓湀', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); - picker.$emit('pick', [start, end]); - } - }, { - text: '鏈�杩戜笁涓湀', - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); - picker.$emit('pick', [start, end]); - } - }] + name: "chart", + data() { + return { + pickerOptions: { + shortcuts: [ + { + text: "鏈�杩戜竴鍛�", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); + picker.$emit("pick", [start, end]); }, - value1: "", - DateList: [], - startTime: [], - dateAll: [], - queryParams: { - date: null, - beginTime: null, - endTime: null, + }, + { + text: "鏈�杩戜竴涓湀", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); + picker.$emit("pick", [start, end]); }, - }; + }, + { + text: "鏈�杩戜笁涓湀", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); + picker.$emit("pick", [start, end]); + }, + }, + ], + }, + value1: "", + DateList: [], + startTime: [], + dateAll: [], + queryParams: { + date: null, + beginTime: null, + endTime: null, + }, + }; + }, + created() { + // this.getNowTime(); + this.getList(); + this.getdate(); + }, + + methods: { + getdate() { + getNewDateList().then((res) => { + this.startTime = [ + moment(res.data).format("YYYY-MM-DD 00:00:00"), + moment(res.data).format("YYYY-MM-DD 23:59:00"), + ]; + }); }, - created() { - this.getNowTime(); - this.getList(); + getList() { + this.queryParams.beginTime = this.startTime[0]; + this.queryParams.endTime = this.startTime[1]; + getTiaoNumsByDate(this.queryParams).then((res) => { + let myChart = this.$echarts.init(document.getElementById("main")); + //浣犺繘鍏ラ〉闈㈠厛鎶婂浘琛ㄦ覆鏌撲簡 鐒跺悗鎵嶈幏鍙栫殑鏁版嵁鎶� + myChart.setOption({ + color: ["#5470c6"], + legend: {}, + tooltip: {}, + xAxis: { + type: "category", + data: [ + "浣撴浜烘暟", + "鐢风敓鏁伴噺", + "濂崇敓鏁伴噺", + "鏀跺叆", + "涓浜烘暟", + "鍗曚綅浣撴浜烘暟", + ], + }, + yAxis: { + type: "value", + }, + series: [ + { + data: [ + res.data.tijianNum, + res.data.boysNum, + res.data.girlsNum, + { + value: res.data.moneysNum, + itemStyle: { + color: "#a90000", + }, + }, + res.data.personNum, + res.data.tuanDuiNum, + ], + type: "bar", + }, + ], + }); + }); + }, + // 鏃堕棿 + dateChangebirthday1(val) { + this.startTime = val; }, - methods: { - getList() { - this.queryParams.beginTime = this.startTime[0]; - this.queryParams.endTime = this.startTime[1]; - getTiaoNumsByDate(this.queryParams).then(res => { - let myChart = this.$echarts.init(document.getElementById("main")); - //浣犺繘鍏ラ〉闈㈠厛鎶婂浘琛ㄦ覆鏌撲簡 鐒跺悗鎵嶈幏鍙栫殑鏁版嵁鎶� - myChart.setOption({ - color: ['#5470c6'], - legend: {}, - tooltip: {}, - xAxis: { - type: 'category', - data: ['浣撴浜烘暟', '鐢风敓鏁伴噺', '濂崇敓鏁伴噺', '鏀跺叆', '涓浜烘暟', '鍗曚綅浣撴浜烘暟'] - }, - yAxis: { - type: 'value' - }, - series: [ - { - data: [res.data.tijianNum, res.data.boysNum, res.data.girlsNum, { - value: res.data.moneysNum, - itemStyle: { - color: '#a90000' - } - }, res.data.personNum, res.data.tuanDuiNum], - type: 'bar' - } - ] - }); - }) - - - }, - // 鏃堕棿 - dateChangebirthday1(val) { - this.startTime = val; - }, - - // / 澶勭悊榛樿閫変腑褰撳墠鏃ユ湡 - getNowTime() { - var curDate = new Date().getTime(); - var dayNum = 7 * 24 * 3600 * 1000; - var threeDays = curDate - dayNum; - var sDay = this.getLocalTime(threeDays); - var end = this.getLocalTime(curDate); - this.startTime = [sDay, end]; - }, - add0(m) { - return m < 10 ? "0" + m : m; - }, - getLocalTime(nS) { - var time = new Date(nS); - var y = time.getFullYear(); - var m = time.getMonth() + 1; - var d = time.getDate(); - var h = time.getHours(); - var mm = time.getMinutes(); - return ( - y + - "-" + - this.add0(m) + - "-" + - this.add0(d) + - " " + - this.add0(h) + - ":" + - this.add0(mm) - ); - }, - - // 鎼滅储 - submitForm() { - this.queryParams.pageNum = 1; - this.getList(); - }, + // / 澶勭悊榛樿閫変腑褰撳墠鏃ユ湡 + getNowTime() { + var curDate = new Date().getTime(); + var dayNum = 7 * 24 * 3600 * 1000; + var threeDays = curDate - dayNum; + var sDay = this.getLocalTime(threeDays); + var end = this.getLocalTime(curDate); + this.startTime = [sDay, end]; }, + add0(m) { + return m < 10 ? "0" + m : m; + }, + getLocalTime(nS) { + var time = new Date(nS); + var y = time.getFullYear(); + var m = time.getMonth() + 1; + var d = time.getDate(); + var h = time.getHours(); + var mm = time.getMinutes(); + return ( + y + + "-" + + this.add0(m) + + "-" + + this.add0(d) + + " " + + this.add0(h) + + ":" + + this.add0(mm) + ); + }, + + // 鎼滅储 + submitForm() { + this.queryParams.pageNum = 1; + this.getList(); + }, + }, }; </script> <style> .data-view { - margin: 5px 15px; - height: 580px; + margin: 5px 15px; + height: 580px; } #main { - padding: 10px; - height: 580px; - background-color: #fff; + padding: 10px; + height: 580px; + background-color: #fff; } </style> -- Gitblit v1.8.0