yiliangyiyun-pc-jj/src/views/houseSelfCollect/weightCheck.vue

<template>
  <div class="center">
    <el-row>
      <el-col :span="12">
        <h2 class="bg-left titleup">{{ information }}检斤信息</h2>
      </el-col>
      <el-col :span="12" class="bg-right">
        <el-button class="bg-bottom" type="primary" size="small" @click="cancel"><img width="6" height="10"
            style="vertical-align: bottom; margin-right: 3px" src="../../../public/img/lujing.png" alt="" />返回
        </el-button>
      </el-col>
    </el-row>
    <div class="substance">
      <div class="left">
        <div class="top">
          <div class="car-type">{{carWeightInfo.type}}</div>
          <div v-if="index==0" class="weight">{{weighingList.grossWeight}} <span class="kg-style">kg</span></div>
          <div v-else class="weight">{{weighingList.tare}} <span class="kg-style">kg</span></div>
          <div class="car-no">{{carWeightInfo.carNumber}}</div>
        </div>
        <h2 class="bg-left titleup">实时监控</h2>
        <div class="bottom">
          <div v-if="!monitorUrl1" class="video1">
            <img src="../../../public/img/quesheng@2x.png" alt="" class="img1">
            <div>监控视频未连接</div>

          </div>
          <div v-else class="video1">
            <iframe :src="monitorUrl1" width="440" height="360" allowfullscreen="true" webkitallowfullscreen="true"
              mozallowfullscreen="true" allow="autoplay; fullscreen; microphone;"></iframe>
          </div>
          <div v-if="!monitorUrl2" class="video1">
            <img src="../../../public/img/quesheng@2x.png" alt="" class="img1">
            <div>监控视频未连接</div>

          </div>
          <div v-else class="video2">
            <iframe :src="monitorUrl2" width="440" height="360" allowfullscreen="true" webkitallowfullscreen="true"
              mozallowfullscreen="true" allow="autoplay; fullscreen; microphone;"></iframe>
          </div>
        </div>
      </div>
      <div class="right">
        <ws-form>
          <div style="margin: 0 auto">

            <div class="tab">
              <div class="tab-item" :class="index==0?'active':''" @click="tabClick(0)"> 待称毛重（{{mList.length}}）</div>
              <div class="tab-item" :class="index==1?'active':''" @click="tabClick(1)">待称皮重（{{pList.length}}）</div>
            </div>
            <div class="title">基本信息</div>
            <ws-info-table>
              <ws-form-item label="编号" span="1" prop="number">
                <ws-input v-model="weighingList.number" placeholder="请输入编号" maxlength="100" disabled size="small" />
              </ws-form-item>
              <ws-form-item label="仓位号" span="1" prop="binNumber">
                <ws-input v-model="weighingList.binNumber" placeholder="请输入仓位号" maxlength="100" disabled size="small" />
              </ws-form-item>
              <ws-form-item label="客户" span="1" prop="customer">
                <ws-input v-model="weighingList.customer" placeholder="请输入客户" maxlength="100" disabled size="small" />
              </ws-form-item>
              <ws-form-item label="囤位号" span="1" prop="storageNumber">
                <ws-input v-model="weighingList.storageNumber" placeholder="请输入囤位号" maxlength="100" size="small"
                  disabled />
              </ws-form-item>
              <ws-form-item label="车牌号" span="1" prop="carNumber">
                <ws-input v-model="weighingList.carNumber" placeholder="请输入车牌号" maxlength="100" size="small" disabled />
              </ws-form-item>
              <ws-form-item label="货名" span="1" prop="goodsName">
                <ws-input v-model="weighingList.goodsName" placeholder="请输入货名" maxlength="100" size="small" disabled />
              </ws-form-item>
              <ws-form-item label="毛重（公斤）" span="1" prop="grossWeight">
                <ws-input type="number" @mousewheel.native.prevent v-if="this.index == 0"
                  v-model="weighingList.grossWeight" @input="calculation" placeholder="未获取到毛重" maxlength="100"
                  size="small" :disabled="disabled" />
                <ws-input type="number" @mousewheel.native.prevent v-else v-model="weighingList.grossWeight"
                  @input="calculation" placeholder="未获取到毛重" maxlength="100" size="small" disabled />
              </ws-form-item>
              <el-button type="primary" :class="index ==0 ? '' : 'butCss'" @click="openPort">重新获取</el-button>
              <ws-form-item label="皮重（公斤）" span="1" prop="tare" v-if="information == '皮重'">
                <ws-input type="number" @mousewheel.native.prevent v-model="weighingList.tare" @input="calculation"
                  placeholder="未获取到皮重" maxlength="100" size="small" :disabled="disabled" />
              </ws-form-item>
              <el-button type="primary" v-if="index != 0" @click="openPort">重新获取</el-button>
              <div class="formItem">
                <ws-form-item label="扣重（公斤）" span="1" prop="buckleWeightRatio"
                  v-if="information == '皮重' && paramType == '2'">
                  <ws-input type="number" @mousewheel.native.prevent v-model="weighingList.buckleMiscellaneous"
                    @input="calculation" placeholder="请输入扣重" maxlength="100" size="small" />
                </ws-form-item>

                <ws-form-item label="净重（公斤）" span="1" prop="netWeight" v-if="information == '皮重'">
                  <ws-input type="number" @mousewheel.native.prevent v-model="weighingList.netWeight"
                    placeholder="请输入净重" maxlength="100" size="small" disabled />
                </ws-form-item>
              </div>
            </ws-info-table>
            <div class="but">
              <el-button @click="cancel" type="primary">关闭</el-button>
              <el-button @click="print" v-if="this.information == '毛重'" type="primary">保存</el-button>
              <el-button @click="print" v-if="this.information == '皮重'" type="primary">保存并打印</el-button>
            </div>
          </div>
          <div class="bottom">
            <el-table ref="singleTable" :data="carList" height="550" highlight-current-row
              @current-change="handleCurrentChange" style="width: 100%;overflow:auto">
              <el-table-column property="number" label="编号">
              </el-table-column>
              <el-table-column property="carNumber" label="车牌号">
              </el-table-column>
            </el-table>
            <div style="text-align: center">
              <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-size="deptCircularPage.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
              </el-pagination>
            </div>
            <!-- <div class="table-title">
            <div class="top">
            <div class="top-item first"></div>
            <div class="top-item">编号</div>
            <div class="top-item">车牌号</div>
          </div>
              <div class="top">
            <div></div>
           <div class="top-item"></div>
            <div class="top-item">编号</div>
            <div class="top-item">车牌号</div>
          </div>
        </div>
          <div class="table">
            <div class="table-content" v-for="(item,index) in 30" :key="index">
              <div class="table-content-item"><input type="radio"></div>
              <div class="table-content-item">xxxxxxxxxxxxx</div>
              <div class="table-content-item">辽A11111</div>
            </div>
          </div> -->
          </div>
        </ws-form>
      </div>

    </div>
    <el-dialog width="70%" class="table-content" center :visible.sync="isShowPrint" title="粮食检斤单" @close="closeDialog"
      :close-on-click-modal="false">
      <weightCheckPrint :tableData="inspect" ref="saveImg"></weightCheckPrint>
      <div style="text-align:center">
        <el-button type="primary" @click="closePrint">关闭</el-button>
        <el-button type="primary" @click="printSmall">打印小票</el-button>
        <el-button type="primary" @click="printBig">打印单据</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    tare,
    grossWeight,
    getamount,
    getPrint,
    getweighingList,
    getinspectLookGoods
  } from '@/model/houseSelfCollect/index'
  import weightCheckPrint from './component/weightCheckPrint.vue'
  import html2canvas from 'html2canvas'
  import axios from 'axios'
  export default {
    components: {
      weightCheckPrint,
    },
    watch: {
      weighingList: { //深度监听，可监听到对象、数组的变化
        handler(val, oldVal) {
          if (val.tare) {
            this.weighingList.netWeight = this.weighingList.grossWeight - val.tare
          }
        },
        deep: true //true 深度监听
      }
    },
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        deptCircularPage: {},
        deptBudgetTotal: 0,
        pList: [],
        mList: [],
        index: 0,
        currentPage: 1,
        pageSize: 10,
        carList: [],
        carWeightInfo: {
          carNumber: '',
          type: '',
          weight: ''
        },
        currentRow: null,
        inspect: {},
        types: 1,
        information: '',
        weighingList: {
          grossWeight: 0,
          tare: 0,
          buckleMiscellaneous: 0,
        },
        tpyeNo: '',
        disabled: true,
        relationId: '',
        warehouseId: '',
        purchasePriceList: [],
        isShowPrint: false,
        tableData: {},
        reader: null,
        param: 9600,
        monitorUrl1: '',
        monitorUrl2: '',
        cangid: '',
        paramType: '1',
        warehouseName: ''
      }
    },
    activated() {
      console.log(this.common.name)
      this.cangid = this.$route.query.cangid
      this.paramType = this.$route.query.paramType
      this.getList()
      this.tpyeNo = this.$route.query.tpyeNo
      this.warehouseName = this.$route.query.warehouseName
      this.weighingList.number = this.$route.query.number
      this.weighingList.binNumber = this.$route.query.binNumber
      this.weighingList.customer = this.$route.query.customer
      this.weighingList.storageNumber = this.$route.query.storageNumber
      this.weighingList.carNumber = this.$route.query.carNumber
      this.weighingList.goodsName = this.$route.query.goodsName
      this.weighingList.id = this.$route.query.id
      this.relationId = this.$route.query.relationId
      this.monitorUrl1 = this.$route.query.monitorUrl1
      this.monitorUrl2 = this.$route.query.monitorUrl2
      this.warehouseId = this.$route.query.warehouseId
      if (!this.$route.query.grossWeight) {
        this.$route.query.grossWeight = 0
      } else {
        this.weighingList.grossWeight = this.$route.query.grossWeight
      }
      // this.purchasePriceList = this.$route.query.purchasePriceList
      // console.log(this.purchasePriceList, '上限')
      this.allowEdit = this.$route.query.allowEdit
      if (this.allowEdit == 0) {
        this.disabled = true
      } else if (this.allowEdit == 1) {
        this.disabled = false
      }
      if (this.tpyeNo == 1) {
        this.information = '毛重'
        this.weighingList.tare = 0
      } else if (this.tpyeNo == 2) {
        this.information = '皮重'
      }

    },
    deactivated() {
      // this.closePort()

    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
        this.pageSize = val
        this.getList()
      },
      getList() {
        // 货名
        getinspectLookGoods({
            warehouseId: this.cangid
          })
          .toPromise()
          .then((response) => {
            this.purchasePriceList = response
          })
        getweighingList({
            compId: sessionStorage.getItem('ws-pf_compId'),
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            searchKeyWord: '',
            warehouseName: sessionStorage.getItem('ck'),
            managementType: 1
          })
          .toPromise()
          .then((response) => {
            for (let i = 0; i < response.records.length; i++) {
              if (response.records[i].paymentManagement) {
                if (response.records[i].paymentManagement.status == '待结算' && !response.records[i].paymentManagement
                  .approveStatus) {
                  response.records[i].allow = 1
                } else {
                  response.records[i].allow = 2
                }
              } else {
                response.records[i].allow = 1
              }
            }
            this.weighingList = response.records
            this.common.commonWeighingList = response.records
            this.makeData();
          })
          .catch((response) => {
            // EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
          })
      },
      makeData() {
        this.mList = [];
        this.pList = [];
        let that = this
        console.log(this.common.commonWeighingList, 'commonWeighingList')
        let _list = this.common.commonWeighingList
        for (let i = 0; i < _list.length; i++) {
          if (_list[i].allow == 2) {
            continue
          }
          if (_list[i].status == '已质检' || _list[i].status == '已称毛重') {
            this.mList.push(_list[i])
          }

          if ((_list[i].status == '已称皮重' || _list[i].status == '已称毛重')) {
            this.pList.push(_list[i])
          }
        }
        if (this.information == '毛重') {
          this.index = 0
          this.carList = this.mList
          if (this.mList.length != 0) {
            let _item = this.mList.filter(function(val) {
              console.log(that.$route.query.id)
              if (val.id == that.$route.query.id) {
                return val
              }
            })
            if (_item.length != 0) {
              this.setCurrent(_item[0])

              this.weighingList = _item[0]
              this.carWeightInfo = {
                carNumber: _item[0].carNumber,
                type: this.information,
                weight: this.weighingList.grossWeight
              }

              this.weighingList = _item[0]
            } else {
              this.setCurrent(this.mList[0])

              this.weighingList = this.mList[0]
              this.carWeightInfo = {
                carNumber: this.mList[0].carNumber,
                type: this.information,
                weight: this.weighingList.grossWeight
              }
            }
            this.deptBudgetTotal = this.mList.length
          }

        } else {
          this.index = 1
          this.carList = this.pList
          if (this.pList.length != 0) {
            let _item = this.pList.filter(function(val1) {
              if (val1.id == that.$route.query.id) {
                return val1
              }
            })
            if (_item.length != 0) {
              this.setCurrent(_item[0])
              this.weighingList = _item[0]
              this.carWeightInfo = {
                carNumber: _item[0].carNumber,
                type: this.information,
                weight: this.weighingList.tare
              }
            } else {
              this.setCurrent(this.pList[0])

              this.weighingList = this.pList[0]
              this.carWeightInfo = {
                carNumber: this.pList[0].carNumber,
                type: this.information,
                weight: this.weighingList.tare
              }
            }

            this.deptBudgetTotal = this.pList.length
          }
        }
      },
      tabClick(val) {
        this.carWeightInfo.carNumber = ''
        this.weighingList = []
        this.index = val
        if (this.information == '皮重') {
          this.information = '毛重'
          this.tpyeNo = 1
        } else {
          this.tpyeNo = 2
          this.information = '皮重'
        }
        this.getList()
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
        this.carWeightInfo = {
          carNumber: val.carNumber,
          type: this.information,
          weight: val.grossWeight
        }
        this.weighingList = val;
        this.paramType = val.qualityInspectionManagement.paramType
      },
      async closePort() {
        console.log('closePort');
        this.reader.cancel()
      },
      async openPort() {
        console.log('openPort', navigator);
        if ('serial' in navigator) {
          // The Web Serial API is supported.
          console.log('the Web Serial API is supported.');
          console.log(this.param);
          const port = await navigator.serial.requestPort();
          await port.open({
            baudRate: this.param
          }); // set baud rate
          this.reader = port.readable.getReader();

          // 监听来自串行设备的数据
          while (true) {
            const {
              value,
              done
            } = await this.reader.read();
            // console.log("value",value);
            if (done) {
              // 允许稍后关闭串口。
              this.reader.releaseLock();
              break;
            }
            var result = '';
            //2。获取16进制字符串
            // var receData = HexConvert.ByteToString(value);
            // console.log("receData",receData);
            var flag = false;
            if (this.warehouseName && this.warehouseName == '山东诸城迈饶库') {
              for (var i = 0; i < value.length; i++) {
                var tmp = String.fromCharCode(value[i])
                if (tmp == '+') {
                  flag = true
                }
                if (flag && result.length < 6 && tmp != '+') {
                  result += tmp
                }
              }
              if (this.tpyeNo != 2) {
                if (parseInt(result) || parseInt(result) == 0) {
                  this.weighingList.grossWeight = parseInt(result)
                }
              } else {
                if (parseInt(result) || parseInt(result) == 0) {
                  this.weighingList.tare = parseInt(result)
                }
              }
            } else {
              for (var i = 0; i < value.length; i++) {
                var tmp = String.fromCharCode(value[i])
                if (value[0] != 49 && value[0] != 2) {
                  break
                }
                if (tmp == String.fromCharCode(32)) {
                  flag = true
                }
                if (flag && result.length < 7 && tmp != String.fromCharCode(32)) {
                  // if(i-1 >=0 &&tmp == String.fromCharCode(48) && value[i-1] == 32){
                  //   continue
                  // }
                  // if(i-2 >=0 &&tmp == String.fromCharCode(48) && value[i-2] == 32){
                  //   continue
                  // }
                  result += tmp
                }
              }
              if (this.tpyeNo != 2) {
                if (parseInt(result) || parseInt(result) == 0) {
                  this.weighingList.grossWeight = parseInt(result) * 100
                }
              } else {
                if (parseInt(result) || parseInt(result) == 0) {
                  this.weighingList.tare = parseInt(result) * 100
                }
              }
            }

            setTimeout(1000)
            // value 是一个 Uint8Array
          }
          await port.close();
        } else {
          console.log('the Web Serial API is not supported.', navigator);
        }
      },
      cancel() {
        this.$router.push({
          path: 'weighingManagement'
        })
      },
      calculation() {
        if (this.weighingList.grossWeight && this.weighingList.tare) {
          this.weighingList.netWeight = this.weighingList.grossWeight - this.weighingList.tare - this.weighingList
            .buckleMiscellaneous
          this.weighingList.netWeight = this.weighingList.netWeight.toFixed(2)
        }
      },
      printSmall() {
        window.open('../../../../static/weightCheck.html?type=1&tableData=' + JSON.stringify(this.inspect))
      },
      printBig() {
        window.open('../../../../static/weightCheck.html?type=2&tableData=' + JSON.stringify(this.inspect))
      },
      closeDialog() {
        html2canvas(this.$refs.saveImg.$el).then((canvas) => {
          let dataURL = canvas.toDataURL('image/png')
          this.imgUrl = dataURL
          if (this.imgUrl !== '') {
            let b = this.dataURLtoFile(this.imgUrl, 'printImage')
            let formdata = new FormData()
            formdata.append('file', b)
            axios({
              method: 'post',
              url: 'https://www.zthymaoyi.com/upload/admin',
              data: formdata,
            }).then((response) => {
              //编辑接口
              this.weighingList.pictureAddress = response.data.url
              tare(this.weighingList)
                .toPromise()
                .then((response) => {})
            })
            this.dialogTableVisible = true
          }
        })
        this.isShowPrint = false
        // this.$router.push({
        //   path: 'weighingManagement'
        // })
      },
      closePrint() {
        this.isShowPrint = false
        // this.$router.push({
        //   path: 'weighingManagement'
        // })
      },
      print() {
        if (!this.weighingList.grossWeight) {
          this.$message({
            message: '毛重不能为空',
            type: 'warning',
          })
          return
        }
        if (
          this.weighingList.grossWeight < 1 ||
          this.weighingList.grossWeight > 200000
        ) {
          this.$message({
            message: '毛重输入错误',
            type: 'warning',
          })
          return
        }
        if (
          String(this.weighingList.grossWeight).indexOf('.') != -1 &&
          String(this.weighingList.grossWeight).length -
          (String(this.weighingList.grossWeight).indexOf('.') + 1) >
          1
        ) {
          this.$message({
            message: '毛重输入错误',
            type: 'warning',
          })
          return
        }
        if (this.tpyeNo == 2) {
          if (!this.weighingList.tare) {
            this.$message({
              message: '皮重不能为空',
              type: 'warning',
            })
            return
          }
          if (!this.weighingList.tare) {
            this.$message({
              message: '皮重不能为空',
              type: 'warning',
            })
            return
          }
          if (this.weighingList.tare > this.weighingList.grossWeight) {
            this.$message({
              message: '皮重不能大于毛重',
              type: 'warning',
            })
            return
          }
          if (this.weighingList.tare < 1 || this.weighingList.tare > 100000) {
            this.$message({
              message: '皮重输入错误',
              type: 'warning',
            })
            return
          }
          if (
            String(this.weighingList.tare).indexOf('.') != -1 &&
            String(this.weighingList.tare).length -
            (String(this.weighingList.tare).indexOf('.') + 1) >
            1
          ) {
            this.$message({
              message: '皮重输入错误',
              type: 'warning',
            })
            return
          }

          if (this.weighingList.netWeight < 0) {
            this.$message({
              message: '净重不能小于0',
              type: 'warning',
            })
            return
          }
        }
        this.$confirm('确定保存检斤信息？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(() => {
            if (this.tpyeNo == 1) {
              //毛检保存前进行校验
              getamount({
                  compId: sessionStorage.getItem('ws-pf_compId'),
                  customerName: this.weighingList.customer,
                  goodsName: this.weighingList.goodsName,
                })
                .toPromise()
                .then((response) => {
                  for (let i = 0; i < this.purchasePriceList.length; i++) {
                    console.log(this.purchasePriceList, 'shangxiang')
                    if (
                      this.weighingList.goodsName == this.purchasePriceList[i].goodsName
                    ) {
                      //累计售粮超上限不能完成毛检保存
                      let count = (this.purchasePriceList[i].saleLimit - response / 1000).toFixed(2)
                      // console.log(this.weighingList.grossWeight / 1000, '毛重转吨')
                      // this.weighingList.grossWeight/=1000
                      if (count - this.weighingList.grossWeight / 1000 < 0) {
                        this.$alert(
                          '该客户累计销售' +
                          this.weighingList.goodsName +
                          (response / 1000).toFixed(2) +
                          '吨，还可售粮' +
                          count +
                          '吨',
                          '提示', {
                            confirmButtonText: '确定',
                            callback: (action) => {
                              this.$message({
                                type: 'info',
                                message: `累计售粮已超出上限`,
                              })
                            },
                          }
                        )
                      } else {
                        //累计售粮没有超上限完成毛检保存
                        this.weighingList.relationId = this.relationId;
                        this.weighingList.secretaryWeigher = sessionStorage.getItem('ws-pf_staffName'),
                          grossWeight(this.weighingList)
                          .toPromise()
                          .then((response) => {
                            this.$notify.success({
                              title: '成功',
                              message: '保存成功',
                            })
                            // this.$router.go(-1)
                          })
                          .catch((response) => {
                            // EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
                          })
                      }
                    }
                  }
                })
            } else if (this.tpyeNo == 2) {
              // this.weighingList.grossWeight/=1000
              // this.weighingList.tare/=1000
              // if(this.weighingList.buckleMiscellaneous){
              //   this.weighingList.buckleMiscellaneous/=1000
              // }
              // this.weighingList.netWeight/=1000
              this.weighingList.warehouseId = this.warehouseId;
              (this.weighingList.skinInspector =
                sessionStorage.getItem('ws-pf_staffName')),
              tare(this.weighingList)
                .toPromise()
                .then((response) => {
                  this.$notify.success({
                    title: '成功',
                    message: '保存成功',
                  })
                  getPrint({
                      id: response,
                    })
                    .toPromise()
                    .then((response) => {
                      this.inspect = response
                      this.inspect.a = '中天'
                      // this.tableData = response
                      this.isShowPrint = true
                    })
                    .catch((response) => {
                      // EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
                    })
                })
                .catch((response) => {
                  // EventBus.$emit('error', this.$t('showMessage.asteriskRequired'))
                })
            }
          })
          .catch(() => {
            return false
          })
      },
    },
  }
