bonus-ui/src/views/device/doubleScreen/index.vue

655 lines
29 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="关键字" prop="keyWord">
<el-input
v-model="queryParams.keyWord"
placeholder="请输入关键字"
clearable maxlength="20"
style="width: 300px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="所属区域" prop="areaId">
<el-cascader v-model="queryParams.areaId"
:options="treeOptions" :filterable="true" style="width: 300px;" :show-all-levels="false"
:props="{
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
checkStrictly: false,//来设置父子节点取消选中关联,从而达到选择任意一级选项的目的
value:'id',label:'label'
}" clearable @change="handleTreeChange">
</el-cascader>
</el-form-item>
<el-form-item label="所属食堂" prop="canteenId">
<el-select v-model="queryParams.canteenId" placeholder="请选择所属食堂" clearable style="width: 300px;" @change="changeQueryCanteen">
<el-option v-for="item in canteenOptions"
:key="item.canteenId"
:label="item.canteenName"
:value="item.canteenId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="所属档口" prop="stallId">
<el-select v-model="queryParams.stallId" placeholder="请选择所属档口" clearable style="width: 300px;">
<el-option v-for="item in stallOptions"
:key="item.stallId"
:label="item.stallName"
:value="item.stallId"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="tableListData" height="800">
<el-table-column label="设备编号" align="center" prop="deviceNum" :show-overflow-tooltip="true" width="120" fixed="left"/>
<el-table-column label="设备名称" align="center" prop="deviceName" :show-overflow-tooltip="true" width="180" fixed="left"/>
<el-table-column label="当前菜谱" align="center" prop="recipeName" :show-overflow-tooltip="true" width="180">
<!-- <template slot-scope="scope">
<span style="color: #4b80fd;cursor: pointer;" @click="openMenuDialog(scope.row)">{{scope.row.firstRecipeName}}</span>
</template> -->
</el-table-column>
<el-table-column label="通讯状态" align="center" prop="onlineState" :show-overflow-tooltip="true" width="100">
<template slot-scope="scope">
<!-- <dict-tag :options="dict.type.dev_comm_status" :value="scope.row.onlineState"/> -->
<span v-if="scope.row.onlineState==1">在线</span>
<span v-if="scope.row.onlineState==2">离线</span>
</template>
</el-table-column>
<el-table-column label="设备状态" align="center" prop="deviceState" :show-overflow-tooltip="true" width="100">
<template slot-scope="scope">
<!-- <dict-tag :options="dict.type.dev_status" :value="scope.row.deviceState"/> -->
<span v-if="scope.row.deviceState==1">正常</span>
<span v-if="scope.row.deviceState==2">异常</span>
</template>
</el-table-column>
<el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column label="所属食堂" align="center" prop="canteenName" :show-overflow-tooltip="true"/>
<el-table-column label="所属档口" align="center" prop="stallName" :show-overflow-tooltip="true"/>
<el-table-column label="设备版本号" align="center" prop="versionCode" :show-overflow-tooltip="true"/>
<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
>编辑</el-button>
<el-button
size="mini"
type="text"
style="color: red;"
@click="handleDelete(scope.row)"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title+'双屏消费机'" :visible.sync="open" width="700px" append-to-body>
<el-tabs v-model="activeName" @tab-click="handleTabClick">
<!-- 基础设置 -->
<el-tab-pane label="基础设置" name="baseSetting" style="height: 400px;">
<el-form ref="baseForm" :model="baseForm" :rules="baseFormRules" label-width="80px">
<el-col :span="12">
<el-form-item label="所属区域" prop="areaId">
<el-cascader v-model="baseForm.areaId"
:options="treeOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
:props="{
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
checkStrictly: false,//来设置父子节点取消选中关联,从而达到选择任意一级选项的目的
value:'id',label:'label'
}"
clearable @change="handleTreeChange2" >
</el-cascader>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属食堂" prop="canteenId">
<el-select v-model="baseForm.canteenId" placeholder="请选择所属食堂" style="width: 100%;" @change="chosenCanteen">
<el-option v-for="item in canteenOptions2"
:key="item.canteenId"
:label="item.canteenName"
:value="item.canteenId"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="所属档口" prop="stallId">
<el-select v-model="baseForm.stallId" placeholder="请选择所属档口" style="width: 100%;" @change="chosenStall">
<el-option v-for="item in stallOptions2"
:key="item.stallId"
:label="item.stallName"
:value="item.stallId"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备编号" prop="deviceNum">
<el-input v-model="baseForm.deviceNum" placeholder="请输入设备编号" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备名称" prop="deviceName">
<el-input v-model="baseForm.deviceName" placeholder="请输入设备名称" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备Sn" prop="deviceSn">
<el-input v-model="baseForm.deviceSn" placeholder="请输入设备Sn" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备Ip" prop="deviceIp">
<el-input v-model="baseForm.deviceIp" placeholder="请输入设备Ip" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备key" prop="deviceKey">
<el-input v-model="baseForm.deviceKey" placeholder="请输入设备key" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安装地址" prop="deviceAddr">
<el-input v-model="baseForm.deviceAddr" placeholder="请输入安装地址" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备Mac" prop="deviceMac">
<el-input v-model="baseForm.deviceMac" placeholder="请输入设备key" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="网关" prop="deviceGateway">
<el-input v-model="baseForm.deviceGateway" placeholder="请输入安装地址" maxlength="30" clearable/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="密码" prop="devicePwd">
<el-input v-model="baseForm.devicePwd" placeholder="请输入密码" maxlength="30" clearable/>
</el-form-item>
</el-col>
</el-form>
</el-tab-pane>
</el-tabs>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog title="查看 - 菜谱" :visible.sync="openMenu" width="800px" append-to-body>
<el-form :model="dialogMenuParams" ref="dialogQueryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="" prop="keyWord">
<el-select v-model="dialogMenuParams.keyWord" placeholder="请选择" style="width: 100%;" @change="queryMenuData">
<el-option label="早餐" value="早餐"></el-option>
<el-option label="午餐" value="午餐"></el-option>
<el-option label="下午茶" value="下午茶"></el-option>
<el-option label="晚餐" value="晚餐"></el-option>
<el-option label="夜宵" value="夜宵"></el-option>
</el-select>
</el-form-item>
<el-form-item label="" prop="applyDate">
<el-date-picker
v-model="dialogMenuParams.applyDate"
type="date" @change="queryMenuData"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="queryMenuData">搜索</el-button>
</el-form-item>
</el-form>
<el-table :data="menuSubData" height="500">
<el-table-column label="序号" align="center" type="index" :show-overflow-tooltip="true" width="80"/>
<el-table-column label="菜品名称" align="center" prop="dishesName" :show-overflow-tooltip="true"/>
<el-table-column label="规格" align="center" prop="" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>标准</span>
</template>
</el-table-column>
<el-table-column label="价格" align="center" prop="salePrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.salePrice/100).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="优惠价" align="center" prop="salePrice" :show-overflow-tooltip="true">
<template slot-scope="scope">
<span>{{ (scope.row.salePrice/100).toFixed(2) }}</span>
</template>
</el-table-column>
<el-table-column label="供应数量" align="center" prop="supplyNum" :show-overflow-tooltip="true"/>
<el-table-column label="限购数量" align="center" prop="restrictNum" :show-overflow-tooltip="true"/>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="openMenu=false">确 定</el-button>
<el-button @click="openMenu=false">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { systemAreaTreeApi,getCanteenByAreaApi,getStallByCanteenApi } from "@/api/base/stall";
import { getDeviceListPageApi,addDeviceApi, updateDeviceApi, deleteDeviceApi,getMenuRecipeDetailApi } from "@/api/device/index";
import base64 from 'base-64';
export default {
name: "",
dicts: ["dev_comm_status","dev_status"],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
//表格数据
tableListData: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
checked: false,
treeOptions:[],//区域树
treeProps:{
multiple: true,
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
value:"id",
label:"label",
children:"children",
},
statusOptions:[{id:"1",name:"在线"},{id:"2",name:"离线"}],
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
keyWord:"",//关键字
areaId:null,//区域
canteenId:null,//食堂
stallId:null,//档口
},
canteenOptions:[],//查询-食堂下拉选
stallOptions:[],//查询-档口下拉选
activeName:"baseSetting",
deviceData:{},
// 表单参数
baseForm: {
areaId:null,
canteenId:null,
stallId:null,
deviceNum:"",
deviceName:"",
deviceSn:"",
deviceIp:"",
deviceKey:"",
deviceAddr:"",
deviceMac:"",
deviceGateway:"",
devicePwd:""
},
canteenOptions2:[],//弹窗-食堂下拉选
stallOptions2:[],//弹窗-档口下拉选
// 表单校验
baseFormRules: {
deviceNum: [
{ required: true, message: "设备编号不能为空", trigger: "blur" }
],
deviceName: [
{ required: true, message: "设备名称不能为空", trigger: "blur" }
],
deviceSn: [
{ required: true, message: "设备Sn不能为空", trigger: "blur" }
],
deviceKey: [
{ required: true, message: "设备Key不能为空", trigger: "blur" }
],
areaId: [
{ required: true, message: "所属区域不能为空", trigger: "blur" }
],
canteenId: [
{ required: true, message: "所属食堂不能为空", trigger: "blur" }
],
stallId: [
{ required: true, message: "所属档口不能为空", trigger: "blur" }
]
},
metadata:{
"voiceRemindSuccess": "1",
"showPaySuccessTime": "3",
"offlineTotalCount": "10000",
"faceSize": "100",
"faceRecognitionScore": "80",
"printIsor": "2",
"payOnceHighMoney": "100000",
"ruleCardQRTran": "0",
"offlineTotalMoney": "10000",
"showNoSubBalance": "1",
"showNoNutrition": "2",
"identityCard": "1",
"paySamePersonSameMoneyTime": "10",
"identityQR": "1",
"voiceRemindFail": "1",
"offlineAllow": "2",
"identityFace": "1"
},
openLog:false,
dialogQueryParams:{//异常查询条件
pageNum: 1,
pageSize: 10,
},
logTableData:[],//异常弹窗
// 总条数
dialogTotal: 0,
//当前菜谱
openMenu:false,
dialogMenuParams:{
keyWord:"早餐",
applyDate:this.formatDate(new Date())
},
recipeId:"",
menuData:[],
menuSubData:[],
};
},
mounted(){
this.getTreeData();
if(this.$route.query.areaId){
this.queryParams.areaId = this.$route.query.areaId
getCanteenByAreaApi({
"areaId":this.queryParams.areaId,"canteenType": 1
}).then((response) => {
this.canteenOptions=response.rows||[]
this.queryParams.canteenId=this.$route.query.canteenId
getStallByCanteenApi({
canteenId:this.queryParams.canteenId
}).then((response) => {
this.stallOptions=response.rows||[];
if(this.$route.query.canteenId){
this.queryParams.stallId=this.$route.query.stallId
}
});
});
}
this.getList()
},
methods: {
//区域树
getTreeData() {
systemAreaTreeApi({}).then((response) => {
this.treeOptions = response.data;
});
},
//查询-区域树
handleTreeChange(e){
let param= {
"areaId":e,
"canteenType": 1
}
getCanteenByAreaApi(param).then((response) => {
this.canteenOptions=response.rows||[]
this.queryParams.canteenId=null;
this.queryParams.stallId=null;
});
},
//查询-食堂
changeQueryCanteen(e){
console.log(e)
let param= {
"canteenId":e
}
getStallByCanteenApi(param).then((response) => {
this.stallOptions=response.rows||[]
this.queryParams.stallId=null;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
/** 查询列表 */
getList() {
this.loading = true;
let param = {
"pageNum":this.queryParams.pageNum,
"pageSize":this.queryParams.pageSize,
"areaId":this.queryParams.areaId,
"canteenId":this.queryParams.canteenId,
"stallId":this.queryParams.stallId,
"keyWord":this.queryParams.keyWord,
"deviceType":20
}
console.log("param",param)
// let str = base64.encode(JSON.stringify(param))
// console.log({"content":str})
getDeviceListPageApi(param).then(response => {
this.tableListData = response.rows;
this.total = Number(response.total);
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.baseForm = {
areaId:null,
canteenId:null,
stallId:null,
deviceNum:"",
deviceName:"",
deviceSn:"",
deviceIp:"",
deviceKey:"",
deviceAddr:"",
deviceMac:"",
deviceGateway:"",
devicePwd:""
};
this.resetForm("baseForm");
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "新增";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
this.open = true;
getCanteenByAreaApi({ areaId:row.areaId,canteenType: 1 }).then((response) => {
this.canteenOptions2=response.rows||[]
});
getStallByCanteenApi({canteenId:row.canteenId}).then((response) => {
this.stallOptions2=response.rows||[]
});
this.baseForm = Object.assign({}, row)
this.$set(this.baseForm,"areaId",row.areaId)
this.$set(this.baseForm,"canteenId",row.canteenId)
this.$set(this.baseForm,"stallId",row.stallId)
// this.$set(this,"metadata",row.deviceMetadata)
this.title = "修改";
},
handleTabClick(tab, event) {
console.log(tab, event);
},
//基础设置-选择区域
handleTreeChange2(val){
setTimeout(()=>{
// 选择区域后获取相应食堂
getCanteenByAreaApi({areaId:val,canteenType: 1}).then((response) => {
this.canteenOptions2=response.rows||[]
this.stallOptions2=[]
this.$set(this.baseForm,"canteenId",null)
this.$set(this.baseForm,"stallId",null)
});
},300)
},
//选择食堂后获取档口编号
chosenCanteen(e){
console.log(e)
this.$set(this.baseForm,"canteenId",e)
this.$refs['baseForm'].clearValidate(['canteenId']);
let param= {
canteenId:e
}
getStallByCanteenApi(param).then((response) => {
this.stallOptions2=response.rows||[]
this.baseForm.stallId=null
});
},
//选择食堂后获取档口编号
chosenStall(e){
console.log(e)
this.baseForm.stallId=e
this.$refs['baseForm'].clearValidate(['stallId']);
this.$forceUpdate()
},
/** 提交按钮 */
submitForm: function() {
console.log(this.baseForm)
this.$refs["baseForm"].validate(valid => {
if (valid) {
this.baseForm.deviceType=20
// this.baseForm.metadata=this.metadata
if (this.baseForm.deviceId != undefined) {
updateDeviceApi(this.baseForm).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addDeviceApi(this.baseForm).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
// const dictIds = row.dictId || this.ids;
this.$modal.confirm('是否确认删除数据项?').then(function() {
return deleteDeviceApi(row.deviceId);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 今日菜谱按钮操作-打开弹窗 */
openMenuDialog(row){
this.openMenu=true
this.recipeId = row.firstRecipeId
this.queryMenuData()
},
handleMenuQuery(){
this.queryMenuData()
},
//今日菜谱弹窗-分页查询接口
queryMenuData() {
console.log(this.dialogMenuParams.applyDate)
let param = {
"applyDate": this.dialogMenuParams.applyDate,
"recipeId": this.recipeId
}
getMenuRecipeDetailApi(param).then((response) => {
console.log(response)
this.menuData = response;
this.menuSubData=[]
console.log(this.dialogMenuParams.keyWord)
this.menuData.forEach(item => {
if(item.mealtimeName == this.dialogMenuParams.keyWord){
this.menuSubData = this.menuSubData.concat(item.dishesList)
}
});
});
},
formatDate(date) {
// 格式化为 YYYY-MM-DD
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
}
}
};
</script>
<style scoped lang="scss">
.form-title{
display: flex;
align-items: flex-end;
// width: 100%;
// height: 40px;
background: #e7f0fa;
border-left: 3px solid #46a6ff;
margin: 10px 0;
padding: 5px;
}
.form-item{
width: 100%;
font-size: 14px !important;
}
</style>