trtc-cloud-js-sdk 1.0.13 → 2.0.0

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

@@ -0,0 +1,194 @@
+<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

@@ -0,0 +1,259 @@
+<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

@@ -0,0 +1,243 @@
+<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>