prevent_drowning_manage/ruoyi-ui/src/views/shipinggaoj/gaojingguanli/index.vue

<template>
  <div class="app-container">
    <div style="">
      <div style="background-color: #fff;padding: 20px;border-radius: 10px; padding-bottom: 0;">
        <p style="margin: 0; font-weight: 800;font-size: 16px;color: #343434;display: flex;align-items: center;margin-bottom: 20px;border-left: 6px solid #03BF8A;margin-left: -20px;">
          <!-- <img src="../../../assets/images/icon_htgl_btzs.png" alt="" style="width: 16px;height: 20px;"> -->
         <span style="margin-left: 10px;">搜索条件</span>
        </p>
        <div style="padding-bottom: 0;margin-bottom: 20px;">
          <el-form class="qucheu" :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="88px">
            <el-row>
                <el-col :span="6">
                  <el-form-item label="告警类别" prop="algorithmType">
                          <el-select style="width: 140px;" v-model="queryParams.algorithmType" placeholder="请选择告警类别" clearable>
                            <el-option
                              v-for="dict in dict.type.gaojing_typeshuju"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            />
                          </el-select>
                        </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="告警时间" prop="warnTime">
                          <el-date-picker style="width: 140px;" clearable
                            v-model="queryParams.warnTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择告警时间">
                          </el-date-picker>
                        </el-form-item>
                </el-col>
              <el-col :span="5">
                <el-form-item class="butt" style="border: 0;">
                  <el-button style="background-color: #03BF8A; border-color: #03BF8A;" type="primary" size="mini"  @click="handleQuery">查询 </el-button>
                  <el-button size="mini"  @click="resetQuery">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
      </div>


      <div class="casr">
              <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['manage:warnManage:add']"
                  >添加</el-button>
                </el-col>
                <!-- <el-col :span="1.5">
                  <el-button
                    type="success"
                    plain
                    size="mini"
                    :disabled="singleg"
                    @click="handleUpdateg"
                    v-hasPermi="['manage:warnManage:edits']"
                  >修改</el-button>
                </el-col> -->
                <el-col :span="1.5">
                  <el-button
                    type="danger"
                    plain
                    size="mini"
                    @click="handleDeleteg"
                    v-hasPermi="['manage:warnManage:remove']"
                  >删除</el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="warning"
                    plain
                    size="mini"
                    @click="handleExport"
                    v-hasPermi="['manage:warnManage:export']"
                  >导出</el-button>
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
              </el-row>
              <div class=" infinite-list" :style="dynamicStyle">
                <el-row :gutter="10" v-if="warnManageList.length !=0" style="width: 100%;margin-left: 0;">
                  <el-col :span="6" v-for="(item,index) in warnManageList" :key="index" style="cursor: pointer;">
                    <div v-if="isshoe"  @click="isac(item)"  :class=" item.isnum ==true ? 'ingwe' :'' " style="position: relative; background-color: #fff;box-shadow: 0px 0px 10px 0px #CDCDCD;border-radius: 10px;margin-bottom: 10px;padding-bottom: 10px;">
                      <div class="quning">
                        <div class="shipige">
                          <div style="display: flex;align-items: center;">
                            <img src="../../../assets/images/icon_gjgl_gx_normal.png" alt="" v-if="item.isnum == false">
                            <img src="../../../assets/images/icon_gjgl_gx_selected.png" alt="" v-if="item.isnum == true">
                            <p style="font-size: 14px;color: #333;font-weight: 700; margin-left: 5px;">{{ item.rangName + (item.algorithmType == 0 ? '离岗' : '玩手机') + '告警'}}</p>
                          </div>
                          <!-- <p style="font-size: 14px; color: #aaa;font-weight: 500;" @click="tiahzo(item)">详情→</p> -->
                        </div>
                        <!-- <img :src="item.warnImage" alt="" style="width: 100%; height: 150px;"> -->
                        <image-preview v-if="item.warnImage != null && item.warnImage != ''" :src="item.warnImage" :width="100 +'%'" :height="150"  style=""/>
                      <!-- <video
                                 :id="'myVideo' + (index+1)"
                                 data-setup="{}"
                                 loop="loop"
                                 :autoplay="false"
                                 muted
                                 controls
                                 @play="videoPlay(item)"
                                 poster=""
                                 style="width: 100%;height: 150px;"
                                 v-if=" item.videoAddress != null && item.videoAddress != ''"
                               > -->
                               <!-- + baseUrl -->
                                 <!-- <source  :src="item.videoAddress " />
                               </video> -->
                               <div ref="videoPlayer" style="width: 100%;height: 150px;" class="video-player"></div>
                               <!-- <h265-player url="http://192.168.9.240:5010/prod-api/profile/videoRecored/recording_20250627_092541_357_离岗.mp4" @error="handleError"></h265-player> -->
                      </div>

                      <div class="goe">
                        <div style="display: flex;align-items: center;margin-top: 8px;">
                          <p>设备名称：</p>
                          <p>{{item.equipmentName == null?'暂无数据' : item.equipmentName}}</p>
                        </div>
                        <div style="display: flex;align-items: center;margin-top: 8px;">
                          <p>算法参数：</p>
                          <p>{{item.parameterSet == null?'暂无数据' : item.parameterSet}}</p>
                        </div>
                       <!-- <div style="display: flex;align-items: center;margin-top: 8px;">
                          <p>视频通道：</p>
                          <p>{{item.channelNum == null?'暂无数据' : item.channelNum}}</p>
                        </div> -->
                        <div style="display: flex;align-items: center;margin-top: 8px;">
                          <p>告警日期：</p>
                          <p>{{item.warnTime == null?'暂无数据' : item.warnTime}}</p>
                        </div>
                        <!-- <div style="display: flex;align-items: center;margin-top: 8px;">
                          <p>上报地址：</p>
                          <p>{{item.reportAddress == null?'暂无数据' : item.reportAddress}}</p>
                        </div> -->
                        <div style="display: flex;align-items: center;margin-top: 8px;">
                          <p>上报状态：</p>
                          <div><dict-tag :options="dict.type.shagnt" :value="item.reportStatus"/></div>
                        </div>
                        <!-- <div style="display: flex;align-items: center;margin-top: 8px;">
                          <p>告警内容：</p>
                          <div><dict-tag :options="dict.type.gaojing_typeshuju" :value="item.algorithmType"/></div>
                        </div> -->
                      </div>
                      <!-- <img v-if="item.isnum == true" src="../../../assets/images/icon_htgl_kp_gx.png" alt="" style="width: 35px;height: 35px;position: absolute;bottom: 0;right: 0;"> -->
                    </div>
                  </el-col>
                </el-row>
                <div style="margin-top: 20px;display: flex;justify-content: center;align-items: center;" v-if="warnManageList.length ==0">
                   <img   src="../../../assets/images/zwshjbig.png" alt="" style="">
                </div>
              </div>

      </div>


      <paginations
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改岗位对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
           <el-form-item label="告警类别" prop="warnType">
                     <el-select style="width: 100%;" v-model="form.algorithmType" placeholder="请选择告警类别">
                       <el-option
                         v-for="dict in dict.type.gaojing_typeshuju"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value"
                       ></el-option>
                     </el-select>
                   </el-form-item>
          </el-col>

          <el-col :span="12" >
           <el-form-item label="告警标识" prop="warnSign">
                     <el-input v-model="form.warnSign" placeholder="请输入告警标识" />
                   </el-form-item>
          </el-col>

          <el-col :span="12" >
           <el-form-item label="通道Id" prop="channelId">
                          <el-select style="width: 100%;" v-model="form.channelId" placeholder="请选择通道ID">
                             <el-option
                             v-for="dict in channelNumberList "
                             :key="dict.channelId"
                             :label="dict.channelNum"
                             :value="dict.channelId"
                             ></el-option>
                           </el-select>
                       </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="视频地址" prop="videoAddress">
                      <el-input v-model="form.videoAddress" placeholder="请输入视频地址" />
                    </el-form-item>
          </el-col>
          <el-col :span="12" >
            <el-form-item label="上报地址" prop="reportAddress">
                      <el-input v-model="form.reportAddress" placeholder="请输入上报地址" />
                    </el-form-item>
          </el-col>
          <el-col :span="12" >
           <el-form-item label="上报状态" prop="reportStatus">
                     <el-select style="width: 100%;" v-model="form.reportStatus" placeholder="请选择上报状态">
                       <el-option
                         v-for="dict in dict.type.shagnt"
                         :key="dict.value"
                         :label="dict.label"
                         :value="dict.value"
                       ></el-option>
                     </el-select>
                   </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="告警时间" prop="warnTime">
                      <el-date-picker style="width: 100%;" clearable
                        v-model="form.warnTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择告警时间">
                      </el-date-picker>
                    </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注" prop="remark">
                      <el-input v-model="form.remark"  placeholder="请输入内容" />
                    </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="告警预览图片" prop="warnImage">
                      <image-upload v-model="form.warnImage"/>
                    </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="isredw">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
  // import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice"
