From 611af1651456591d18dc646999e5d2a16a8c6710 Mon Sep 17 00:00:00 2001
From: xh-pan1 <xh-pan1@hnair.com>
Date: Fri, 19 Apr 2024 13:14:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=92=E5=8A=A8=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                                   |   2 +
 canvas-container/components/canvasEditPage.vue     |   6 +-
 .../components/canvasShow/config/api.js            |   1 +
 canvas-container/components/leftBar/panel.vue      |   1 +
 .../toolModule/interactiondiagram-select.vue       | 160 ++++
 .../toolBar/toolModule/tool-select-link.vue        |  36 +-
 src/api/image.js                                   |  49 ++
 src/assets/images/point_enter.png                  | Bin 0 -> 6529 bytes
 src/assets/images/point_source.png                 | Bin 0 -> 8611 bytes
 src/components/Product/product-select.vue          | 191 +++++
 src/utils/request.js                               |   6 +-
 src/views/marketing/compose/add.vue                |   1 -
 src/views/marketing/price/add.vue                  |   1 -
 .../resource/interactiondiagram/detail copy.vue    | 271 ++++++
 src/views/resource/interactiondiagram/detail.vue   | 936 +++++++++++++++++++++
 src/views/resource/interactiondiagram/index.vue    | 190 +++++
 16 files changed, 1845 insertions(+), 6 deletions(-)
 create mode 100644 canvas-container/components/toolBar/toolModule/interactiondiagram-select.vue
 create mode 100644 src/api/image.js
 create mode 100644 src/assets/images/point_enter.png
 create mode 100644 src/assets/images/point_source.png
 create mode 100644 src/components/Product/product-select.vue
 create mode 100644 src/views/resource/interactiondiagram/detail copy.vue
 create mode 100644 src/views/resource/interactiondiagram/detail.vue
 create mode 100644 src/views/resource/interactiondiagram/index.vue

diff --git a/.env.development b/.env.development
index 906a8be..b7bf7dc 100644
--- a/.env.development
+++ b/.env.development
@@ -12,3 +12,5 @@ VUE_APP_BASE_API = '/dev-api'
 
 VUE_APP_DOMAIN_PREFIX = 'http://localhost:9004'
 
+# VUE_APP_DOMAIN_PREFIX = 'http://122.9.152.120/ceres-business-api'
+
diff --git a/canvas-container/components/canvasEditPage.vue b/canvas-container/components/canvasEditPage.vue
index 306e08f..2c56487 100644
--- a/canvas-container/components/canvasEditPage.vue
+++ b/canvas-container/components/canvasEditPage.vue
@@ -9,8 +9,10 @@
        @change="pageChange"
        filter=".undraggable"
      >
-     <div class="list-group-item" v-for="(item,index) in componentsData" :key="index" :class="[{'on':activeComponent == index,'undraggable':item.undraggable},'item-'+item.type]" @click="selectComponent(item,index)">
-       <component v-show="!item.isEmpty" :isNoData.sync='item.isEmpty' :is="componentMap[terminal-1].get(item.type)" :componentContent="item.componentContent" :terminal="terminal" :typeId="typeId" :shopId="shopId" @cleckLoading="cleckLoading"></component>
+     <div class="list-group-item" v-for="(item,index) in componentsData" :key="index" 
+     :class="[{'on':activeComponent == index,'undraggable':item.undraggable},'item-'+item.type]" @click="selectComponent(item,index)">
+       <component v-show="!item.isEmpty" :isNoData.sync='item.isEmpty' :is="componentMap[terminal-1].get(item.type)" :componentContent="item.componentContent"
+        :terminal="terminal" :typeId="typeId" :shopId="shopId" @cleckLoading="cleckLoading"></component>
        <div class="no-data" v-show="item.isEmpty">
          <i class="iconfont icon-kong"></i>
          <p>暂无数据<br>请在右边窗口编辑内容</p>
