shoudujic后厨店面管理

base64图片的使用

日期时间选择器最大时间范围为3天

                <el-date-picker 
                  class="eldatepicker" 
                  v-model="value" 
                  type="datetimerange" 
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  @input="pickerInputFn"  
                  :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOption"
                />

      pickerOption: {
        disabledDate(time) {
          let date=new Date()
          let date1=new Date(moment(date).format('yyyy-MM-DD')+' 23:59:59').getTime()
          // 日期选择器不能选择今天及今天之后的时间
          return time.getTime() > date1
        },
        customValidation(minDate, maxDate) {
          let times = (maxDate.getTime() - minDate.getTime()) 
          let days=times / (24 * 60 * 60 * 1000)
          return days<=3
        },
        customPrompt:'可选择的最大时间范围为三天'
      },

    // 日期时间选择器input改变
    pickerInputFn(value) {
      // this.getMaxHour()
      this.submitTimeStart = moment(value[0]).format('yyyy-MM-DD HH:mm:ss')
      this.submitTimeEnd = moment(value[1]).format('yyyy-MM-DD HH:mm:ss')
      let code = this.storeDeviceInfoDtoList[this.index].storeDeviceInfo.indexCode
      let timeInterval = this.storeDeviceInfoDtoList[this.index].deviceTemperature.timeInterval
      this.initChart(this.index, code, timeInterval, this.submitTimeStart,this.submitTimeEnd)
    },

折线图新增滑动条对图进行缩放操作

dataZoom: [
          {
            type: 'slider', // 滑动条
            orient: 'horizontal',
            show: true,
            xAxisIndex: [0], //选择哪个x轴数据缩放
            height: 20, //滑动条的高度
            minSpan: 2, //最小展示的数据范围我两个数据
            // startValue: 0,
            // endValue: 20,
            start: 0, //默认为1，百分比
            end: 100, //默认为100
            bottom: 10, //距离底部
          },
          {
            type:'inside' //不显示滑动条，滚轮在折线图内可以放大缩小
          }
        ],

封装详细信息组件

动态绑定class

        <div class="right">
          <div :class="[len === 0 ? 'dis' : 'icon']"></div>
          <el-button type="link" :disabled="len === 0" @click="handoff">告警配置</el-button>
        </div>

    .right {
      display: flex;
      line-height: 48px;
      padding-top: 8px;

      .icon {
        background: url('../../../assets/images/warn.png');
        width: 20px;
        height: 20px;
        margin: 4px 5px 0 0;
      }

      .dis {
        background: url('../../../assets/images/diswarn.png');
      }
    }

当len === 0 时，即没有数据时，要求图标变为浅色，告警配置按钮变为disabled状态，表示不可以进行配置。

:class="[len === 0 ? 'dis' : 'icon']"len为0 时，类名为dis，展示浅色图标，len不为0时，类名为icon,展示正常图标。

<div :class="['myForm', { myFormvertical: !vertical, detailForm: isDetail }]"></div>

即

<div class="myForm", :class="[{ myFormvertical: !vertical, detailForm: isDetail }]"></div>

即

<div class="myForm", :class="{ myFormvertical: !vertical, detailForm: isDetail }"></div>

动态class见vue- HTML标签动态绑定class

在表格中嵌套输入框

          <el-table :data="tableData" style="width: 100%" :header-cell-style="{ fontWeight: 600 }">
            <el-table-column prop="areaName" label="区域名称" width="200px"> </el-table-column>
            <el-table-column prop="businessWarningTemperature" label="营业期间预警温度(℃)">
              <template slot-scope="scope">
                <el-input
                  v-model.number="tableData[scope.$index].businessWarningTemperature"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="businessAlarmTemperature" label="营业期间告警温度(℃)">
              <template slot-scope="scope">
                <el-input
                  v-model.number="tableData[scope.$index].businessAlarmTemperature"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="notBusinessAlarmTemperature" label="非营业期间升温告警阈值(℃)">
              <template slot-scope="scope">
                <el-input
                  v-model.number="tableData[scope.$index].notBusinessAlarmTemperature"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="timeInterval" label="显示温度间隔(℃)">
              <template slot-scope="scope">
                <el-input
                  v-model.number="tableData[scope.$index].timeInterval"
                  placeholder="请输入"
                ></el-input>
              </template>
            </el-table-column>
          </el-table>

使用已经封装好的el-table组件，该组件默认在每一列都有一个作用域插槽，在作用域插槽内可以取到该列的内容，参数为 { row, column, $index }

使用作用域插槽，< template slot-scope="scope"> </ template>嵌套el-input，可以在el-input控件中获取当前行的index（scope.$index）和内容。

作用域插槽详见作用域插槽 slot-scope - 掘金 (juejin.cn)

判断是否存在非0整数

  for (let key of this.attrList) {
    if (item[key] !== '') {
      if (!Number(item[key]) || parseInt(item[key]) !== parseFloat(item[key])) {
        err = true
        this.$message({
          message: '请输入非0整数',
          type: 'warning',
          duration: 1800,
        })
        return false
      }
    } else {
      err = true
      this.$message({
        message: '配置项不能为空',
        type: 'warning',
        duration: 1800,
      })
      return false
    }
  }

Number(value) 将value值转换为数字，若不能转换为数字，则返回NaN。

数字字符串可以转换为数字，如 '111' 转换为 111 ; 串中存在字母，不管有没有数字，都不能转换为数字，如 '111a'转换为NaN ; 需要注意的是，空字符串转换为数字的结果为0, 即 Number('')===0。