import { listWarnManage, getWarnManage, delWarnManage, addWarnManage, updateWarnManage } from "@/api/manage/warnManage"
// import 'videojs-flash'
import { listChannelNumber, getChannelNumber, delChannelNumber, addChannelNumber, updateChannelNumber } from "@/api/system/channelNumber"
const defaultSettings = require("@/settings.js");
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import H265Player from 'vue-h265-player';
import mqttHandle from "../../../utils/mqttHandler.js"
import mqtt from 'mqtt';
import { MqttClient } from 'mqtt'
// 状态变量
 const client = mqtt.connect('ws://13.229.167.76:1884/mqtt')
export default {
  name: "WarnManage",
  components: {
      H265Player
    },
  dicts: ['gaojing_typeshuju', 'source_type','alarm_task','shagnt'],
  data() {
    return {
      mqttThemeName:{
      	url: 'ws://13.229.167.76:1884/mqtt',
      	topic: 'test/topic'
      },
      // 遮罩层
      loading: true,
      defaultSettings:defaultSettings,
      baseUrl: process.env.VUE_APP_BASE_API,
      // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 告警管理表格数据
            warnManageList: [],
             channelNumberList:[],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              warnType: null,
              warnSign: null,
              channelId: null,
              videoAddress: null,
              reportAddress: null,
              reportStatus: null,
              warnTime: null,
              warnImage: null,
              algorithmType:null,
              params:{
                month:null
              }
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
              videoAddress: [
                        { required: true, message: "不能为空", trigger: "blur" }
                      ],
              warnTime: [
                        { required: true, message: "不能为空", trigger: "blur" }
                      ],
              warnImage: [
                        { required: true, message: "不能为空", trigger: "blur" }
                      ],
            },
      activeName:'1',
      videoState: false, // 视频播放状态
      poster:true,
      controls:true,
      videoData:{},
       player: null,
       isshoe:true,
       isredw:true,
       singleg:true,
       manid:0,
       getreadList:[],
       startTime: 0,
       yutim:true,
       staffTrainTimeList:[],
       tableMaxHeight:'200',
       receiveNews: "",
        player: null,
             options: {
               // 视频源
               sources: [{
                 src: 'http://192.168.9.240:5010/prod-api/profile/videoRecored/recording_20250627_092541_357_离岗.mp4',
                 type: 'video/mp4'
               }],
               // 其他配置选项...
             }

      };
    },
    computed: {
      dynamicStyle() {
        return {
          overflowY:'auto',
          height: this.tableMaxHeight+ 'px',
           paddingTop:'10px'
        }
      }
      },
  created() {
    this.startTime = Date.now()
    if(this.$route.query.type != undefined){
      if(this.$route.query.type == 'zs'){
        this.queryParams.params.month =  this.gettimeyer()
      }else {
         this.queryParams.algorithmType =  this.$route.query.type
      }
    }else{
      this.queryParams.params.month = null
      this.queryParams.algorithmType =  null
    }
    if(this.$route.query.deptId != undefined){
      this.queryParams.params.month =  this.gettimeyer()
      this.queryParams.deptId = this.$route.query.deptId
    }else{
      this.queryParams.params.month =  null
      this.queryParams.deptId = null
    }
    if(this.$route.query.rangName != undefined){
      this.queryParams.warnTime =  this.gettime()
      this.queryParams.rangName = this.$route.query.rangName
      this.queryParams.algorithmType =  this.$route.query.type
    }else{
      this.queryParams.warnTime =  null
      this.queryParams.rangName = null
    }
    if(this.$route.query.year != undefined){
      this.queryParams.params.year = this.$route.query.year
    }else{
      this.queryParams.params.year = null
    }


    this.getList();
    this.getListt()
  window.onresize = () => {
  	      this.changeTableMaxHeight()
  	    }
  	    this.changeTableMaxHeight()
  },
  mounted() {

    // this.createMqtt() // 建立mqtt通信
  	window.onresize = () => {
  	          this.changeTableMaxHeight()
  	        }
  	        this.changeTableMaxHeight()
            this.player = videojs(this.$refs.videoPlayer, this.options, () => {
                  console.log('player is ready');
                });
  },


  beforeDestroy() {
      if (this.player) {
        this.player.dispose()
      }
      if (client) {
        console.log(4)
        client.end()
      }
      // this.disconnect()
    },
  methods: {
    handleError(error) {
          console.error('Video error:', error);
        },
    gettimeyer(){
      let nowDate = new Date()
      				  let date = {
      				    year: nowDate.getFullYear(),
      				    month: nowDate.getMonth() + 1,
      				    date: nowDate.getDate()
      				  }
                 if (parseInt(date.month) < 10) {
                    date.month = '0' + date.month
                  }
      				   if (parseInt(date.date) < 10) {
      				      date.date = '0' + date.date
      				    }
                  let nghe = date.year + '-' + date.month
      				  return nghe
    },
       minToHm(min) {
          let h = Math.floor(min / 60);
          let m = min % 60;
          let hDisplay = h ? `${h}小时` : '';
          let mDisplay = m ? `${m}分钟` : '';
          console.log(`${hDisplay}${mDisplay}`.trim())
          return `${hDisplay}${mDisplay}`.trim();
        },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      this.isshoe = false
      listWarnManage(this.queryParams).then(response => {
        this.warnManageList   = response.rows;
        this.warnManageList.filter(rou=>{
          rou.isnum = false
        })
        this.isshoe = true
        // this.getge(this.warnManageList)
        this.total = response.total;
        this.loading = false;
      });
    },
    // 创mqtt最终版
    mqttzz(){
      // 创建一个连接到MQTT broker的客户端实例
         // 连接成功后，订阅一个主题
         client.on('connect', function () {
           client.subscribe('test/topic', function (err) {
             if (!err) {
               console.log('成功订阅 test/topic 主题！')
             }
           })
         })

         // 监听订阅主题上的消息
         client.on('message', function (topic, message) {
           // 处理接收到的消息
           console.log('收到主题 ' + topic + ' 的消息: ' + message.toString())
         })
    },
    isac(val){
      console.log(5,val)
      val.isnum = !val.isnum
      this.isshoe = false
      this.isshoe = true
      let nhde = []
      let nsg = ''
      this.warnManageList.filter(rou=>{
        if(rou.isnum == true){
          nhde.push(rou.manualId)
        }
      })
      if(nhde.length == 1){
        this.warnManageList.filter(rou=>{
          if(rou.isnum == true){
            console.log(rou.manualId)
            this.manid = rou.manualId
            console.log(this.manid)
          }
        })
        this.singleg = false
      }else{
        // this.manid  = row.
        this.singleg = true
      }

    },
    /** 查询通道管理列表 */
    getListt() {
      this.loading = true
      let snge={
        pageNum: 1,
        pageSize: 200,
      }
      listChannelNumber(snge).then(response => {
        this.channelNumberList = response.rows
        this.loading = false
      })
    },
    getge(valy){
        this.$nextTick(() => {
             setTimeout(() => {
        for(var i =0; i < valy.length;i++){
          let du = document.getElementById("myVideo" + (i+1)) //获取组件下的video
                 var hour = parseInt((du.duration) / 3600);
                 var minute = parseInt((du.duration % 3600) / 60);
                 var second = parseInt(du.duration % 60);
                 let result = ''
                 if (hour > 0) {
                 result = this.formatTimeStr(hour) + ':' + this.formatTimeStr(minute) + ':' + this
                 .formatTimeStr(second)
                           } else {
                              result = this.formatTimeStr(minute) + ':' + 
                            this.formatTimeStr(second)
                            }

                       this.isshoe = false
                       valy[i].result = result
                       this.isshoe = true
                       console.log(valy[i],result,du)
          //                   return result //转化成分，秒
                       }
                      }, 1200)

                    })
    },
    formatTimeStr(val) {
            if (val > 9) {
              return val
            } else {
              return '0' + val
            }
          },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 获取当前时间
    gettime(){
      let nowDate = new Date()
      				  let date = {
      				    year: nowDate.getFullYear(),
      				    month: nowDate.getMonth() + 1,
      				    date: nowDate.getDate()
      				  }
                 // console.log(parseInt(date.date),date.month,4)
                 if (date.month < 10) {
                    date.month = '0' + date.month
                  }
      				   if (parseInt(date.date) < 10) {
      				      date.date = '0' + date.date
      				    }
                  let nghe = date.year + '-' + date.month + '-' + date.date
      				  return nghe

    },
    // 表单重置
    reset() {
       this.form = {
               warnId: null,
               warnType: null,
               warnSign: null,
               channelId: null,
               videoAddress: null,
               reportAddress: null,
               reportStatus: null,
               warnTime: this.gettime(),
               warnImage: null,
               delFlag: null,
               createBy: null,
               createTime: null,
               updateBy: null,
               updateTime: null,
               remark: null
             }
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1
          this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.queryParams.pageNum = 1
          this.queryParams.params.month = null
          this.queryParams.algorithmType =  null
          this.queryParams.deptId = null
          this.queryParams.warnTime =  null
          this.queryParams.rangName = null
          this.queryParams.params.year = null
          this.resetForm("queryForm")
          this.handleQuery()
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.warnId)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },
     /** 新增按钮操作 */
        handleAdd() {
          this.reset()
          this.open = true
          this.title = "添加告警管理"
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset()
          const warnId = row.warnId || this.ids
          getWarnManage(warnId).then(response => {
            this.form = response.data
            this.open = true
            this.title = "修改告警管理"
          })
        },
    getImageSrc(val) {
          // 创建一个临时元素，将HTML内容插入其中
          const tempElement = document.createElement('div');
          tempElement.innerHTML = val;
          // 查找 <img> 标签并获取 src 属性值
          const imgElement = tempElement.querySelector('img');
          if (imgElement) {
            const srcValue = imgElement.getAttribute('src');
            // this.imagePath=srcValue
            console.log('Image src:', srcValue+"照片路径");
          } else {
            console.log('No <img> element found.');
          }
        },


   /** 提交按钮 */
       submitForm() {
         this.$refs["form"].validate(valid => {
           if (valid) {
             if (this.form.warnId != null) {
               updateWarnManage(this.form).then(response => {
                 this.$modal.msgSuccess("修改成功")
                 this.open = false
                 this.getList()
               })
             } else {
               addWarnManage(this.form).then(response => {
                 this.$modal.msgSuccess("新增成功")
                 this.open = false
                 this.getList()
               })
             }
           }
         })
       },
       handleDeleteg() {
           let nhde = []
           let nsg = ''
           this.warnManageList.filter(rou=>{
             if(rou.isnum == true){
               nhde.push(rou.warnId)
             }
           })
           console.log(nhde)
           nsg = nhde.join(',')
            // return
            delWarnManage(nsg).then(response => {
              this.$modal.msgSuccess("操作成功")
              this.getList()
            })
            // delManual(nsg)
            // this.$modal.confirm('是否确认删除数据项？').then(function() {
            //   return delManual(nsg);
            // }).then(() => {
            //   this.getList();
            //   this.$modal.msgSuccess("删除成功");
            // }).catch(() => {});
          },
       /** 删除按钮操作 */
       handleDelete(row) {
         const warnIds = row.warnId || this.ids
         this.$modal.confirm('是否确认删除告警管理编号为"' + warnIds + '"的数据项？').then(function() {
           return delWarnManage(warnIds)
         }).then(() => {
           this.getList()
           this.$modal.msgSuccess("删除成功")
         }).catch(() => {})
       },
    /** 导出按钮操作 */
       handleExport() {
         this.download('manage/warnManage/export', {
           ...this.queryParams
         }, `warnManage_${new Date().getTime()}.xlsx`)
       },


    // 获取屏幕高度
    showFilterForm () {
          this.filterActive = !this.filterActive
          this.changeTableMaxHeight()
        },
        changeTableMaxHeight () {
          let height = document.body.offsetHeight // 网页可视区域高度
          // if (this.filterActive) {
          //   this.tableMaxHeight = height - 320
          // } else {
            this.tableMaxHeight = height - 150
          // }
          console.log(height)
        },
    tiahzo(item){
      this.$router.push({
        path: '/shebe',
        query: {
        	'id':item.warnId,
        }
      })
    }


  }
};
</script>
<style  lang="scss">
  .ckilde{
    // color: #03BF8A;
  }
  .quning{
    .el-image{
      box-shadow:0;
      -webkit-box-shadow:0;
    }
  }
  .qucheu{
    .el-form-item--small.el-form-item{
      border: 1px  solid #E6E6E6;
    }
    .el-input__inner{
      border:0;
    }
  }
  .nghsey{
    .el-dialog__body{
      padding: 0;
      background-color: #F2F3FD;
    }
  }
  .butt{
    .el-button--small{
      padding: 9px 23px !important;
      font-size: 14px;
      border: 0 !important;
    }

  }
  .casr{
    .el-tabs__item.is-active{
      color: #196CFF;
    }
    .el-tabs--card > .el-tabs__header .el-tabs__item{
      padding: 0  30px !important;
    }
  }
  .el-table .el-table__header-wrapper th{
    background-color:#F5F6F8;
    color:#343434;
  }
  .el-table{
    color:#343434;
  }
</style>
<style scoped lang="scss">
  .goe{
    padding: 0 15px;
    div{
      // margin-bottom: 12px;
    }
    p{
      margin: 0;
      font-weight: 500;
      font-size: 14px;
      color: #AAAAAA;
      // margin-top: 10px;
      // margin-bottom: 3px;
      // padding: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display:-webkit-box; //作为弹性伸缩盒子模型显示。
      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
      -webkit-line-clamp:1; //显示的行
      width: 30%;
    }
    p:nth-child(2){
      // margin-bottom: 10px;
      margin-top: 0;
     font-weight: 400;
     width: 70%;
     font-size: 14px;
     color: #333333;
     display: flex;
     justify-content: space-between;
     align-items: center;
     overflow: hidden;
     text-overflow: ellipsis;
     display:-webkit-box; //作为弹性伸缩盒子模型显示。
     -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
     -webkit-line-clamp:1; //显示的行
     // padding-bottom: 10px;

    }
  }
  .ingwe{
    border: 2px solid #03BF8A;
  }
  .shipige{
     padding: 15px;
     display: flex;
     justify-content: space-between;
     align-items: center;
    p{
      margin: 0;

    }
  }

  </style>