|
|
@@ -0,0 +1,792 @@
|
|
|
+<template>
|
|
|
+ <div id="sandbox-index-container">
|
|
|
+ <div class="sandbox-content-tree-box">
|
|
|
+ <div class="sandbox-content-tree-header">
|
|
|
+ <el-button type="primary" style="width: 170px;" @click="addSand">添加逻辑</el-button>
|
|
|
+ <el-checkbox v-model="isOnlyMe" @change="onlyMeHandler">只看我的</el-checkbox>
|
|
|
+ </div>
|
|
|
+ <div class="sandbox-content-tree-body">
|
|
|
+ <div style="padding: 0 20px;">
|
|
|
+ <el-select v-model="search_txt" v-loadMore="searchLoad" :filterable="!search_txt" remote
|
|
|
+ clearable placeholder="请输入逻辑图名称" style="width: 100%; margin-bottom: 20px;" :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.ChartNameEn"
|
|
|
+ :value="item.ChartInfoId"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="sandbox-content-tree">
|
|
|
+ <tree :nodes="treeData" :setting="setting" @onCreated="getZTree" @onDrop="zTreeDrop" />
|
|
|
+ <div class="add-classify">
|
|
|
+ <img src="~@/assets/img/sand_new/add_ico.png"/>
|
|
|
+ <span @click="addLevelOneHandle">添加分类</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sandbox-pictures-box" style="display: none;">
|
|
|
+ <div class="pictures-count">
|
|
|
+ 共200个逻辑图
|
|
|
+ </div>
|
|
|
+ <div class="pictures-box" ref="pictureListRef" @scroll="loadMorePublicChart">
|
|
|
+ <el-col :span="6" style="margin-bottom:20px;padding-right: 20px;"
|
|
|
+ v-for="picture in pictureList" :key="picture.Id">
|
|
|
+ <div class="pictures-item">
|
|
|
+ <div class="pictures-item-header">
|
|
|
+ <span class="text_oneLine">{{ picture.title }}</span>
|
|
|
+ </div>
|
|
|
+ <img :src="picture.url" class="picture-img" @click="detailShowHandle(picture)"/>
|
|
|
+ <div class="item-bottom">
|
|
|
+ <span>{{ picture.time.slice(0,10) }}</span>
|
|
|
+ <div class="item-bottom-buttons">
|
|
|
+ <span class="join_txt" @click="copyHandle(picture)">复制</span>
|
|
|
+ <span class="join_txt" @click="deleteHandle(picture)">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="sandbox-chart-box">
|
|
|
+ <div class="sandbox-chart-head">
|
|
|
+ <div class="sandbox-chartHead-author">作者：<span>陈鸿宇</span></div>
|
|
|
+ <div class="sandbox-chartHead-title">逻辑图名称</div>
|
|
|
+ <div class="sandbox-chartHead-options">
|
|
|
+ <div class="chartHead-options-button" @click="addSand">
|
|
|
+ <img src="~@/assets/img/sand_new/edit_outline.png" />
|
|
|
+ <span>编辑</span>
|
|
|
+ </div>
|
|
|
+ <div class="chartHead-options-button" @click="saveOther">
|
|
|
+ <img src="~@/assets/img/sand_new/save-other.png" />
|
|
|
+ <span>另存为</span>
|
|
|
+ </div>
|
|
|
+ <div class="chartHead-options-button" @click="copySandHandle">
|
|
|
+ <img src="~@/assets/img/sand_new/copy.png" />
|
|
|
+ <span>复制</span>
|
|
|
+ </div>
|
|
|
+ <div class="chartHead-options-button" @click="deleteHandle">
|
|
|
+ <img src="~@/assets/img/sand_new/remove.png" />
|
|
|
+ <span style="color: red;">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 目录自定义按钮区域 -->
|
|
|
+ <div id="custom-button-zone" class="custom-button-zone">
|
|
|
+ <img src="~@/assets/img/sand_new/add_outline.png" class="add-classify-img"/>
|
|
|
+ <img src="~@/assets/img/sand_new/edit_outline.png" class="edit-classify-img"/>
|
|
|
+ <img src="~@/assets/img/sand_new/delete_outline.png" class="delete-classify-img"/>
|
|
|
+ </div>
|
|
|
+ <!-- 添加分类 -->
|
|
|
+ <el-dialog
|
|
|
+ :title="classifyAddTitle"
|
|
|
+ :visible.sync="classifyAddShow"
|
|
|
+ :append-to-body="true"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @closed="classifyAddClosed"
|
|
|
+ width="560px">
|
|
|
+ <div style="padding: 10px 40px 0;">
|
|
|
+ <el-form :model="classifyForm" ref="classifyFormRef" :rules="classifyFormRules"
|
|
|
+ label-width="80px">
|
|
|
+ <el-form-item label="上级目录" v-if="lastLevelClassifyName">
|
|
|
+ {{ lastLevelClassifyName }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="目录名称" prop="classifyName">
|
|
|
+ <el-input v-model="classifyForm.classifyName" style="width: 317px;" placeholder="请输入目录名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="关联品种" prop="varietyId">
|
|
|
+ <el-cascader
|
|
|
+ :options="classifyArr"
|
|
|
+ :props="classifyProps"
|
|
|
+ v-model="classifyForm.varietyId"
|
|
|
+ placeholder="请选择对应品种"
|
|
|
+ id="classifyAddCascader"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div style="text-align: center;padding:40px 0 ;">
|
|
|
+ <el-button @click="classifyAddSubmit" type="primary" style="width: 120px;" size="large">保存</el-button>
|
|
|
+ <el-button @click="classifyAddShow=false" style="width: 120px;margin-left: 28px;" size="large">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import tree from "vue-giant-tree";
|
|
|
+import { dataBaseInterface } from '@/api/api.js';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name:"sandbox_manage_index",
|
|
|
+ components:{tree},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isOnlyMe:false,
|
|
|
+ // 逻辑图搜索名称
|
|
|
+ search_txt:"",
|
|
|
+ searchOptions:[],
|
|
|
+ pictureHaveMore:false,
|
|
|
+ pictureList:[{Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"},
|
|
|
+ {Id:'1',title:"SHFE锌当月和锌CIF均价",time:"2022-02-19",url:"https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800"}],
|
|
|
+ treeData:[],
|
|
|
+ setting:{
|
|
|
+ data:{
|
|
|
+ key:{
|
|
|
+ name:"ChartClassifyName",
|
|
|
+ children:"Children"
|
|
|
+ },
|
|
|
+ simpleData:{
|
|
|
+ idKey:"ChartClassifyId",
|
|
|
+ pIdKey:"ParentId"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ view:{
|
|
|
+ showLine:false,
|
|
|
+ showIcon:false,
|
|
|
+ addDiyDom: this.addDiyDom,
|
|
|
+ // addHoverDom: this.addHoverDom,
|
|
|
+ // removeHoverDom: this.removeHoverDom
|
|
|
+ },
|
|
|
+ edit:{
|
|
|
+ enable:true,
|
|
|
+ showRemoveBtn:false,
|
|
|
+ showRenameBtn:false
|
|
|
+ },
|
|
|
+ callback:{
|
|
|
+ beforeDrop:this.zTreeDropBefore
|
|
|
+ }
|
|
|
+ },
|
|
|
+ zTreeObj:{},
|
|
|
+ copyImgLoding:null,
|
|
|
+ // ------- 添加分类弹窗
|
|
|
+ classifyAddTitle:"添加分类",
|
|
|
+ classifyAddShow:false,
|
|
|
+ lastLevelClassifyName:'',
|
|
|
+ classifyForm:{
|
|
|
+ classifyName:'',
|
|
|
+ varietyId:null
|
|
|
+ },
|
|
|
+ classifyFormRules:{
|
|
|
+ classifyName:{required: true, message:'请输入目录名称', trigger: 'blur'},
|
|
|
+ varietyId:{required: true, message:'请选择对应品种', trigger: 'change'}
|
|
|
+ },
|
|
|
+ classifyProps: {
|
|
|
+ children: 'Items',
|
|
|
+ label: 'ClassifyName',
|
|
|
+ value: 'ChartPermissionId'
|
|
|
+ },
|
|
|
+ classifyArr:[{ChartPermissionId:1,ClassifyName:'品种11',Items:[{ChartPermissionId:11,ClassifyName:'品种112',Items:null}]}]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created(){
|
|
|
+ dataBaseInterface.chartClassify({IsShowMe:false}).then((res) => {
|
|
|
+ if (res.Ret === 200) {
|
|
|
+ this.treeData = res.Data.AllNodes || []
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getZTree(zTree){
|
|
|
+ this.zTreeObj=zTree
|
|
|
+ },
|
|
|
+ zTreeDropBefore(treeId,treeNodes,targetNode,moveType,isCopy){
|
|
|
+ console.log(treeId,treeNodes,targetNode,moveType,isCopy,'treeId,treeNodes,targetNode,moveType,isCop');
|
|
|
+ return false
|
|
|
+ },
|
|
|
+ zTreeDrop(treeId,treeNodes,targetNode,moveType,isCopy){
|
|
|
+ console.log(treeId,treeNodes,targetNode,moveType,isCopy,'treeId,treeNodes,targetNode,moveType,isCop');
|
|
|
+ },
|
|
|
+ onlyMeHandler(){
|
|
|
+ console.log("只看我的");
|
|
|
+ },
|
|
|
+ searchHandle(query) {
|
|
|
+ console.log(query,"搜索");
|
|
|
+ // this.search_page = 1;
|
|
|
+ // this.current_search = query;
|
|
|
+ // this.searchApi(this.current_search)
|
|
|
+ },
|
|
|
+ searchLoad() {
|
|
|
+ // 加载更多
|
|
|
+ console.log("加载更多");
|
|
|
+ // if(!this.search_have_more) return;
|
|
|
+ // this.searchApi(this.current_search,++this.search_page);
|
|
|
+ },
|
|
|
+ /* 聚焦获取当前检索 */
|
|
|
+ inputFocusHandle(e) {
|
|
|
+ // 选取
|
|
|
+ console.log('选取',e.target.value);
|
|
|
+ // this.search_page = 1;
|
|
|
+ // this.current_search = e.target.value;
|
|
|
+ // if(this.current_search) {
|
|
|
+ // this.searchApi(this.current_search)
|
|
|
+ // }else {
|
|
|
+ // this.searchOptions = [];
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ // 添加一级分类
|
|
|
+ addLevelOneHandle(){
|
|
|
+ this.classifyAddTitle="添加分类"
|
|
|
+ this.classifyAddShow=true
|
|
|
+ },
|
|
|
+ addClassify(node){
|
|
|
+ console.log(node);
|
|
|
+ this.lastLevelClassifyName = node.ChartClassifyName
|
|
|
+ this.classifyAddTitle="添加分类"
|
|
|
+ this.classifyAddShow=true
|
|
|
+ },
|
|
|
+ editClassify(node){
|
|
|
+ console.log(node);
|
|
|
+ let pNode = node.getParentNode()
|
|
|
+ this.lastLevelClassifyName = pNode ? pNode.ChartClassifyName:''
|
|
|
+ this.classifyForm.Id = node.ChartClassifyId
|
|
|
+ this.classifyForm.classifyName = node.ChartClassifyName
|
|
|
+ this.classifyAddTitle="编辑分类"
|
|
|
+ this.classifyAddShow=true
|
|
|
+ },
|
|
|
+ deleteClassify(node){
|
|
|
+ console.log(node.ChartClassifyId);
|
|
|
+ this.$confirm("确定删除该沙盘图目录吗?", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ //TODO: 删除逻辑图目录接口对接
|
|
|
+ console.log("请求列表");
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ classifyAddSubmit(){
|
|
|
+ //提交
|
|
|
+ this.$refs.classifyFormRef.validate(valid=>{
|
|
|
+ if(valid){
|
|
|
+ // TODO: 提交接口对接
|
|
|
+ if(this.classifyForm.Id){
|
|
|
+ //编辑
|
|
|
+ }else{
|
|
|
+ //新增
|
|
|
+ }
|
|
|
+ this.classifyAddShow=false
|
|
|
+ this.$message.success(this.classifyAddTitle+"成功")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ classifyAddClosed(){
|
|
|
+ this.classifyForm={
|
|
|
+ classifyName:'',
|
|
|
+ varietyId:null
|
|
|
+ }
|
|
|
+ this.lastLevelClassifyName=""
|
|
|
+ this.$refs.classifyFormRef.clearValidate()
|
|
|
+ },
|
|
|
+ /* 加载更多 */
|
|
|
+ loadMorePublicChart:_.throttle(function(e) {
|
|
|
+ let scrollTop = this.$refs.pictureListRef.scrollTop;
|
|
|
+ let clientHeight = this.$refs.pictureListRef.clientHeight;
|
|
|
+ let scrollHeight = this.$refs.pictureListRef.scrollHeight;
|
|
|
+ // console.log('scrollTop:',scrollTop)
|
|
|
+ // console.log('clientHeight:',clientHeight)
|
|
|
+ // console.log('scrollHeight:',scrollHeight)
|
|
|
+ if(scrollTop + clientHeight >= scrollHeight-10 && this.pictureHaveMore){
|
|
|
+ // this.public_page_no++;
|
|
|
+ // this.getPublicChartList();
|
|
|
+ console.log("加载更多图表");
|
|
|
+ }
|
|
|
+ },300),
|
|
|
+ /* 展示详情 */
|
|
|
+ detailShowHandle(item) {
|
|
|
+ console.log("详情展示");
|
|
|
+ // this.leftShowLabel = '目录';
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // let params = {
|
|
|
+ // code: item.UniqueCode,
|
|
|
+ // id: item.ChartInfoId,
|
|
|
+ // type: item.ChartType,
|
|
|
+ // chartData:item
|
|
|
+ // };
|
|
|
+ // this.selectCurrentNode(params);
|
|
|
+ // this.default_classify = '';
|
|
|
+ // this.reloadRightWid();
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ copyHandle:_.debounce(function ({ PicUrl }){
|
|
|
+ console.log("复制");
|
|
|
+ this.copyImgLoding = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: '复制图片中...',
|
|
|
+ target: '.sandbox-pictures-box',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(255, 255, 255, 0.8)'
|
|
|
+ });
|
|
|
+ const canvas = document.createElement("canvas");
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+ const img = new Image();
|
|
|
+ img.crossOrigin = "Anonymous";
|
|
|
+ // img.src = PicUrl;
|
|
|
+ img.src = "https://img2.baidu.com/it/u=726620871,4203188840&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800";
|
|
|
+ img.onload = ()=>{
|
|
|
+ canvas.width = img.width;
|
|
|
+ canvas.height = img.height;
|
|
|
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
|
+ ctx.fillStyle="#fff";
|
|
|
+ ctx.fillRect(0, 0, img.width, img.height);
|
|
|
+ ctx.drawImage(img, 0, 0);
|
|
|
+ if(window.ClipboardItem) {
|
|
|
+ canvas.toBlob(async (blob) => {
|
|
|
+ const data = [new ClipboardItem({ [blob.type]: blob })];
|
|
|
+ await navigator.clipboard.write(data).then(
|
|
|
+ () => {
|
|
|
+ this.$message.success('复制成功！')
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ this.$message.warning('复制失败,稍后再试')
|
|
|
+ }
|
|
|
+ ).finally(()=>{
|
|
|
+ this.copyImgLoding && this.copyImgLoding.close();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ this.copyImgLoding && this.copyImgLoding.close();
|
|
|
+ this.$message.warning('浏览器暂不支持')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },500),
|
|
|
+ deleteHandle(item){
|
|
|
+ console.log(item);
|
|
|
+ this.$confirm("确定删除该沙盘图吗?", "提示", {
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ //TODO: 删除逻辑图接口对接
|
|
|
+ console.log("请求列表");
|
|
|
+ this.$message.success("删除成功")
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ addDiyDom(treeId, treeNode) {
|
|
|
+ console.log(treeNode,'treeId, treeNode');
|
|
|
+ var aObj = $("#" + treeNode.tId + "_a");
|
|
|
+ if ($("#diyBtn_"+treeNode.ChartClassifyId).length>0) return;
|
|
|
+
|
|
|
+ let dom = $('#custom-button-zone')[0].cloneNode(true)
|
|
|
+
|
|
|
+ $(dom).find('.add-classify-img')[0].addEventListener("click",()=>this.addClassify(treeNode))
|
|
|
+ $(dom).find('.edit-classify-img')[0].addEventListener("click",()=>this.editClassify(treeNode))
|
|
|
+ $(dom).find('.delete-classify-img')[0].addEventListener("click",()=>this.deleteClassify(treeNode))
|
|
|
+
|
|
|
+ // var editStr = "<span id='diyBtn_space_" +treeNode.ChartClassifyId+ "' > </span>"
|
|
|
+ // + "<button type='button' class='diyBtn1' id='diyBtn_" + treeNode.ChartClassifyId
|
|
|
+ // + "' title='"+treeNode.ChartClassifyId+"' onfocus='this.blur();'>"+treeNode.ChartClassifyId+"</button>";
|
|
|
+ aObj.append(dom);
|
|
|
+ },
|
|
|
+ // removeHoverDom(treeId, treeNode) {
|
|
|
+ // console.log(treeId, treeNode,'treeId, treeNode');
|
|
|
+ // $("#diyBtn_"+treeNode.ChartClassifyId).unbind().remove();
|
|
|
+ // $("#diyBtn_space_" +treeNode.ChartClassifyId).unbind().remove();
|
|
|
+ // }
|
|
|
+ addSand(){
|
|
|
+ const { href } = this.$router.resolve({ path: '/sandflow' });
|
|
|
+ window.open(href, '_blank');
|
|
|
+ },
|
|
|
+ saveOther(){
|
|
|
+
|
|
|
+ },
|
|
|
+ copySandHandle: _.debounce(function() {
|
|
|
+ return
|
|
|
+ const { cells } = this.graph.toJSON();
|
|
|
+ if(!cells.length) return this.$message.warning('当前画布无可复制内容');
|
|
|
+
|
|
|
+ this.lockLoding = this.$loading({
|
|
|
+ lock: true,
|
|
|
+ text: '复制图片中...',
|
|
|
+ target: '.right-wrapper',
|
|
|
+ spinner: 'el-icon-loading',
|
|
|
+ background: 'rgba(255, 255, 255, 0.8)'
|
|
|
+ });
|
|
|
+ this.graph.toSVG(async(dataUri) => {
|
|
|
+ /* const params = new FormData();
|
|
|
+ params.append('Img',dataUri)
|
|
|
+ const { Data } = await dataBaseInterface.uploadImgSvg(params);
|
|
|
+ const copyImg = document.createElement('img');
|
|
|
+ $('.sand-flow-container')[0].appendChild(copyImg);
|
|
|
+ copyImg.src = Data.ResourceUrl;
|
|
|
+ this.getSelect(copyImg);
|
|
|
+ setTimeout(() => {
|
|
|
+ document.execCommand('copy');
|
|
|
+ $('.sand-flow-container')[0].removeChild(copyImg);
|
|
|
+ this.lockLoding && this.lockLoding.close();
|
|
|
+ this.$message.success('复制成功');
|
|
|
+ }); */
|
|
|
+ const canvas = document.createElement("canvas");
|
|
|
+ const ctx = canvas.getContext("2d");
|
|
|
+ const img = new Image();
|
|
|
+ img.crossOrigin = "Anonymous";
|
|
|
+ img.src = svgToBase64(dataUri);
|
|
|
+ img.onload = ()=>{
|
|
|
+ canvas.width = img.width;
|
|
|
+ canvas.height = img.height;
|
|
|
+ console.log('width',img.width)
|
|
|
+ console.log('height',img.height)
|
|
|
+ ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
|
+ ctx.fillStyle="#fff";
|
|
|
+ ctx.fillRect(0, 0, img.width, img.height);
|
|
|
+ ctx.drawImage(img, 0, 0);
|
|
|
+ if(window.ClipboardItem) {
|
|
|
+ canvas.toBlob(async (blob) => {
|
|
|
+ const data = [new ClipboardItem({ [blob.type]: blob })];
|
|
|
+ await navigator.clipboard.write(data).then(
|
|
|
+ () => {
|
|
|
+ this.$message.success('复制成功！')
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ this.$message.warning('复制失败,稍后再试')
|
|
|
+ }
|
|
|
+ ).finally(()=>{
|
|
|
+ this.lockLoding && this.lockLoding.close();
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }else {
|
|
|
+ this.lockLoding && this.lockLoding.close();
|
|
|
+ this.$message.warning('浏览器暂不支持')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },{
|
|
|
+ preserveDimensions:true,//让svg为实际图片大小
|
|
|
+ beforeSerialize:(svg)=>{
|
|
|
+ const {x,y,width,height} = this.graph.getContentBBox(cells)
|
|
|
+ let {tx,ty} = this.graph.translate()
|
|
|
+ //给导出的svg增加一点宽高
|
|
|
+ svg.setAttribute('width',width+50)
|
|
|
+ svg.setAttribute('height',height+50)
|
|
|
+ //设置viewBox使图像居中
|
|
|
+ svg.setAttribute('viewBox',`${x-25} ${y-25} ${width+50} ${height+50}`)
|
|
|
+ let gNode = svg.getElementsByClassName('x6-graph-svg-viewport')[0]
|
|
|
+ let textNode = document.createElement('text')
|
|
|
+ textNode.setAttribute('x',x-tx+width-90)
|
|
|
+ textNode.setAttribute('y',y-ty+height+22)
|
|
|
+ textNode.setAttribute('font-size','16px')
|
|
|
+ textNode.setAttribute('font-style','italic')
|
|
|
+ textNode.innerText = '来源：弘则研究'
|
|
|
+ gNode.appendChild(textNode)
|
|
|
+ },
|
|
|
+ copyStyles:false,
|
|
|
+ stylesheet: `
|
|
|
+ svg{
|
|
|
+ background-color:white;
|
|
|
+ }
|
|
|
+ .x6-port {
|
|
|
+ visibility: hidden;
|
|
|
+ }`
|
|
|
+
|
|
|
+ })
|
|
|
+ },500),
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+#sandbox-index-container{
|
|
|
+ height: calc(100vh - 120px);
|
|
|
+ min-height: 600px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ .sandbox-content-tree-box{
|
|
|
+ background-color: white;
|
|
|
+ min-width: 20vw;
|
|
|
+ height: 100%;
|
|
|
+ border: solid 1px #DCDFE6;
|
|
|
+ border-radius: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-right: 16px;
|
|
|
+ .sandbox-content-tree-header{
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: solid 1px #DCDFE6;
|
|
|
+ box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ .sandbox-content-tree-body{
|
|
|
+ padding: 20px 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ .sandbox-content-tree{
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ padding: 0 20px;
|
|
|
+ overflow: auto;
|
|
|
+ .add-classify{
|
|
|
+ margin: 30px 0 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ img{
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin-right: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #0052D9;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sandbox-pictures-box{
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 100%;
|
|
|
+ .pictures-count{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ .pictures-box{
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ max-height: calc(100% - 34px);
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+ .pictures-item{
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ padding: 0 10px 10px;
|
|
|
+ .pictures-item-header{
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid #DCDFE6;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ .text_oneLine{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .picture-img{
|
|
|
+ width: 100%;
|
|
|
+ height: 230px;
|
|
|
+ object-fit: fill !important;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+ .item-bottom{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span{
|
|
|
+ font-size: 14px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .item-bottom-buttons{
|
|
|
+ width: 75px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ span{
|
|
|
+ color: #0052D9;
|
|
|
+ cursor: pointer;
|
|
|
+ &:last-child{
|
|
|
+ color: #C54322;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sandbox-chart-box{
|
|
|
+ background-color: white;
|
|
|
+ flex-grow: 1;
|
|
|
+ height: 100%;
|
|
|
+ border: 1px solid #DCDFE6;
|
|
|
+ border-radius: 4px;
|
|
|
+ .sandbox-chart-head{
|
|
|
+ padding: 20px;
|
|
|
+ border-bottom: 1px solid #DCDFE6;
|
|
|
+ box-shadow: 0px 2px 12px 0px rgba($color: #000000, $alpha: 0.08);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ .sandbox-chartHead-author{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .sandbox-chartHead-title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .sandbox-chartHead-options{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: -20px;
|
|
|
+ .chartHead-options-button{
|
|
|
+ margin-right: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ cursor: pointer;
|
|
|
+ img{
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ color: #0052D9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ @media screen and (max-width:1680px) {
|
|
|
+ .sandbox-content-tree-box{
|
|
|
+ min-width: 330px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .custom-button-zone{
|
|
|
+ // display: flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ position: relative;
|
|
|
+ display: none;
|
|
|
+ right: 12px;
|
|
|
+ height: 100%;
|
|
|
+ img{
|
|
|
+ cursor: pointer;
|
|
|
+ height: 16px;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.vue-giant-tree{
|
|
|
+ li{
|
|
|
+ ul{
|
|
|
+ padding: 0 0 0 10px!important;
|
|
|
+ }
|
|
|
+ .button{
|
|
|
+ z-index: 1;
|
|
|
+ height: 30px;
|
|
|
+ &::before{
|
|
|
+ border:none!important;
|
|
|
+ top: 50%!important;
|
|
|
+ left: 50%!important;
|
|
|
+ transform: translate(-50%,-50%)!important;
|
|
|
+ height: 16px!important;
|
|
|
+ width: 16px!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button.noline_close{
|
|
|
+ &::before{
|
|
|
+ content: url('../../assets/img/set_m/slide_black.png')!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .button.noline_open{
|
|
|
+ &::before{
|
|
|
+ content: url('../../assets/img/set_m/down_black.png')!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a{
|
|
|
+ width: calc(100% - 22px);
|
|
|
+ height: 30px!important;
|
|
|
+ line-height: 30px!important;
|
|
|
+ .node_name{
|
|
|
+ width: calc(100% - 6px);
|
|
|
+ color: #333333!important;
|
|
|
+ border-radius: 0!important;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .curSelectedNode{
|
|
|
+ position: relative;
|
|
|
+ z-index: 0;
|
|
|
+ display: inline-flex;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-items: center;
|
|
|
+ .node_name{
|
|
|
+ flex: 1;
|
|
|
+ color: unset;
|
|
|
+ background-color: transparent;
|
|
|
+ &::after{
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -22px;
|
|
|
+ height: 30px;
|
|
|
+ width: calc(100% + 22px);
|
|
|
+ background-color: #ECF2FE;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .custom-button-zone{
|
|
|
+ display: flex!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+.ztree.zTreeDragUL{
|
|
|
+ width: 300px;
|
|
|
+ z-index: 10000!important;
|
|
|
+}
|
|
|
+.tmpzTreeMove_arrow{
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10000!important;
|
|
|
+ &::after{
|
|
|
+ content: url('../../assets/img/document_m/arrow-fold.png');
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-cascader{
|
|
|
+ .el-input{
|
|
|
+ width: 317px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
hbchen
