186 lines
7.9 KiB
Plaintext
186 lines
7.9 KiB
Plaintext
<view class="page">
|
||
<view class="header">
|
||
<image class="logo" src="../../assets/icons/webicon.png" mode="aspectFill" />
|
||
<image class="title" src="../../assets/icons/星程桑基图.svg" mode="widthFix" />
|
||
</view>
|
||
|
||
<view class="toolbar">
|
||
<image class="tool-icon" src="../../assets/icons/choose-color.svg" mode="aspectFit" bindtap="onToggleThemeSheet" />
|
||
<image class="tool-icon upload-trigger" src="../../assets/icons/upload.svg" mode="aspectFit" bindtap="onChooseFile" />
|
||
|
||
<view class="upload-box" bindtap="onChooseFile">
|
||
<text class="upload-text">{{uploadMessage}}</text>
|
||
</view>
|
||
|
||
<view class="toolbar-spacer" />
|
||
|
||
<view class="export-box">
|
||
<image class="export-main" src="../../assets/icons/export.svg" mode="aspectFit" />
|
||
<image class="export-icon" src="../../assets/icons/export-svg.svg" mode="aspectFit" bindtap="onExportSvg" />
|
||
<image class="export-icon" src="../../assets/icons/export-png.svg" mode="aspectFit" bindtap="onExportPng" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="preview-panel">
|
||
<view class="preview-head">
|
||
<image class="preview-title" src="../../assets/icons/sankeyview.svg" mode="widthFix" />
|
||
|
||
<view class="preview-controls">
|
||
<view class="control-item">
|
||
<image class="control-icon" src="../../assets/icons/gap.svg" mode="aspectFit" />
|
||
<picker mode="selector" range="{{gapOptions}}" value="{{gapOptionIndex}}" bindchange="onChangeGap">
|
||
<view class="select-pill">
|
||
<text>{{gapOptions[gapOptionIndex]}}</text>
|
||
<image class="select-arrow" src="../../assets/icons/list.svg" mode="aspectFit" />
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="control-item">
|
||
<image class="control-icon" src="../../assets/icons/padding.svg" mode="aspectFit" />
|
||
<picker mode="selector" range="{{paddingOptions}}" value="{{paddingOptionIndex}}" bindchange="onChangePadding">
|
||
<view class="select-pill">
|
||
<text>{{paddingOptions[paddingOptionIndex]}}</text>
|
||
<image class="select-arrow" src="../../assets/icons/list.svg" mode="aspectFit" />
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="direction-item" bindtap="onToggleDirection">
|
||
<view class="vertical-label">
|
||
<text>方</text>
|
||
<text>向</text>
|
||
</view>
|
||
<view class="direction-switch {{direction === 'source-to-target' ? 'on' : ''}}">
|
||
<text class="direction-text">{{direction === 'source-to-target' ? 'source' : 'target'}}</text>
|
||
<view class="direction-thumb" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="picker-item">
|
||
<view class="vertical-label">
|
||
<text>位</text>
|
||
<text>置</text>
|
||
</view>
|
||
<picker mode="selector" range="{{labelPositionOptionLabels}}" value="{{labelPositionIndex}}" bindchange="onChangeLabelPosition">
|
||
<view class="select-pill">
|
||
<text>{{labelPositionOptionLabels[labelPositionIndex]}}</text>
|
||
<image class="select-arrow" src="../../assets/icons/list.svg" mode="aspectFit" />
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="picker-item">
|
||
<view class="vertical-label">
|
||
<text>对</text>
|
||
<text>齐</text>
|
||
</view>
|
||
<picker mode="selector" range="{{targetAlignOptionLabels}}" value="{{targetAlignIndex}}" bindchange="onChangeTargetAlign">
|
||
<view class="select-pill wide">
|
||
<text>{{targetAlignOptionLabels[targetAlignIndex]}}</text>
|
||
<image class="select-arrow" src="../../assets/icons/list.svg" mode="aspectFit" />
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<text wx:if="{{buildError}}" class="error-text">{{buildError}}</text>
|
||
<text wx:if="{{parseError}}" class="error-text">{{parseError}}</text>
|
||
<canvas class="preview-canvas" canvas-id="sankeyCanvas" id="sankeyCanvas" />
|
||
</view>
|
||
|
||
<view class="bottom-panels" style="height: {{bottomPanelsHeightPx}}px;">
|
||
<view class="panel data-panel">
|
||
<image class="panel-title" src="../../assets/icons/data-select.svg" mode="widthFix" />
|
||
<scroll-view class="data-scroll" scroll-y enhanced show-scrollbar="true">
|
||
<text wx:if="{{columnHeaders.length === 0}}" class="empty-tip">未加载文件，暂无列信息</text>
|
||
|
||
<view class="field-group">
|
||
<view class="field-title">
|
||
<image src="../../assets/icons/expand.svg" mode="aspectFit" />
|
||
<text>源数据(link value)</text>
|
||
</view>
|
||
<view class="row" wx:for="{{columnHeaders}}" wx:key="*this" data-index="{{index}}" bindtap="onSelectSourceData">
|
||
<image src="../../assets/icons/data.svg" mode="aspectFit" />
|
||
<text class="label">{{item}}</text>
|
||
<image
|
||
src="{{sourceDataColumn === index ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field-group">
|
||
<view class="field-title">
|
||
<image src="../../assets/icons/expand.svg" mode="aspectFit" />
|
||
<text>源标签(Source label)</text>
|
||
</view>
|
||
<view class="row" wx:for="{{columnHeaders}}" wx:key="*this" data-index="{{index}}" bindtap="onToggleSourceDesc">
|
||
<image src="../../assets/icons/description.svg" mode="aspectFit" />
|
||
<text class="label">{{item}}</text>
|
||
<image
|
||
src="{{sourceDescriptionColumns.indexOf(index) > -1 ? '../../assets/icons/checkbox.svg' : '../../assets/icons/checkbox-no.svg'}}"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="field-group">
|
||
<view class="field-title">
|
||
<image src="../../assets/icons/expand.svg" mode="aspectFit" />
|
||
<text>目标标签(target label)</text>
|
||
</view>
|
||
<view class="row" wx:for="{{columnHeaders}}" wx:key="*this" data-index="{{index}}" bindtap="onToggleTargetDesc">
|
||
<image src="../../assets/icons/description.svg" mode="aspectFit" />
|
||
<text class="label">{{item}}</text>
|
||
<image
|
||
src="{{targetDescriptionColumns.indexOf(index) > -1 ? '../../assets/icons/checkbox.svg' : '../../assets/icons/checkbox-no.svg'}}"
|
||
mode="aspectFit"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="panel log-panel">
|
||
<image class="panel-title panel-title-log" src="../../assets/icons/information.svg" mode="widthFix" />
|
||
<scroll-view class="log-list" scroll-y enhanced show-scrollbar="true">
|
||
<text class="log-item" wx:for="{{infoLogs}}" wx:key="index">{{item}}</text>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="footer">@版权说明：星程社所有，反馈邮箱：douboer@gmail.com</view>
|
||
|
||
<view class="theme-sheet-mask" wx:if="{{showThemeSheet}}" bindtap="onCloseThemeSheet" />
|
||
<view class="theme-sheet" wx:if="{{showThemeSheet}}">
|
||
<text class="theme-title">选择配色主题</text>
|
||
<scroll-view class="theme-list" scroll-y enhanced show-scrollbar="true">
|
||
<view
|
||
class="theme-row"
|
||
wx:for="{{themes}}"
|
||
wx:key="id"
|
||
wx:for-item="theme"
|
||
wx:for-index="themeIndex"
|
||
data-index="{{themeIndex}}"
|
||
bindtap="onSelectTheme"
|
||
>
|
||
<image
|
||
src="{{selectedThemeIndex === themeIndex ? '../../assets/icons/radiobutton.svg' : '../../assets/icons/radiobutton-no.svg'}}"
|
||
mode="aspectFit"
|
||
/>
|
||
<view class="theme-bar">
|
||
<view
|
||
class="theme-color"
|
||
wx:for="{{theme.colors}}"
|
||
wx:key="*this"
|
||
wx:for-item="color"
|
||
style="background-color: {{color}};"
|
||
/>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|