所以使用Number判断是否为数字时，注意为空字符串或0的情况。

当Number(item[key]) 为NaN时，！Number(item[key])为true， 即值不为数字，|| 结果为true,不会继续是否为整数的判断。

若Number(item[key]) 为数字，！Number(item[key])为false，则继续进行判断是否为整数。

parseInt(value)===parseFloat(value) 判断数字转换为整数和浮点数后结果相同，则为整数。

可以用来过滤数字0，因为value为0时，Number(value)值为0， ！0为true, 提醒输入非0整数。

判断字符串是否为整数参考：判断字符串是否为数字，整数，正整数 - 掘金 (juejin.cn)

多次嵌套循环中，满足条件时最外层循环后的代码停止执行

//默认允许执行循环后代码
let err = false
//多层嵌套
this.tableData.forEach(item => {
  for (let key of this.attrList) {
    if (item[key] !== '') {
      if (!Number(item[key]) || parseInt(item[key]) !== parseFloat(item[key])) {
        //满足条件不执行循环后代码
        err = true
        this.$message({
          message: '请输入非0整数',
          type: 'warning',
          duration: 1800,
        })
        return false
      }
    } else {
      //满足条件不执行循环后代码
      err = true
      this.$message({
        message: '配置项不能为空',
        type: 'warning',
        duration: 1800,
      })
      return false
    }
  }
})
//根据err判断是否return不执行后面的代码
if (err) return false
...
...
...

或

//默认不行循环后代码
let err = true
//多层嵌套
this.tableData.forEach(item => {
  for (let key of this.attrList) {
    if (item[key] !== '') {
      if (!Number(item[key]) || parseInt(item[key]) !== parseFloat(item[key])) {
        this.$message({
          message: '请输入非0整数',
          type: 'warning',
          duration: 1800,
        })
        return false
      }else{
         //不满足所有条件，可以执行循环之后的代码
         err=false
      }
    } else {
      this.$message({
        message: '配置项不能为空',
        type: 'warning',
        duration: 1800,
      })
      return false
    }
  }
})
//根据err判断是否return不执行后面的代码
if (err) return false
...
...
...

js 跳出多层循环（终止循环）

异步初始化echart图标

let newPromise = new Promise(resolve => {
  resolve()
})
//然后异步执行echarts的初始化函数
newPromise.then(() => {
  this.initChart()
})

赋值使用三元运算符

data.staff ? (data.formateStaff = data.staff.join(';')) : ''

或

data.formateStaff = data.staff ? data.staff.join(';') : ''

echarts图表id相同，每次初始化之前需要先销毁之前的图表

data(){
    return {
        chart:null
    }
}
initChart(){
    //初始化前先销毁上一个图表
    if (this.chart !== null) this.chart.dispose()
    this.chart = this.$echarts.init(document.getElementById('chart'))
    let option={}
    this.chart.setOption(option)
    //浏览器窗口小大发生变化时，图表也随之改变
    window.onresize = this.chart.resize
}

dispose销毁echarts已创建的实例。 echarts的初始化和销毁dispose

resize 用来改变图表尺寸，在容器大小发生改变时需要手动调用。 echarts 随屏幕大小改变大小(resize)

对象拷贝

this.tableData = [
...item.deviceTemperatureList.map(value => {
  return Object.assign({}, value)
}),
]

暂无数据组件

有时候项目中表格等需要展示数据的区域数据没有加载出来时，会要求展示特定样式的暂无数据的提示界面，可以封装为组件。

  <div class="empty">
    <img src="@/assets/images/noData.png" />
    <div class="emptyBox">
      <div class="emptyText">暂无结果</div>
      <!-- <div class="emptyText">，创建<el-button type="text">数据需求申请</el-button></div> -->
    </div>
  </div>

在父组件中使用暂无数据组件

import emptyIcon from '@/components/common/empty.vue'

<section v-if="tableData.length > 0" class="searchTable">
      <el-table
        :data="tableData"
        style="width: 100%"
        force-scroll
        :show-loading="tableLoading"
        @selection-change="handleSelectionChange"
      >
      </el-table>
</section>
<section v-else class="searchTable">
  <emptyIcon />
</section>

模板字符串

在标签属性中使用模板字符串：

   <el-form
      :label-width="labelWidth"
      ref="myForm"
      :model="formValue"
      :label-position="labelPosition == 'left' ? 'left' : 'top'"
      :rules="formRules"
    >
      <!-- :required="item.required"   -->
      <el-form-item
        v-for="(item, index) in formList"
        :key="'formList' + index"
        :label="showSearchTitle ? item.label : ''"
        :prop="item.key"
        :required="item.required"
        :required-right="item.requiredRight"
        :class="{ formArea: item.formType == 'textArea', detailUpload: item.formType == 'upload' }"
      >
        <!-- 输入框 -->
        <template v-if="item.formType == 'input'">
          <el-input
            v-model="formValue[item.key]"
            :placeholder="`请输入${item.label}`"
            v-if="!isDetail && !item.disabled"
          ></el-input>
          <div class="disabledText" v-else-if="!isDetail && item.disabled">{{ formValue[item.key] }}</div>
          <div class="detailText" v-else>{{ formValue[item.key] }}</div>
        </template>
     </el-form-item>
 </el-form>

在元素标签属性中使用模板字符串，需要使用双引号包裹。 在标签内的属性中使用模板字符串