factory_web/src/views/am/audio.vue

<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-refresh" @click="syncData" :syncLoading="syncLoading">同步</el-button>
      </div>
      <div class="right-panel">
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" :apiObj="apiObj" :pageStr="pageStr" :pageSizeStr="pageSizeStr" :parseData="parseData"
        row-key="id" @selection-change="selectionChange" stripe @resetQuery="resetQuery">
        <!-- <el-table-column type="selection" width="50"></el-table-column> -->
        <el-table-column label="序号" type="index" width="50"></el-table-column>
        <el-table-column label="喇叭名称" prop="name" min-width="120"></el-table-column>
        <el-table-column label="音量" prop="extra" min-width="40">
          <template #default="scope">
            <span v-if="scope.row.extra && scope.row.extra.player">{{
                scope.row.extra.player.EnvVolume
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="sn" prop="extra" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.extra.config">{{ scope.row.extra.config.sn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="ip" prop="extra" min-width="90">
          <template #default="scope">
            <span v-if="scope.row.extra">{{ scope.row.extra.ip }}</span>
          </template>
        </el-table-column>
        <el-table-column label="在线状态" prop="extra" min-width="40">
          <template #default="scope">
            <span v-if="scope.row.extra">
              <el-tag v-if="scope.row.extra.online">在线</el-tag>
              <el-tag v-else type="danger">离线</el-tag>
            </span>
          </template>
        </el-table-column>
        <!--<el-table-column label="位置" prop="count_people" min-width="90"></el-table-column>-->
        <el-table-column label="所在区域" prop="my_info.area_name" min-width="100"></el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="180">
          <template #default="scope">
            <el-button-group>
              <el-button text type="primary" size="small" @click="handlePosition(scope.row)">标记位置</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </scTable>
    </el-main>
  </el-container>
  <channel-view v-if="dialogSave" ref="saveDialog" :channelId="channelId" :channelName="channelName" :channelArea="channelArea" :channelAreas="channelAreas"
    :channelLocation="channelLocation" @closed="dialogSave = false" @success="handleQuery"></channel-view>
</template>
<script>
import channelView from "./vchannel_view";
export default {
  name: "audioVue",
  components: {
    channelView,
  },
  data() {
    return {
      syncLoading: false,
      apiObj: this.$API.am.tdevice.speaker,
      pageStr: "page",
      pageSizeStr: "pageSize",
      parseData: (res) => {
        return {
          data: res, //分析无分页的数据字段结构
          rows: res.rows, //分析行数据字段结构
          total: res.total, //分析总数字段结构
        };
      },
      dialogSave: false,
      limitedVisible: false,
      query: {},
      selection: [],
      search: {
        keyword: null,
      },
      channelId: "",
      channelCode: "",
      channelName: "",
      channelArea: '',
      channelAreas: [],
      canUseMap:false
    };
  },
  mounted(){
    let that = this;
    let host = window.location.host;
		let jsUrl = host.indexOf('localhost')>-1?'http://111.11.19.54:6013/jsmap/jsmap.js':window.location.protocol + "//" + host+'/jsmap/jsmap.js';
    console.log(jsUrl)
		that.loadScript('mapId',jsUrl, () => {
      that.canUseMap = true;
    })
  },
  methods: {
    loadScript(id, url, callback) {
			debugger;
			//如果已经存在这个id，则证明已经加载过，已经有这个js文件了，可以直接执行回调里面的操作
			if (document.querySelector(`#${id}`)) {
				callback && callback()
				return;
			}
			//第一次加载，先创建 script 标签
			const script = document.createElement('script');
			script.src = url;
			//创建id属性
			script.setAttribute('id', id);
			//获取第一个script标签
			const firstScript = document.getElementsByTagName('script')[0];
			//获取第一个script标签的父节点 BODY,在body的第一个script引用之前插入，即把这个动态的js文件放在第一个调用
			firstScript.parentNode.insertBefore(script, firstScript);
			//script 一加载就执行
			script.onload = script.onreadystatechange = function() {
				// 加载完成
				if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
					callback && callback()
				}
			};
		},
    handlePosition(row) {
      // debugger;
      console.log(row)
      if(row.my_info.id&&row.my_info.id!==null){
        this.channelId = row.my_info.id ? row.my_info.id : null;
        this.channelArea = row.my_info.area ? row.my_info.area : '';
        this.channelAreas = row.my_info.areas ? row.my_info.areas : [];
        this.channelLocation = row.my_info.location ? row.my_info.location : {};
        this.channelName = row.name;
        if(this.canUseMap){
          this.dialogSave = true;
        }else{
          this.$message("地图组件加载中，请稍后")
        }
      }else{
        this.$message.error("请先完成设备同步");
      }
    },
    //表格选择后回调事件
    selectionChange(selection) {
      this.selection = selection;
    },

    //搜索
    handleQuery() {
      this.$refs.table.refresh();
    },

    resetQuery() {
      this.query = {};
    },
    async syncData() {
      this.syncLoading = true;
      var res = await this.$API.third.tdevice.speakerSync.req({});
      this.$refs.table.refresh();
      this.syncLoading = false;
    },
  },
};
</script>