trtc-cloud-js-sdk 2.0.0 → 2.1.0

package/examples/vueDemo/src/views/basic/trtc.vue

@@ -1,194 +0,0 @@
-<template>
-  <div class="content-container">
-    <div class="params-container">
-      <el-input v-model="userId" placeholder="Please input userId">
-        <template #prepend>UserId</template>
-      </el-input>
-      <el-input v-model="roomId" placeholder="Please input roomId" class="params-item">
-        <template #prepend>RoomId</template>
-      </el-input>
-
-      <div class="operate-area">
-        <div class="operate-group">
-          <el-button type="primary" plain @click="handleEnterRoom">进房</el-button>
-          <el-button type="primary" plain @click="handleExitRoom">退房</el-button>
-        </div>
-        <div class="operate-group">
-          <el-button type="primary" plain @click="handleStartLocalPreview">打开视频</el-button>
-          <el-button type="primary" plain @click="handleStopLocalPreview">关闭视频</el-button>
-        </div>
-        <div class="operate-group">
-          <el-button type="primary" plain @click="handleStartLocalAudio">打开音频</el-button>
-          <el-button type="primary" plain @click="handleStopLocalAudio">关闭音频</el-button>
-        </div>
-      </div>
-    </div>
-    <div class="view-container">
-      <div id="local-view-container"></div>
-      <div v-for="(userId, idx) in remoteUserList" :id="userId" :key="userId + '-' + idx" class="remote-view-container">
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-console.warn('=============')
-import { defineComponent, toRefs, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue';
-import TRTCCloud, { TRTCAppScene, TRTCParams, TRTCVideoStreamType } from 'trtc-cloud-js-sdk';
-import genTestUserSig from '@/config/gen-test-user-sig';
-import { validParams } from '@/utils/utils';
-const trtcCloud = new TRTCCloud();
-const LOG_PREFIX = '[Video Call]';
-let preRemoteUserIdList = [];
-
-const TRTCCall = defineComponent({
-  name: 'TTTCCall',
-  components: {},
-  setup() {
-    const data = reactive({
-      sdkAppId: 0,
-      userId: 'TRTCCloud_' + parseInt(Math.random() * 100000),
-      roomId: parseInt(Math.random() * 100000) + '',
-      remoteUserList: [],
-    });
-    // Registers a callback to be called after the component has been mounted
-    onMounted(() => {
-      // 注册监听事件
-      trtcCloud.on('onError', (error) => {
-        console.error('onError ', error);
-      });
-      trtcCloud.on('onEnterRoom', (res) => { });
-      trtcCloud.on('onExitRoom', (res) => { });
-      trtcCloud.on('onRemoteUserEnterRoom', (res) => { });
-      trtcCloud.on('onRemoteUserLeaveRoom', (res) => { });
-      trtcCloud.on('onUserVideoAvailable', async (userId, available) => {
-        if (available) {
-          if (preRemoteUserIdList.indexOf(userId) === -1) {
-            preRemoteUserIdList = [...preRemoteUserIdList, userId];
-          }
-        } else {
-          preRemoteUserIdList = preRemoteUserIdList.filter((str) => str !== userId);
-        }
-        data.remoteUserList = preRemoteUserIdList;
-        await nextTick();
-        if (available) {
-          const domElement = document.getElementById(userId);
-          domElement && await trtcCloud.startRemoteView(userId, domElement, TRTCVideoStreamType.TRTCVideoStreamTypeBig);
-        }
-      });
-      trtcCloud.on('onUserAudioAvailable', (res) => { });
-      trtcCloud.on('onFirstVideoFrame', (res) => { });
-      trtcCloud.on('onUserVoiceVolume', (res) => { });
-      trtcCloud.on('onUserSubStreamAvailable', (res) => { });
-    });
-    // 进房
-    const handleEnterRoom = async () => {
-      const { sdkappid: sdkAppId, userSig } = genTestUserSig(data.userId);
-      data.sdkAppId = sdkAppId;
-      data.userSig = userSig;
-      // handleStartLocalPreview();
-      const trtcParams = new TRTCParams();
-      trtcParams.userId = data.userId;
-      trtcParams.sdkAppId = sdkAppId;
-      trtcParams.userSig = userSig;
-      trtcParams.roomId = +data.roomId;
-      console.warn('-- 开发进房')
-      await trtcCloud.enterRoom(trtcParams, TRTCAppScene.TRTCAppSceneVideoCall);
-      // await trtcCloud.startLocalAudio();
-    };
-    // 打开视频
-    const handleStartLocalPreview = async () => {
-      const localVideoWrapper = document.getElementById('local-view-container');
-      await trtcCloud.startLocalPreview(localVideoWrapper);
-    };
-    // 关闭视频
-    const handleStopLocalPreview = async () => {
-      await trtcCloud.stopLocalPreview();
-    };
-    // 打开音频
-    const handleStartLocalAudio = async () => {
-      await trtcCloud.startLocalAudio();
-    };
-    // 关闭音频
-    const handleStopLocalAudio = async () => {
-      await trtcCloud.topLocalAudio();
-    };
-    // 退房
-    const handleExitRoom = async () => {
-      dataReset();
-      await handleStopLocalPreview();
-      await handleStopLocalAudio();
-      trtcCloud.exitRoom();
-      unsubscribeEvents();
-    };
-    // onUnmounted
-    onUnmounted(() => {
-      handleExitRoom();
-    });
-    // data reset
-    const dataReset = () => {
-      data.remoteUserList = [];
-      preRemoteUserIdList = [];
-    };
-    // 解除所有的事件绑定
-    const unsubscribeEvents = () => {
-      trtcCloud.off('*');
-    };
-
-    return {
-      ...toRefs(data),
-      handleEnterRoom,
-      handleExitRoom,
-      handleStartLocalPreview,
-      handleStopLocalPreview,
-      handleStartLocalAudio,
-      handleStopLocalAudio,
-    };
-  }
-});
-export default TRTCCall;
-</script>
-<style lang="less" scoped>
-.content-container {
-  display: flex;
-  flex-direction: raw;
-
-  .params-container {
-    margin: 8px 4px;
-    width: 260px;
-
-    .params-item {
-      margin-top: 4px;
-    }
-
-    .operate-area {
-      margin-top: 8px;
-
-      .operate-group {
-        display: flex;
-        justify-content: space-between;
-        margin-top: 4px;
-      }
-
-      .operate-group:first-child {
-        margin-top: 0px;
-      }
-    }
-  }
-
-  .view-container {
-    margin-top: 8px;
-
-    #local-view-container,
-    .remote-view-container {
-      width: 360px;
-      height: 240px;
-      margin-bottom: 8px;
-    }
-  }
-}
-
-.el-button {
-  width: 120px;
-}
-</style>

package/examples/vueDemo/src/views/feature/index.vue

@@ -1,259 +0,0 @@
-<template>
-  <div class="fillcontain">
-    <div class="query-container">
-      <div class="query-project-name">
-        <label for="project-name">项目：</label>
-        <el-select class="query-select-container" v-model="selectValue" placeholder="请选择" id="project-name"
-          @change="getFeature">
-          <el-option v-for="(item, idx) in selectProjectNameList" :key="item.value + '-' + idx" :label="item.name"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </div>
-
-      <label for="date-range" class="date-range-label">日期选择：</label>
-      <el-date-picker class="date-range" v-model="dateRange" type="daterange" @blur="getFeature" placeholder="选择日期范围">
-      </el-date-picker>
-    </div>
-    <tendency :sevenDate='sevenDate' :sevenDay='sevenDay' :title='graphicTitle' :legend="legend" :loading="loading"
-      :graphType="graphType">
-    </tendency>
-    <div v-if="featureContent" class="feature-content">{{ featureContent }}</div>
-    <div class="table_container">
-      <el-table v-loading="tableLoading" :data="tableData" style="width: 100%" border>
-        <el-table-column v-for="(item, index) in headerTable" :key="index" :label="item.label" :prop="item.name">
-        </el-table-column>
-      </el-table>
-    </div>
-  </div>
-</template>
-
-<script>
-import dayjs from "dayjs";
-import tendency from '@/components/tendency.vue';
-import {
-  getProjectName,
-  getFeatureList,
-} from "@/api/index";
-import { getUrlParam } from "@/utils/utils";
-
-export default {
-  data() {
-    return {
-      headerTable: [
-        {
-          label: "统计项",
-          name: "name",
-        },
-        {
-          label: "渗透率占比",
-          name: "value",
-        },
-        {
-          label: "计算规则",
-          name: "calculateRule",
-        },
-      ],
-      tableData: [],
-      graphicTitle: '渗透率',
-      sevenDay: [],
-      sevenDate: [],
-      legend: [],
-      selectProjectNameList: [],
-      preSelectValue: '', // 前面选择的项目名称, 用于对比选择是否改变, 从而减少请求
-      selectValue: '',
-      preDateRange: [], // 前面选择的日期选择范围, 用于对比时间是否改变, 从而减少请求
-      dateRange: [(new Date()).getTime() - 7 * 24 * 60 * 60 * 1000, (new Date()).getTime()], // 默认最近一周
-      loading: false,
-      tableLoading: false,
-      graphType: 'bar',
-      featureContent: '', // 渗透率字符串
-    };
-  },
-  created() {
-    this.initData();
-  },
-  mounted() {
-    const fromSource = getUrlParam('from') || '';
-    // 访问来源于小马时，隐藏侧边栏、项目选择项
-    if (fromSource === 'bi') {
-      document.querySelector('.sidebar').style.display = 'none'; // 隐藏侧边栏
-      document.querySelector('.header').style.display = 'none'; // 隐藏 header
-      document.querySelector('.tags').style.display = 'none'; // 隐藏 tags
-      document.querySelector('.query-project-name').style.display = 'none'; // 隐藏 select
-      document.querySelector('.content-box').style.position = 'static';
-    }
-  },
-  components: {
-    tendency,
-  },
-  methods: {
-    async initData() {
-      try {
-        await this.getProjectNameList();
-        await this.getFeature();
-      } catch (err) {
-        console.log("获取数据失败", err);
-      }
-    },
-    // 获取所有的项目名称列表
-    async getProjectNameList() {
-      const response = await getProjectName({ type: 'internal', source: 'feature' });
-      this.selectProjectNameList = response.data && response.data.projectNameList || [];
-      // 项目名称处理
-      const projectName = getUrlParam('projectName') || '';
-
-      this.selectValue = projectName.length > 0
-        ? projectName
-        : this.selectProjectNameList.length > 0
-          ? this.selectProjectNameList[0].name
-          : '';
-      this.preSelectValue = this.selectValue;
-      // 查询时间处理
-      let startTime = getUrlParam('startTime') || '';
-      let endTime = getUrlParam('endTime') || '';
-      startTime = startTime.includes('-') ? startTime : +startTime;
-      endTime = endTime.includes('-') ? endTime : +endTime;
-      // 字符串时间('2022-08-03 12:12:04')、时间戳时间(1658592000000)，转成日期时间戳
-      if (startTime && endTime) { // url 中同时包含 startTime、endTime
-        startTime = dayjs(dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
-        endTime = dayjs(dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
-      } else if (!startTime && !endTime) { // url 中没有 startTime、endTime
-        startTime = (new Date()).getTime() - 15 * 24 * 60 * 60 * 1000;
-        endTime = (new Date()).getTime();
-      } else if (startTime && !endTime) { // url 中有 startTime 没有 endTime
-        startTime = dayjs(dayjs(startTime).format('YYYY-MM-DD')).valueOf();
-        endTime = dayjs(dayjs(startTime + 15 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')).valueOf();
-      } else if (!startTime && endTime) { // url 中没有 startTime 有 endTime
-        endTime = dayjs(dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
-        startTime = dayjs(dayjs(endTime - 15 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')).valueOf();
-      }
-      this.dateRange = [startTime, endTime];
-    },
-    // 获取新增 sdkAppId 数据
-    async getFeature() {
-      this.legend = [];
-      this.sevenDay = [];
-      this.sevenDate = [];
-      this.tableData = [];
-      this.featureContent = '';
-      const projectName = this.selectValue;
-      if (!projectName) {
-        return;
-      }
-      let startTimeStamps, endTimeStamps;
-      if (this.dateRange.length > 0) {
-        startTimeStamps = dayjs(dayjs(this.dateRange[0]).format('YYYY-MM-DD')).valueOf();
-        endTimeStamps = dayjs(dayjs(this.dateRange[1]).format('YYYY-MM-DD')).valueOf();
-      }
-      // 项目选择未改变且查询时间段未改变时, 不请求新的数据
-      if ((projectName === this.preSelectValue) && (this.preDateRange.join(',') === `${startTimeStamps},${endTimeStamps}`)) {
-        return;
-      }
-      this.preSelectValue = projectName;
-      this.preDateRange = [startTimeStamps, endTimeStamps];
-
-      try {
-        this.loading = true;
-        this.tableLoading = true;
-        const response = await getFeatureList({
-          projectName,
-          startTimeStamps,
-          endTimeStamps,
-        });
-        this.loading = false;
-        this.tableLoading = false;
-        if (response.code === 0) {
-          this.$message.success(`${response.message}`);
-          const { total, prefixContent, featureDataList, sdkAppId } = response.data || {};
-          this.featureContent = prefixContent;
-          this.graphicTitle = `${this.selectValue} 渗透率（${sdkAppId}）`;
-          // this.legend = projectNameList;
-          this.sevenDay = featureDataList.map(obj => obj.name);
-          this.sevenDate = [featureDataList.map(obj => +(obj.value.replace('%', '')))];
-          this.tableData = featureDataList;
-        } else {
-          this.$message.error(`${response.message}`);
-        }
-      } catch (error) {
-        this.loading = false;
-        this.tableLoading = false;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less">
-.query-container {
-  display: flex;
-  padding: 20px;
-  align-items: center;
-
-  .date-range-label {
-    margin-left: 12px;
-  }
-
-  .query-select-container {
-    width: 260px;
-  }
-}
-
-.feature-content {
-  font-size: 12px;
-  color: #666;
-  padding: 0px 30px 10px;
-}
-
-.demo-table-expand {
-  font-size: 0;
-}
-
-.demo-table-expand label {
-  width: 90px;
-  color: #99a9bf;
-}
-
-.demo-table-expand .el-form-item {
-  margin-right: 0;
-  margin-bottom: 0;
-  width: 50%;
-}
-
-.table_container {
-  padding: 0px 20px 20px;
-}
-
-.Pagination {
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 8px;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #20a0ff;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 120px;
-  height: 120px;
-  line-height: 120px;
-  text-align: center;
-}
-
-.avatar {
-  width: 120px;
-  height: 120px;
-  display: block;
-}
-</style>

package/examples/vueDemo/src/views/github/index.vue

@@ -1,243 +0,0 @@
-<template>
-  <div class="fillcontain">
-    <div class="query-container">
-      <div class="query-project-name">
-        <label for="project-name">仓库名：</label>
-        <el-select class="query-select-container" v-model="selectValue" placeholder="请选择" id="project-name"
-          @change="getGithubData">
-          <el-option v-for="(item, idx) in selectRepositoriesList" :key="item.value + '-' + idx" :label="item.name"
-            :value="item.value">
-          </el-option>
-        </el-select>
-      </div>
-      <label for="date-range" class="date-range-label">日期选择：</label>
-      <el-date-picker id="date-range" v-model="dateRange" type="daterange" @blur="getGithubData" placeholder="选择日期范围">
-      </el-date-picker>
-    </div>
-    <div v-if="tendencyList.length > 0">
-      <tendency v-for="(item, idx) in tendencyList" :key="idx" :sevenDate='item.list' :sevenDay='sevenDay'
-        :title='item.title' :legend="item.legend" :loading="loading" :domId="item.domId">
-      </tendency>
-    </div>
-  </div>
-</template>
-
-<script>
-import dayjs from "dayjs";
-import tendency from '@/components/tendency.vue';
-import {
-  getRepositoriesList,
-  getGithubDataList,
-} from "@/api/index";
-import { getUrlParam } from "@/utils/utils";
-
-export default {
-  data() {
-    return {
-      headerTable: [],
-      graphicTitle: 'Clone',
-      sevenDay: [],
-      sevenDate: [],
-      tendencyList: [],
-      legend: [],
-      selectRepositoriesList: [],
-      preSelectValue: [], // 前面选择的项目名称, 用于对比选择是否改变, 从而减少请求
-      selectValue: [],
-      preDateRange: [], // 前面选择的日期选择范围, 用于对比时间是否改变, 从而减少请求
-      dateRange: [(new Date()).getTime() - 30 * 24 * 60 * 60 * 1000, (new Date()).getTime()], // 默认最近一周
-      loading: false,
-    };
-  },
-  created() {
-    this.initData();
-  },
-  mounted() {
-    const fromSource = getUrlParam('from') || '';
-    // 访问来源于小马时，隐藏侧边栏、项目选择项
-    if (fromSource === 'bi') {
-      document.querySelector('.sidebar').style.display = 'none'; // 隐藏侧边栏
-      document.querySelector('.header').style.display = 'none'; // 隐藏 header
-      document.querySelector('.tags').style.display = 'none'; // 隐藏 tags
-      document.querySelector('.query-project-name').style.display = 'none'; // 隐藏 select
-      document.querySelector('.content-box').style.position = 'static';
-    }
-  },
-  components: {
-    tendency,
-  },
-  methods: {
-    async initData() {
-      try {
-        await this.getRepositories();
-        await this.getGithubData();
-      } catch (err) {
-        console.log("获取数据失败", err);
-      }
-    },
-    // 获取所有的项目名称列表
-    async getRepositories() {
-      const response = await getRepositoriesList();
-      const { repositoriesList = [] } = response.data || {};
-      this.selectRepositoriesList = repositoriesList.map(str => ({ name: str, value: str }));
-
-      // 项目名称处理
-      const projectName = getUrlParam('projectName') || '';
-      this.selectValue = projectName.length > 0 ? projectName : this.selectRepositoriesList[0].value;
-      this.preSelectValue = this.selectValue;
-      // 查询时间处理
-      let startTime = getUrlParam('startTime') || '';
-      let endTime = getUrlParam('endTime') || '';
-      startTime = startTime.includes('-') ? startTime : +startTime;
-      endTime = endTime.includes('-') ? endTime : +endTime;
-      // 字符串时间('2022-08-03 12:12:04')、时间戳时间(1658592000000)，转成日期时间戳
-      if (startTime && endTime) { // url 中同时包含 startTime、endTime
-        startTime = dayjs(dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
-        endTime = dayjs(dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
-      } else if (!startTime && !endTime) { // url 中没有 startTime、endTime
-        startTime = (new Date()).getTime() - 30 * 24 * 60 * 60 * 1000;
-        endTime = (new Date()).getTime();
-      } else if (startTime && !endTime) { // url 中有 startTime 没有 endTime
-        startTime = dayjs(dayjs(startTime).format('YYYY-MM-DD')).valueOf();
-        endTime = dayjs(dayjs(startTime + 30 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')).valueOf();
-      } else if (!startTime && endTime) { // url 中没有 startTime 有 endTime
-        endTime = dayjs(dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')).valueOf();
-        startTime = dayjs(dayjs(endTime - 30 * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')).valueOf();
-      }
-      this.dateRange = [startTime, endTime];
-    },
-    // 获取新增 sdkAppId 数据
-    async getGithubData() {
-      const repoName = this.selectValue;
-      if (!repoName) {
-        return;
-      }
-      let startTimeStamps, endTimeStamps;
-      if (this.dateRange.length > 0) {
-        startTimeStamps = dayjs(dayjs(this.dateRange[0]).format('YYYY-MM-DD')).valueOf();
-        endTimeStamps = dayjs(dayjs(this.dateRange[1]).format('YYYY-MM-DD')).valueOf();
-      }
-      // 项目选择未改变且查询时间段未改变时, 不请求新的数据
-      if ((repoName === this.preSelectValue) && (this.preDateRange.join(',') === `${startTimeStamps},${endTimeStamps}`)) {
-        return;
-      }
-      this.preSelectValue = repoName;
-      this.preDateRange = [startTimeStamps, endTimeStamps];
-
-      try {
-        this.loading = true;
-        const response = await getGithubDataList({
-          repoName,
-          startTime: startTimeStamps,
-          endTime: endTimeStamps,
-        });
-        let tendencyList = [{ title: 'Clone', domId: 'Clone' }, { title: 'View', domId: 'View' }, { title: 'Popular', domId: 'Popular' }, { title: 'Referrer', domId: 'Referrer' }];
-        const { list = [] } = response.data || {};
-        this.sevenDay = list.map(obj => dayjs(+obj.timestamp).format('YYYY-MM-DD'));
-
-        list.forEach((obj, index) => {
-          const { clone, views, popular, referrer } = obj;
-          // clone 数据
-          tendencyList[0].legend = ['cloneCount', 'cloneUniques'];
-          tendencyList[0].cloneCountList = index > 0 ? [...tendencyList[0].cloneCountList, clone.count] : [clone.count];
-          tendencyList[0].cloneUniquesList = index > 0 ? [...tendencyList[0].cloneUniquesList, clone.uniques] : [clone.uniques];
-          // views 数据
-          tendencyList[1].legend = ['viewCount', 'viewUniques'];
-          tendencyList[1].viewCountList = index > 0 ? [...tendencyList[1].viewCountList, views.count] : [views.count];
-          tendencyList[1].viewUniquesList = index > 0 ? [...tendencyList[1].viewUniquesList, views.uniques] : [views.uniques];
-          // popular 数据
-          tendencyList[2].legend = popular.map(obj => obj.path.split('/').slice(-3).join('/'));
-          tendencyList[2].popularCountList = index > 0 ? [...tendencyList[2].popularCountList, popular.map(obj => obj.count)] : [popular.map(obj => obj.count)];
-          tendencyList[2].popularUniquesList = index > 0 ? [...tendencyList[2].popularUniquesList, popular.map(obj => obj.uniques)] : [popular.map(obj => obj.uniques)];
-          // referrer 数据
-          tendencyList[3].legend = referrer.map(obj => obj.referrer);
-          tendencyList[3].referrerCountList = index > 0 ? [...tendencyList[3].referrerCountList, referrer.map(obj => obj.count)] : [referrer.map(obj => obj.count)];
-          tendencyList[3].referrerUniquesList = index > 0 ? [...tendencyList[3].referrerUniquesList, referrer.map(obj => obj.uniques)] : [referrer.map(obj => obj.uniques)];
-        });
-        tendencyList[0].list = [tendencyList[0].cloneCountList, tendencyList[0].cloneUniquesList];
-        tendencyList[1].list = [tendencyList[1].viewCountList, tendencyList[1].viewUniquesList];
-        tendencyList[2].popularCountList = tendencyList[2].popularCountList[0].map((val, idx) => tendencyList[2].popularCountList.map(arr => arr[idx]));
-        tendencyList[2].popularUniquesList = tendencyList[2].popularUniquesList[0].map((val, idx) => tendencyList[2].popularUniquesList.map(arr => arr[idx]));
-        tendencyList[2].list = tendencyList[2].popularCountList;
-        tendencyList[3].referrerCountList = tendencyList[3].referrerCountList[0].map((val, idx) => tendencyList[3].referrerCountList.map(arr => arr[idx]));
-        tendencyList[3].referrerUniquesList = tendencyList[3].referrerUniquesList[0].map((val, idx) => tendencyList[3].referrerUniquesList.map(arr => arr[idx]));
-        tendencyList[3].list = tendencyList[3].referrerCountList;
-        this.tendencyList = tendencyList;
-
-        this.loading = false;
-      } catch (error) {
-        this.loading = false;
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less">
-// @import "../style/mixin";
-
-.query-container {
-  display: flex;
-  padding: 20px;
-  align-items: center;
-
-  .date-range-label {
-    margin-left: 12px;
-  }
-
-  .query-select-container {
-    width: 260px;
-  }
-}
-
-.demo-table-expand {
-  font-size: 0;
-}
-
-.demo-table-expand label {
-  width: 90px;
-  color: #99a9bf;
-}
-
-.demo-table-expand .el-form-item {
-  margin-right: 0;
-  margin-bottom: 0;
-  width: 50%;
-}
-
-.table_container {
-  padding: 20px;
-}
-
-.Pagination {
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 8px;
-}
-
-.avatar-uploader .el-upload {
-  border: 1px dashed #d9d9d9;
-  border-radius: 6px;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-
-.avatar-uploader .el-upload:hover {
-  border-color: #20a0ff;
-}
-
-.avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 120px;
-  height: 120px;
-  line-height: 120px;
-  text-align: center;
-}
-
-.avatar {
-  width: 120px;
-  height: 120px;
-  display: block;
-}
-</style>