|
|
@@ -0,0 +1,1101 @@
|
|
|
+<template>
|
|
|
+ <div id="asr-container">
|
|
|
+ <div class="asr-main">
|
|
|
+ <div class="asr-main-left">
|
|
|
+ <div class="add-zone">
|
|
|
+ <el-button @click="addAsr" type="primary" style="min-width: 100px;">新建</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="catalogue-zone">
|
|
|
+ <div class="search-box">
|
|
|
+ <el-select v-model="search_txt" v-loadMore="searchLoad" :filterable="!search_txt" remote clearable
|
|
|
+ placeholder="请输入文件名称" class="select-com" :remote-method="searchHandle" @click.native="inputFocusHandle">
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ <el-option v-for="item in searchOptions" :key="item.ChartInfoId" :label="item.ChartName"
|
|
|
+ :value="item.ChartInfoId">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <div class="filter-box">
|
|
|
+ <img src="~@/assets/img/filter.png" />
|
|
|
+ <span>筛选</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="catalogue-head">
|
|
|
+ <ul class="left-tab">
|
|
|
+ <li :class="['tab', { 'act': leftShowLabel === tab }]" v-for="tab in ['目录', '标签']" :key="tab"
|
|
|
+ @click="leftShowLabel = tab">{{ tab }}</li>
|
|
|
+ </ul>
|
|
|
+ <el-checkbox v-model="isOnlyMe" v-permission="permissionBtn.chartLibPermission.chartLib_isOnlyMine"
|
|
|
+ @change="onlyMeHandler">只看我的</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="tree-cont">
|
|
|
+ <el-tree ref="treeRef" class="target_tree" :data="treeData" node-key="UniqueCode" :props="defaultProp"
|
|
|
+ :allow-drag="canDragHandle" :allow-drop="canDropHandle" :current-node-key="select_node"
|
|
|
+ :default-expanded-keys="defaultShowNodes" draggable :expand-on-click-node="false" check-strictly
|
|
|
+ empty-text="暂无分类" lazy :load="getLazyTreeData" @node-expand="handleNodeExpand"
|
|
|
+ @node-collapse="handleNodeCollapse" @current-change="nodeChange" @node-drop="dropOverHandle"
|
|
|
+ @node-drag-end="dropMouseLeave" @node-drag-leave="dropMouseLeave" @node-drag-enter="dropMouseOver">
|
|
|
+ <span class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
+ <span class="text-span">{{ data.ChartClassifyName }}</span>
|
|
|
+ <span v-if="select_node === data.UniqueCode" class="operation-span">
|
|
|
+ <img src="~@/assets/img/sand_new/move.png"/>
|
|
|
+ <!-- v-if="data.Button.MoveButton" -->
|
|
|
+ <!-- 添加子项 -->
|
|
|
+ <img src="~@/assets/img/sand_new/add_outline.png" @click.stop="addNode(node, data)"/>
|
|
|
+ <!-- v-if="data.Button.AddButton && permissionBtn.isShowBtn('chartLibPermission', 'chartLib_classifyOpt_add')" -->
|
|
|
+ <!-- 编辑子项 -->
|
|
|
+ <img src="~@/assets/img/sand_new/edit_outline.png" @click.stop="editNode(node, data)"/>
|
|
|
+ <!-- v-if="data.Button.OpButton && permissionBtn.isShowBtn('chartLibPermission', 'chartLib_classifyOpt_add')" -->
|
|
|
+ <!-- 删除子项 -->
|
|
|
+ <img slot="reference" src="~@/assets/img/sand_new/delete_outline.png" @click.stop="removeNode(node, data)" style="margin-right: 0;"/>
|
|
|
+ <!-- v-if="data.Button.DeleteButton && permissionBtn.isShowBtn('chartLibPermission', 'chartLib_classifyOpt_delete')" -->
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-add">
|
|
|
+ <img src="~@/assets/img/add-quadrate-blue.png" />
|
|
|
+ <span>添加目录分类</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="asr-main-right">
|
|
|
+ <template v-if="fileDetail && fileDetail.fileId">
|
|
|
+ <!-- 详情 -->
|
|
|
+ <div class="detail-top">
|
|
|
+ <div class="detail-top-search">
|
|
|
+ <el-input v-model="fileDetail.fileName" placeholder="请输入文件名称" style="width: 240px;margin-right: 30px;"></el-input>
|
|
|
+ <el-input v-model="keyWord" placeholder="请输入关键词" prefix-icon="el-icon-search"
|
|
|
+ style="width: 360px;margin-right: 30px;"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="deail-top-operation">
|
|
|
+ <el-button type="primary" style="width: 120px;">保存</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-tag-area">
|
|
|
+ <div class="add-tag-button">
|
|
|
+ <img src="~@/assets/img/tag.png" />
|
|
|
+ <span>添加标签</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-content">
|
|
|
+ <div class="content-title">原文</div>
|
|
|
+ <div class="content-main">
|
|
|
+ <div class="content-row" v-for="item in fileDetail.paragraphInfo" :key="item.id">
|
|
|
+ <div class="content-row-info">
|
|
|
+ <img src="~@/assets/img/asr.png" class="content-info-speaker" />
|
|
|
+ <div class="content-info-start">{{ item.startTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="content-row-text">{{ item.text }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-audio-area">
|
|
|
+ <audio-custom :audioUrl="fileDetail.audioUrl" />
|
|
|
+ <img src="~@/assets/img/icons/delete-red.png"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <template v-if="fileList && fileList.length>0">
|
|
|
+ <div class="file-count">共{{ fileList.length }}个文件</div>
|
|
|
+ <div class="file-container" v-infinite-scroll="handleLoadMore" :infinite-scroll-immediate="true">
|
|
|
+ <div class="file-item" v-for="item in fileList" :key="item.fileId" @click="switchDetail">
|
|
|
+ <div class="file-main">
|
|
|
+ <div class="file-name">
|
|
|
+ {{ item.fileName }}
|
|
|
+ </div>
|
|
|
+ <div class="file-tag-list">
|
|
|
+ <div class="file-tag" v-for="tag in item.tagList"
|
|
|
+ :key="tag.tagId">{{ tag.tagName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="file-content">
|
|
|
+ {{ item.fileContent }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="file-footer">
|
|
|
+ <div class="file-time">
|
|
|
+ <span style="margin-left: 10px;">{{ item.created }}</span>
|
|
|
+ <span class="split-element">{{ item.duration }}</span>
|
|
|
+ <span class="split-element">{{ item.size }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="file-author">{{ item.creator }}</div>
|
|
|
+ <div class="file-operation">
|
|
|
+ <el-dropdown @command="handleCommandMore">
|
|
|
+ <img src="~@/assets/img/more.png" />
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item command="rename">重命名</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="tag">打标签</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="export">导出</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="del">删除</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div v-else class="nodata">
|
|
|
+ <tableNoData text="暂无记录"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import axios from 'axios'
|
|
|
+import audioCustom from "./components/audioCustom.vue"
|
|
|
+export default {
|
|
|
+ name: "ASR",
|
|
|
+ components:{audioCustom},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ search_txt: '',
|
|
|
+ searchOptions: [{ ChartInfoId: '1', ChartName: "虚拟文件一" }, { ChartInfoId: '12', ChartName: "虚拟文件一2" }, { ChartInfoId: '13', ChartName: "虚拟文件一3" }, { ChartInfoId: '14', ChartName: "虚拟文件一4" },
|
|
|
+ { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" },
|
|
|
+ { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" },
|
|
|
+ { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" },
|
|
|
+ { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" },
|
|
|
+ { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }, { ChartInfoId: '18', ChartName: "虚拟文件一8" }],
|
|
|
+ leftShowLabel: "目录",
|
|
|
+ isOnlyMe: false,
|
|
|
+ treeData: [],
|
|
|
+ defaultShowNodes: [], //展开节点
|
|
|
+ defaultProp: {
|
|
|
+ label: 'ChartClassifyName',
|
|
|
+ children: 'Children',
|
|
|
+ isLeaf: 'isLeaf'
|
|
|
+ }, //树结构配置项
|
|
|
+ select_node: '', //当前选中的节点
|
|
|
+ fileDetail:{},
|
|
|
+ keyWord:"",
|
|
|
+ fileList:[],
|
|
|
+ fileParams:{
|
|
|
+ page:1
|
|
|
+ },
|
|
|
+ fileListRequest:{
|
|
|
+ finished:false,
|
|
|
+ loading:false
|
|
|
+ },
|
|
|
+ result:''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getTreeData()
|
|
|
+ this.getFileList()
|
|
|
+ axios({
|
|
|
+ method:'GET',
|
|
|
+ url:'/voice/getResult'
|
|
|
+ }).then(res=>{
|
|
|
+ if(res.data.Data.Status == 2){
|
|
|
+ this.result = res.data.Data.ResultDetail
|
|
|
+ console.log(this.result);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTreeData() {
|
|
|
+ let arr = [{
|
|
|
+ UniqueCode: "fsdfsfsdfffe", ChartClassifyName: "一级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdefffe", ChartClassifyName: "二级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdfffeee", ChartClassifyName: "三级分类", Children: [
|
|
|
+ { UniqueCode: "fddfsdfsf", ChartClassifyName: "音频", Children: [] }]
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级发大水口返回空六打三发好了都是fish发啦跨境电商拉覅和鲨大富豪快点杀冷饭分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfsdfffe", ChartClassifyName: "一级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdefffe", ChartClassifyName: "二级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdfffeee", ChartClassifyName: "三级分类", Children: [
|
|
|
+ { UniqueCode: "fddfsdfsf", ChartClassifyName: "音频", Children: [] }]
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfsdfffe", ChartClassifyName: "一级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdefffe", ChartClassifyName: "二级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdfffeee", ChartClassifyName: "三级分类", Children: [
|
|
|
+ { UniqueCode: "fddfsdfsf", ChartClassifyName: "音频", Children: [] }]
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfsdfffe", ChartClassifyName: "一级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdefffe", ChartClassifyName: "二级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdfffeee", ChartClassifyName: "三级分类", Children: [
|
|
|
+ { UniqueCode: "fddfsdfsf", ChartClassifyName: "音频", Children: [] }]
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfsdfffe", ChartClassifyName: "一级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdefffe", ChartClassifyName: "二级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdfffeee", ChartClassifyName: "三级分类", Children: [
|
|
|
+ { UniqueCode: "fddfsdfsf", ChartClassifyName: "音频", Children: [] }]
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfsdfffe", ChartClassifyName: "一级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdefffe", ChartClassifyName: "二级分类", Children: [
|
|
|
+ {
|
|
|
+ UniqueCode: "fsdfsfssdfffeee", ChartClassifyName: "三级分类", Children: [
|
|
|
+ { UniqueCode: "fddfsdfsf", ChartClassifyName: "音频", Children: [] }]
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ { UniqueCode: "fsdfsfssdfffe", ChartClassifyName: "一级分类", Children: [] },
|
|
|
+ ]
|
|
|
+ this.treeData = arr.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ isLeaf: item.Children.length ? false : true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addAsr() {
|
|
|
+ console.log("上传文件");
|
|
|
+ },
|
|
|
+ searchLoad() {
|
|
|
+ console.log("列表更多");
|
|
|
+ },
|
|
|
+ searchHandle() {
|
|
|
+ console.log("搜索");
|
|
|
+ },
|
|
|
+ inputFocusHandle() {
|
|
|
+ console.log('聚焦获取');
|
|
|
+ },
|
|
|
+ onlyMeHandler() {
|
|
|
+ console.log("只看我的");
|
|
|
+ },
|
|
|
+ /* 判断节点是否能被拖拽 */
|
|
|
+ canDragHandle(node) {
|
|
|
+ let canMove = false;
|
|
|
+ if (node.data.Button.MoveButton) {
|
|
|
+ canMove = true;
|
|
|
+ }
|
|
|
+ return canMove;
|
|
|
+ },
|
|
|
+
|
|
|
+ /* 判断节点是否能被拖入 4*/
|
|
|
+ canDropHandle(draggingNode, dropNode, type) {
|
|
|
+ let canDrop = false;
|
|
|
+ // 移动的是一级目录
|
|
|
+ if (draggingNode.level === 1 && dropNode.level === 1 && type !== 'inner') {
|
|
|
+ canDrop = true
|
|
|
+ }
|
|
|
+
|
|
|
+ // 二级目录
|
|
|
+ if (draggingNode.level === 2) {
|
|
|
+ if ((dropNode.level === 1 && type === 'inner') || (dropNode.level === 2 && type !== 'inner')) {
|
|
|
+ canDrop = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //三级目录
|
|
|
+ if (draggingNode.level === 3) {
|
|
|
+ if ((dropNode.level === 2 && type === 'inner') || (dropNode.level === 3 && type !== 'inner')) {
|
|
|
+ canDrop = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //四级指标层
|
|
|
+ if (draggingNode.level === 4) {
|
|
|
+ if ((dropNode.level === 3 && type === 'inner') || (dropNode.level === 4 && type !== 'inner')) {
|
|
|
+ canDrop = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return canDrop;
|
|
|
+ },
|
|
|
+ //绑定el-tree的load属性
|
|
|
+ getLazyTreeData(node, resolve, maxLevel = 3) {
|
|
|
+ // if(node.level===0){
|
|
|
+ // resolve(this.treeData)
|
|
|
+ // }
|
|
|
+ // if(node.level>0&&node.level<=maxLevel){
|
|
|
+ // //获取对应层级的Child
|
|
|
+ resolve(node.data.Children || [])
|
|
|
+ // }
|
|
|
+ // if(node.level===maxLevel){
|
|
|
+ // //调接口获取该分类下图表的数据
|
|
|
+ // dataBaseInterface.getChartListForClassify({
|
|
|
+ // ChartClassifyId:node.data.ChartClassifyId,
|
|
|
+ // IsShowMe:this.isOnlyMe
|
|
|
+ // }).then(res=>{
|
|
|
+ // if(res.Ret===200){
|
|
|
+ // let arr=res.Data.AllNodes||[]
|
|
|
+ // arr=arr.map(item=>{
|
|
|
+ // return {
|
|
|
+ // ...item,
|
|
|
+ // isLeaf:true
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // resolve(arr)
|
|
|
+ // }else{
|
|
|
+ // resolve([])
|
|
|
+ // }
|
|
|
+ // this.changeTreeNode()
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // if(node.level>maxLevel){
|
|
|
+ // resolve([])
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 树节点展开
|
|
|
+ handleNodeExpand(data) {
|
|
|
+ return
|
|
|
+ // 保存当前展开的节点
|
|
|
+ let flag = this.defaultShowNodes.some((item) => item === data.UniqueCode);
|
|
|
+ if (!flag) { // 不存在则存到数组里
|
|
|
+ this.defaultShowNodes.push(data.UniqueCode)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 树节点关闭
|
|
|
+ handleNodeCollapse(data) {
|
|
|
+ return
|
|
|
+ this.defaultShowNodes.some((item, index) => {
|
|
|
+ if (item === data.UniqueCode) {
|
|
|
+ // 删除关闭节点
|
|
|
+ this.defaultShowNodes.length = index;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /* 节点变化时 */
|
|
|
+ nodeChange(data, node) {
|
|
|
+ this.select_node = data.UniqueCode;
|
|
|
+ this.fileDetail={}
|
|
|
+ return
|
|
|
+ this.search_txt = '';
|
|
|
+ this.dynamicNode = node;
|
|
|
+ sessionStorage.removeItem('beforeOptions');
|
|
|
+ //详情时判断是否是本人添加图表 若不是不用做保存校验 新增时要进入保存校验逻辑
|
|
|
+ if (
|
|
|
+ (this.selected_chartid &&
|
|
|
+ (this.role === 'admin' ||
|
|
|
+ this.chartInfo.SysUserId === this.roleId)) ||
|
|
|
+ !this.chartInfo.SysUserId
|
|
|
+ ) {
|
|
|
+ let arr = sessionStorage.getItem('defaultArr');
|
|
|
+ if (
|
|
|
+ arr &&
|
|
|
+ this.selected_chartid &&
|
|
|
+ arr !== JSON.stringify(this.tableData)
|
|
|
+ ) {
|
|
|
+ this.$confirm('您还未保存此图表，是否确认保存？', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning',
|
|
|
+ showClose: false,
|
|
|
+ closeOnClickModal: false,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.saveChartHandle('');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.select_node = data.UniqueCode;
|
|
|
+ this.selected_chartid = data.ChartInfoId;
|
|
|
+ this.selected_chartType = data.ChartType;
|
|
|
+ this.selected_chartClassify = data.ChartInfoId
|
|
|
+ ? data.ChartClassifyId
|
|
|
+ : '';
|
|
|
+ this.calendar_type = data.ChartInfoId ? data.Calendar : '公历'; //公历/农历
|
|
|
+ this.season_year = data.ChartInfoId
|
|
|
+ ? [data.SeasonStartDate, data.SeasonEndDate]
|
|
|
+ : ''; //季节年份区间
|
|
|
+ this.year_select = data.ChartInfoId ? data.DateType : this.yearSelector[0].value; //图表年份选择
|
|
|
+ this.select_date =
|
|
|
+ this.year_select === 5 || this.year_select === 6
|
|
|
+ ? [data.StartDate, data.EndDate]
|
|
|
+ : '';
|
|
|
+ this.resetNodeStyle(node);
|
|
|
+ this.tableData =
|
|
|
+ !this.selected_chartClassify && this.tableData.length
|
|
|
+ ? []
|
|
|
+ : this.tableData;
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.select_node = data.UniqueCode;
|
|
|
+ this.selected_chartid = data.ChartInfoId;
|
|
|
+ this.selected_chartType = data.ChartType;
|
|
|
+ this.selected_chartClassify = data.ChartInfoId
|
|
|
+ ? data.ChartClassifyId
|
|
|
+ : '';
|
|
|
+ this.calendar_type = data.ChartInfoId ? data.Calendar : '公历'; //公历/农历
|
|
|
+ this.season_year = data.ChartInfoId
|
|
|
+ ? [data.SeasonStartDate, data.SeasonEndDate]
|
|
|
+ : ''; //季节年份区间
|
|
|
+ this.year_select = data.ChartInfoId ? data.DateType : this.yearSelector[0].value; //图表年份选择
|
|
|
+ this.select_date =
|
|
|
+ this.year_select === 5 || this.year_select === 6
|
|
|
+ ? [data.StartDate, data.EndDate]
|
|
|
+ : '';
|
|
|
+ this.resetNodeStyle(node);
|
|
|
+ this.tableData =
|
|
|
+ !this.selected_chartClassify && this.tableData.length
|
|
|
+ ? []
|
|
|
+ : this.tableData;
|
|
|
+
|
|
|
+ //公用图库关联分类
|
|
|
+ this.default_classify = !data.ChartInfoId ? data.ChartClassifyId : '';
|
|
|
+ },
|
|
|
+ /* 拖拽完成 */
|
|
|
+ dropOverHandle(b, a, i, e) {
|
|
|
+ return
|
|
|
+ // console.log(i, a);
|
|
|
+ // 被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置
|
|
|
+ // 一/二级目录
|
|
|
+ if (b.level === 1 || b.level === 2 || b.level === 3) {
|
|
|
+ this.handleMoveCatalogue(b, a, i, e)
|
|
|
+ }
|
|
|
+
|
|
|
+ // 指标层
|
|
|
+ if (b.level === 4) {
|
|
|
+ this.handleMoveChart(b, a, i, e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 拖拽覆盖添加背景色 */
|
|
|
+ dropMouseOver(node1, node2, e) {
|
|
|
+ return
|
|
|
+ if (
|
|
|
+ ((node1.level === 2 && node2.level === 1) ||
|
|
|
+ (node1.level === 3 && node2.level === 2)) &&
|
|
|
+ (e.target.childNodes[0].className.includes('el-tree-node__content') ||
|
|
|
+ e.target.className.includes('el-tree-node__content'))
|
|
|
+ ) {
|
|
|
+ // console.log(e.target.childNodes[0])
|
|
|
+ e.target.childNodes[0].className.includes('el-tree-node__content')
|
|
|
+ ? (e.target.childNodes[0].style.backgroundColor = '#409eff')
|
|
|
+ : (e.target.style.backgroundColor = '#409eff');
|
|
|
+ }
|
|
|
+ // if (
|
|
|
+ // node2.level === 2 &&
|
|
|
+ // (e.target.childNodes[0].className.includes(
|
|
|
+ // 'el-tree-node__content'
|
|
|
+ // ) ||
|
|
|
+ // e.target.className.includes('el-tree-node__content'))
|
|
|
+ // ) {
|
|
|
+ // e.target.childNodes[0].className.includes('el-tree-node__content')
|
|
|
+ // ? (e.target.childNodes[0].style.backgroundColor = '#409eff')
|
|
|
+ // : (e.target.style.backgroundColor = '#409eff');
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ /* 拖拽离开/拖拽完成重置背景色 */
|
|
|
+ dropMouseLeave(node1, node2, e) {
|
|
|
+ return
|
|
|
+ let arrs = $('.el-tree-node__content');
|
|
|
+ for (let a of arrs) {
|
|
|
+ a.style.backgroundColor = 'transparent';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleLoadMore(){
|
|
|
+ if(this.fileListRequest.finished || this.fileListRequest.loading) return
|
|
|
+ this.fileParams.page++
|
|
|
+ this.getFileList()
|
|
|
+ },
|
|
|
+ getFileList(){
|
|
|
+ if(this.fileParams.page==1){
|
|
|
+ this.fileList=[{fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"},{tagId:"ffff",tagName:"范德萨放大"},{tagId:"ffff",tagName:"范德萨放大"},
|
|
|
+ {tagId:"ffff",tagName:"范德萨放大"},{tagId:"ffff",tagName:"范德萨放大"},{tagId:"ffff",tagName:"范德萨放大"},{tagId:"ffff",tagName:"范德萨放大"},{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"}]
|
|
|
+ }else{
|
|
|
+ let arr = [{fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"},
|
|
|
+ {fileId:"fdfdsffa",fileName:"返回蒂萨费的数据阿佛都很少负的沙发的",tagList:[{tagId:"ffff",tagName:"范德萨放大"}],
|
|
|
+ fileContent:"佛挡杀佛和到款沙发肯德基啥拉付款后东四路哈酒扣篮大赛分",created:"2024-01-12 10:10:10",duration:"10:10",size:"10.1M",creator:"这盎司那"}]
|
|
|
+ this.fileList=[...this.fileList,...arr]
|
|
|
+ this.fileListRequest.finished=true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCommandMore(e){
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ switchDetail(){
|
|
|
+ this.fileDetail={
|
|
|
+ fileId:"fdsfafafe",
|
|
|
+ fileName:"音视频文件名称",
|
|
|
+ paragraphInfo:this.result.map(item => {
|
|
|
+ let time = this.$moment(item.StartMs).subtract(8, 'hours').format('HH:mm:ss')
|
|
|
+ return {
|
|
|
+ startTime:time.split(':')[0]=="00"?time.substring(time.indexOf(":")+1):time,
|
|
|
+ text:item.FinalSentence,
|
|
|
+ speakerId:item.SpeakerId
|
|
|
+ }
|
|
|
+ }),
|
|
|
+ audioUrl:'https://hzstatic.hzinsights.com/static/audio/202312/20231213/n2QVXeiS4wTfU9mu.mp3'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+#asr-container {
|
|
|
+ .asr-main {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .asr-main-left {
|
|
|
+ width: 400px;
|
|
|
+ min-width: 350px;
|
|
|
+ background: #fff;
|
|
|
+ margin-right: 20px;
|
|
|
+ border: 1px solid #ececec;
|
|
|
+ border-radius: 4px;
|
|
|
+ height: calc(100vh - 112px);
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ .add-zone {
|
|
|
+ padding: 15px 20px;
|
|
|
+ border: 1px solid #ECECEC;
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .catalogue-zone {
|
|
|
+ height: calc(100% - 106px);
|
|
|
+ padding: 15px 20px 20px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ margin-bottom: 20px;
|
|
|
+
|
|
|
+ .select-com {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter-box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .catalogue-head {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 15px;
|
|
|
+
|
|
|
+ .left-tab {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .tab {
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ border-bottom: 2px solid transparent;
|
|
|
+ margin-right: 30px;
|
|
|
+ padding-bottom: 5px;
|
|
|
+
|
|
|
+ &.act {
|
|
|
+ color: #0052D9;
|
|
|
+ border-color: #0052D9;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tree-cont {
|
|
|
+ overflow: auto;
|
|
|
+ max-height:calc(100% - 135px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .target_tree {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333;
|
|
|
+
|
|
|
+ .custom-tree-node {
|
|
|
+ display: flex !important;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ display: block;
|
|
|
+ flex: 1;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .text-span{
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .operation-span{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img{
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom-add {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 14px;
|
|
|
+ width: 14px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .asr-main-right{
|
|
|
+ flex-grow: 1;
|
|
|
+ background-color: white;
|
|
|
+ height: calc(100vh - 112px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 25px 0;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ border-radius: 4px;
|
|
|
+ .file-count{
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ padding: 0 25px;
|
|
|
+ }
|
|
|
+ .file-container{
|
|
|
+ padding: 0 25px;
|
|
|
+ height: calc(100% - 35px);
|
|
|
+ overflow: auto;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .file-item{
|
|
|
+ width: calc((100% - 50px) / 3);
|
|
|
+ background-color:#ECF2FE ;
|
|
|
+ border: 1px solid #C8CDD9;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 25px;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ .file-main{
|
|
|
+ padding: 14px 20px;
|
|
|
+ .file-name{
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .file-tag-list{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-top: 10px;
|
|
|
+ .file-tag{
|
|
|
+ white-space: nowrap;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 0 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 10px;
|
|
|
+ &:last-child{
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .file-content{
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #666666;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 7;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .file-footer{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ border-top: 1px solid #C8CDD9;
|
|
|
+ padding: 10px 20px 10px 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ white-space: nowrap;
|
|
|
+ box-sizing: border-box;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .file-time{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .split-element{
|
|
|
+ padding-left: 5px;
|
|
|
+ border-left: solid 1px #333333;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .file-author{
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ .file-operation{
|
|
|
+ margin-left: 10px;
|
|
|
+ display: none;
|
|
|
+ img{
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ border: 1px solid #0052D9;
|
|
|
+ box-shadow: 0 0 0 1px #0052d9 inset;
|
|
|
+ // margin: 0 -1px 24px -1px;
|
|
|
+ .file-author{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .file-operation{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 详情
|
|
|
+ .detail-top{
|
|
|
+ padding: 0 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .detail-top-search{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ // .deail-top-operation{
|
|
|
+
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .detail-tag-area{
|
|
|
+ padding: 0 0 0 25px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .add-tag-button{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ margin-right: 25px;
|
|
|
+ background-color: #ECF2FE;
|
|
|
+ padding: 4px 8px;
|
|
|
+ cursor: pointer;
|
|
|
+ img{
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail-content{
|
|
|
+ padding: 0 25px;
|
|
|
+ .content-title{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 10px;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ &::before{
|
|
|
+ content: '';
|
|
|
+ height: 16px;
|
|
|
+ width: 2px;
|
|
|
+ background-color: #0052D9;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-main{
|
|
|
+ height: calc(100vh - 410px);
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-top: 15px;
|
|
|
+ .content-row{
|
|
|
+ margin-bottom: 25px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ font-weight: 400;
|
|
|
+ &:last-child{
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ .content-row-info{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #333333;
|
|
|
+ .content-info-speaker{
|
|
|
+ height: 16px;
|
|
|
+ width: 16px;
|
|
|
+ }
|
|
|
+ .content-info-start{
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-row-text{
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 10px;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .detail-audio-area{
|
|
|
+ padding: 0 80px;
|
|
|
+ margin-top: 15px;
|
|
|
+ position: relative;
|
|
|
+ img{
|
|
|
+ display: none;
|
|
|
+ height: 24px;
|
|
|
+ width: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ img{
|
|
|
+ display:inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.target_tree {
|
|
|
+ .el-tree__drop-indicator {
|
|
|
+ /* position:absolute; */
|
|
|
+ /* left:0;
|
|
|
+ right:0; */
|
|
|
+ height: 3px;
|
|
|
+ // margin-top: 8px;
|
|
|
+ background-color: #409eff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__content {
|
|
|
+ margin-bottom: 14px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__children {
|
|
|
+ .el-tree-node {
|
|
|
+ /* margin-bottom: 8px !important; */
|
|
|
+ margin-bottom: 0px !important;
|
|
|
+ padding-left: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__content {
|
|
|
+ margin-bottom: 5px !important;
|
|
|
+ padding-left: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .expanded.el-icon-caret-right:before {
|
|
|
+ content: url('../../../assets/img/set_m/down_black.png') !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-icon-caret-right:before {
|
|
|
+ content: url('../../../assets/img/set_m/slide_black.png') !important;
|
|
|
+ }
|
|
|
+ .el-tree-node__expand-icon{
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__expand-icon.is-leaf.el-icon-caret-right:before {
|
|
|
+ content: '' !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__expand-icon.expanded {
|
|
|
+ -webkit-transform: rotate(0deg);
|
|
|
+ transform: rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node.is-current>.el-tree-node__content {
|
|
|
+ background-color: #f0f4ff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-tree-node__content {
|
|
|
+ padding-right: 10px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.nodata{
|
|
|
+ margin-top: 100px;
|
|
|
+ span{
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
hbchen
