测试问题修改
This commit is contained in:
parent
4b1b7bf556
commit
a1a432b636
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
|
|
@ -1370,7 +1370,7 @@
|
|||
},
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
if (Number(row.hasInventory) === 1) {
|
||||
if (Number(row.hasInventory) === 1) {
|
||||
this.$modal.msgWarning("该物料仍有库存，无法删除！");
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -347,6 +347,7 @@ export default {
|
|||
this.getAreaTreeData();//获取区域树
|
||||
this.getTypeTreeData();//获取原料类别树
|
||||
this.getDrpUnitList();//获取单位类型下拉
|
||||
this.getNutritionTypeList();//获取类型下拉
|
||||
},
|
||||
methods: {
|
||||
//区域树
|
||||
|
|
|
|||
|
|
@ -605,23 +605,20 @@ export default {
|
|||
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
if (Number(row.hasInventory) === 1) {
|
||||
if (Number(row.hasInventory) === 1) {
|
||||
this.$modal.msgWarning("该物料仍有库存，无法删除！");
|
||||
return;
|
||||
}
|
||||
this.$modal
|
||||
this.$modal
|
||||
.confirm("是否确认删除数据项？")
|
||||
.then(() => {
|
||||
// 使用箭头函数保持 this 上下文
|
||||
return removeMaterialApi({ materialId: row.materialId });
|
||||
.then(function () {
|
||||
return removeMaterialApi({materialId:row.materialId});
|
||||
})
|
||||
.then(() => {
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
this.getList();
|
||||
})
|
||||
.catch(() => {
|
||||
// 用户取消或异常
|
||||
});
|
||||
.catch(() => {});
|
||||
},
|
||||
handleSelectionChange(selection){
|
||||
this.multipleSelection = selection
|
||||
|
|
@ -642,9 +639,9 @@ export default {
|
|||
return;
|
||||
}
|
||||
removeMaterialApi({"materialId":this.batchIds.join(",")}).then(response => {
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.getList();
|
||||
this.$refs.multipleTable.clearSelection()
|
||||
this.$modal.msgSuccess("删除成功");
|
||||
});
|
||||
},
|
||||
//批量修改
|
||||
|
|
|
|||
|
|
@ -200,14 +200,14 @@
|
|||
<el-input v-model="scope.row.limitNum" placeholder="请输入" maxlength="10" clearable @input="(v)=>(scope.row.limitNum=v.replace(/[^\d]/g,''))"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="移动端推荐" align="center" prop="recommendFlag">
|
||||
<!-- <el-table-column label="移动端推荐" align="center" prop="recommendFlag">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.recommendFlag"
|
||||
active-text="是" inactive-text="否"
|
||||
:active-value="1" :inactive-value="2">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" style="color: red;"
|
||||
|
|
|
|||
|
|
@ -200,14 +200,14 @@
|
|||
<el-input v-model="scope.row.limitNum" placeholder="请输入" maxlength="10" clearable @input="(v)=>(scope.row.limitNum=v.replace(/[^\d]/g,''))"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="移动端推荐" align="center" prop="recommendFlag">
|
||||
<!-- <el-table-column label="移动端推荐" align="center" prop="recommendFlag">
|
||||
<template slot-scope="scope">
|
||||
<el-switch v-model="scope.row.recommendFlag"
|
||||
active-text="是" inactive-text="否"
|
||||
:active-value="1" :inactive-value="2">
|
||||
</el-switch>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table-column> -->
|
||||
<el-table-column label="操作" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="text" style="color: red;"
|
||||
|
|
@ -958,6 +958,7 @@ export default {
|
|||
let index = this.dateRangeList.findIndex(v=>v.applyDate==this.dateRangeRadio)
|
||||
this.dateRangeIndex = index
|
||||
this.detailList = this.dateRangeList[index].detailList;
|
||||
this.dateRangeList[index].editStatus=true
|
||||
let hasDishes = false
|
||||
this.detailList.forEach(item=>{
|
||||
if(item.dishesList.length>0){
|
||||
|
|
@ -1014,6 +1015,7 @@ export default {
|
|||
choseWeekDate(item,index){
|
||||
this.weekId = item.applyWeek;
|
||||
this.detailList = this.weekDateList[index].detailList;
|
||||
this.weekDateList[index].editStatus=true
|
||||
let hasDishes2 = false
|
||||
this.detailList.forEach(item=>{
|
||||
if(item.dishesList.length>0){
|
||||
|
|
@ -1157,9 +1159,9 @@ export default {
|
|||
let index = type.dishesList.findIndex(v=>v.dishesId==dish.dishesId)
|
||||
this.detailList.forEach(item=>{
|
||||
if(item.mealtimeType==type.mealtimeType){
|
||||
item.dishesList.splice(index,1)
|
||||
item.dishesList.splice(index,1)
|
||||
}
|
||||
})
|
||||
})
|
||||
}).catch(() => {});
|
||||
},
|
||||
// 提交按钮
|
||||
|
|
@ -1168,13 +1170,17 @@ export default {
|
|||
if (valid) {
|
||||
let param = this.baseInfo
|
||||
if(this.baseInfo.recipeType==1){
|
||||
param.recipeDateList = []
|
||||
param.recipeDateList = []
|
||||
this.dateRangeList.forEach(item=>{
|
||||
let index = item.detailList.findIndex(subItem=>subItem.dishesList.length>0)
|
||||
if(index>-1){
|
||||
param.recipeDateList.push(item)
|
||||
}
|
||||
})
|
||||
}else{
|
||||
if(item.editStatus){
|
||||
param.recipeDateList.push(item)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
if(this.baseInfo.recipeType==2){
|
||||
param.recipeDateList = [{
|
||||
|
|
@ -1188,7 +1194,12 @@ export default {
|
|||
let index = item.detailList.findIndex(subItem=>subItem.dishesList.length>0)
|
||||
if(index>-1){
|
||||
param.recipeDateList.push(item)
|
||||
}else{
|
||||
if(item.editStatus){
|
||||
param.recipeDateList.push(item)
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
this.noDishes = true;
|
||||
|
|
@ -1792,7 +1803,7 @@ export default {
|
|||
dishesList:[]
|
||||
}
|
||||
];
|
||||
this.detailList = this.dateRangeList[this.dateRangeIndex].detailList;
|
||||
this.detailList = this.dateRangeList[this.dateRangeIndex].detailList;
|
||||
this.$modal.msgSuccess("清空成功");
|
||||
}).catch(() => {});
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
topData: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 6000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: 10,
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: 'pageA',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [79, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageB',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [80, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}, {
|
||||
name: 'pageC',
|
||||
type: 'bar',
|
||||
stack: 'vistors',
|
||||
barWidth: '60%',
|
||||
data: [30, 52, 200, 334, 390, 330, 220],
|
||||
animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
chartData: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartData: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.chartData)
|
||||
},
|
||||
setOptions({ expectedData, actualData } = {}) {
|
||||
this.chart.setOption({
|
||||
xAxis: {
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
boundaryGap: false,
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 10,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
top: 30,
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross'
|
||||
},
|
||||
padding: [5, 10]
|
||||
},
|
||||
yAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['expected', 'actual']
|
||||
},
|
||||
series: [{
|
||||
name: 'expected', itemStyle: {
|
||||
normal: {
|
||||
color: '#FF005A',
|
||||
lineStyle: {
|
||||
color: '#FF005A',
|
||||
width: 2
|
||||
}
|
||||
}
|
||||
},
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
data: expectedData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'cubicInOut'
|
||||
},
|
||||
{
|
||||
name: 'actual',
|
||||
smooth: true,
|
||||
type: 'line',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#3888fa',
|
||||
lineStyle: {
|
||||
color: '#3888fa',
|
||||
width: 2
|
||||
},
|
||||
areaStyle: {
|
||||
color: '#f3f8ff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: actualData,
|
||||
animationDuration: 2800,
|
||||
animationEasing: 'quadraticOut'
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
<template>
|
||||
<el-row :gutter="36" class="panel-group">
|
||||
<el-col :span="4" class="card-panel-col" v-for="(item,index) in topData" :key="index">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
{{item.name}}
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="item.num" :duration="2000" class="card-panel-num" />
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)>=0">
|
||||
<div style="font-size: 0.75rem;color: #07B78A;">
|
||||
同比昨日 +{{item.rate}}％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;" v-if="Number(item.rate)<0">
|
||||
<div style="font-size: 0.75rem;color: #d81e06;">
|
||||
同比昨日 {{item.rate}}％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- <el-col :span="4" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
今日食堂订单量（个）
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="360" :duration="2000" class="card-panel-num" />
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #07B78A;">
|
||||
同比昨日 +1.6％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #d81e06;">
|
||||
同比昨日 -05％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
今日就餐人数（人）
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="211" :duration="2000" class="card-panel-num" />
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #07B78A;">
|
||||
同比昨日 +1.6％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #d81e06;">
|
||||
同比昨日 -05％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
今日菜品数量（个）
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="14" :duration="2000" class="card-panel-num" />
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #07B78A;">
|
||||
同比昨日 +1.6％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #d81e06;">
|
||||
同比昨日 -05％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
今日商超营业额（元）
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="5200" :duration="2000" class="card-panel-num" />
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #07B78A;">
|
||||
同比昨日 +1.6％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #d81e06;">
|
||||
同比昨日 -05％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4" class="card-panel-col">
|
||||
<div class="card-panel">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
今日商超订单
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="435" :duration="2000" class="card-panel-num" />
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #07B78A;">
|
||||
同比昨日 +1.6％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/up.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: space-between;width: 70%;">
|
||||
<div style="font-size: 12px;color: #d81e06;">
|
||||
同比昨日 -05％
|
||||
</div>
|
||||
<div>
|
||||
<img src="@/assets/images/down.png" style="width: 18px;height: 18px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-col> -->
|
||||
|
||||
</el-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
props: {
|
||||
topData: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.panel-group {
|
||||
// margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
|
||||
.card-panel-col {
|
||||
margin-bottom: 10px;
|
||||
padding-left: 8px!important;
|
||||
padding-right: 8px!important;
|
||||
}
|
||||
|
||||
.card-panel {
|
||||
height: 140px;
|
||||
// cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #666;
|
||||
background: #fff;
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
||||
border-color: rgba(0, 0, 0, .05);
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
|
||||
// &:hover {
|
||||
// .icon-message {
|
||||
// background: #36a3f7;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .icon-message {
|
||||
// color: #36a3f7;
|
||||
// }
|
||||
.card-panel-description {
|
||||
font-weight: bold;
|
||||
margin: 0px;
|
||||
margin-left: 0px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.card-panel-text {
|
||||
line-height: 18px;
|
||||
// color: rgba(0, 0, 0, 0.5);
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-panel-num {
|
||||
font-size: 1.5rem;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Industries', 'Technology', 'Forex', 'Gold', 'Forecasts']
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'WEEKLY WRITE ARTICLES',
|
||||
type: 'pie',
|
||||
roseType: 'radius',
|
||||
radius: [15, 95],
|
||||
center: ['50%', '38%'],
|
||||
data: [
|
||||
{ value: 320, name: 'Industries' },
|
||||
{ value: 240, name: 'Technology' },
|
||||
{ value: 149, name: 'Forex' },
|
||||
{ value: 100, name: 'Gold' },
|
||||
{ value: 59, name: 'Forecasts' }
|
||||
],
|
||||
animationEasing: 'cubicInOut',
|
||||
animationDuration: 2600
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from './mixins/resize'
|
||||
|
||||
const animationDuration = 3000
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
radius: '66%',
|
||||
center: ['50%', '42%'],
|
||||
splitNumber: 8,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: 'rgba(127,95,132,.3)',
|
||||
opacity: 1,
|
||||
shadowBlur: 45,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 15
|
||||
}
|
||||
},
|
||||
indicator: [
|
||||
{ name: 'Sales', max: 10000 },
|
||||
{ name: 'Administration', max: 20000 },
|
||||
{ name: 'Information Techology', max: 20000 },
|
||||
{ name: 'Customer Support', max: 20000 },
|
||||
{ name: 'Development', max: 20000 },
|
||||
{ name: 'Marketing', max: 20000 }
|
||||
]
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '10',
|
||||
data: ['Allocated Budget', 'Expected Spending', 'Actual Spending']
|
||||
},
|
||||
series: [{
|
||||
type: 'radar',
|
||||
symbolSize: 0,
|
||||
areaStyle: {
|
||||
normal: {
|
||||
shadowBlur: 13,
|
||||
shadowColor: 'rgba(0,0,0,.2)',
|
||||
shadowOffsetX: 0,
|
||||
shadowOffsetY: 10,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [5000, 7000, 12000, 11000, 15000, 14000],
|
||||
name: 'Allocated Budget'
|
||||
},
|
||||
{
|
||||
value: [4000, 9000, 15000, 15000, 13000, 11000],
|
||||
name: 'Expected Spending'
|
||||
},
|
||||
{
|
||||
value: [5500, 11000, 12000, 15000, 12000, 12000],
|
||||
name: 'Actual Spending'
|
||||
}
|
||||
],
|
||||
animationDuration: animationDuration
|
||||
}]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initListener()
|
||||
},
|
||||
activated() {
|
||||
if (!this.$_resizeHandler) {
|
||||
// avoid duplication init
|
||||
this.initListener()
|
||||
}
|
||||
|
||||
// when keep-alive chart activated, auto resize
|
||||
this.resize()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.destroyListener()
|
||||
},
|
||||
deactivated() {
|
||||
this.destroyListener()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
initListener() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
this.resize()
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
destroyListener() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
this.$_resizeHandler = null
|
||||
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
resize() {
|
||||
const { chart } = this
|
||||
chart && chart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,798 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="@/assets/images/waterIcon.png" style="width: 60px;height: 60px;">
|
||||
<div style="font-size: 24px;font-weight: 600;">
|
||||
智慧用水
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding:0 20px;">
|
||||
<div style="width: 50%;display: flex;align-items: center;font-size: 18px;">
|
||||
<div style="margin-right: 10px;">日用水量</div>
|
||||
<count-to :start-val="0" :end-val="53" :duration="2000" class="card-panel-num" />
|
||||
<div style="margin-left: 10px;">m³</div>
|
||||
</div>
|
||||
<div style="width: 50%;display: flex;align-items: center;">
|
||||
<div style="margin-right: 10px;">累计用水量</div>
|
||||
<count-to :start-val="0" :end-val="53" :duration="2000" class="card-panel-num" />
|
||||
<div style="margin-left: 10px;">m³</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">食堂订单及销量趋势</div>
|
||||
</div>
|
||||
<div id="lineChartOne" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>
|
||||
</div>
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">商超订单及销量趋势</div>
|
||||
</div>
|
||||
<div id="lineChartTwo" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="@/assets/images/waterIcon.png" style="width: 60px;height: 60px;">
|
||||
<div style="font-size: 24px;font-weight: 600;">
|
||||
智慧用水
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;display: flex;align-items: center;justify-content: space-between;padding:0 20px;">
|
||||
<div style="width: 50%;display: flex;align-items: center;font-size: 18px;">
|
||||
<div style="margin-right: 10px;">日用水量</div>
|
||||
<count-to :start-val="0" :end-val="53" :duration="2000" class="card-panel-num" />
|
||||
<div style="margin-left: 10px;">m³</div>
|
||||
</div>
|
||||
<div style="width: 50%;display: flex;align-items: center;">
|
||||
<div style="margin-right: 10px;">累计用水量</div>
|
||||
<count-to :start-val="0" :end-val="53" :duration="2000" class="card-panel-num" />
|
||||
<div style="margin-left: 10px;">m³</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">食堂订单及销量趋势</div>
|
||||
</div>
|
||||
<div id="lineChartOne" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>
|
||||
</div>
|
||||
<div style="background: #fff;padding: 10px;margin: 5px;margin-bottom: 10px;border-radius: 4px;">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="border-left: 4px solid #00594F;padding-left: 10px;font-weight: 600;">商超订单及销量趋势</div>
|
||||
</div>
|
||||
<div id="lineChartTwo" style="width: 100%;height: 200px;margin-bottom: 20px;"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
import * as echarts from 'echarts'
|
||||
import { getDataScreeningModelApi,
|
||||
getCanteenOrdersAndSalesTrendsApi,
|
||||
getSupermarketOrderAndSalesTrendApi,
|
||||
getThisMonthSDishSalesRankingApi,
|
||||
getProportionOfOrderTypesApi
|
||||
} from "@/api/index";
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
topAreaOptions:[
|
||||
{
|
||||
"num": 0,
|
||||
"rate": "0.00",
|
||||
"name": "今日食堂营业额（元）",
|
||||
"lastDate": "2025-05-15"
|
||||
},{
|
||||
"num": 0,
|
||||
"rate": "0.00",
|
||||
"name": "今日食堂订单量（个）",
|
||||
"lastDate": "2025-05-15"
|
||||
},
|
||||
{
|
||||
"num": 0,
|
||||
"rate": "0.00",
|
||||
"name": "今日就餐人数（个）",
|
||||
"lastDate": "2025-05-15"
|
||||
},
|
||||
{
|
||||
"num": 0,
|
||||
"rate": "0.00",
|
||||
"name": "今日菜品数量（个）",
|
||||
"lastDate": "2025-05-15"
|
||||
},
|
||||
{
|
||||
"num": 0,
|
||||
"rate": "0.0",
|
||||
"name": "今日超市营业额（元）",
|
||||
"lastDate": "2025-05-15"
|
||||
},
|
||||
{
|
||||
"num": 0,
|
||||
"rate": "0.0",
|
||||
"name": "今日超市订单量（个）",
|
||||
"lastDate": "2025-05-15"
|
||||
}
|
||||
],
|
||||
type1:1,
|
||||
type2:1,
|
||||
type3:1,
|
||||
myCharts1:null,
|
||||
myCharts2:null,
|
||||
myCharts3:null,
|
||||
myCharts4:null,
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getTopData()
|
||||
this.InitEChartsOne()
|
||||
this.InitEChartsTwo()
|
||||
this.InitEChartsThree()
|
||||
this.InitEChartsFour()
|
||||
window.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
methods: {
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
console.log(e)
|
||||
setTimeout(() => {
|
||||
this.myCharts1.resize();
|
||||
this.myCharts2.resize();
|
||||
this.myCharts3.resize();
|
||||
this.myCharts4.resize();
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
getTopData(){
|
||||
getDataScreeningModelApi({}).then((response) => {
|
||||
this.topAreaOptions = response.data.data;
|
||||
});
|
||||
},
|
||||
changType1(e){
|
||||
console.log(this.type1)
|
||||
this.InitEChartsOne()
|
||||
this.myCharts1.resize();
|
||||
},
|
||||
InitEChartsOne() {
|
||||
let chartData=[]
|
||||
// let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
|
||||
let weekDate=[]
|
||||
let monthDate = []
|
||||
let xDate = []
|
||||
let salesData = []
|
||||
let orderData = []
|
||||
getCanteenOrdersAndSalesTrendsApi({type:this.type1}).then((response) => {
|
||||
chartData = response.data;
|
||||
chartData.forEach((item,index)=>{
|
||||
weekDate.push(item.weekday)
|
||||
monthDate.push(item.orderDate)
|
||||
salesData.push(item.salesValue)
|
||||
orderData.push(item.orderValue)
|
||||
})
|
||||
if(this.type1==1){
|
||||
xDate= weekDate
|
||||
}else{
|
||||
xDate = monthDate
|
||||
}
|
||||
var option = {
|
||||
// title: {
|
||||
// text: "食品经营情况",
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["销售额", "订单量"],
|
||||
icon:"rect",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
top: "20%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
color: ["#4FA7FF", "#58F5CE"],
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: xDate,
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
name: "销售额/订单量",
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "销售额",
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
type: "default",
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(79, 167, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(79, 167, 255, 1)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: { areaStyle: { type: "default" } },
|
||||
},
|
||||
data: salesData,
|
||||
},
|
||||
{
|
||||
name: "订单量",
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
type: "default",
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(92, 255, 214, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(92, 255, 214, 1)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
itemStyle: { normal: { areaStyle: { type: "default" } } },
|
||||
data: orderData,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myCharts1 = echarts.init(document.querySelector('#lineChartOne'));
|
||||
this.myCharts1.setOption(option)
|
||||
});
|
||||
},
|
||||
changType2(e){
|
||||
console.log(this.type2)
|
||||
this.InitEChartsTwo()
|
||||
this.myCharts2.resize();
|
||||
},
|
||||
InitEChartsTwo() {
|
||||
let chartData=[]
|
||||
// let weekDate=["周一","周二","周三","周四","周五","周六","周日"]
|
||||
let weekDate=[]
|
||||
let monthDate = []
|
||||
let xDate = []
|
||||
let salesData = []
|
||||
let orderData = []
|
||||
getSupermarketOrderAndSalesTrendApi({type:this.type2}).then((response) => {
|
||||
chartData = response.data;
|
||||
chartData.forEach((item,index)=>{
|
||||
weekDate.push(item.weekday)
|
||||
monthDate.push(item.orderDate)
|
||||
salesData.push(item.salesValue)
|
||||
orderData.push(item.orderValue)
|
||||
})
|
||||
if(this.type2==1){
|
||||
xDate= weekDate
|
||||
}else{
|
||||
xDate = monthDate
|
||||
}
|
||||
var option = {
|
||||
// title: {
|
||||
// text: "食品经营情况",
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
legend: {
|
||||
data: ["销售额", "订单量"],
|
||||
icon:"rect",
|
||||
bottom: "0%",
|
||||
},
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
top: "20%",
|
||||
bottom: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
color: ["#4FA7FF", "#58F5CE"],
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: xDate,
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
name: "销售额/订单量",
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "销售额",
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
type: "default",
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(79, 167, 255, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(79, 167, 255, 1)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: { areaStyle: { type: "default" } },
|
||||
},
|
||||
data: salesData,
|
||||
},
|
||||
{
|
||||
name: "订单量",
|
||||
type: "line",
|
||||
areaStyle: {
|
||||
normal: {
|
||||
type: "default",
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(92, 255, 214, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(92, 255, 214, 1)",
|
||||
},
|
||||
],
|
||||
false
|
||||
),
|
||||
},
|
||||
},
|
||||
smooth: true,
|
||||
itemStyle: { normal: { areaStyle: { type: "default" } } },
|
||||
data: orderData,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo'));
|
||||
this.myCharts2.setOption(option)
|
||||
});
|
||||
},
|
||||
InitEChartsThree() {
|
||||
var getName = [];
|
||||
var getValue = [];
|
||||
var chartData=[]
|
||||
getThisMonthSDishSalesRankingApi().then((response) => {
|
||||
chartData = response.data.slice(0, 10);
|
||||
chartData.forEach((item,index)=>{
|
||||
getName.push(item.name)
|
||||
getValue.push(item.num)
|
||||
})
|
||||
var max = Math.max.apply(null, getValue);
|
||||
var getMax = [];
|
||||
for (var i = 0; i < getName.length; i++) {
|
||||
getMax.push(max+20);
|
||||
}
|
||||
var option = {
|
||||
backgroundColor: "#fff",
|
||||
grid: {
|
||||
left: "5%",
|
||||
right: "2%",
|
||||
bottom: "2%",
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "none",
|
||||
},
|
||||
formatter: function (params) {
|
||||
return params[0].name + " : " + params[0].value;
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
offset: 100,
|
||||
axisLabel: {
|
||||
show: true,
|
||||
align: "left",
|
||||
textStyle: {
|
||||
color: "#66cc00",
|
||||
},
|
||||
formatter: function (value, index) {
|
||||
var num = "";
|
||||
var str = "";
|
||||
var no = "NO.";
|
||||
num = index + 1;
|
||||
value = value.length > 8 ? value.slice(0, 8) + '...' : value
|
||||
if (index === 0) {
|
||||
str = " {num1|" + num + "} {title1|" + value + "}";
|
||||
} else if (index === 1) {
|
||||
str = " {num2|" + num + "} {title2|" + value + "}";
|
||||
} else if (index === 2) {
|
||||
str = " {num3|" + num + "} {title3|" + value + "}";
|
||||
} else {
|
||||
str = " {num|" + num + "} {title|" + value + "}";
|
||||
}
|
||||
return str;
|
||||
},
|
||||
rich: {
|
||||
no: {
|
||||
color: "#333",
|
||||
fontSize: 14,
|
||||
},
|
||||
no1: {
|
||||
color: "#333",
|
||||
fontSize: 14,
|
||||
},
|
||||
no2: {
|
||||
color: "#333",
|
||||
fontSize: 14,
|
||||
},
|
||||
no3: {
|
||||
color: "#333",
|
||||
fontSize: 14,
|
||||
},
|
||||
num: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#5281F8",
|
||||
width: 20,
|
||||
height: 20,
|
||||
fontSize: 14,
|
||||
align: "center",
|
||||
borderRadius: 100,
|
||||
},
|
||||
num1: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#EDA54F",
|
||||
width: 20,
|
||||
height: 20,
|
||||
fontSize: 14,
|
||||
align: "center",
|
||||
borderRadius: 100,
|
||||
},
|
||||
num2: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#EDA54F",
|
||||
width: 20,
|
||||
height: 20,
|
||||
fontSize: 14,
|
||||
align: "center",
|
||||
borderRadius: 100,
|
||||
},
|
||||
num3: {
|
||||
color: "#fff",
|
||||
backgroundColor: "#EDA54F",
|
||||
width: 20,
|
||||
height: 20,
|
||||
fontSize: 14,
|
||||
align: "center",
|
||||
borderRadius: 100,
|
||||
},
|
||||
title: {
|
||||
color: "#333333",
|
||||
},
|
||||
title1: {
|
||||
color: "#333333",
|
||||
},
|
||||
title2: {
|
||||
color: "#333333",
|
||||
},
|
||||
title3: {
|
||||
color: "#333333",
|
||||
},
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
data: getName,
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
inverse: true,
|
||||
offset: -20,
|
||||
axisTick: "none",
|
||||
axisLine: "none",
|
||||
show: true,
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
color: "#666",
|
||||
align: "left",
|
||||
margin: 20,
|
||||
fontSize: 13,
|
||||
formatter: function (value, index) {
|
||||
return (
|
||||
getValue[index]
|
||||
);
|
||||
},
|
||||
},
|
||||
data: getValue,
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "值",
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: 30,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(0, 111, 104, 1)",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgb(0, 111, 104, 1)",
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
barWidth: 14,
|
||||
data: getValue,
|
||||
},
|
||||
{
|
||||
name: "背景",
|
||||
type: "bar",
|
||||
barWidth: 14,
|
||||
barGap: "-100%",
|
||||
data: getMax,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(224, 233, 255, 1)",
|
||||
barBorderRadius: 30,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myCharts3 = echarts.init(document.querySelector('#lineChartThree'));
|
||||
this.myCharts3.setOption(option)
|
||||
// // 根据页面大小自动响应图表大小
|
||||
// window.addEventListener("resize3", function () {
|
||||
// myCharts3.resize();
|
||||
// });
|
||||
});
|
||||
},
|
||||
changType3(e){
|
||||
console.log(this.type3)
|
||||
this.InitEChartsFour()
|
||||
this.myCharts4.resize();
|
||||
},
|
||||
InitEChartsFour() {
|
||||
var chartData=[]
|
||||
getProportionOfOrderTypesApi({type:this.type3}).then((response) => {
|
||||
chartData = response.data;
|
||||
var m2R2Data = []
|
||||
var sumNum = 0
|
||||
chartData.forEach((item,index)=>{
|
||||
let obj = {}
|
||||
sumNum=sumNum+item.num
|
||||
if(index==0){
|
||||
obj = {
|
||||
value: item.num,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
itemStyle: { color: "#5085f2" },
|
||||
}
|
||||
}
|
||||
if(index==1){
|
||||
obj = {
|
||||
value: item.num,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
itemStyle: { color: "#f2719a" },
|
||||
}
|
||||
}
|
||||
if(index==2){
|
||||
obj = {
|
||||
value: item.num,
|
||||
legendname: item.name,
|
||||
name: item.name+' '+ item.num,
|
||||
itemStyle: { color: "#fdb301" },
|
||||
}
|
||||
}
|
||||
m2R2Data.push(obj)
|
||||
})
|
||||
|
||||
// var m2R2Data = [
|
||||
// {
|
||||
// value: 310,
|
||||
// legendname: "种类02",
|
||||
// name: "种类02 310",
|
||||
// itemStyle: { color: "#5085f2" },
|
||||
// },
|
||||
// {
|
||||
// value: 335,
|
||||
// legendname: "种类05",
|
||||
// name: "种类05 335",
|
||||
// itemStyle: { color: "#f2719a" },
|
||||
// },
|
||||
// {
|
||||
// value: 335,
|
||||
// legendname: "种类08",
|
||||
// name: "种类08 335",
|
||||
// itemStyle: { color: "#fdb301" },
|
||||
// }
|
||||
// ];
|
||||
|
||||
var option = {
|
||||
title: [
|
||||
{
|
||||
text: "订单总数",
|
||||
subtext: sumNum + "个",
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: "black",
|
||||
},
|
||||
subtextStyle: {
|
||||
fontSize: 20,
|
||||
color: "black",
|
||||
},
|
||||
textAlign: "center",
|
||||
x: "34.5%",
|
||||
y: "44%",
|
||||
},
|
||||
],
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: function (parms) {
|
||||
var str =
|
||||
parms.seriesName +
|
||||
"</br>" +
|
||||
parms.marker +
|
||||
"" +
|
||||
parms.data.legendname +
|
||||
"</br>" +
|
||||
"数量：" +
|
||||
parms.data.value +
|
||||
"</br>" +
|
||||
"占比：" +
|
||||
parms.percent +
|
||||
"%";
|
||||
return str;
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
type: "scroll",
|
||||
orient: "vertical",
|
||||
left: "70%",
|
||||
align: "left",
|
||||
top: "middle",
|
||||
textStyle: {
|
||||
color: "#8C8C8C",
|
||||
},
|
||||
height: 250,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "标题",
|
||||
type: "pie",
|
||||
center: ["35%", "50%"],
|
||||
radius: ["65%", "90%"],
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "outter",
|
||||
formatter: function (parms) {
|
||||
return parms.data.legendname;
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
length: 5,
|
||||
length2: 3,
|
||||
smooth: true,
|
||||
},
|
||||
},
|
||||
data: m2R2Data,
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myCharts4 = echarts.init(document.querySelector('#barChartFour'));
|
||||
this.myCharts4.setOption(option)
|
||||
// 根据页面大小自动响应图表大小
|
||||
// window.addEventListener("resize4", function () {
|
||||
// myCharts4.resize();
|
||||
// });
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dashboard-editor-container {
|
||||
padding: 15px;
|
||||
background-color: rgb(240, 242, 245);
|
||||
position: relative;
|
||||
|
||||
.chart-wrapper {
|
||||
background: #fff;
|
||||
padding: 16px 16px 0;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
}
|
||||
.card-panel-num {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #000;
|
||||
}
|
||||
@media (max-width:1024px) {
|
||||
.chart-wrapper {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -67,8 +67,7 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="日期" align="center" prop="sampleSaveTime" :show-overflow-tooltip="true" width="150"/>
|
||||
<el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="关联食堂" align="center" prop="canteenName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="关联食堂" align="center" prop="canteenName" :show-overflow-tooltip="true" width="150"/>
|
||||
<el-table-column label="档口名称" align="center" prop="stallName" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="餐次" align="center" prop="mealtimeType" :show-overflow-tooltip="true">
|
||||
<template slot-scope="scope">
|
||||
|
|
|
|||
|
|
@ -36,9 +36,9 @@ module.exports = {
|
|||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
// target: `http://192.168.2.75:48380`,//旭
|
||||
target: `http://192.168.0.34:48380`,//测试
|
||||
target: `http://192.168.0.244:48380`,//测试
|
||||
// target: `http://192.168.1.176:48380`,//测试
|
||||
// target: `http://192.168.0.44:48380`,//测试
|
||||
// target: `http://192.168.0.34:48380`,//测试
|
||||
// target: `http://192.168.0.176:48380`,//
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue