|
@@ -5,6 +5,7 @@ import ChartWrap from './components/ChartWrap.vue'
|
|
|
import ChartList from './components/chartList/Index.vue'
|
|
|
import { apiETAChart } from '@/api/etaChart'
|
|
|
import {useClassify} from './hooks/useClassify'
|
|
|
+import { ArrowLeftRight2Icon } from 'tdesign-icons-vue-next';
|
|
|
|
|
|
const {classifyActived,userVal} =useClassify()
|
|
|
|
|
@@ -31,7 +32,7 @@ let finished = false
|
|
|
const tableData = ref([])
|
|
|
const tableLoading = ref(false)
|
|
|
const chartTotal=ref(0)
|
|
|
-const showChartNameWrap=ref(true)
|
|
|
+const showChartNameWrap=ref(false)
|
|
|
async function getTableData() {
|
|
|
tableLoading.value = true
|
|
|
const res = await apiETAChart.chartList({
|
|
@@ -80,31 +81,12 @@ function handleSelectChart(item) {
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <div class="eta-chart-page">
|
|
|
- <ClassifyWrap @filter="handleFilterList" @change="handleSelectChart" />
|
|
|
- <div class="center-wrap">
|
|
|
- <svg-icon name="show_arrow" class="show_chart_name_wrap_btn" v-if="!showChartNameWrap" @click="showChartNameWrap=true"></svg-icon>
|
|
|
- <!-- <div :class="['flex chart-name-list-wrap',!showChartNameWrap?'chart-name-list-wrap_close':'']" v-loading="tableLoading">
|
|
|
- <div class="flex top-box">
|
|
|
- <span>所选图表</span>
|
|
|
- <t-icon name="chevron-left-double" style="font-size:20px;cursor: pointer;" @click="showChartNameWrap=false"></t-icon>
|
|
|
- </div>
|
|
|
- <t-list class="list-content" :onScroll="tableScroll">
|
|
|
- <li
|
|
|
- :class="['text-ellipsis--l1 chart-name',item.ChartInfoId === activeChartId ? 'active_row' : '']"
|
|
|
- v-for="item in tableData"
|
|
|
- :key="item.ChartInfoId"
|
|
|
- @click="handleSelectChart(item)"
|
|
|
- >{{item.ChartClassifyName}}</li>
|
|
|
- <empty-wrap v-if="tableData.length===0"/>
|
|
|
- </t-list>
|
|
|
- <div class="flex bottom-box">
|
|
|
- <span>共{{chartTotal}}张图表</span>
|
|
|
- <span class="clear-btn" @click="activeChartId=''">清除选择</span>
|
|
|
- </div>
|
|
|
- </div> -->
|
|
|
+ <div class="eta-chart-page" id="box">
|
|
|
+ <ClassifyWrap @filter="handleFilterList" @change="handleSelectChart" id="left" />
|
|
|
+ <div class="center-wrap" v-drag>
|
|
|
+ <span name="show_arrow" v-drag class="show_chart_name_wrap_btn" v-if="!showChartNameWrap" ><ArrowLeftRight2Icon /></span>
|
|
|
</div>
|
|
|
- <div class="right-wrap">
|
|
|
+ <div class="right-wrap" id="right">
|
|
|
<ChartList ref="chartListRef"/>
|
|
|
<!-- 图表详情 -->
|
|
|
<ChartWrap :chartInfoId="activeChartId" v-if="activeChartId"/>
|
|
@@ -119,16 +101,26 @@ function handleSelectChart(item) {
|
|
|
|
|
|
.center-wrap{
|
|
|
height: calc(100vh - 120px);
|
|
|
+ width: 4px;
|
|
|
+
|
|
|
position: relative;
|
|
|
+ left: -24px;
|
|
|
}
|
|
|
.show_chart_name_wrap_btn{
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
- left: -36px;
|
|
|
+ left: -6px;
|
|
|
transform: translateY(-50%);
|
|
|
- font-size: 48px;
|
|
|
+ font-size: 12px;
|
|
|
color: #D8D8D8;
|
|
|
cursor: pointer;
|
|
|
+ padding: 25px 0;
|
|
|
+
|
|
|
+ box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 6px;
|
|
|
+ background-color: rgb(255, 255, 255);
|
|
|
+ z-index: 99;
|
|
|
+ // padding: 20px 0px;
|
|
|
+ border-radius: 5px;
|
|
|
}
|
|
|
.chart-name-list-wrap {
|
|
|
background-color: #fff;
|