完成菜品修改
This commit is contained in:
huangdeliang
parent
3554bee2b3
commit
e404c3be1a
10
stdiet-ui/jsconfig.json
Normal file
10
stdiet-ui/jsconfig.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"emitDecoratorMetadata": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -46,13 +46,15 @@
|
|||||||
"clipboard": "^2.0.6",
|
"clipboard": "^2.0.6",
|
||||||
"core-js": "3.6.5",
|
"core-js": "3.6.5",
|
||||||
"dayjs": "^1.9.1",
|
"dayjs": "^1.9.1",
|
||||||
"echarts": "4.2.1",
|
"echarts": "4.7.0",
|
||||||
"element-ui": "2.13.2",
|
"element-ui": "2.13.2",
|
||||||
"file-saver": "2.0.1",
|
"file-saver": "2.0.1",
|
||||||
"fuse.js": "3.4.4",
|
"fuse.js": "3.4.4",
|
||||||
|
"immer": "^8.0.1",
|
||||||
"js-beautify": "1.10.2",
|
"js-beautify": "1.10.2",
|
||||||
"js-cookie": "2.2.0",
|
"js-cookie": "2.2.0",
|
||||||
"jsencrypt": "3.0.0-rc.1",
|
"jsencrypt": "3.0.0-rc.1",
|
||||||
|
"lodash": "^4.17.20",
|
||||||
"normalize.css": "7.0.0",
|
"normalize.css": "7.0.0",
|
||||||
"nprogress": "0.2.0",
|
"nprogress": "0.2.0",
|
||||||
"path-to-regexp": "2.4.0",
|
"path-to-regexp": "2.4.0",
|
||||||
|
|||||||
@ -38,7 +38,7 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.autohideinfo_wrapper {
|
.autohideinfo_wrapper {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -36,7 +36,7 @@
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.autohideinfo_wrapper {
|
.autohideinfo_wrapper {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -113,7 +113,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.editor, .ql-toolbar {
|
.editor, .ql-toolbar {
|
||||||
white-space: pre-wrap!important;
|
white-space: pre-wrap!important;
|
||||||
line-height: normal !important;
|
line-height: normal !important;
|
||||||
|
|||||||
@ -473,7 +473,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.margin-top-20{
|
.margin-top-20{
|
||||||
margin-top:20px;
|
margin-top:20px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -176,7 +176,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.margin-top-20{
|
.margin-top-20{
|
||||||
margin-top:20px;
|
margin-top:20px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -76,7 +76,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
.margin-top-20{
|
.margin-top-20{
|
||||||
margin-top:20px;
|
margin-top:20px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,87 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="main">
|
|
||||||
<div class="aspect">指标</div>
|
|
||||||
<div class="recipes">
|
|
||||||
<el-table :data="mData" border :span-method="spanMethod" size="mini">
|
|
||||||
<el-table-column :label="`${name}第${num}天`"></el-table-column>
|
|
||||||
<el-table-column label="菜品" prop="name"></el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "RecipesCom",
|
|
||||||
props: {
|
|
||||||
data: {
|
|
||||||
type: Array,
|
|
||||||
default: [],
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: "",
|
|
||||||
},
|
|
||||||
num: {
|
|
||||||
type: Number,
|
|
||||||
default: 0,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
components: {},
|
|
||||||
mounted() {
|
|
||||||
// console.log(this.data);
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
mData() {
|
|
||||||
if (!this.data.dishes) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
|
|
||||||
const mData = this.data.dishes.reduce((arr, cur) => {
|
|
||||||
if (cur.id > 0) {
|
|
||||||
cur.igdList.forEach((igd) => {
|
|
||||||
if (igd.id > 0) {
|
|
||||||
const tarDetail = cur.detail.find((det) => det.id == igd.id);
|
|
||||||
arr.push({
|
|
||||||
id: cur.id,
|
|
||||||
name: cur.name,
|
|
||||||
type: cur.type,
|
|
||||||
isMain: cur.isMain,
|
|
||||||
methods: cur.methods,
|
|
||||||
igdId: igd.id,
|
|
||||||
igdName: igd.name,
|
|
||||||
proteinRatio: igd.proteinRatio,
|
|
||||||
fatRatio: igd.fatRatio,
|
|
||||||
carbonRatio: igd.carbonRatio,
|
|
||||||
rec: igd.rec,
|
|
||||||
notRec: igd.notRec,
|
|
||||||
weight: tarDetail ? tarDetail.weight : igd.weight,
|
|
||||||
cusWeight: tarDetail ? tarDetail.cus_weight : igd.cusWeight,
|
|
||||||
cusUnit: tarDetail ? tarDetail.cus_unit : igd.cusUnit,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return arr;
|
|
||||||
}, []);
|
|
||||||
// console.log(mData);
|
|
||||||
return mData;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
spanMethod({ row, column, rowIndex, columnIndex }) {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style rel="stylesheet/scss" lang="scss">
|
|
||||||
.main {
|
|
||||||
.aspect {
|
|
||||||
}
|
|
||||||
|
|
||||||
.recipies {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -3,11 +3,17 @@ import { getCustomerPhysicalSignsByCusId } from "@/api/custom/customer";
|
|||||||
import { dealHealthy } from "@/utils/healthyData";
|
import { dealHealthy } from "@/utils/healthyData";
|
||||||
import { getRecipesPlan } from "@/api/custom/recipesPlan";
|
import { getRecipesPlan } from "@/api/custom/recipesPlan";
|
||||||
import { getRecipes } from "@/api/custom/recipes";
|
import { getRecipes } from "@/api/custom/recipes";
|
||||||
|
import { getDicts } from "@/api/system/dict/data";
|
||||||
|
import produce from "immer";
|
||||||
|
|
||||||
const oriState = {
|
const oriState = {
|
||||||
healthyData: {},
|
healthyData: {},
|
||||||
healthyDataType: 0,
|
healthyDataType: 0,
|
||||||
recipesData: []
|
recipesData: [],
|
||||||
|
cusUnitOptions: [],
|
||||||
|
cusWeightOptions: [],
|
||||||
|
typeOptions: [],
|
||||||
|
currentDay: -1
|
||||||
};
|
};
|
||||||
|
|
||||||
const mutations = {
|
const mutations = {
|
||||||
@ -17,6 +23,46 @@ const mutations = {
|
|||||||
},
|
},
|
||||||
setRecipesData(state, payload) {
|
setRecipesData(state, payload) {
|
||||||
state.recipesData = payload.recipesData;
|
state.recipesData = payload.recipesData;
|
||||||
|
console.log(payload.recipesData);
|
||||||
|
},
|
||||||
|
updateRecipesDishesWeight(state, payload) {
|
||||||
|
const tarDishes = state.recipesData[payload.num].dishes.find(
|
||||||
|
obj => obj.id === payload.dishesId
|
||||||
|
);
|
||||||
|
if (tarDishes) {
|
||||||
|
const tarIgd = tarDishes.igdList.find(obj => obj.id === payload.igdId);
|
||||||
|
if (tarIgd) {
|
||||||
|
tarIgd.weight = payload.weight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateRecipesDishesCustomWeight(state, payload) {
|
||||||
|
const tarDishes = state.recipesData[payload.num].dishes.find(
|
||||||
|
obj => obj.id === payload.dishesId
|
||||||
|
);
|
||||||
|
if (tarDishes) {
|
||||||
|
const tarIgd = tarDishes.igdList.find(obj => obj.id === payload.igdId);
|
||||||
|
if (tarIgd) {
|
||||||
|
tarIgd.cusWeight = payload.cusWeight;
|
||||||
|
tarIgd.cusUnit = payload.cusUnit;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateOptions(state, payload) {
|
||||||
|
payload.cusUnitOptions && (state.cusUnitOptions = payload.cusUnitOptions);
|
||||||
|
payload.cusWeightOptions &&
|
||||||
|
(state.cusWeightOptions = payload.cusWeightOptions);
|
||||||
|
payload.typeOptions && (state.typeOptions = payload.typeOptions);
|
||||||
|
},
|
||||||
|
setCurrentDay(state, payload) {
|
||||||
|
state.currentDay =
|
||||||
|
payload.currentDay === state.currentDay ? -1 : payload.currentDay;
|
||||||
|
},
|
||||||
|
deleteSomeDayDishes(state, payload) {
|
||||||
|
// console.log(payload);
|
||||||
|
state.recipesData[payload.num].dishes = state.recipesData[
|
||||||
|
payload.num
|
||||||
|
].dishes.filter(obj => obj.id !== payload.dishesId);
|
||||||
},
|
},
|
||||||
clean(state) {
|
clean(state) {
|
||||||
// console.log("clean");
|
// console.log("clean");
|
||||||
@ -32,12 +78,25 @@ const actions = {
|
|||||||
if (!orderResult.data.cusId) {
|
if (!orderResult.data.cusId) {
|
||||||
throw new Error("未找到用户id");
|
throw new Error("未找到用户id");
|
||||||
}
|
}
|
||||||
|
//
|
||||||
|
getDicts("cus_cus_unit").then(response => {
|
||||||
|
commit("updateOptions", { cusUnitOptions: response.data });
|
||||||
|
});
|
||||||
|
getDicts("cus_cus_weight").then(response => {
|
||||||
|
commit("updateOptions", { cusWeightOptions: response.data });
|
||||||
|
});
|
||||||
|
getDicts("cus_dishes_type").then(response => {
|
||||||
|
commit("updateOptions", { typeOptions: response.data });
|
||||||
|
});
|
||||||
|
|
||||||
// 健康数据
|
// 健康数据
|
||||||
const healthyDataResult = await getCustomerPhysicalSignsByCusId(
|
const healthyDataResult = await getCustomerPhysicalSignsByCusId(
|
||||||
orderResult.data.cusId
|
orderResult.data.cusId
|
||||||
);
|
);
|
||||||
if (healthyDataResult.code === 200) {
|
if (healthyDataResult.code === 200) {
|
||||||
|
if (!healthyDataResult.data.customerHealthy) {
|
||||||
|
throw new Error("客户还没填写健康评估表");
|
||||||
|
}
|
||||||
commit("setHealtyData", {
|
commit("setHealtyData", {
|
||||||
healthyDataType: healthyDataResult.data.type,
|
healthyDataType: healthyDataResult.data.type,
|
||||||
healthyData: dealHealthy(healthyDataResult.data.customerHealthy)
|
healthyData: dealHealthy(healthyDataResult.data.customerHealthy)
|
||||||
@ -51,7 +110,56 @@ const actions = {
|
|||||||
const recipesDataResult = await getRecipes(payload.recipesId);
|
const recipesDataResult = await getRecipes(payload.recipesId);
|
||||||
if (recipesDataResult.code === 200) {
|
if (recipesDataResult.code === 200) {
|
||||||
commit("setRecipesData", {
|
commit("setRecipesData", {
|
||||||
recipesData: recipesDataResult.data
|
recipesData: recipesDataResult.data.map(dayData => {
|
||||||
|
return {
|
||||||
|
id: dayData.id,
|
||||||
|
numDay: dayData.numDay,
|
||||||
|
dishes: dayData.dishes.reduce((arr, cur) => {
|
||||||
|
if (
|
||||||
|
cur.id > -1 &&
|
||||||
|
cur.name &&
|
||||||
|
cur.igdList.length > 0 &&
|
||||||
|
cur.type !== "0"
|
||||||
|
) {
|
||||||
|
arr.push({
|
||||||
|
id: cur.id,
|
||||||
|
name: cur.name,
|
||||||
|
methods: cur.methods,
|
||||||
|
type: cur.type,
|
||||||
|
isMain: cur.isMain,
|
||||||
|
igdList: cur.igdList.reduce((igdArr, igdData) => {
|
||||||
|
if (igdData.id > 0) {
|
||||||
|
const tarDetail = cur.detail.find(
|
||||||
|
obj => obj.id === igdData.id
|
||||||
|
);
|
||||||
|
igdArr.push({
|
||||||
|
id: igdData.id,
|
||||||
|
name: igdData.name,
|
||||||
|
carbonRatio: igdData.carbonRatio,
|
||||||
|
fatRatio: igdData.fatRatio,
|
||||||
|
proteinRatio: igdData.proteinRatio,
|
||||||
|
cusUnit: tarDetail
|
||||||
|
? tarDetail.cus_unit
|
||||||
|
: igdData.cusUnit,
|
||||||
|
cusWeight: tarDetail
|
||||||
|
? parseFloat(tarDetail.cus_weight)
|
||||||
|
: igdData.cusWeight,
|
||||||
|
weight: tarDetail
|
||||||
|
? parseFloat(tarDetail.weight)
|
||||||
|
: igdData.weight,
|
||||||
|
notRec: igdData.notRec,
|
||||||
|
rec: igdData.rec,
|
||||||
|
type: igdData.type
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return igdArr;
|
||||||
|
}, [])
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}, [])
|
||||||
|
};
|
||||||
|
})
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
throw new Error(recipesDataResult.msg);
|
throw new Error(recipesDataResult.msg);
|
||||||
@ -60,7 +168,56 @@ const actions = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getters = {};
|
const getters = {
|
||||||
|
analyseData: state => {
|
||||||
|
const datas =
|
||||||
|
state.currentDay > -1
|
||||||
|
? [state.recipesData[state.currentDay]]
|
||||||
|
: state.recipesData;
|
||||||
|
|
||||||
|
const nutriData = datas.map(data =>
|
||||||
|
data.dishes.reduce(
|
||||||
|
(obj, cur) => {
|
||||||
|
cur.igdList.forEach(igd => {
|
||||||
|
obj.pWeight += (igd.weight / 100) * igd.proteinRatio;
|
||||||
|
obj.pHeat = obj.pWeight * 4;
|
||||||
|
obj.fWeight += (igd.weight / 100) * igd.fatRatio;
|
||||||
|
obj.fHeat = obj.fWeight * 9;
|
||||||
|
obj.cWeight += (igd.weight / 100) * igd.carbonRatio;
|
||||||
|
obj.cHeat = obj.cWeight * 4;
|
||||||
|
});
|
||||||
|
return obj;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: `第${data.numDay}天`,
|
||||||
|
pWeight: 0,
|
||||||
|
fWeight: 0,
|
||||||
|
cWeight: 0,
|
||||||
|
pHeat: 0,
|
||||||
|
fHeat: 0,
|
||||||
|
cHeat: 0
|
||||||
|
}
|
||||||
|
)
|
||||||
|
);
|
||||||
|
// console.log(nutriData);
|
||||||
|
return nutriData;
|
||||||
|
},
|
||||||
|
cusUnitDict: state =>
|
||||||
|
state.cusUnitOptions.reduce((obj, cur) => {
|
||||||
|
obj[cur.dictValue] = cur.dictLabel;
|
||||||
|
return obj;
|
||||||
|
}, {}),
|
||||||
|
cusWeightDict: state =>
|
||||||
|
state.cusWeightOptions.reduce((obj, cur) => {
|
||||||
|
obj[cur.dictValue] = cur.dictLabel;
|
||||||
|
return obj;
|
||||||
|
}, {}),
|
||||||
|
typeDict: state =>
|
||||||
|
state.typeOptions.reduce((obj, cur) => {
|
||||||
|
obj[cur.dictValue] = cur.dictLabel;
|
||||||
|
return obj;
|
||||||
|
}, {})
|
||||||
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
namespaced: true,
|
namespaced: true,
|
||||||
|
|||||||
257
stdiet-ui/src/utils/echarts/myShine.js
Normal file
257
stdiet-ui/src/utils/echarts/myShine.js
Normal file
@ -0,0 +1,257 @@
|
|||||||
|
/*
|
||||||
|
* Licensed to the Apache Software Foundation (ASF) under one
|
||||||
|
* or more contributor license agreements. See the NOTICE file
|
||||||
|
* distributed with this work for additional information
|
||||||
|
* regarding copyright ownership. The ASF licenses this file
|
||||||
|
* to you under the Apache License, Version 2.0 (the
|
||||||
|
* "License"); you may not use this file except in compliance
|
||||||
|
* with the License. You may obtain a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing,
|
||||||
|
* software distributed under the License is distributed on an
|
||||||
|
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||||
|
* KIND, either express or implied. See the License for the
|
||||||
|
* specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
(function(root, factory) {
|
||||||
|
if (typeof define === 'function' && define.amd) {
|
||||||
|
// AMD. Register as an anonymous module.
|
||||||
|
define(['exports', 'echarts'], factory);
|
||||||
|
} else if (
|
||||||
|
typeof exports === 'object' &&
|
||||||
|
typeof exports.nodeName !== 'string'
|
||||||
|
) {
|
||||||
|
// CommonJS
|
||||||
|
factory(exports, require('echarts'));
|
||||||
|
} else {
|
||||||
|
// Browser globals
|
||||||
|
factory({}, root.echarts);
|
||||||
|
}
|
||||||
|
})(this, function(exports, echarts) {
|
||||||
|
var log = function(msg) {
|
||||||
|
if (typeof console !== 'undefined') {
|
||||||
|
console && console.error && console.error(msg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
if (!echarts) {
|
||||||
|
log('ECharts is not Loaded');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var colorPalette = [
|
||||||
|
'#c12e34',
|
||||||
|
'#e6b600',
|
||||||
|
'#0098d9',
|
||||||
|
'#2b821d',
|
||||||
|
'#005eaa',
|
||||||
|
'#339ca8',
|
||||||
|
'#cda819',
|
||||||
|
'#32a487'
|
||||||
|
];
|
||||||
|
|
||||||
|
var theme = {
|
||||||
|
color: colorPalette,
|
||||||
|
|
||||||
|
title: {
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
fontSize: 14
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
visualMap: {
|
||||||
|
color: ['#1790cf', '#a2d4e6']
|
||||||
|
},
|
||||||
|
|
||||||
|
toolbox: {
|
||||||
|
iconStyle: {
|
||||||
|
normal: {
|
||||||
|
borderColor: '#06467c'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
tooltip: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#262626',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
backgroundColor: 'rgba(255,255,255,0.9)',
|
||||||
|
borderWidth: 1,
|
||||||
|
padding: 10,
|
||||||
|
borderColor: '#ccc',
|
||||||
|
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
|
||||||
|
},
|
||||||
|
|
||||||
|
categoryAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ebebeb',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ebebeb',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#262626',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#ccc'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false,
|
||||||
|
areaStyle: {
|
||||||
|
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
valueAxis: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ebebeb',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: '#ebebeb',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
color: '#262626',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#ccc'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false,
|
||||||
|
areaStyle: {
|
||||||
|
color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
dataZoom: {
|
||||||
|
dataBackgroundColor: '#dedede',
|
||||||
|
fillerColor: 'rgba(154,217,247,0.2)',
|
||||||
|
handleColor: '#005eaa'
|
||||||
|
},
|
||||||
|
|
||||||
|
timeline: {
|
||||||
|
lineStyle: {
|
||||||
|
color: '#005eaa'
|
||||||
|
},
|
||||||
|
controlStyle: {
|
||||||
|
color: '#005eaa',
|
||||||
|
borderColor: '#005eaa'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
candlestick: {
|
||||||
|
itemStyle: {
|
||||||
|
color: '#c12e34',
|
||||||
|
color0: '#2b821d'
|
||||||
|
},
|
||||||
|
lineStyle: {
|
||||||
|
width: 1,
|
||||||
|
color: '#c12e34',
|
||||||
|
color0: '#2b821d'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: '#e6b600',
|
||||||
|
color0: '#005eaa'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
graph: {
|
||||||
|
itemStyle: {
|
||||||
|
color: '#e6b600'
|
||||||
|
},
|
||||||
|
linkStyle: {
|
||||||
|
color: '#005eaa'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
map: {
|
||||||
|
itemStyle: {
|
||||||
|
color: '#f2385a',
|
||||||
|
borderColor: '#eee',
|
||||||
|
areaColor: '#ddd'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
color: '#ddd'
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
color: '#c12e34'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
gauge: {
|
||||||
|
axisLine: {
|
||||||
|
show: true,
|
||||||
|
lineStyle: {
|
||||||
|
color: [
|
||||||
|
[0.2, '#2b821d'],
|
||||||
|
[0.8, '#005eaa'],
|
||||||
|
[1, '#c12e34']
|
||||||
|
],
|
||||||
|
width: 5
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisTick: {
|
||||||
|
splitNumber: 10,
|
||||||
|
length: 8,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
textStyle: {
|
||||||
|
color: 'auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
length: 12,
|
||||||
|
lineStyle: {
|
||||||
|
color: 'auto'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pointer: {
|
||||||
|
length: '90%',
|
||||||
|
width: 3,
|
||||||
|
color: 'auto'
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
textStyle: {
|
||||||
|
color: '#333'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
detail: {
|
||||||
|
textStyle: {
|
||||||
|
color: 'auto'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
echarts.registerTheme('myShine', theme);
|
||||||
|
});
|
||||||
@ -675,13 +675,13 @@ export default {
|
|||||||
.catch(function () {});
|
.catch(function () {});
|
||||||
},
|
},
|
||||||
handleChange(value, direction, movedKeys) {
|
handleChange(value, direction, movedKeys) {
|
||||||
console.log({
|
// console.log({
|
||||||
oriIgdList: this.oriDataList,
|
// oriIgdList: this.oriDataList,
|
||||||
selIgdList: this.form.igdList,
|
// selIgdList: this.form.igdList,
|
||||||
ingDataList: this.ingDataList,
|
// ingDataList: this.ingDataList,
|
||||||
value,
|
// value,
|
||||||
ingType: this.ingType,
|
// ingType: this.ingType,
|
||||||
});
|
// });
|
||||||
const newTableData = [];
|
const newTableData = [];
|
||||||
this.selRec = [];
|
this.selRec = [];
|
||||||
this.selNotRec = [];
|
this.selNotRec = [];
|
||||||
|
|||||||
@ -15,7 +15,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import TextInfo from "./TextInfo.vue";
|
import TextInfo from "@/components/TextInfo";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "BodySignView",
|
name: "BodySignView",
|
||||||
|
|||||||
@ -31,7 +31,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import TextInfo from "./TextInfo.vue";
|
import TextInfo from "@/components/TextInfo";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "HealthyView",
|
name: "HealthyView",
|
||||||
@ -166,6 +166,7 @@ export default {
|
|||||||
{ title: "是否出现过过敏症状", value: "allergyFlag" },
|
{ title: "是否出现过过敏症状", value: "allergyFlag" },
|
||||||
{ title: "过敏症状", value: "allergySituation" },
|
{ title: "过敏症状", value: "allergySituation" },
|
||||||
{ title: "过敏源", value: "allergen" },
|
{ title: "过敏源", value: "allergen" },
|
||||||
|
{ title: "忌口过敏食物", value: "dishesIngredient" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,17 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div>
|
|
||||||
<RecipesCom v-for="item in data" :key="item.id" :data="item" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import RecipesCom from "@/components/RecipesCom";
|
|
||||||
export default {
|
|
||||||
name: "RecipesView",
|
|
||||||
components: {
|
|
||||||
RecipesCom,
|
|
||||||
},
|
|
||||||
props: ["data"],
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style rel="stylesheet/scss" lang="scss">
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,146 @@
|
|||||||
|
<template>
|
||||||
|
<div :class="className" :style="{ height: height, width: width }" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from "echarts";
|
||||||
|
require("@/utils/echarts/myShine");
|
||||||
|
import resize from "@/views/dashboard/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: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
nameDict: {
|
||||||
|
pHeat: "蛋白质",
|
||||||
|
fHeat: "脂肪",
|
||||||
|
cHeat: "碳水",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.chart.dispose();
|
||||||
|
this.chart = null;
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
// console.log("updated");
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$el, "myShine");
|
||||||
|
this.updateChart(this.data.length > 0 ? this.data : {});
|
||||||
|
},
|
||||||
|
updateChart(source) {
|
||||||
|
this.chart.clear();
|
||||||
|
this.chart.setOption({
|
||||||
|
title: {
|
||||||
|
text: "营养统计",
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "axis",
|
||||||
|
appendToBody: true,
|
||||||
|
formatter: (params) => {
|
||||||
|
// console.log(params);
|
||||||
|
const [param] = params;
|
||||||
|
const { name } = param;
|
||||||
|
let totalHeat = 0;
|
||||||
|
const tooltips = params.reduce(
|
||||||
|
(arr, cur) => {
|
||||||
|
const { value, seriesName } = cur;
|
||||||
|
const nutriName = this.nameDict[seriesName];
|
||||||
|
totalHeat += value[seriesName];
|
||||||
|
const heatVal = value[seriesName].toFixed(1);
|
||||||
|
const weightVal = value[
|
||||||
|
`${seriesName.substring(0, 1)}Weight`
|
||||||
|
].toFixed(1);
|
||||||
|
arr.push(
|
||||||
|
`${cur.marker} ${nutriName}：${heatVal}千卡（${weightVal}克）`
|
||||||
|
);
|
||||||
|
return arr;
|
||||||
|
},
|
||||||
|
[name]
|
||||||
|
);
|
||||||
|
tooltips[0] += ` - 共${totalHeat.toFixed(1)}千卡`;
|
||||||
|
return tooltips.join("</br>");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dataset: {
|
||||||
|
dimensions: [
|
||||||
|
"name",
|
||||||
|
"pWeight",
|
||||||
|
"pHeat",
|
||||||
|
"fWeight",
|
||||||
|
"fHeat",
|
||||||
|
"cWeight",
|
||||||
|
"cHeat",
|
||||||
|
],
|
||||||
|
source,
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
top: 40,
|
||||||
|
left: 20,
|
||||||
|
right: 20,
|
||||||
|
bottom: 10,
|
||||||
|
containLabel: true,
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: "category",
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: "value",
|
||||||
|
},
|
||||||
|
series: ["pHeat", "fHeat", "cHeat"].map((dim, idx) => ({
|
||||||
|
name: dim,
|
||||||
|
type: "bar",
|
||||||
|
barWidth: 26,
|
||||||
|
stack: "bar",
|
||||||
|
encode: {
|
||||||
|
y: dim,
|
||||||
|
x: 0,
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 2,
|
||||||
|
borderColor: "#fff",
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
data(newVal, oldVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.updateChart(newVal);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,200 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="`aspect_pie_chart_wrapper ${className || ''}`"
|
||||||
|
:style="{ height: height, width: width }"
|
||||||
|
>
|
||||||
|
<div ref="echart" :style="{ height: height, width: '200px' }" />
|
||||||
|
<div>
|
||||||
|
<el-table
|
||||||
|
:data="mData"
|
||||||
|
size="mini"
|
||||||
|
border
|
||||||
|
:cell-style="{ padding: '2px 0' }"
|
||||||
|
:header-cell-style="{ padding: '4px 0', height: 'unset' }"
|
||||||
|
class="small_table"
|
||||||
|
>
|
||||||
|
<el-table-column label="营养" prop="type" align="center" width="60" />
|
||||||
|
<el-table-column
|
||||||
|
label="重量(g)"
|
||||||
|
prop="weight"
|
||||||
|
align="center"
|
||||||
|
width="80"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="热量(Kcal)"
|
||||||
|
prop="heat"
|
||||||
|
align="center"
|
||||||
|
width="90"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="热量占比"
|
||||||
|
prop="heatRate"
|
||||||
|
align="center"
|
||||||
|
width="80"
|
||||||
|
/>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import echarts from "echarts";
|
||||||
|
require("@/utils/echarts/myShine");
|
||||||
|
import resize from "@/views/dashboard/mixins/resize";
|
||||||
|
import TextInfo from "@/components/TextInfo";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [resize],
|
||||||
|
components: {
|
||||||
|
TextInfo,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
className: {
|
||||||
|
type: String,
|
||||||
|
default: "chart",
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: "100%",
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: "300px",
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Array,
|
||||||
|
default: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chart: null,
|
||||||
|
nameDict: {
|
||||||
|
p: "蛋白质",
|
||||||
|
f: "脂肪",
|
||||||
|
c: "碳水",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
mData() {
|
||||||
|
const [data] = this.data;
|
||||||
|
let totalHeat = 0;
|
||||||
|
return data
|
||||||
|
? ["p", "f", "c"].map((type) => {
|
||||||
|
if (totalHeat === 0) {
|
||||||
|
totalHeat = ["p", "f", "c"].reduce((heat, cur) => {
|
||||||
|
heat += data[`${cur}Heat`];
|
||||||
|
return heat;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
type: this.nameDict[type],
|
||||||
|
weight: data[`${type}Weight`].toFixed(1),
|
||||||
|
heat: data[`${type}Heat`].toFixed(1),
|
||||||
|
heatRate: `${((data[`${type}Heat`] / totalHeat) * 100).toFixed(
|
||||||
|
2
|
||||||
|
)}%`,
|
||||||
|
};
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.initChart();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
if (!this.chart) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.chart.dispose();
|
||||||
|
this.chart = null;
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initChart() {
|
||||||
|
this.chart = echarts.init(this.$refs.echart, "myShine");
|
||||||
|
this.updateChart(this.data.length > 0 ? this.data[0] : {});
|
||||||
|
},
|
||||||
|
updateChart(data) {
|
||||||
|
this.chart.clear();
|
||||||
|
this.chart.setOption({
|
||||||
|
title: {
|
||||||
|
text: `${data.name}营养统计`,
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: "item",
|
||||||
|
appendToBody: true,
|
||||||
|
formatter: (params) => {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
marker,
|
||||||
|
percent,
|
||||||
|
data: { value, oriData, dim },
|
||||||
|
} = params;
|
||||||
|
return [
|
||||||
|
`${marker} ${name}`,
|
||||||
|
`含量：${oriData[`${dim}Weight`].toFixed(1)}克`,
|
||||||
|
`热量：${value.toFixed(1)}千卡`,
|
||||||
|
`热量占比：${percent}%`,
|
||||||
|
].join("</br>");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: data.name,
|
||||||
|
type: "pie",
|
||||||
|
radius: [0, 50],
|
||||||
|
center: ["50%", "50%"],
|
||||||
|
data: ["p", "f", "c"].map((dim) => ({
|
||||||
|
dim,
|
||||||
|
value: data[`${dim}Heat`],
|
||||||
|
name: this.nameDict[dim],
|
||||||
|
oriData: data,
|
||||||
|
})),
|
||||||
|
labelLine: {
|
||||||
|
length: 5,
|
||||||
|
length2: 5,
|
||||||
|
},
|
||||||
|
// label: {
|
||||||
|
// show: true,
|
||||||
|
// position: "inside",
|
||||||
|
// color: '#fff'
|
||||||
|
// },
|
||||||
|
itemStyle: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: "#fff",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
data(newVal, oldVal) {
|
||||||
|
if (newVal) {
|
||||||
|
this.updateChart(newVal[0]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.aspect_pie_chart_wrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
& > div:nth-child(1) {
|
||||||
|
// width: 200px
|
||||||
|
}
|
||||||
|
|
||||||
|
// & > div:nth-child(2) {
|
||||||
|
.small_table {
|
||||||
|
.my_cell {
|
||||||
|
padding: 2px 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="recipes_aspect_wrapper"
|
||||||
|
:style="`height: ${collapse ? 30 : 200}px`"
|
||||||
|
>
|
||||||
|
<div class="header">
|
||||||
|
<el-button size="mini" type="text" @click="handleCollapseClick">{{
|
||||||
|
`${collapse ? "展开分析" : "收起分析"}`
|
||||||
|
}}</el-button>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="content"
|
||||||
|
:style="`visibility: ${collapse ? 'hidden' : 'visible'};`"
|
||||||
|
>
|
||||||
|
<BarChart
|
||||||
|
v-if="data.length > 1"
|
||||||
|
:data="data"
|
||||||
|
height="170px"
|
||||||
|
width="500px"
|
||||||
|
/>
|
||||||
|
<PieChart v-else :data="data" height="170px" width="500px" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import BarChart from "./BarChart";
|
||||||
|
import PieChart from "./PieChart";
|
||||||
|
export default {
|
||||||
|
name: "RecipesAspectCom",
|
||||||
|
components: {
|
||||||
|
BarChart,
|
||||||
|
PieChart,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
// console.log(this.data);
|
||||||
|
},
|
||||||
|
props: ["collapse", "data"],
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
handleCollapseClick() {
|
||||||
|
this.$emit("update:collapse", !this.collapse);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style rel="stylesheet/scss" lang="scss" scope>
|
||||||
|
.recipes_aspect_wrapper {
|
||||||
|
transition: all 0.3s;
|
||||||
|
padding-bottom: 12px;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
text-align: right;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
<template>
|
||||||
|
<div class="editable_text_wrapper">
|
||||||
|
<div class="value" v-if="!editing" @click="handleOnClick">{{ value }}</div>
|
||||||
|
<input
|
||||||
|
v-else
|
||||||
|
class="input"
|
||||||
|
ref="inputRef"
|
||||||
|
type="number"
|
||||||
|
:step="5"
|
||||||
|
:value="value"
|
||||||
|
@blur="handleOnBlur"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "EditableText",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editing: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ["value"],
|
||||||
|
methods: {
|
||||||
|
handleOnClick(e) {
|
||||||
|
if (!this.editing) {
|
||||||
|
this.editing = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs["inputRef"].focus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleOnBlur(e) {
|
||||||
|
const { value } = e.target;
|
||||||
|
if (value > 0) {
|
||||||
|
this.editing = false;
|
||||||
|
const mValue = parseFloat(value)
|
||||||
|
if (mValue !== parseFloat(this.value)) {
|
||||||
|
this.$emit("onChange", mValue);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$message.error("数字必须大于0");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.editable_text_wrapper {
|
||||||
|
.value {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 96%;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<div class="editable_unit_wrapper">
|
||||||
|
<div class="value" v-if="!editing" @click="handleOnClick">
|
||||||
|
<span>{{ unitWeight }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-else class="selector">
|
||||||
|
<select
|
||||||
|
:value="mWeight"
|
||||||
|
@click="handleOnSelectClick"
|
||||||
|
@change="handleOnWeightChange"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="item in cusWeightOptions"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:value="item.dictValue"
|
||||||
|
>
|
||||||
|
{{ item.dictLabel }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
<select
|
||||||
|
:value="mUnit"
|
||||||
|
@click="handleOnSelectClick"
|
||||||
|
@change="handleOnUnitChange"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="item in cusUnitOptions"
|
||||||
|
:key="item.dictValue"
|
||||||
|
:value="item.dictValue"
|
||||||
|
>
|
||||||
|
{{ item.dictLabel }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { createNamespacedHelpers } from "vuex";
|
||||||
|
const { mapState, mapGetters } = createNamespacedHelpers("recipes");
|
||||||
|
export default {
|
||||||
|
name: "EditableUnit",
|
||||||
|
props: ["weight", "unit"],
|
||||||
|
mounted() {
|
||||||
|
window.addEventListener("click", this.handleOnWindowClick);
|
||||||
|
},
|
||||||
|
unmounted() {
|
||||||
|
window.removeEventListener("click", this.handleOnWindowClick);
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
editing: false,
|
||||||
|
mWeight: this.weight,
|
||||||
|
mUnit: this.unit,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleOnClick(e) {
|
||||||
|
if (!this.editing) {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.editing = true;
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleOnWindowClick(e) {
|
||||||
|
if (this.editing) {
|
||||||
|
// console.log("handleOnWindowClick");
|
||||||
|
this.editing = false;
|
||||||
|
if (
|
||||||
|
String(this.mWeight) !== String(this.weight) ||
|
||||||
|
String(this.mUnit) !== String(this.unit)
|
||||||
|
) {
|
||||||
|
// console.log({
|
||||||
|
// mWeight: this.mWeight,
|
||||||
|
// mUnit: this.mUnit,
|
||||||
|
// weight: this.weight,
|
||||||
|
// unit: this.unit,
|
||||||
|
// });
|
||||||
|
this.$emit("onChange", {
|
||||||
|
cusWeight: this.mWeight,
|
||||||
|
cusUnit: this.mUnit,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleOnSelectClick(e) {
|
||||||
|
if (this.editing) {
|
||||||
|
e.stopPropagation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleOnWeightChange(e) {
|
||||||
|
const { value } = e.target;
|
||||||
|
this.mWeight = value;
|
||||||
|
},
|
||||||
|
handleOnUnitChange(e) {
|
||||||
|
const { value } = e.target;
|
||||||
|
this.mUnit = value;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
unitWeight() {
|
||||||
|
return (
|
||||||
|
`${this.cusWeightDict[this.mWeight] || ""}${
|
||||||
|
this.cusUnitDict[this.mUnit] || ""
|
||||||
|
}` || "_"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
...mapState(["cusUnitOptions", "cusWeightOptions"]),
|
||||||
|
...mapGetters(["cusUnitDict", "cusWeightDict"]),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.editable_unit_wrapper {
|
||||||
|
.value {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.selector {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
select:nth-child(1) {
|
||||||
|
margin-right: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
select {
|
||||||
|
font-size: 11px;
|
||||||
|
border: solid 1px #dcdfe6;
|
||||||
|
border-radius: 4px;
|
||||||
|
appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
padding: 3px 6px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
|
||||||
|
select::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,321 @@
|
|||||||
|
<template>
|
||||||
|
<div class="recipes_com_wrapper">
|
||||||
|
<el-table
|
||||||
|
:data="mData"
|
||||||
|
border
|
||||||
|
:span-method="spanMethod"
|
||||||
|
:cell-style="{ padding: '2px 0' }"
|
||||||
|
:header-cell-style="{ padding: '4px 0', height: 'unset' }"
|
||||||
|
size="mini"
|
||||||
|
:style="`outline: ${
|
||||||
|
currentDay + 1 === num ? '1px solid #d96969' : 'none'
|
||||||
|
}`"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
prop="type"
|
||||||
|
:formatter="typeFormatter"
|
||||||
|
:width="100"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template slot="header">
|
||||||
|
<span class="num_day" @click="handleOnOneDayAnalysis">{{
|
||||||
|
`${name}第${num}天`
|
||||||
|
}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="菜品" prop="name" align="center">
|
||||||
|
<template slot="header">
|
||||||
|
<el-popover placement="top" trigger="hover">
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-edit"
|
||||||
|
class="fun_button"
|
||||||
|
@click="handleOnAdd"
|
||||||
|
>添加</el-button
|
||||||
|
>
|
||||||
|
<span class="num_day" slot="reference">菜品</span>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-popover placement="right" trigger="hover">
|
||||||
|
<div>
|
||||||
|
<el-button
|
||||||
|
type="danger"
|
||||||
|
size="mini"
|
||||||
|
icon="el-icon-delete"
|
||||||
|
class="fun_button"
|
||||||
|
@click="handleOnDelete(scope.row)"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<span class="num_day" slot="reference">{{ scope.row.name }}</span>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="食材" prop="igdName" align="center" />
|
||||||
|
<el-table-column label="分量估算" :width="80" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<EditableUnit
|
||||||
|
:weight="scope.row.cusWeight"
|
||||||
|
:unit="scope.row.cusUnit"
|
||||||
|
@onChange="(val) => handleOnCustomUnitChange(scope.row, val)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="质量(g)" prop="weight" :width="80" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<EditableText
|
||||||
|
:value="scope.row.weight"
|
||||||
|
@onChange="(val) => handleOnWeightChange(scope.row, val)"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="蛋白质/100g"
|
||||||
|
prop="proteinRatio"
|
||||||
|
:width="100"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="脂肪/100g"
|
||||||
|
prop="fatRatio"
|
||||||
|
:width="90"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="碳水/100g"
|
||||||
|
prop="carbonRatio"
|
||||||
|
:width="90"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="蛋白质含量"
|
||||||
|
prop="proteinRatio"
|
||||||
|
:width="90"
|
||||||
|
align="center"
|
||||||
|
:formatter="nutriFormatter"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="脂肪含量"
|
||||||
|
prop="fatRatio"
|
||||||
|
:width="90"
|
||||||
|
align="center"
|
||||||
|
:formatter="nutriFormatter"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
label="碳水含量"
|
||||||
|
prop="carbonRatio"
|
||||||
|
:width="90"
|
||||||
|
align="center"
|
||||||
|
:formatter="nutriFormatter"
|
||||||
|
/>
|
||||||
|
<el-table-column label="做法" prop="methods" />
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { createNamespacedHelpers } from "vuex";
|
||||||
|
const {
|
||||||
|
mapActions,
|
||||||
|
mapGetters,
|
||||||
|
mapState,
|
||||||
|
mapMutations,
|
||||||
|
} = createNamespacedHelpers("recipes");
|
||||||
|
|
||||||
|
import EditableText from "./EditableText";
|
||||||
|
import EditableUnit from "./EditableUnit";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "RecipesCom",
|
||||||
|
props: {
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: [],
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
num: {
|
||||||
|
type: Number,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
EditableText,
|
||||||
|
EditableUnit,
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// console.log(this.data);
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
mData() {
|
||||||
|
if (!this.data.dishes) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
const mData = this.data.dishes
|
||||||
|
.sort((a, b) => a.type - b.type)
|
||||||
|
.reduce((arr, cur, idx) => {
|
||||||
|
if (cur.id > 0 && cur.type !== "0") {
|
||||||
|
cur.igdList.forEach((igd) => {
|
||||||
|
let lastTypeHit = false,
|
||||||
|
lastNameHit = false;
|
||||||
|
if (arr.length > 0) {
|
||||||
|
// 倒推，找到第一个出现的位置
|
||||||
|
lastTypeHit = arr[arr.length - 1].type === cur.type;
|
||||||
|
if (lastTypeHit) {
|
||||||
|
let typePos = arr.length - 1;
|
||||||
|
for (let i = typePos; i >= 0; i--) {
|
||||||
|
if (arr[i].type !== cur.type) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
typePos = i;
|
||||||
|
}
|
||||||
|
arr[typePos].typeSpan.rowspan += 1;
|
||||||
|
}
|
||||||
|
lastNameHit = arr[arr.length - 1].name === cur.name;
|
||||||
|
if (lastNameHit) {
|
||||||
|
let namePos = arr.length - 1;
|
||||||
|
for (let i = namePos; i >= 0; i--) {
|
||||||
|
if (arr[i].name !== cur.name) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
namePos = i;
|
||||||
|
}
|
||||||
|
arr[namePos].nameSpan.rowspan += 1;
|
||||||
|
arr[namePos].methodsSpan.rowspan += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
arr.push({
|
||||||
|
id: cur.id,
|
||||||
|
name: cur.name,
|
||||||
|
type: cur.type,
|
||||||
|
isMain: cur.isMain,
|
||||||
|
methods: cur.methods,
|
||||||
|
igdId: igd.id,
|
||||||
|
igdName: igd.name,
|
||||||
|
proteinRatio: igd.proteinRatio,
|
||||||
|
fatRatio: igd.fatRatio,
|
||||||
|
carbonRatio: igd.carbonRatio,
|
||||||
|
rec: igd.rec,
|
||||||
|
notRec: igd.notRec,
|
||||||
|
weight: igd.weight,
|
||||||
|
cusWeight: igd.cusWeight,
|
||||||
|
cusUnit: igd.cusUnit,
|
||||||
|
typeSpan: lastTypeHit
|
||||||
|
? {
|
||||||
|
rowspan: 0,
|
||||||
|
colspan: 0,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
rowspan: 1,
|
||||||
|
colspan: 1,
|
||||||
|
},
|
||||||
|
nameSpan: lastNameHit
|
||||||
|
? {
|
||||||
|
rowspan: 0,
|
||||||
|
colspan: 0,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
rowspan: 1,
|
||||||
|
colspan: 1,
|
||||||
|
},
|
||||||
|
methodsSpan: lastNameHit
|
||||||
|
? {
|
||||||
|
rowspan: 0,
|
||||||
|
colspan: 0,
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
rowspan: 1,
|
||||||
|
colspan: 1,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return arr;
|
||||||
|
}, []);
|
||||||
|
// console.log(mData);
|
||||||
|
return mData;
|
||||||
|
},
|
||||||
|
...mapGetters(["typeDict"]),
|
||||||
|
...mapState(["currentDay"]),
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
||||||
|
if (columnIndex === 0) {
|
||||||
|
return row.typeSpan;
|
||||||
|
} else if (columnIndex === 1) {
|
||||||
|
return row.nameSpan;
|
||||||
|
} else if (columnIndex === 11) {
|
||||||
|
return row.methodsSpan;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
typeFormatter(row) {
|
||||||
|
return this.typeDict[row.type];
|
||||||
|
},
|
||||||
|
nutriFormatter(row, col) {
|
||||||
|
return ((row.weight / 100) * row[col.property]).toFixed(1);
|
||||||
|
},
|
||||||
|
handleOnOneDayAnalysis(e) {
|
||||||
|
// 校验某天
|
||||||
|
this.setCurrentDay({ currentDay: this.num - 1 });
|
||||||
|
},
|
||||||
|
handleOnAdd() {
|
||||||
|
console.log(this.num);
|
||||||
|
},
|
||||||
|
handleOnEdit(data) {
|
||||||
|
console.log(data);
|
||||||
|
},
|
||||||
|
handleOnDelete(data) {
|
||||||
|
// console.log(data);
|
||||||
|
this.deleteSomeDayDishes({ num: this.num - 1, dishesId: data.id });
|
||||||
|
},
|
||||||
|
handleOnWeightChange(data, weight) {
|
||||||
|
// console.log({ data, weight });
|
||||||
|
this.updateRecipesDishesWeight({
|
||||||
|
num: this.num - 1,
|
||||||
|
dishesId: data.id,
|
||||||
|
igdId: data.igdId,
|
||||||
|
weight,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
|
||||||
|
this.updateRecipesDishesCustomWeight({
|
||||||
|
num: this.num - 1,
|
||||||
|
dishesId: data.id,
|
||||||
|
igdId: data.igdId,
|
||||||
|
cusWeight,
|
||||||
|
cusUnit,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
...mapMutations([
|
||||||
|
"setCurrentDay",
|
||||||
|
"deleteSomeDayDishes",
|
||||||
|
"updateRecipesDishesWeight",
|
||||||
|
"updateRecipesDishesCustomWeight",
|
||||||
|
]),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.recipes_com_wrapper {
|
||||||
|
margin-bottom: 24px;
|
||||||
|
padding: 1px;
|
||||||
|
|
||||||
|
.num_day {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss">
|
||||||
|
.fun_button {
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<div class="recipes_view_wrapper">
|
||||||
|
<RecipesAspectCom :collapse.sync="collapse" :data="analyseData" />
|
||||||
|
<div
|
||||||
|
class="recipes_content"
|
||||||
|
:style="`height: calc(100vh - ${collapse ? 142 : 312}px)`"
|
||||||
|
>
|
||||||
|
<RecipesCom
|
||||||
|
v-for="(item, index) in data"
|
||||||
|
:key="item.id"
|
||||||
|
:data="item"
|
||||||
|
:name="name"
|
||||||
|
:num="index + 1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import RecipesCom from "./RecipesCom";
|
||||||
|
import RecipesAspectCom from "./RecipesAspectCom";
|
||||||
|
export default {
|
||||||
|
name: "RecipesView",
|
||||||
|
components: {
|
||||||
|
RecipesCom,
|
||||||
|
RecipesAspectCom,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
collapse: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: ["data", "analyseData", "name", "numRange"],
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped >
|
||||||
|
.recipes_view_wrapper {
|
||||||
|
// padding-right: 20px;
|
||||||
|
|
||||||
|
.recipes_content {
|
||||||
|
overflow: auto;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,26 +1,30 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="recipes_build_wrapper">
|
||||||
<div class="content">
|
<div class="left">
|
||||||
<div class="left">
|
<RecipesView
|
||||||
<RecipesView :data="recipesData" />
|
:data="recipesData"
|
||||||
</div>
|
:name="healthyData.name"
|
||||||
<div class="right">
|
:analyseData="analyseData"
|
||||||
<HealthyView :data="healthyData" v-if="healthyDataType === 0" />
|
/>
|
||||||
<BodySignView :data="healthyData" v-else />
|
</div>
|
||||||
</div>
|
<div class="right">
|
||||||
|
<HealthyView :data="healthyData" v-if="healthyDataType === 0" />
|
||||||
|
<BodySignView :data="healthyData" v-else />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { createNamespacedHelpers } from "vuex";
|
import { createNamespacedHelpers } from "vuex";
|
||||||
|
const {
|
||||||
const { mapActions, mapState, mapMutations } = createNamespacedHelpers(
|
mapActions,
|
||||||
"recipes"
|
mapState,
|
||||||
);
|
mapMutations,
|
||||||
|
mapGetters,
|
||||||
|
} = createNamespacedHelpers("recipes");
|
||||||
|
|
||||||
import HealthyView from "./HealthyView";
|
import HealthyView from "./HealthyView";
|
||||||
import BodySignView from "./BodySignView";
|
import BodySignView from "./BodySignView";
|
||||||
import RecipesView from "./RecipesView";
|
import RecipesView from "./RecipesView/index";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "BuildRecipies",
|
name: "BuildRecipies",
|
||||||
@ -48,11 +52,8 @@ export default {
|
|||||||
},
|
},
|
||||||
props: ["planId", "cusId", "recipesId"],
|
props: ["planId", "cusId", "recipesId"],
|
||||||
computed: {
|
computed: {
|
||||||
...mapState({
|
...mapState(["healthyData", "healthyDataType", "recipesData"]),
|
||||||
healthyData: (state) => state.healthyData,
|
...mapGetters(["analyseData"]),
|
||||||
healthyDataType: (state) => state.healthyDataType,
|
|
||||||
recipesData: (state) => state.recipesData,
|
|
||||||
}),
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapActions(["init"]),
|
...mapActions(["init"]),
|
||||||
@ -60,15 +61,17 @@ export default {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
<style rel="stylesheet/scss" lang="scss">
|
<style lang="scss" scoped>
|
||||||
.content {
|
.recipes_build_wrapper {
|
||||||
|
padding: 16px;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: calc(100vh - 124px);
|
height: calc(100vh - 86px);
|
||||||
.left {
|
.left {
|
||||||
flex: 4;
|
flex: 4;
|
||||||
border-right: 1px solid #e6ebf5;
|
border-right: 1px solid #e6ebf5;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: auto;
|
overflow: hidden;
|
||||||
|
padding-right: 20px;
|
||||||
}
|
}
|
||||||
.right {
|
.right {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user