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

<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="deviceSearchInfo">
          <el-input 
            v-model="queryParams.deviceSearchInfo"
            placeholder="请输入关键字"
            clearable
            style="width: 300px"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item> 
        <el-form-item label="所属区域" prop="areaIdList">
            <el-cascader style="width: 400px"
            v-model="queryParams.areaIdList" :show-all-levels="false" :filterable="true"
            :options="treeOptions" :props="treeProps" collapse-tags
            @change="handleTreeChange"></el-cascader>
        </el-form-item>
        <el-form-item label="所属食堂" prop="canteenIdList">
            <el-select v-model="queryParams.canteenIdList" placeholder="请选择所属食堂" collapse-tags :multiple="true" style="width: 400px;" @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>
        <br>
        <el-form-item label="所属档口" prop="stallIdList">
            <el-select v-model="queryParams.stallIdList" placeholder="请选择所属档口" collapse-tags :multiple="true" style="width: 500px;">
                <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 label="通讯状态" prop="">
            <el-select v-model="queryParams.onlineState" placeholder="请选择通讯状态" style="width: 300px;">
                <el-option v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                ></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="firstRecipeName" :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" :show-overflow-tooltip="true">
            <template slot-scope="scope">
                <span>{{scope.row.bindList[0].areaName}}</span> 
            </template>
        </el-table-column>
        <el-table-column label="所属食堂" align="center" prop="firstCanteenName" :show-overflow-tooltip="true"/>
        <el-table-column label="所属档口" align="center" prop="firstShopstallName" :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="openLogDialog(scope.row)"
            >异常</el-button>
            <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: 500px;">
                <el-form ref="baseForm" :model="baseForm" :rules="baseFormRules" label-width="80px">
                    <el-row>
                        <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-row>
                    <el-row>
                        <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-row>
                    <el-row>
                        <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-row>
                    <el-row>
                        <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-row>

                    <el-row>
                        <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: true,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
                                    value:'id',label:'treeName'
                                    }"
                                    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-row>
                    <el-row> 
                        <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="devicePwd">
                                <el-input  v-model="baseForm.devicePwd" placeholder="请输入密码" maxlength="30" clearable/>
                            </el-form-item> 
                        </el-col>
                    </el-row> 
                
                </el-form>
            </el-tab-pane> 
            <!-- 配送设置 -->
            <!-- <el-tab-pane label="设备参数" name="deliverySetting"> 
                <div style="width: 100%;height: 600px;overflow-y: auto;">
                    <div class="form-title">
                        <span>支付参数</span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                        <el-checkbox v-model="checked">启用混合支付</el-checkbox>
                        <div>
                            <span>单笔消费最高金额</span>
                            <el-input v-model="metadata.payOnceHighMoney" style="width: 100px;" placeholder="请输入" @input="(v)=>(metadata.payOnceHighMoney=v.replace(/[^\d]/g,''))"></el-input>
                            <span>元</span>
                        </div>
                        <el-checkbox v-model="checked">用户刷脸支付需二次确认,等待时间 秒(仅支持双屏双触设备)</el-checkbox><br>
                        <el-checkbox v-model="checked">支持需要收银员二次确认</el-checkbox><br>
                        <div>
                            <span>同一个人</span>
                            <el-input v-model="metadata.paySamePersonSameMoneyTime" style="width: 100px;" placeholder="请输入" @input="(v)=>(metadata.payOnceHighMoney=v.replace(/[^\d]/g,''))"></el-input>
                            <span>秒内不能重复支付 默认10秒</span>
                        </div>

                    </div>
                    <div class="form-title">
                        <span>离线参数</span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                        <el-checkbox v-model="checked">允许离线使用</el-checkbox>
                        <span>离线总金额</span>
                        <el-input v-model="metadata.offlineTotalMoney" style="width: 100px;" placeholder="请输入" @input="(v)=>(metadata.payOnceHighMoney=v.replace(/[^\d]/g,''))"></el-input>
                        <span>离线总比数</span>
                        <el-input v-model="metadata.offlineTotalCount" style="width: 100px;" placeholder="请输入" @input="(v)=>(metadata.payOnceHighMoney=v.replace(/[^\d]/g,''))"></el-input>
                    </div>
                    <div class="form-title">
                        <span>显示参数</span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                        <el-checkbox v-model="checked">用户照片不显示</el-checkbox>
                        <el-checkbox v-model="checked">用户余额不显示</el-checkbox>
                        <el-checkbox v-model="checked">个人钱包余额不显示</el-checkbox>
                        <el-checkbox v-model="checked">补贴余额不显示</el-checkbox>
                        <el-checkbox v-model="checked">营养信息不显示</el-checkbox> 
                        <div>
                            <span>支付成功显示倒计时时间</span>
                            <el-input v-model="metadata.showPaySuccessTime" style="width: 100px;" placeholder="请输入" @input="(v)=>(metadata.payOnceHighMoney=v.replace(/[^\d]/g,''))"></el-input>
                            <span>秒</span>
                        </div> 
                    </div>
                    <div class="form-title">
                        <span>语言参数 </span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item"> 
                        <div style="width: 100%; display: flex;">
                            <div style="width: 45%;margin-left: 3%;">
                                <div>请选择成功提示音</div>
                                <el-select v-model="metadata.voiceRemindSuccess" placeholder="请选择成功提示音">
                                    <el-option label="成功" value="1"></el-option>
                                    <el-option label="男版提示音" value="2"></el-option>
                                    <el-option label="女版提示音" value="3"></el-option>
                                </el-select>
                            </div>
                            <div style="width: 45%;margin-left: 3%;">
                                <div>请选择失败提示声音</div> 
                                <el-select v-model="metadata.voiceRemindFail" placeholder="请选择失败提示声音">
                                    <el-option label="失败" value="1"></el-option>
                                    <el-option label="男版提示音" value="2"></el-option>
                                    <el-option label="女版提示音" value="3"></el-option>
                                </el-select> 
                            </div>
                        </div>
                        <el-checkbox v-model="checked" style="margin-left: 5%;margin-top: 20px;">生日提醒</el-checkbox> 
                    </div>
                    <div class="form-title">
                        <span>打印参数 </span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                        <el-checkbox v-model="checked">启用打印 打印份数（1）</el-checkbox>
                        <el-checkbox v-model="checked">打印诺诺发票</el-checkbox>
                    </div>
                    <div class="form-title">
                        <span>核身方式 </span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                        <el-checkbox v-model="metadata.identityCard" true-label="1" false-label="0">卡</el-checkbox>
                        <el-checkbox v-model="metadata.identityQR" true-label="1" false-label="0">码</el-checkbox>
                        <el-checkbox v-model="metadata.identityFace" true-label="1" false-label="0">脸</el-checkbox>
                        <el-checkbox v-model="checked">禁用支付宝</el-checkbox>
                        <el-checkbox v-model="checked">禁用微信</el-checkbox>
                        <el-checkbox v-model="checked">禁用云闪付</el-checkbox>
                        <el-checkbox v-model="checked">禁用农行</el-checkbox>
                        <el-checkbox v-model="checked">禁用工行</el-checkbox>
                    </div>
                    <div class="form-title">
                        <span>人脸参数 </span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                         <div>
                            <el-input v-model="metadata.faceRecognitionScore" style="width: 45%;margin-left: 3%;" placeholder="人脸识别分数" @input="(v)=>(metadata.payOnceHighMoney=v.replace(/[^\d]/g,''))"></el-input>
                            <el-input v-model="metadata.faceSize" style="width: 45%;margin-left: 3%;" placeholder="人脸大小" @input="(v)=>(metadata.payOnceHighMoney=v.replace(/[^\d]/g,''))"></el-input>
                        </div>
                    </div>
                    <div class="form-title">
                        <span>读盘参数 </span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                        <el-checkbox v-model="checked">出品错误餐盘允许结算</el-checkbox>
                        <el-checkbox v-model="checked">已结算的餐盘允许结算</el-checkbox>
                        <el-checkbox v-model="checked">不识别未加密的餐盘</el-checkbox>
                        <el-checkbox v-model="checked">关闭菜品拍照功能</el-checkbox>
                        <el-checkbox v-model="checked">关闭读盘错误语音提示</el-checkbox>
                        <el-checkbox v-model="checked">是否从时段菜谱获取菜品</el-checkbox>
                    </div>
                    <div class="form-title">
                        <span>规则 </span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                        <el-select v-model="metadata.ruleCardQRTran" placeholder="卡号转换规则" style="width: 45%;margin-left: 3%;">
                            <el-option label="标准" value="0"></el-option>
                            <el-option label="卡号倒叙" value="1"></el-option>
                            <el-option label="读6位卡号(去尾)" value="2"></el-option>
                            <el-option label="读6位卡号(去头)" value="3"></el-option>
                            <el-option label="卡号10进制转16进制" value="4"></el-option>
                            <el-option label="卡号16进制转10进制" value="5"></el-option>
                        </el-select>
                    </div> 
                    <div class="form-title">
                        <span>叫号参数 </span>
                        <span style="font-size: 10px;margin-left: 10px;">云食堂和设备同步</span>
                    </div>
                    <div class="form-item">
                        <el-checkbox v-model="checked">使用订单部分叫号</el-checkbox>
                    </div>  
                </div> 
            </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="openLog" width="800px" append-to-body> 
        <el-table :data="logTableData" height="500"> 
            <el-table-column label="序号" align="center" width="80" type="index">
                  <template slot-scope="scope">
                      <span>{{(dialogQueryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
                  </template>
            </el-table-column>
            <el-table-column label="发生时间" align="center" prop="messageTime" :show-overflow-tooltip="true"/>
            <el-table-column label="异常描述" align="center" prop="message" :show-overflow-tooltip="true"/> 
        </el-table> 
        <pagination
            v-show="dialogTotal>0"
            :total="dialogTotal"
            :page.sync="dialogQueryParams.pageNum"
            :limit.sync="dialogQueryParams.pageSize"
            @pagination="queryLogPage"
        />

        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="openLog=false">确 定</el-button>
            <el-button @click="openLog=false">取 消</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 } from "@/api/base/area";
    import { getCanteenByAreaApi,getStallByCanteenApi } from "@/api/base/stall";
    import { getDeviceListPageApi,addDeviceApi, updateDeviceApi, deleteDeviceApi, getDeviceStateLogApi,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:"treeName",
                    children:"children",
                },
                statusOptions:[{id:"1",name:"在线"},{id:"2",name:"离线"}],
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    deviceSearchInfo:"",//关键字 
                    areaIdList:[],//区域 
                    canteenIdList:[],//食堂
                    stallIdList :[],//档口
                    onlineState:""
                },
                canteenOptions:[],//查询-食堂下拉选
                stallOptions:[],//查询-档口下拉选
                activeName:"baseSetting",
                deviceData:{},
                // 表单参数
                baseForm: {},
                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:new Date().toISOString().substr(0, 10)
                },
                recipeId:"",
                menuData:[],
                menuSubData:[],
            };
        },
        mounted(){ 
            if(this.$route.query.areaId){
                this.queryParams.areaIdList.push(this.$route.query.areaId+'') 
                getCanteenByAreaApi({
                    areaIdList:this.queryParams.areaIdList
                }).then((response) => {
                    this.canteenOptions=response||[]
                    this.queryParams.canteenIdList.push(this.$route.query.canteenId+'')
                    getStallByCanteenApi({
                        canteenIdList:this.queryParams.canteenIdList
                    }).then((response) => {
                        this.stallOptions=response||[];
                        if(this.$route.query.canteenId){ 
                            this.queryParams.stallIdList.push(this.$route.query.stallId+'') 
                        } 
                    });  
                }); 
            }else{
                this.getTreeData(); 
            }
            this.getList()
        },
        methods: {
            //区域树
            getTreeData() {
                systemAreaTreeApi({}).then((response) => {
                    this.treeOptions = response;
                    console.log(this.treeOptions) 
                });
            },
            //查询-区域树
            handleTreeChange(e){
                console.log(e)
                let arr=e
                let param= {
                    areaIdList:arr
                }
                this.queryParams.areaIdList=arr;
                getCanteenByAreaApi(param).then((response) => {
                    this.canteenOptions=response||[]
                });
            },
            //查询-食堂
            changeQueryCanteen(e){
                console.log(e)
                let arr=e
                let param= {
                    canteenIdList:arr
                }
                getStallByCanteenApi(param).then((response) => {
                    this.stallOptions=response||[]
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.queryParams.onlineState = ""
                this.resetForm("queryForm");
                this.handleQuery();
            }, 
            /** 查询列表 */
            getList() {
                this.loading = true;
                let param = {
                    "page":{"current":this.queryParams.pageNum,"size":this.queryParams.pageSize},
                    "object":{
                        "areaIdList":this.queryParams.areaIdList,
                        "canteenIdList":this.queryParams.canteenIdList,
                        "stallIdList":this.queryParams.stallIdList,
                        "mealLineIdList":[],
                        "deviceSearchInfo":this.queryParams.deviceSearchInfo,
                        "onlineState":this.queryParams.onlineState,
                        "deviceType":20
                    }
                }
                 
                let str = base64.encode(JSON.stringify(param))
                // console.log(str)
                getDeviceListPageApi({"content":str}).then(response => {
                    this.tableListData = response.records;
                    this.total = Number(response.total);
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.baseForm = {};
                this.resetForm("baseForm");
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "新增";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset(); 
                this.open = true;
                getCanteenByAreaApi({ areaIdList:[row.bindList[0].areaId] }).then((response) => {
                    this.canteenOptions2=response||[]
                });
                getStallByCanteenApi({canteenIdList:[row.bindList[0].canteenId]}).then((response) => {
                    this.stallOptions2=response||[]
                });
                this.baseForm = Object.assign({}, row)
                this.$set(this.baseForm,"areaId",row.bindList[0].areaId)
                this.$set(this.baseForm,"canteenId",row.bindList[0].canteenId)
                this.$set(this.baseForm,"stallId",row.bindList[0].stallId)
                this.$set(this,"metadata",row.deviceMetadata)
                this.title = "修改"; 
            },
            handleTabClick(tab, event) {
                console.log(tab, event);
            },
            //基础设置-选择区域
            handleTreeChange2(val){ 
                setTimeout(()=>{  
                    let arr=[val]
                    let param= { areaIdList:arr }
                    // 选择区域后获取相应食堂
                    getCanteenByAreaApi(param).then((response) => {
                        this.canteenOptions2=response||[]
                        this.stallOptions2=[]
                        this.$set(this.baseForm,"canteenId",null)  
                        this.$set(this.baseForm,"stallId",null)   
                    });
                },800)
            },
            //选择食堂后获取档口编号
            chosenCanteen(e){
                console.log(e)
                this.$set(this.baseForm,"canteenId",e)
                this.$refs['baseForm'].clearValidate(['canteenId']);
                let param= {
                    canteenIdList:[e]
                }
                getStallByCanteenApi(param).then((response) => {
                    this.stallOptions2=response||[]
                    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) {
                    // console.log(this.baseForm)
                    this.baseForm.binds=[{
                        "areaId": this.baseForm.areaId,
                        "canteenId": this.baseForm.canteenId,
                        "stallId": this.baseForm.stallId
                    }]
                    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(() => {});
            },
            /** 异常按钮操作-打开弹窗 */
            openLogDialog(row){
                this.openLog=true
                this.queryLogPage(row)
            },
            //异常弹窗-分页查询接口
            queryLogPage(row) {
                let param = {"page":{"current":this.dialogQueryParams.pageNum,"size":this.dialogQueryParams.pageSize},"object":{"deviceSn":row.deviceSn}}
                let str = base64.encode(JSON.stringify(param))
                getDeviceStateLogApi({"content":str}).then((response) => {
                    this.logTableData = response.records
                    this.dialogTotal = Number(response.total);
                    console.log(response)
                });
            },
            /** 今日菜谱按钮操作-打开弹窗 */
            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)
                        } 
                    }); 
                });
            },


        }
    };
  </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>