diff --git a/canvas-container/components/canvasShow/config/api.js b/canvas-container/components/canvasShow/config/api.js
index e81409a..c97c2eb 100644
--- a/canvas-container/components/canvasShow/config/api.js
+++ b/canvas-container/components/canvasShow/config/api.js
@@ -10,6 +10,7 @@ export const api = {
   getClassify: BASEURL + '/canvas/getClassify', // 查询分类层级
   getProductGroup: BASEURL + '/canvas/getProductGroup', // 查询分类层级
   getProducts: BASEURL + '/canvas/getProducts', // 选择商品查询
+  getInteractionDiagrams: BASEURL + '/canvas/getInteractionDiagrams', // 选择互动图查询
   saveCanvas: BASEURL + '/canvas/saveCanvas', // 保存画布
   getCanvas: BASEURL + '/canvas/getCanvas', // 读取画布
   getShops: BASEURL + '/canvas/getShops', // 选择店铺查询
diff --git a/canvas-container/components/leftBar/panel.vue b/canvas-container/components/leftBar/panel.vue
index 29c2a67..44b6eed 100644
--- a/canvas-container/components/leftBar/panel.vue
+++ b/canvas-container/components/leftBar/panel.vue
@@ -18,6 +18,7 @@
               :list="item.classList"
               :clone="cloneItem"
               :group="{ name: 'pageEdit', pull: 'clone', put: false }"
+              
               :options="{sort:false}"
             >
               <div @mouseover="hoverItem (classItem)" @mouseout="hoverItemOut" class="childItem list-group-item" v-for="(classItem, index) of item.classList" :key="index">
diff --git a/canvas-container/components/toolBar/toolModule/interactiondiagram-select.vue b/canvas-container/components/toolBar/toolModule/interactiondiagram-select.vue
new file mode 100644
index 0000000..6f256e9
--- /dev/null
+++ b/canvas-container/components/toolBar/toolModule/interactiondiagram-select.vue
@@ -0,0 +1,160 @@
+<template>
+  <div class="interaction-diagram-select">
+    <el-form :inline="true" :model="formData" class="demo-form-inline">
+      <el-form-item label="">
+        <el-input v-model="formData.keyword" maxlength="20" placeholder="互动图名称"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">{{ $t('common.query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="tableData"
+      max-height="500"
+      border
+      row-key="interactionDiagramId"
+      @selection-change="handleSelectionChange"
+      style="width: 100%">
+      <el-table-column
+        v-if="isMultiple"
+        width="40"
+        type="selection"
+        :reserve-selection="true"
+        fixed="left"
+      >
+      </el-table-column>
+      <el-table-column label="" width="40" align="center" v-else>
+        <template slot-scope="scope">
+          <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
+        </template>
+      </el-table-column>
+      
+      <el-table-column
+        prop="interactionDiagramName"
+        label="互动图名称">
+      </el-table-column>
+    
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :hide-on-single-page="true"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+  import api from '@@/components/canvasShow/config/api'
+  import {sendReqMixin} from '@@/components/canvasShow/config/mixin'
+  import {checkEmptyChild} from '@@/config/common'
+  // import {getShopId} from "@@/utils/auth.js"
+  export default {
+    name: 'interactiondiagram-select',
+    mixins: [sendReqMixin],
+    data () {
+      return {
+        tableRadio: '',
+        formData: {
+          keyword: ''
+        },
+        currentPage: 1,
+        total: 0,
+        pageSize: 10,
+        tableData: [],
+        multipleSelection: []
+      }
+    },
+    props: {
+      selectedRows: {
+        type: Array,
+        default: () => []
+      },
+      isMultiple: {
+        type: Boolean,
+        default: false
+      }
+    },
+    mounted () {
+      this.getTableData()
+    },
+    methods: {
+      // 获取类别
+      getCategory () {
+        var _this = this
+        let params = {
+          url: api.getClassify,
+          method: 'GET'
+        }
+        this.sendReq(params, (res) => {
+          _this.categoryList = res.data
+          checkEmptyChild(_this.categoryList)
+        })
+      },
+      // 获取产品信息
+      getTableData () {
+        var _this = this
+        var paramsUrl = `${api.getInteractionDiagrams}?page=${this.currentPage}&pageSize=${this.pageSize}`
+        if (this.formData.keyword) {
+          paramsUrl += `&interactionDiagramName=${this.formData.keyword}`
+        }
+        // let shopId = parseInt(getShopId())
+        // if (shopId && this.typeId===3) {
+        //   paramsUrl += `&shopId=${shopId}`
+        // }
+        let params = {
+          url: paramsUrl,
+          method: 'GET'
+        }
+        this.sendReq(params, (res) => {
+          _this.tableData = res.data.list
+          _this.total = res.data.total
+          // 表格斌值
+          // if(_this.selectedRows.length > 0){
+          //   _this.selectedRows.forEach(row => {
+          //     this.$refs.multipleTable.toggleRowSelection(row,true);
+          //   });
+          // }
+        })
+      },
+      // 搜索
+      onSubmit () {
+        this.getTableData()
+      },
+      // 每页条数改变
+      handleSizeChange (val) {
+        this.pageSize = val
+        this.getTableData()
+      },
+      // 当前页改变
+      handleCurrentChange (val) {
+        this.currentPage = val
+        this.getTableData()
+      },
+      // 多选改变
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .interaction-diagram-select{
+    .el-pagination{
+      padding: 0px;
+      margin-top: 30px;
+    }
+    .el-table{
+      .img{
+        width: 80px;
+        height: 80px;
+      }
+    }
+  }
+</style>
diff --git a/canvas-container/components/toolBar/toolModule/tool-select-link.vue b/canvas-container/components/toolBar/toolModule/tool-select-link.vue
index f3acdfc..2802969 100644
--- a/canvas-container/components/toolBar/toolModule/tool-select-link.vue
+++ b/canvas-container/components/toolBar/toolModule/tool-select-link.vue
@@ -38,6 +38,13 @@
          <el-button type="primary" @click="productChanged">{{ $t('common.sure') }}</el-button>
       </span>
     </el-dialog>
+    <el-dialog title="选择互动图" :visible.sync="interactiondiagramVisible">
+      <interactiondiagram-select ref="interactiondiagramSelect"></interactiondiagram-select>
+      <span slot="footer" class="dialog-footer">
+         <el-button @click="interactiondiagramVisible = false">{{ $t('common.cancel') }}</el-button>
+         <el-button type="primary" @click="interactiondiagramChanged">{{ $t('common.sure') }}</el-button>
+      </span>
+    </el-dialog>
     <el-dialog title="选择店辅" :visible.sync="shopVisible">
       <shop-select ref="shopSelect"></shop-select>
       <span slot="footer" class="dialog-footer">
@@ -64,13 +71,14 @@
 
 <script>
   import ProductSelect from './product-select'
+  import InteractiondiagramSelect from './interactiondiagram-select'
   import ShopSelect from './shop-select'
   import CategorySelect from './category-select'
   import CustomPageSelect from './custom-page-select'
   import NoticeSelect from "./notice-select";
   export default {
     name: 'tool-select-link',
-    components: {NoticeSelect, CustomPageSelect, CategorySelect, ShopSelect, ProductSelect },
+    components: {NoticeSelect, CustomPageSelect, CategorySelect, ShopSelect, ProductSelect, InteractiondiagramSelect },
     data () {
       return {
         selsectValue: '',
@@ -78,6 +86,7 @@
         selectName: '',
         typeText: '',
         productVisible: false,
+        interactiondiagramVisible: false,
         shopVisible: false,
         categoryVisible: false,
         customVisible: false,
@@ -122,6 +131,10 @@
             label: '商品详情'
           },
           {
+            value: '/interactiondiagramdetail',
+            label: '互动图详情'
+          },
+          {
             value: '/notice',
             label: '公告'
           },
@@ -145,6 +158,7 @@
         this.shopVisible = false
         this.productVisible = false
         this.confirmBtnVisible = true
+        this.interactiondiagramVisible = false
         this.selectName = ''
         this.typeText = ''
         switch (value) {
@@ -157,6 +171,9 @@
           case '/detail':
             this.typeText = '商品'
             break
+          case '/interactiondiagramdetail':
+            this.typeText = '互动图'
+            break
           case '/custom':
             this.typeText = '自定义'
           case '/notice':
@@ -185,6 +202,9 @@
           case '商品':
             this.productVisible = true
             break
+          case '互动图':
+            this.interactiondiagramVisible = true
+            break
           case '自定义':
             this.customVisible = true
           case '公告':
@@ -222,6 +242,20 @@
         }
         this.$emit('update:linkObj', linkObj)
       },
+      // 互动图选择
+      interactiondiagramChanged () {
+        console.log(this.$refs.interactiondiagramSelect)
+        var data = this.$refs.interactiondiagramSelect.tableRadio
+        this.interactiondiagramVisible = false
+        this.selectName = this.$refs.interactiondiagramSelect.tableRadio.interactionDiagramName
+        let linkObj = {
+          selsectValue: this.selsectValue,
+          selectName: this.selectName,
+          typeText: this.typeText,
+          data: data
+        }
+        this.$emit('update:linkObj', linkObj)
+      },
       // 店辅选择
       shopChanged () {
         var data = this.$refs.shopSelect.tableRadio
diff --git a/src/api/image.js b/src/api/image.js
new file mode 100644
index 0000000..9edec86
--- /dev/null
+++ b/src/api/image.js
@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+//* ******************** 互动图 *********************
+// 互动图查询
+export function interactionDiagramGetAll(params) {
+  console.log(params)
+  return request({
+    url: '/cereInteractionDiagram/getAll',
+    method: 'get',
+    params
+  })
+}
+
+// 互动图详情
+export function interactionDiagramGetById(params) {
+  return request({
+    url: '/cereInteractionDiagram/getById',
+    method: 'get',
+    params
+  })
+}
+
+// 添加互动图
+export function interactionDiagramAdd(data) {
+  return request({
+    url: '/cereInteractionDiagram/save',
+    method: 'post',
+    data
+  })
+}
+
+// 修改互动图
+export function interactionDiagramUpdate(data) {
+  return request({
+    url: '/cereInteractionDiagram/update',
+    method: 'post',
+    data
+  })
+}
+
+// 删除互动图
+export function interactionDiagramDelete(data) {
+  return request({
+    url: '/cereInteractionDiagram/delete',
+    method: 'post',
+    data
+  })
+}
+
diff --git a/src/assets/images/point_enter.png b/src/assets/images/point_enter.png
new file mode 100644
index 0000000000000000000000000000000000000000..a92d7b1ee712b6e704190e359c2b7737a40bdbfc
GIT binary patch
literal 6529
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/point_source.png b/src/assets/images/point_source.png
new file mode 100644
index 0000000000000000000000000000000000000000..e00fc497d7e8d0468e308ae3fbdb560206bf75dc
GIT binary patch
literal 8611
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
Y3rxBYyk}P;#I6f~lAId2Ud96QUrS(VZU6uP

literal 0
HcmV?d00001

diff --git a/src/components/Product/product-select.vue b/src/components/Product/product-select.vue
new file mode 100644
index 0000000..6bc8d49
--- /dev/null
+++ b/src/components/Product/product-select.vue
@@ -0,0 +1,191 @@
+<template>
+  <div class="product-select">
+    <el-form :inline="true" :model="formData" class="demo-form-inline">
+      <el-form-item label="">
+        <el-input v-model="formData.search" maxlength="20" placeholder="商品名称"></el-input>
+      </el-form-item>
+<!--      <el-form-item label="上架状态">-->
+<!--        <el-select v-model="formData.status" :placeholder="$t('common.choose')">-->
+<!--          <el-option :label="$t('common.all')" value=""></el-option>-->
+<!--          <el-option label="上架" value="1"></el-option>-->
+<!--          <el-option label="下架" value="0"></el-option>-->
+<!--        </el-select>-->
+<!--      </el-form-item>-->
+      <!-- <el-form-item label="商品分类">
+        <el-cascader
+          ref="cascader"
+          v-model="formData.categoryId"
+          :options="categoryList"
+          :props="{ checkStrictly: true,label: 'categoryName',value: 'id',children: 'childs' }"
+          clearable></el-cascader>
+      </el-form-item> -->
+      <el-form-item>
+        <el-button type="primary" @click="onSubmit">{{ $t('common.query') }}</el-button>
+      </el-form-item>
+    </el-form>
+    <el-table
+      ref="multipleTable"
+      :data="tableData"
+      max-height="500"
+      border
+      row-key="productId"
+      @selection-change="handleSelectionChange"
+      style="width: 100%">
+      <el-table-column
+        v-if="isMultiple"
+        width="40"
+        type="selection"
+        :reserve-selection="true"
+        fixed="left"
+      >
+      </el-table-column>
+      <el-table-column label="" width="40" align="center" v-else>
+        <template slot-scope="scope">
+          <el-radio v-model="tableRadio" :label="scope.row"><i></i></el-radio>
+        </template>
+      </el-table-column>
+      <el-table-column label="产品主图" width="180" align="center">
+        <template slot-scope="scope">
+          <el-image
+            style="width: 80px; height: 80px"
+            :src="scope.row.productImage"
+            fit="contain"></el-image>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="productName"
+        label="产品名称"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="productId"
+        label="产品ID">
+      </el-table-column>
+      <el-table-column
+        prop="price"
+        label="售价">
+      </el-table-column>
+      <el-table-column
+        prop="originalPrice"
+        label="原价">
+      </el-table-column>
+      <el-table-column
+        prop="stockNumber"
+        label="库存">
+      </el-table-column>
+      <el-table-column
+        prop="volume"
+        label="销量">
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :hide-on-single-page="true"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import { getClassifyGetAll } from '@/api/commodity'
+  export default {
+    name: 'product-select',
+    data () {
+      return {
+        tableRadio: '',
+        formData: {
+          search: '',
+          shelveState: '1',
+        },
+        currentPage: 1,
+        total: 0,
+        pageSize: 10,
+        tableData: [],
+        multipleSelection: []
+      }
+    },
+    props: {
+      selectedRows: {
+        type: Array,
+        default: () => []
+      },
+      isMultiple: {
+        type: Boolean,
+        default: false
+      }
+    },
+    mounted () {
+      // this.getCategory()
+      this.getTableData()
+    },
+    methods: {
+      // 获取类别
+      // getCategory () {
+      //   var _this = this
+      //   let params = {
+      //     url: api.getClassify,
+      //     method: 'GET'
+      //   }
+      //   this.sendReq(params, (res) => {
+      //     _this.categoryList = res.data
+      //     checkEmptyChild(_this.categoryList)
+      //   })
+      // },
+      reset(){
+       this.currentPage = 1
+       this.pageSize = 10
+        this.getTableData()
+      },
+      // 获取产品信息
+      getTableData () {
+        var _this = this
+        this.formData.page = this.currentPage
+        this.formData.pageSize = this.pageSize
+        getClassifyGetAll(this.formData).then(res => {
+          if (res.code === '') {
+            _this.tableData = res.data.list
+            _this.total = res.data.total
+          }
+        })
+      },
+      // 搜索
+      onSubmit () {
+        this.getTableData()
+      },
+      // 每页条数改变
+      handleSizeChange (val) {
+        this.pageSize = val
+        this.getTableData()
+      },
+      // 当前页改变
+      handleCurrentChange (val) {
+        this.currentPage = val
+        this.getTableData()
+      },
+      // 多选改变
+      handleSelectionChange(val) {
+        this.multipleSelection = val
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .product-select{
+    .el-pagination{
+      padding: 0px;
+      margin-top: 30px;
+    }
+    .el-table{
+      .img{
+        width: 80px;
+        height: 80px;
+      }
+    }
+  }
+</style>
diff --git a/src/utils/request.js b/src/utils/request.js
index 208fc9a..4f90929 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -30,6 +30,10 @@ export const QYuploadUrl = `${baseURL}/file/uploadQyMedia` // 微信客服上传
 // request interceptor
 service.interceptors.request.use(
   config => {
+    // config.paramsSerializer = function(params) {
+    //   let result =  qs.stringify(params, { arrayFormat: 'repeat' })
+    //   return result
+    // }
     if (store.getters.token) {
       config.headers['Authorization-business'] = getToken()
       config.headers['businessId'] = getBusinessId()
@@ -59,7 +63,7 @@ service.interceptors.response.use(
     if (response.config.responseType === 'blob') {
       return response.data
     }
-    if (res.code !== '') {
+    if (res.code !== '' && res.code !== '200') {
       Message({
         message: res.message || 'Error',
         type: 'error',
diff --git a/src/views/marketing/compose/add.vue b/src/views/marketing/compose/add.vue
index 1af22a1..e3742d4 100644
--- a/src/views/marketing/compose/add.vue
+++ b/src/views/marketing/compose/add.vue
@@ -251,7 +251,6 @@
 
 <script>
 import { composeAdd, composeUpate, getComposeDetail, getComposeSelectProduct } from '@/api/marketing'
-import { getClassifyGetAll } from '@/api/commodity'
 function InitComposeForm() {
   this.composeProducts = [] // 商品明细数据
   this.composeName = '' // 活动名称
diff --git a/src/views/marketing/price/add.vue b/src/views/marketing/price/add.vue
index 0383095..4125853 100644
--- a/src/views/marketing/price/add.vue
+++ b/src/views/marketing/price/add.vue
@@ -236,7 +236,6 @@
 
 <script>
 import { priceAdd, priceUpate, getPriceDetail, getComposeSelectProduct } from '@/api/marketing'
-// import { getClassifyGetAll } from '@/api/commodity'
 
 function InitPriceForm() {
   this.priceProducts = [] // 商品明细数据
diff --git a/src/views/resource/interactiondiagram/detail copy.vue b/src/views/resource/interactiondiagram/detail copy.vue
new file mode 100644
index 0000000..9b3c291
--- /dev/null
+++ b/src/views/resource/interactiondiagram/detail copy.vue	
@@ -0,0 +1,271 @@
+<template>
+    
+
+
+
+    
+    <!--
+    <div class="canvas">
+      <div class="topBox">
+        <ul>
+          <li v-for="(item,index) in deviceList" :key="index" @click="toggleDevice(item.id)" :class="{'on':terminal == item.id}">
+            <i class="iconfont" :class="'icon-' + item.name"></i>
+          </li>
+        </ul>
+        <el-button class="btn-save" type="primary" @click="canvasSave">保存画布</el-button>
+      </div>
+      <div class="bottomWarp">
+        <div class="leftBox">
+          <left-bar></left-bar>
+        </div>
+        <div class="mainContentWarp">
+          <div class="mainContent" :class="'view-' + terminal">
+            <cereshop-layout :terminal="terminal" :typeId="typeId" :shopId="shopId" @showRightBox="showRightBox"></cereshop-layout>
+          </div>
+        </div>
+        <div class="RightBox">
+          <tool-panel v-if="comChoose"></tool-panel>
+          <div v-else class="noChoose">
+            <div> <i class="iconfont icon-kong"></i><p>没有选定的组件<br>请拖拽左侧组件栏添加或者选择一个组件</p></div>
+          </div>
+        </div>
+      </div> 
+    </div>-->
+</template>
+
+<script>
+//import leftBar from '../components/leftBar/panel.vue'
+//import toolPanel from '../components/toolBar/toolPanel'
+//import CereshopLayout from '../components/canvasEditPage'
+//import { mapGetters, mapMutations } from 'vuex'
+//import api from '@@/components/canvasShow/config/api'
+//import {sendReqMixin} from '@@/components/canvasShow/config/mixin'
+//import {getShopId, initShopId} from "@@/utils/auth.js"
+//import Cookies from 'js-cookie'
+  export default {
+//    mixins: [sendReqMixin],
+//    components: {
+//      CereshopLayout,
+//      leftBar,
+//      toolPanel
+//    },
+    data () {
+      return {
+        comChoose: false,
+        deviceList: [
+            {
+            id: 1,
+            name: 'xiaochengxu'
+
+            },
+            {
+            id: 2,
+            name: 'h5'
+            }, 
+            {
+            id: 4,
+            name: 'pc'
+            }, 
+            {
+            id: 3,
+            name: 'app'
+            }
+        ],
+        canvasId: '',
+        shopId: 0
+      }
+    }
+//    computed: {
+//      ...mapGetters([
+//        'terminal',
+//        'componentsData',
+//        'typeId'
+//      ])
+//    },
+//    mounted () {
+//      initShopId()
+//      this.shopId = parseInt(getShopId())
+//      if(this.shopId && this.shopId > 0 ){
+//        this.setTypeId(3)
+//      }else{
+//        this.setTypeId(1)
+//      }
+//     
+//      this.canvasGet()
+//    },
+//    methods: {
+//      ...mapMutations({
+//        setTerminal: 'SET_TERMINAL',
+//        setTypeId: 'SET_TYPEID',
+//        setActiveComponent: 'SET_ACTIVECOMPONENT',
+//        setComponentsData: 'SET_COMPONENTSDATA'
+//      }),
+//      toggleDevice (id) {
+//        this.setActiveComponent({})
+//        this.setTerminal(id)
+//        this.canvasGet()
+//      },
+//      // 保存画布
+//      canvasSave () {
+//        // 删除非必要的字符
+//        let cloneComponentsData = JSON.parse(JSON.stringify(this.componentsData))
+//        for (let i = 0; i < cloneComponentsData.length; i++) {
+//          delete cloneComponentsData[i].iconClass
+//          if (cloneComponentsData[i].type === 'productList') {
+//            cloneComponentsData[i].componentContent.productData.imgTextData = [] // 清除展示数据
+//          }
+//        }
+//        var paramsData = {
+//          terminal: this.terminal,
+//          json: JSON.stringify(cloneComponentsData)
+//        }
+//        if (this.canvasId) {
+//          paramsData.canvasId = this.canvasId
+//        }
+//        if (this.shopId && this.typeId == 3) {
+//          paramsData.shopId = this.shopId
+//        }
+//        paramsData.type = this.typeId
+//        console.log(paramsData)
+//        let params = {
+//          url: api.saveCanvas,
+//          method: 'POST',
+//          data: paramsData
+//        }
+//        this.sendReq(params, (res) => {
+//          if (res.message) {
+//            this.$message.error(res.message)
+//          } else {
+//            this.$message({
+//              message: '保存成功！',
+//              type: 'success'
+//            })
+//          }
+//        })
+//      },
+//      // 读取画布
+//      canvasGet () {
+//        var _this = this
+//        this.setComponentsData([])
+//        var apiUrl = api.getCanvas + '?terminal=' + this.terminal + '&type=' + this.typeId
+//        if (this.shopId && this.typeId == 3) {
+//          apiUrl += '&shopId=' + this.shopId
+//        }
+//        let params = {
+//          url: apiUrl,
+//          method: 'GET'
+//        }
+//        this.sendReq(params, (res) => {
+//          if(typeof(uni) !== 'undefined'){
+//            uni.setStorage({key: 'sendNum',data: 0});
+//          } else {
+//            localStorage.setItem('sendNum', 0)
+//          }
+//          if (JSON.stringify(res.data) !== '{}') {
+//            _this.canvasId = res.data.canvasId
+//            var componentsData = JSON.parse(res.data.json)
+//            for (let i = 0; i < componentsData.length; i++) {
+//              componentsData[i].componentContent.hasDatas = true
+//            }
+//            _this.setComponentsData(componentsData)
+//          } else {
+//            _this.canvasId = ''
+//          }
+//        },(err)=>{
+//
+//        })
+//      },
+//      // 右侧工具栏显隐
+//      showRightBox (flag) {
+//        this.comChoose = flag
+//      }
+//    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .canvas {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    .topBox{
+      height: 52px;
+      line-height: 52px;
+      border-bottom: 1px solid #F0F3F4;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .btn-black{
+        position: absolute;
+        left: 20px;
+        top: 0;
+      }
+      li{
+        width: 56px;
+        height: 52px;
+        cursor: pointer;
+        text-align: center;
+        display: inline-block;
+        .iconfont{
+          font-size: 24px;
+        }
+        &:hover,&.on{
+          background-color: $mainColor;
+          color: #fff;
+        }
+      }
+      .btn-save{
+        position: absolute;
+        right: 20px;
+        top: 5px;
+      }
+    }
+    .bottomWarp{
+      flex: 1;
+      display: flex;
+      height: 0;
+    }
+    .leftBox {
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+    .mainContentWarp{
+      background-color: #F0F3F4;
+      overflow: auto;
+      height: 100%;
+      flex: 1;
+      .mainContent{
+        margin: 0 auto;
+        max-width: 100%;
+        width: 750px;
+        &.view-4{
+          width: 1300px;
+        }
+      }
+    }
+    .RightBox {
+      height: 100%;
+      overflow: auto;
+      .noChoose{
+        width: 320px;
+        display: flex;
+        height: 100%;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        justify-content: center;
+        color: #999;
+        text-align: center;
+        font-size: 16px;
+        line-height: 1.8;
+        .iconfont{
+          font-size: 100px;
+          color: $mainColor;
+        }
+      }
+    }
+  }
+</style>
diff --git a/src/views/resource/interactiondiagram/detail.vue b/src/views/resource/interactiondiagram/detail.vue
new file mode 100644
index 0000000..37f2eda
--- /dev/null
+++ b/src/views/resource/interactiondiagram/detail.vue
@@ -0,0 +1,936 @@
+<template>
+  <div>
+  <el-dialog :close-on-click-modal="false" :title="title" :type="type" :visible.sync="isVisible"
+    :modal-append-to-body="false" :center="true" width="80%" top="50px" class="dialog-wrap">
+    <el-form ref="ruleForm" :model="params" class="canvas">
+
+      <div class="mainContentWarp">
+        <div class="mainContent">
+          <div class="canvasContent" ref="canvasContent" :style="{ width: `${canvasWidth}px`, height: `${canvasHeight}px` }"
+            @dragover.prevent @mousedown="laryerMouseDown" @mousemove="laryerMouseMove" @mouseup="laryerMouseUp"
+            @drop="handleDrap" v-if="params.interactionDiagramImage">
+            <img class="img-bg" ref="canvasBgContent" :src="params.interactionDiagramImage" />
+
+            <div class="drap-container-item" v-for="(point, index) in pointList" :key="index"
+              :style="{ top: `${canvasHeight * point.pointY}px`, left: `${canvasWidth * point.pointX}px` }"
+              @mousedown.stop="handleMouseDown($event, point, index)" @click="handleClick(point, index)">
+
+              <div :class="showPoint == point ? 'point_source_active' : 'point_source'"  />
+              <!-- :class="[point.pointX < 0.2 ? 'product-detail-right' : (point.pointX > 0.8 ? 'product-detail-left' : 'product-detail-centerv'),
+                point.pointY > 0.8 ? 'product-detail-top' : 'product-detail-bottom']" -->
+              <div class="product-detail" 
+               
+                 v-if="showPoint == point && (point.product && point.product.productName)">
+                <div class="product-name">{{ (point.product && point.product.productName) ? point.product.productName : '' }}</div>
+                <div class="product-price">￥{{ (point.product && point.product.price) ? point.product.price : '' }}</div>
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+      <div class="RightBox">
+        <div slot="footer" class="btn-wrap">
+          <el-button type="primary" @click="onSubmit">{{ $t('common.save') }}</el-button>
+          <!-- <el-button @click="isVisible = false">{{ $t('common.cancel') }}</el-button> -->
+        </div>
+
+        <el-form-item label="平台类型" hidden>
+          <el-radio-group v-model="params.terminal">
+            <el-radio :disabled="isDisabled" :label="1">小程序</el-radio>
+            <el-radio :disabled="isDisabled" :label="2">H5</el-radio>
+            <el-radio :disabled="isDisabled" :label="3">APP</el-radio>
+            <el-radio :disabled="isDisabled" :label="4">PC</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="互动图名称">
+          <el-input v-model="params.interactionDiagramName" maxlength="20" :readonly="isDisabled"
+            onblur="value=value.replace(/(^\s*)|(\s*$)/g, '')" />
+        </el-form-item>
+
+        <el-form-item style="margin-bottom: 5px;margin-top:5px" label="互动图背景">
+        </el-form-item>
+        <div class="span-wrap">
+          <el-upload list-type="picture-card" :show-file-list="false" :on-remove="handleRemove" :headers="headers"
+            :data="dataObj" :multiple="false" :on-success="handleImageSuccess" :action="action" :auto-upload="true"
+            :before-upload="beforeUpload">
+            <i v-if="!params.interactionDiagramImage" slot="trigger" class="el-icon-plus" />
+            <div v-else class="attr-value-img">
+              <img class="attr-thumbnail" :src="params.interactionDiagramImage">
+            </div>
+          </el-upload>
+          <div v-if="params.interactionDiagramImage" class="attr-actions">
+            <span class="attr-delete" @click="handleRemove()">
+              <i class="el-icon-delete" />
+            </span>
+          </div>
+        </div>
+
+
+        <!-- <el-button type="primary" @click="onSubmit">拖动添加互动点</el-button> -->
+
+
+        <el-form-item style="margin-bottom: 5px;margin-top:5px" label="拖动添加互动点">
+        </el-form-item>
+
+        <div class="point_source" @dragstart="handleDrapEvList($event, newPoint)" @dragover.prevent draggable="true"/>
+
+
+
+        <el-form-item style="margin-bottom: 5px;margin-top:5px" label="互动点信息">
+        </el-form-item>
+
+        <div class="product-list">
+          <div class="list-group-item" v-for="(point, index) in pointList" :key="index">
+            <div class="item-index">
+              {{ (index + 1) }}.
+            </div>
+            <div class="item-right">
+              <div class="item-btns">
+                <div class="item-btn-item" @click="selectProduct(point, index)">
+                  设置商品
+                </div>
+                <div class="item-btn-item" @click="delComponent(point, index)">
+                  删除
+                </div>
+              </div>
+              <div class="item-product">
+                {{ (point.product && point.product.productName) ? point.product.productName : '未设置商品' }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-form>
+
+   
+
+  </el-dialog>
+
+  <el-dialog title="选择商品" :visible.sync="productVisible" width="70%" top="50px">
+      <product-select ref="productSelect"></product-select>
+      <span slot="footer" class="dialog-footer">
+         <el-button @click="productVisible = false">{{ $t('common.cancel') }}</el-button>
+         <el-button type="primary" @click="productChanged">{{ $t('common.sure') }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+
+import { interactionDiagramGetById, interactionDiagramAdd, interactionDiagramUpdate } from '@/api/image'
+import { uploadUrl } from '@/utils/request'
+import { getToken } from '@/utils/auth'
+import ProductSelect from '@/components/Product/product-select'
+import draggable from 'vuedraggable'
+export default {
+  components: {
+    draggable,
+    ProductSelect
+  },
+
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'add'
+    }
+  },
+  data() {
+    return {
+      params: {
+        interactionDiagramId: 0,
+        interactionDiagramName: '',
+        interactionDiagramImage: '',
+        imageWidth: 0,
+        imageHeight: 0,//新增的都是采购入库单
+        pointData: '',
+        terminal: 1
+      },
+      newPoint: {
+        type: 1,
+        data: '',
+        pointX: 0,
+        pointY: 0,
+      },
+
+      dropPoint: {},
+      showPoint: {},
+      selectPoint: null,
+      //上次点击点位置
+      lastClickPoint: {},
+
+      interactionDiagramId: null,
+      pointList: [],
+
+      canvasWidth: 0,
+      canvasHeight: 0,
+
+      productVisible : false,
+
+      action: uploadUrl,
+      headers: {
+        'Authorization-business': getToken()
+      },
+      dataObj: {
+        folderId: 1
+      }
+    }
+  },
+  computed: {
+    isVisible: {
+      get() {
+        return this.dialogVisible
+      },
+      set() {
+        this.close()
+        this.reset()
+      }
+    },
+    isDisabled() {
+      return this.type === 'check'
+    },
+    title() {
+      const titleMap = {
+        add: '新建互动图',
+        check: '查看互动图',
+        edit: '修改互动图'
+      }
+      return titleMap[this.type]
+    }
+  },
+  mounted() {
+    // this.getStorehouseList();
+  },
+  methods: {
+    // 获取仓库
+    // async getStorehouseList() {
+    //   const res = await storehouseGetList({})
+    //   this.storehouseList = res.data
+    //   if(this.storehouseList && this.storehouseList.length > 0){
+    //     this.params.storehouseId = this.storehouseList[0].storehouseId
+    //     this.params.storehouseName = this.storehouseList[0].storehouseName
+    //     this.getProductList();
+    //   }
+    // },
+    // // 获取商品
+    // async getProductList() {
+    //   const res = await getClassifyGetList({ storehouseId: this.params.storehouseId})
+    //   this.productList = res.data
+    //   if(this.productList && this.productList.length > 0){
+    //     this.params.productId = this.productList[0].productId
+    //     this.params.productName = this.productList[0].productName
+    //     this.getSkuList();
+    //   }
+    // },
+    // async getSkuList() {
+    //   const res = await getClassifyGetById({ productId: this.params.productId})
+    //   this.skuList = res.data.skus
+    //   if(this.skuList && this.skuList.length > 0){
+    //     this.params.skuId = this.skuList[0].skuId
+    //     this.params.skuName = this.skuList[0].skuName
+    //     if(this.skuList[0].skuAttrCodeDTOList.length > 0){
+    //       //多款式
+    //       this.isSkuVisible = 1
+    //     }else{
+    //       this.isSkuVisible = 0
+    //     }
+    //   }
+    // },
+
+    // async changeStorehouseValue(){
+    //   this.getProductList();
+    // },
+    // async changeProductValue(){
+    //   this.getSkuList();
+    // },
+    handleImageSuccess(response, file, fileList) {
+      console.log('handleImageSuccess')
+      this.params.interactionDiagramImage = response.data.url
+      this.pointList = []
+      this.params.pointData = ''
+    },
+    handleRemove(file) {
+      this.params.interactionDiagramImage = ''
+    },
+    beforeUpload(file) {
+      if (file) {
+        function getFileData(file) {
+          return new Promise(function (resolve, reject) {
+            let reader = new FileReader()
+            reader.readAsDataURL(file);
+            reader.onload = function (event) {
+
+              resolve(reader.result)
+            }
+          })
+        }
+        function getImage(result) {
+          return new Promise(function (resolve, reject) {
+            let img = new Image();
+            img.src = result;
+            img.onload = function () { //注意只有onload以后才可以拿到图片信息
+              resolve({
+                width: img.width,
+                height: img.height
+              })
+            }
+          })
+        }
+        return getFileData(file).then(res => {
+          getImage(res).then(r => {
+            this.params.imageWidth = r.width
+            this.params.imageHeight = r.height
+            console.log(this.params.imageHeight, this.params.imageWidth, 'afterFileWidth')
+
+            //控件宽高
+            // const canvasContent = this.$refs.canvasContent;
+            // const position = canvasContent.getBoundingClientRect();
+            const position = {
+              height: 650,
+              width: 900
+            }
+
+            // 图片的原始宽度
+            var naturalWidth = this.params.imageWidth;
+            var naturalHeight = this.params.imageHeight;
+
+            //计算图片显示宽高
+            var showHeight = position.height;
+            var showWidth = naturalWidth * showHeight / naturalHeight;
+
+            if (showWidth > position.width) {
+              showWidth = position.width;
+              showHeight = naturalHeight * showWidth / naturalWidth;
+            }
+
+            this.canvasWidth = showWidth;
+            this.canvasHeight = showHeight;
+          })
+        })
+      }
+    },
+
+    // 点击画布的时候, 取消选择组件
+    laryerMouseDown(ev) {
+      console.log("laryerMouseDown");
+      // this.curControl = null;
+    },
+    // 给画布绑定的mousemove事件
+    laryerMouseMove(ev) {
+      console.log("laryerMouseMove");
+      // 判断是需要移动的类型
+      // if (this.flag == "move") {
+      // // 用当前移动的距离减去点击的位置
+      // let dx = ev.pageX - this.containerMoveObj.x,
+      //   dy = ev.pageY - this.containerMoveObj.y;
+
+      // // 上次旧的位置加上 处理完的距离就得到当前位置
+      // this.curControl.pointX = this.curControl.pointX + dx / this.canvasWidth,
+      // this.curControl.pointY = this.curControl.pointY + dy / this.canvasHeight;
+
+      // // 记录下当前点击的位置
+      // this.containerMoveObj.x = ev.pageX;
+      // this.containerMoveObj.y = ev.pageY;
+      // }
+    },
+    // 给画布绑定的mouseup事件
+    laryerMouseUp(ev) {
+      console.log("laryerMouseUp");
+      //在鼠标抬起的时候判断是否
+      // if (this.flag == "") {
+      //   return false;
+      // }
+      // 用当前移动的距离减去点击的位置
+      // let dx = ev.pageX - this.containerMoveObj.x,
+      //     dy = ev.pageY - this.containerMoveObj.y;
+
+      //   // 上次旧的位置加上 处理完的距离就得到当前位置
+      //   this.curControl.pointX = this.curControl.pointX + dx / this.canvasWidth,
+      //   this.curControl.pointY = this.curControl.pointY + dy / this.canvasHeight;
+
+      //   // 记录下当前点击的位置
+      //   this.containerMoveObj.x = ev.pageX;
+      //   this.containerMoveObj.y = ev.pageY;
+
+      // this.flag = "";
+    },
+    // 点击元素获取组件配置
+    handleClick(row, index) {
+      console.log("handleClick");
+      if(this.showPoint == row){
+        this.showPoint = null
+      }else{
+        this.showPoint = row
+      }
+    },
+    // 移动元素
+    handleMouseDown(e, row, index) {
+      console.log("handleMouseDown");
+      e = e || window.event;
+      this.dropPoint = row;
+      // 记录下当前点击的位置
+      this.lastClickPoint.pointX = e.offsetX;
+      this.lastClickPoint.pointY = e.offsetY;
+    },
+    handleDrapEvList(e, pointData) {
+      console.log("handleDrapEvList")
+      this.lastClickPoint.pointX = e.offsetX;
+      this.lastClickPoint.pointY = e.offsetY;
+    },
+    // 监听拖拽元素结束
+    handleDrap(event) {
+      console.log("handleDrap")
+      event.preventDefault();
+      event = event || window.event;
+      // console.log("event.offsetX:" + event.offsetX)
+      // console.log("event.offsetY:" + event.offsetY)
+      // console.log("event.pageX:" + event.pageX)
+      // console.log("event.pageY:" + event.pageY)
+      const canvasContent = this.$refs.canvasContent;
+      const position = canvasContent.getBoundingClientRect();
+      // console.log('canvasContent')
+      //   获取绑定到拖拽元素身上的 drapData属性
+      if (this.lastClickPoint.pointX != null) {
+        var showX = event.pageX - position.left - this.lastClickPoint.pointX;
+        var showY = event.pageY - position.top - this.lastClickPoint.pointY;
+        var pointX = showX / this.canvasWidth;
+        var pointY = showY / this.canvasHeight;
+
+        if (this.dropPoint != null) {
+          this.dropPoint.pointX = pointX
+          this.dropPoint.pointY = pointY
+          this.dropPoint = null
+        } else {
+          var point = {
+            type: 1,
+            data: '',
+            pointX: pointX,
+            pointY: pointY
+          }
+          this.pointList.push(point);
+        }
+      }
+    },
+
+
+    close() {
+      this.$emit('close')
+    },
+    async reset() {
+      this.params = {
+        interactionDiagramId: 0,
+        interactionDiagramName: '',
+        interactionDiagramImage: '',
+        imageWidth: 0,
+        imageHeight: 0,//新增的都是采购入库单
+        pointData: '',
+        terminal: 1
+      }
+      this.pointList = []
+      // if(this.storehouseList && this.storehouseList.length > 0){
+      //   this.params.storehouseId = this.storehouseList[0].storehouseId
+      //   this.params.storehouseName = this.storehouseList[0].storehouseName
+      //   this.getProductList();
+      // }
+    },
+    // 查看详情
+    async getDetails() {
+      const res = await interactionDiagramGetById({ interactionDiagramId: this.interactionDiagramId })
+      if (res.code === '') {
+        this.params = res.data
+
+        // //控件宽高
+        // const canvasContent = this.$refs.canvasContent;
+        // console.log('canvasContent')
+        // const position = canvasContent.getBoundingClientRect();
+        const position = {
+          height: 650,
+          width: 900
+        }
+
+        // 图片的原始宽度
+        var naturalWidth = this.params.imageWidth;
+        var naturalHeight = this.params.imageHeight;
+
+        //计算图片显示宽高
+        var showHeight = position.height;
+        var showWidth = naturalWidth * showHeight / naturalHeight;
+
+        if (showWidth > position.width) {
+          showWidth = position.width;
+          showHeight = naturalHeight * showWidth / naturalWidth;
+        }
+
+        this.canvasWidth = showWidth;
+        this.canvasHeight = showHeight;
+
+        if (this.params.pointData) {
+          this.pointList = JSON.parse(this.params.pointData);
+        }
+      }
+    },
+    async onSubmit() {
+      if (this.params.interactionDiagramName === '') {
+        this.$message.error('请输入互动图名称')
+      } else if (this.type === 'add') {
+        this.params.pointData = JSON.stringify(this.pointList)
+        this.add()
+      } else if (this.type === 'edit') {
+        this.params.pointData = JSON.stringify(this.pointList)
+        this.update()
+      } else {
+        this.isVisible = false
+      }
+    },
+    async add() {
+      const res = await interactionDiagramAdd(this.params)
+      if (res.code === '' || res.code === '200') {
+        this.isVisible = false
+        this.$message({
+          message: this.$t('common.addsuccessful'),
+          type: 'success'
+        })
+        this.$emit('success')
+      }
+    },
+    async update() {
+      const res = await interactionDiagramUpdate(this.params)
+      if (res.code === '' || res.code === '200') {
+        this.isVisible = false
+        this.$message({
+          message: this.$t('common.successful'),
+          type: 'success'
+        });
+        this.$emit('success')
+      }
+    },
+    setParams(val = {}) {
+      if (val['params']) {
+        this.params = val['params']
+        this.interactionDiagramId = this.params.interactionDiagramId
+        this.getDetails()
+      } else if (val['interactionDiagramId']) {
+        this.interactionDiagramId = val['interactionDiagramId']
+        this.getDetails()
+      }
+    },
+    selectProduct(row, index){
+      this.selectPoint = row
+      if(this.$refs.productSelect){
+        this.$refs.productSelect.reset()
+      }
+      
+      this.productVisible = true
+    },
+    productChanged () {
+        console.log(this.$refs.productSelect)
+        var data = this.$refs.productSelect.tableRadio
+        this.productVisible = false
+        if(this.selectPoint != null){
+          this.selectPoint.product = data
+          this.selectPoint = null
+        }
+      },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-form-item {
+  margin-bottom: 0px !important;
+}
+::v-deep .el-form-item__label{
+  line-height: 30px !important;
+}
+.point_source_active{
+  align-items: center;
+    background: hsla(0,0%,47%,.5);
+    border: 2px solid transparent;
+    border-radius: 50%;
+    display: flex;
+    height: 32px;
+    justify-content: center;
+    opacity: 1;
+    padding: 0;
+    transition: border-color .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
+    width: 32px;
+
+    &:after {
+      background: #fff;
+      border-radius: 50%;
+      box-shadow: 0 1px 4px #0000008c;
+      content: "";
+      display: block;
+      height: 12px;
+      position: relative;
+      transition: transform .25s ease-in-out;
+      width: 12px;
+      transform: scale(.667);
+    }
+}
+.point_source {
+  align-items: center;
+    background: hsla(0,0%,47%,.5);
+    border: 2px solid transparent;
+    border-radius: 50%;
+    display: flex;
+    height: 32px;
+    justify-content: center;
+    opacity: 1;
+    padding: 0;
+    transition: border-color .25s ease-in-out,opacity .25s ease-in-out,visibility .25s ease-in-out;
+    width: 32px;
+    
+    &:after {
+      background: #fff;
+      border-radius: 50%;
+      box-shadow: 0 1px 4px #0000008c;
+      content: "";
+      display: block;
+      height: 12px;
+      position: relative;
+      transition: transform .25s ease-in-out;
+      width: 12px;
+    }
+}
+
+.span-wrap {
+  position: relative;
+  display: inline-block;
+
+  .attr-actions {
+    line-height: 120px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+    top: 0;
+    cursor: default;
+    text-align: center;
+    color: #fff;
+    opacity: 0;
+    font-size: 20px;
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+    z-index: 1;
+
+    &:hover {
+      opacity: 1;
+
+      .attr-preview {
+        display: inline-block;
+      }
+
+      i {
+        color: #fff;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .attr-preview {
+    display: none;
+    cursor: pointer;
+    font-size: 20px;
+    color: #fff;
+  }
+
+  .attr-delete {
+    margin-left: 15px;
+    color: #fff;
+  }
+
+  .attr-value-img {
+    width: 100%;
+    height: 100%;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}
+
+.dialog-wrap {
+  ::v-deep .el-dialog {
+    display: flex;
+    flex-direction: column;
+    height: 90vh;
+    max-width: 1400px;
+    overflow: hidden;
+
+    .el-dialog__body {
+      flex: 1;
+      overflow: auto;
+    }
+  }
+
+  .dialog-from {
+    width: 90%;
+    margin: auto;
+
+
+  }
+
+  .btn-wrap {
+    margin: 0px auto 10px;
+    text-align: right;
+  }
+
+  .canvas {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: flex-start;
+    justify-content: center;
+    align-items: flex-start;
+
+    .mainContentWarp {
+      background-color: #F0F3F4;
+      height: 100%;
+      flex: 1;
+
+      .mainContent {
+        margin: 0 auto;
+        width: 900px;
+        height: 650px;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+
+        .canvasContent {
+          width: 100%;
+          height: 100%;
+          position: relative;
+
+          .img-bg {
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+          }
+
+
+          .drap-container-item {
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -o-user-select: none;
+            user-select: none;
+            position: absolute;
+            user-select: none;
+            cursor: pointer;
+            border: 1px solid transparent;
+
+            .drap-item-img {
+              width: 40px;
+              height: 40px;
+              object-fit: contain;
+            }
+
+            .drap-item-name {
+              text-align: center;
+            }
+            .product-detail-top{
+              position: relative;
+              top: -100px;
+            }
+            .product-detail-bottom{
+              
+            }
+            .product-detail-left{
+              position: relative;
+              left: -100px;
+            }
+            .product-detail-right{
+            }
+            .product-detail-centerv{
+              margin-top: -25%;
+              margin-bottom: 25%;
+            }
+            .product-detail-centerh{
+              margin-left: -25%;
+              margin-right: 25%;
+            }
+            .product-detail{
+              display: flex;
+              flex-direction: column;
+              flex-wrap: nowrap;
+              align-content: flex-start;
+              justify-content: center;
+              align-items: flex-start;
+              background: white;
+              padding-left: 10px;
+              padding-right: 10px;
+              padding-top: 8px;
+              padding-bottom: 8px;
+              border-radius: 4px;
+              margin-left: -25%;
+              margin-right: 25%;
+              .product-name{
+                width: 100%;
+                height: auto;
+                font-size: 16px;
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                color: #252744;
+                display: block;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                line-height: 20px;
+                text-align: left;
+              }
+              .product-price{
+                width: auto;
+                height: 20px;
+                line-height: 20px;
+                font-size: 14px;
+                font-family: Source Han Sans CN;
+                font-weight: bold;
+                color: #252744;
+              }
+            }
+          }
+
+          .drap-container-item-active {
+            border: 1px solid skyblue;
+          }
+        }
+      }
+    }
+
+    .RightBox {
+      background-color: #FFFFFF;
+      height: 100%;
+      overflow: auto;
+      margin-left: 20px;
+
+      .noChoose {
+        width: 320px;
+        display: flex;
+        height: 100%;
+        -webkit-box-align: center;
+        align-items: center;
+        -webkit-box-pack: center;
+        justify-content: center;
+        color: #999;
+        text-align: center;
+        font-size: 16px;
+        line-height: 1.8;
+
+        .iconfont {
+          font-size: 100px;
+          color: $mainColor;
+        }
+      }
+    }
+  }
+
+  .form-item-row {
+
+    // padding-top: 40px;
+    ::v-deep .el-input {
+      width: 80px;
+      margin: 0 5px;
+    }
+  }
+}
+
+.product-list {
+  height: 280px;
+    overflow-y: auto;
+    &::-webkit-scrollbar-track-piece {
+      background: #d3dce6;
+    }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #99a9bf;
+      border-radius: 20px;
+    }
+  .list-group-item {
+    display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -ms-flex-wrap: nowrap;
+    flex-wrap: nowrap;
+    -ms-flex-line-pack: center;
+    align-content: flex-start;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: flex-start;
+    margin-bottom: 15px;
+
+    .item-index {
+      margin-right: 8px;
+      margin-top: 8px;
+      font-size: 16px;
+    }
+
+    .item-right {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-content: center;
+      justify-content: flex-start;
+      align-items: flex-start;
+
+      .item-btns {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: center;
+        align-items: center;
+
+        .item-btn-item {
+          border-radius: 4px;
+          background: $mainColor;
+          text-align: center;
+          height: 36px;
+          color: #ffffff;
+          font-size: 14px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          cursor: pointer;
+          margin-bottom: 10px;
+          margin-left: 2px;
+          margin-right: 2px;
+          padding-left: 8px;
+          padding-right: 8px;
+
+         
+
+          span {
+            font-size: 18px;
+            color: #ffffff;
+            margin-right: 5px;
+          }
+        }
+
+      }
+
+      .item-product {}
+    }
+  }
+
+}
+</style>
diff --git a/src/views/resource/interactiondiagram/index.vue b/src/views/resource/interactiondiagram/index.vue
new file mode 100644
index 0000000..57f89e1
--- /dev/null
+++ b/src/views/resource/interactiondiagram/index.vue
@@ -0,0 +1,190 @@
+<!--  -->
+<template>
+  <div>
+    <div class="pending">
+      <!-- 搜索 -->
+      <div class="formSearch">
+        <el-form :inline="true" :model="formParams" class="demo-form-inline">
+          <el-form-item label="互动图名称">
+            <el-input v-model="formParams.interactionDiagramName" placeholder="请输入互动图名称" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="success" plain @click="add">新增互动图</el-button>
+            <el-button type="primary" plain @click="search">{{ $t('common.query') }}</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <!-- 表格 -->
+      <div class="tableBox">
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          tooltip-effect="dark"
+          style="width: 100%"
+        >
+          <el-table-column label="互动图名称" width="600">
+            <template slot-scope="scope">{{ scope.row.interactionDiagramName }}</template>
+          </el-table-column>
+          <el-table-column :label="$t('common.operate')" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <div class="btnList">
+                <el-button type="text" :visible="false" @click="seeMore(scope.row)">{{ $t('common.view') }}</el-button>
+                <el-button type="text" :visible="false" @click="edit(scope.row)">{{ $t('common.edit') }}</el-button>
+                <el-button type="text" @click="del(scope.row)">{{ $t('common.delete') }}</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="10"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+          />
+        </div>
+      </div>
+    </div>
+    <!-- 方案组件 -->
+    <InteractionDiagramDetail
+      ref="edit"
+      :dialog-visible="dialog.isVisible"
+      :type="dialog.type"
+      @close="editClose"
+      @success="getLists"
+    />
+  </div>
+</template>
+
+<script>
+import { interactionDiagramGetAll, interactionDiagramDelete } from '@/api/image'
+import InteractionDiagramDetail from './detail'
+export default {
+  components: {
+    InteractionDiagramDetail
+  },
+  data() {
+    // 这里存放数据
+    return {
+      formParams: {
+        interactionDiagramName: '',
+        page: 1,
+        pageSize: 10
+      },
+      total: 1,
+      tableData: [],
+      currentPage: 1,
+      dialog: {
+        type: 'add',
+        isVisible: false
+      }
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    this.getList(this.formParams)
+  },
+  // 方法集合
+  methods: {
+    handleSizeChange(val) {
+      this.formParams.pageSize = val
+      this.getList(this.formParams)
+    },
+    handleCurrentChange(val) {
+      this.formParams.page = val
+      this.getList(this.formParams)
+    },
+    getLists() {
+      this.getList(this.formParams)
+    },
+    // 查询
+    search() {
+      this.total = 1
+      this.formParams.page = 1
+      this.getList(this.formParams)
+    },
+    // 新建方案
+    add() {
+      this.dialog = {
+        type: 'add',
+        isVisible: true
+      }
+    },
+    // 查看
+    seeMore(row) {
+      const { interactionDiagramId } = row
+      this.dialog = {
+        type: 'check',
+        isVisible: true
+      }
+      this.$refs.edit.setParams({
+        interactionDiagramId: interactionDiagramId
+      })
+    },
+    // 编辑
+    edit(row) {
+      const { interactionDiagramId } = row
+      this.dialog = {
+        type: 'edit',
+        isVisible: true
+      }
+      this.$refs.edit.setParams({
+        interactionDiagramId: interactionDiagramId
+      })
+    },
+    // 关闭弹框
+    editClose() {
+      this.dialog.isVisible = false
+    },
+    // 删除
+    del(row) {
+      this.$confirm('选中数据将被永久删除, 是否继续？', '提示', {
+        confirmButtonText: this.$t('common.sure'),
+        cancelButtonText: this.$t('common.cancel'),
+        type: 'warning'
+      })
+        .then(() => {
+          interactionDiagramDelete({ interactionDiagramId: row.interactionDiagramId }).then(res => {
+            if (res.code === '' || res.code === '200') {
+              this.$message({
+                type: 'success',
+                message: this.$t('common.deletesuccess')
+              })
+            }
+            this.getList(this.formParams)
+          })
+        })
+        .catch(() => {})
+    },
+    // 初始化查询所有数据
+    async getList(formParams) {
+      const res = await interactionDiagramGetAll(formParams)
+      this.tableData = res.data.list
+      this.total = res.data.total
+    }
+  }
+}
+</script>
+<style lang='scss' scoped>
+//@import url(); 引入公共css类
+@import url("../../../styles/elDialog.scss");
+.pending {
+  padding: 30px;
+  background: #FFFFFF;
+  border-radius: 10px;
+}
+.fenye {
+  margin-top: 20px;
+}
+</style>