<template> <div class="app-container home"> <div class="index-content"> <div class="index-content-nav"> <el-row :gutter="20"> <el-col :span="4" v-if="user.roleId == 3"> <div class="index-content-nav-item"> <div class="index-content-nav-item-top"> <h3>所属城市</h3> </div> <h2>{{ cityName ? cityName : "" }}</h2> </div> </el-col> <el-col :span="4"> <div class="index-content-nav-item"> <div class="index-content-nav-item-top"> <h3>新增用户</h3> <el-select v-model="valueA" placeholder="请选择" style="width: 10em" @change="dataUserAxios" > <el-option v-for="item in [ { label: '今天', value: 1 }, { label: '最近7天', value: 2 }, { label: '最近30天', value: 3 }, { label: '总计', value: 0 }, ]" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> <h2>{{ sumA }}</h2> </div> </el-col> <el-col :span="4" v-if="user.roleId != 3"> <div class="index-content-nav-item"> <div class="index-content-nav-item-top"> <h3>总销售额</h3> <el-select v-model="valueB" placeholder="请选择" style="width: 10em" @change="saleroomAxios" > <el-option v-for="item in [ { label: '今天', value: 1 }, { label: '最近7天', value: 2 }, { label: '最近30天', value: 3 }, { label: '总计', value: 0 }, ]" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> <h2>{{ sumB }}</h2> </div> </el-col> <el-col :span="4"> <div class="index-content-nav-item"> <div class="index-content-nav-item-top"> <h3>新增陪诊员</h3> <el-select v-model="valueC" placeholder="请选择" style="width: 10em" @change="dataEmployeesAxios" > <el-option v-for="item in [ { label: '今天', value: 1 }, { label: '最近7天', value: 2 }, { label: '最近30天', value: 3 }, { label: '总计', value: 0 }, ]" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> <h2>{{ sumC }}</h2> </div> </el-col> <el-col :span="4"> <div class="index-content-nav-item"> <div class="index-content-nav-item-top"> <h3 v-if="user.roleId == 3">机构收益</h3> <h3 v-else>平台收益</h3> <el-select v-model="valueD" placeholder="请选择" style="width: 10em" @change="platformRevenueAxios" > <el-option v-for="item in [ { label: '今天', value: 1 }, { label: '最近7天', value: 2 }, { label: '最近30天', value: 3 }, { label: '总计', value: 0 }, ]" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> <h2>{{ sumD }}</h2> </div> </el-col> <el-col :span="4"> <div class="index-content-nav-item"> <div class="index-content-nav-item-top"> <h3>总订单量</h3> <el-select v-model="valueE" placeholder="请选择" style="width: 10em" @change="orderQuantityAxios" > <el-option v-for="item in [ { label: '今天', value: 1 }, { label: '最近7天', value: 2 }, { label: '最近30天', value: 3 }, { label: '总计', value: 0 }, ]" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> </div> <h2>{{ sumE }}</h2> </div> </el-col> </el-row> </div> <div class="index-content-order"> <el-row :gutter="24"> <el-col :span="24"> <div class="index-content-order-top"> <h3>已完成订单</h3> <div> <el-date-picker ref="dataPicker" v-model.trim="daterangeTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" v-if="valueF == 2" style="margin-right: 15px" :picker-options="pickerOptions" unlink-panels @change="changeDataer" > </el-date-picker> <el-select v-model="valueF" placeholder="请选择" style="width: 10em" @change="changeValueF" > <el-option v-for="item in [ { label: '最近7天', value: 0 }, { label: '最近30天', value: 1 }, { label: '自定义', value: 2 }, ]" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <template v-if="user.roleId != 3"> <el-select v-model="cityId" placeholder="请选择城市" style="margin-left: 15px; width: 10em" filterable clearable="" @change="changeCtypChange" > <el-option v-for="item in cityVoList" :key="item.id" :label="item.name" :value="item.id" > </el-option> </el-select> <el-select v-model="companyId" placeholder="请选择机构" style="margin-left: 15px; width: 10em" filterable clearable="" @change="orderQuantityEchartsAxios" > <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id" > </el-option> </el-select> </template> </div> </div> <!-- <h2>总量:{{ sumF }}</h2> --> <div class="chart" id="mychart" :style="{ height: '450px', width: '100%' }" /> </el-col> </el-row> </div> </div> <!-- <el-divider /> <el-row :gutter="20"> </el-row> <el-row :gutter="20"> <el-col :xs="24" :sm="24" :md="12" :lg="8"> <el-card class="update-log"> <div slot="header" class="clearfix"> <span>技术支持</span> </div> <div class="body"> <p> <i class="el-icon-s-promotion"></i> 官网:<el-link href="http://www.yyinhong.cn/" target="_blank" >http://www.yyinhong.cn/</el-link > </p> <p> <i class="el-icon-user-solid"></i> 公司名称:上海印宏 </p> </div> </el-card> </el-col> </el-row> --> </div> </template> <script> import * as echarts from "echarts"; require("echarts/theme/macarons"); // echarts theme import resize from "./dashboard/mixins/resize"; import { cityVoListGET } from "@/api/hispotalManage/hospital"; const animationDuration = 3000; import { dataUserGet, dataEmployeesGet, saleroomGet, platformRevenueGet, orderQuantityGet, orderQuantityEchartsGet, companyListGet, } from "@/api/index.js"; import { mapGetters } from "vuex"; export default { name: "Index", mixins: [resize], computed: { ...mapGetters(["user", "cityName"]), }, data() { return { // 版本号 companyId: "", companyList: [], cityVoList: [], cityId: "", version: "4.8.0", valueA: 1, sumA: 0, valueB: 1, sumB: 0, valueC: 1, sumC: 0, valueD: 1, sumD: 0, valueE: 1, sumE: 0, valueF: 0, sumF: 0, chart: null, daterangeTime: "", pickerOptions: { onPick: ({ maxDate, minDate }) => { this.daterangeTime = minDate.getTime(); if (maxDate) { this.daterangeTime = ""; } }, disabledDate: (time) => { if (this.daterangeTime !== "" && this.daterangeTime != null) { const one = 30 * 24 * 3600 * 1000; const minTime = this.daterangeTime - one; const maxTime = this.daterangeTime + one; return time.getTime() < minTime || time.getTime() > maxTime; } }, }, }; }, mounted() { console.log("user", this.user); this.dataUserAxios(); this.dataEmployeesAxios(); if (this.user.roleId != 3) { this.saleroomAxios(); this.cityVoListAxios(); } this.platformRevenueAxios(); this.orderQuantityAxios(); this.orderQuantityEchartsAxios(); }, beforeDestroy() { if (!this.chart) { return; } this.chart.dispose(); this.chart = null; }, methods: { changeCtypChange() { this.companyId = '' this.companyList = [] this.companyListAxios() }, async companyListAxios() { const data_back = await companyListGet({ cityId: this.cityId }); const { code, data } = data_back; if (code === 200) { this.companyList = data; this.orderQuantityEchartsAxios() } }, async cityVoListAxios() { const data_back = await cityVoListGET(); const { code, data } = data_back; if (code === 200) { this.cityVoList = data; } }, changeDataer(e) { console.log("changeDataer", e); if (!e) { this.daterangeTime = ""; this.valueF = 0; } this.orderQuantityEchartsAxios(); }, changeValueF(e) { if (e != 2) { this.orderQuantityEchartsAxios(); } }, async orderQuantityEchartsAxios() { let params = { type: this.valueF, cityId: this.cityId, companyId: this.companyId, }; if ([0, 1].includes(this.valueF)) { } else if (this.valueF == 2) { params.startTime = this.daterangeTime && this.daterangeTime.length ? this.daterangeTime[0] : ""; params.endTime = this.daterangeTime && this.daterangeTime.length ? this.daterangeTime[1] : ""; } const { code, data } = await orderQuantityEchartsGet(params); if (code === 200 && data && data.length) { // let sum = 0; // data.forEach((item) => { // sum += item.num; // }); // this.sumF = sum; let xData = [], yData = []; xData = data.map((item) => { return item.key; }); yData = data.map((item) => { return item.list; }); let maxList = [], ykList = []; data.forEach((item) => { if (item.list && item.list.length) { let ak = item.list.map((fk) => { return fk.num; }); let max = Math.max.apply(null, ak); maxList.push(max); } }); // console.log(xData, yData, maxList, data); this.$nextTick(() => { this.initChart(xData, yData, maxList, data); }); } else { this.sumF = 0; this.$nextTick(() => { this.initChart([], []); }); } }, async orderQuantityAxios() { const { code, data } = await orderQuantityGet({ condition: this.valueE, }); if (code === 200) { this.sumE = data.dataSum || 0; } }, async platformRevenueAxios() { const { code, data } = await platformRevenueGet({ condition: this.valueD, }); if (code === 200) { this.sumD = data.dataSum || 0; } }, async saleroomAxios() { const { code, data } = await saleroomGet({ condition: this.valueB, }); if (code === 200) { this.sumB = data.dataSum || 0; } }, async dataEmployeesAxios() { const { code, data } = await dataEmployeesGet({ condition: this.valueC, }); if (code === 200) { this.sumC = data.dataSum || 0; } }, async dataUserAxios() { const { code, data } = await dataUserGet({ condition: this.valueA, }); if (code === 200) { this.sumA = data.dataSum || 0; } }, initChart(xData, yData, maxList, ykList) { // 基本柱状图 const option = { // legend: { // type: "plain", // 图列类型,默认为 'plain' // bottom: "0px", // 图列相对容器的位置 top\bottom\left\right // data: xData, // }, grid: { top: "10px", bottom: "40px", right: "2%", left: "2%", }, tooltip: { //提示框组件,用于配置鼠标滑过或点击图表时的显示框。 show: true, // 是否显示 trigger: "axis", // 触发类型 'item'图形触发:散点图,饼图等无类目轴的图表中使用; 'axis'坐标轴触发;'none':什么都不触发。 axisPointer: { // 坐标轴指示器配置项。 type: "cross", // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。 }, // showContent: true, //是否显示提示框浮层,默认显示。 // triggerOn: 'mouseover', // 触发时机'click'鼠标点击时触发。 backgroundColor: "rgba(50,50,50,0.7)", // 提示框浮层的背景颜色。 borderColor: "#333", // 提示框浮层的边框颜色。 borderWidth: 0, // 提示框浮层的边框宽。 padding: 5, // 提示框浮层内边距, textStyle: { // 提示框浮层的文本样式。 color: "#fff", fontStyle: "normal", fontWeight: "normal", fontFamily: "sans-serif", fontSize: 14, }, // 提示框浮层内容格式器,支持字符串模板和回调函数两种形式。 // 模板变量有 {a}, {b},{c},分别表示系列名,数据名,数据值等 // formatter: '{a}--{b} 的成绩是 {c}' formatter: function (arg) { let hk = ""; ykList.forEach((item) => { if (item.key == arg[0].name && item.list && item.list.length) { item.list.forEach((fk) => { hk += `<p>${fk.name}:${fk.num}</p>`; }); } }); // return arg[0].name + "的总量是:" + arg[0].data; return hk; }, }, xAxis: [ { type: "category", data: xData, }, ], yAxis: [ { type: "value", }, ], series: [ { name: xData, // type: "bar", type: "line", barWidth: "40%", data: maxList, animationDuration, color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ { offset: 0, color: "#6d8bec", }, { offset: 1, color: "#1506e4", }, ]), }, ], }; const myChart = echarts.init(document.getElementById("mychart")); myChart.setOption(option); //随着屏幕大小调节图表 window.addEventListener("resize", () => { myChart.resize(); }); }, goTarget(href) { window.open(href, "_blank"); }, }, }; </script> <style scoped lang="scss"> .home { blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 17.5px; border-left: 5px solid #eee; } hr { margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; } .col-item { margin-bottom: 20px; } ul { padding: 0; margin: 0; } font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; color: #676a6c; overflow-x: hidden; ul { list-style-type: none; } h4 { margin-top: 0px; } h2 { margin-top: 10px; font-size: 26px; font-weight: 100; } p { margin-top: 10px; b { font-weight: 700; } } .update-log { ol { display: block; list-style-type: decimal; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 40px; } } } .index-content { width: 100%; &-nav { width: 100%; display: flex; &-item { min-height: 50px; border-radius: 4px; box-shadow: 0 0 10px 2px #e2dfdf; padding: 10px; &-top { display: flex; justify-content: space-between; } h2 { width: 100%; // height: 120px; font-weight: 500; font-size: 50px; color: #000000; } } .el-row { width: 100%; margin-bottom: 20px; &:last-child { margin-bottom: 0; } .el-col { width: 20%; } } } &-order { width: 100%; margin-top: 25px; box-shadow: 0 0 10px 2px #e2dfdf; padding: 10px; min-height: 100px; border-radius: 4px; &-top { width: 100%; display: flex; justify-content: space-between; } } } </style>