food/src/views/layout/components/main/site/index.vue

<template>
  <div class="app-container">
    <!-- 组合按钮 -->
    <el-button-group>
      <el-button type="primary" icon="el-icon-plus" @click="$router.replace('/site/add')">添加</el-button>
      <el-button type="danger" icon="el-icon-delete" @click="deleteSite(countSelIdArr($refs.myTable.selection))">删除
      </el-button>
      <el-button type="warning" icon="el-icon-edit" @click="toEditPage()">编辑</el-button>
    </el-button-group>
    <!-- 用户select选项 -->
    <el-button-group class="m-l-20">
      <SelectionShopId v-model="form.shop_id" :allSel="true" />
    </el-button-group>
    <!-- 站点表格 -->
    <el-table class="m-t-20 w-100" ref="myTable"
      :data="siteListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
      <el-table-column align="center" type="selection" width="40">
      </el-table-column>
      <el-table-column align="center" prop="id" label="id" width="50">
      </el-table-column>
      <el-table-column prop="sitename" label="站点名称" width="120" min-width="100">
      </el-table-column>
      <el-table-column label="菊花码缩率图" width="120" min-width="150">
        <template slot-scope="scope">
          <el-image :src="scope.row.qr" :preview-src-list="[scope.row.qr]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="describe" label="站点描述" min-width="80" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="center" label="已绑航线" width="200">
        <template slot-scope="scope">
          <el-tag class="iconfont"
            :class="scope.row.bind_route === null || scope.row.bind_route === '' ? 'icon-ic_tingyong' : 'icon-feihangluxian'"
            :type="scope.row.bind_route === null || scope.row.bind_route === '' ? 'danger' : ''">
            <font class="m-l-5">{{ scope.row.bind_route === null || scope.row.bind_route === '' ? "未绑定" :
              scope.row.bind_route }}</font>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="controler" label="操作" width="140" min-width="140">
        <template slot-scope="scope">
          <el-button-group>
            <el-button type="danger" icon="el-icon-delete" @click="deleteSite([scope.row.id])">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination class="m-t-20" layout="prev, pager, next" :current-page.sync="currentPage" :page-size="pageSize"
      :total="siteListArr.length">
    </el-pagination>
  </div>
</template>

<script>
import { countSelIdArr } from '@/utils'
import SelectionShopId from '@/components/SelectionShopId'

export default {
  name: 'Site',
  data () {
    return {
      pageSize: 8, // 每页显示记录条数
      currentPage: 1, // 当前页
      form: {
        shop_id: ''
      }
    }
  },
  components: {
    SelectionShopId
  },
  computed: {
    /**
     * @description: 获取站点列表
     */
    siteList () {
      return this.$store.state.siteList
    },
    /**
     * @description: 过滤掉 不对应客户的 站点列表
     * @return: 站点列表
     */
    siteListArr () {
      if (this.form.shop_id !== '') {
        return this.siteList.filter((item) => item.shop_id === this.form.shop_id)
      } else {
        return this.siteList
      }
    }
  },
  methods: {
    countSelIdArr,
    /**
     * @description: 跳转到编辑页面
     */
    toEditPage () {
      const selId = this.countSelIdArr(this.$refs.myTable.selection)
      switch (selId.length) {
        case 0:
          this.$message.error('请选择一条需要编辑的记录')
          break
        case 1:
          this.$router.push('/site/edit/' + selId['0'])
          break
        default:
          this.$message.error('只能选择一条记录')
      }
    },
    /**
     * @description: 删除站点
     */
    deleteSite (idArr) {
      this.$store.dispatch('fetchDelSite', idArr)
    }
  },
  watch: {
  },
  created () {
  },
  filters: {
    countSelIdArr
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/theme.scss";

.el-tag {
  i {
    vertical-align: middle
  }
}

.image-placeholder {
  position: relative;
  display: inline-block;
}
</style>

<!-- <template>
  <div>
    <video
      ref="video"
      autoplay
      controls
      playsinline
      muted
      width="640"
      height="360"
    ></video>
  </div>
</template>

<script>
export default {
  data () {
    return {
      url: 'http://82.156.122.87:80/rtc/v1/whep/?app=live&stream=livestream2',
      sdk: null
    }
  },
  mounted () {
    this.startPlay()
  },
  methods: {
    async startPlay () {
      if (this.sdk) {
        this.sdk.close()
        this.sdk = null
      }

      this.sdk = new window.SrsRtcWhipWhepAsync()
      this.$refs.video.srcObject = this.sdk.stream

      try {
        const session = await this.sdk.play(this.url)
        console.log('播放成功，session:', session)
      } catch (e) {
        console.error('播放失败', e)
      }
    }
  }
}
</script> -->