</script>
<style lang="scss" scoped>
  /deep/.el-pagination {
    margin-bottom: 0;
  }

  .center {
    background: #f6f7fc;
  }

  .ws-info-table {
    border: none;
  }

  .ws-info-table .el-form-item {
    width: 50%;
    border: none;
  }

  .formItem {
    width: 100%;
    display: inline;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__label {
    width: 30%;
    text-align: center;
    background: #ffffff;
    font-size: 14px;
    color: #8890b1;
  }

  /deep/.ws-info-table .el-form-item .el-form-item__content {
    border: none;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    margin: 10px;
  }

  .titleup {
    position: relative;
  }

  .title::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 15px;
    background: #8890b1;
    margin-right: 5px;
  }

  .substance {
    .active {
      background: #5878e8;
      color: white;
    }

    // background: #ffffff;
    width: 100%;
    border-radius: 4px;
    margin: 0 auto;
    padding-top: 20px;
    display: flex;

    .left {
      width: 30%;
      // padding:0 20px 20px 20px;

      .top {
        background: black;
        color: #2AFF7C;
        font-size: 32px;
        text-align: right;
        padding: 20px;
        border-radius: 10px;
        margin: 0 20px 20px 20px;

        .car-type {
          text-align: left;
        }

        .kg-style {
          font-size: 30px;
        }
      }

      .bottom {
        text-align: center;
        background: white;
        margin: 20px 20px 0 20px;
        border-radius: 10px;
        padding-bottom: 20px;

        .img1,
        .img2 {
          width: 200px;
          padding: 20px;
        }

        .video-content {
          width: 100%;
        }
      }
    }

    .right {
      width: 60%;
      padding: 20px;
      background: white;
      margin-right: 20px;
      border-radius: 10px;

      .tab {
        display: flex;

        .tab-item {
          padding: 5px 10px;
          margin-right: 20px;
          border-radius: 10px;
        }
      }

      .table-title {

        background: red;

        .top {
          display: inline-block;
          width: 48%;

          .top-item {
            display: inline-block;
          }
        }
      }

      .table {
        background: red;

        .table-content {
          background: green;
          display: inline-block;
          width: 50%;

          .table-content-item {
            display: inline-block;
          }
        }

      }
    }
  }

  /deep/.el-table .el-table__header .cell,
  .el-table .el-table__body .cell {
    text-align: center;
  }

  /deep/.el-table--enable-row-transition .el-table__body td {
    text-align: center;
  }

  .bg-left {
    padding-left: 30px;
  }

  .bg-right {
    padding-right: 10px;
    text-align: right;
  }

  .bg-bottom {
    margin: 15px 0px;
  }

  .titleup {
    position: relative;
  }

  .titleup::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 30px;
    background: #5473e8;
    position: absolute;
    left: 0;
  }

  .but {
    text-align: center;
    margin: 20px auto;
  }

  .butCss {
    opacity: 0;
  }

  /deep/.el-dialog__title {
    font-size: 24px !important;
  }

  /deep/.el-dialog__header {
    text-align: center !important;
    padding: 10px 0 !important;
    height: auto !important;
  }

  .weight {
    font-size: 68px;
  }
</style>