From 082af9d73d72f41032dd07a1f3707fba1b3d19a9 Mon Sep 17 00:00:00 2001
From: zhengzhou <zhengzhou@hotmail.com>
Date: Tue, 16 Mar 2021 16:00:41 +0800
Subject: [PATCH] update

---
 src/utils/request.js                          |   1 +
 .../watchall/components/Introduce.vue         | 127 ++++++
 .../watchall/components/NoteContentItem.vue   |   1 +
 src/views/main_web/watchall/watchall.vue      | 417 ++++++++++++------
 4 files changed, 400 insertions(+), 146 deletions(-)
 create mode 100644 src/views/main_web/watchall/components/Introduce.vue

diff --git a/src/utils/request.js b/src/utils/request.js
index 6d2f7928..ea872937 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -136,6 +136,7 @@ function mapApiPathToFullPath(path) {
     case "operation/record":
     case "file/updateProjArchiveHistory":
     case "templateCompany/addTemplateCompany":
+    case "project/addProjectGobalConfig":
     // case 'template/deleteTemplateNodeModelFile':
       method = 'POST';
       break;
diff --git a/src/views/main_web/watchall/components/Introduce.vue b/src/views/main_web/watchall/components/Introduce.vue
new file mode 100644
index 00000000..826332e9
--- /dev/null
+++ b/src/views/main_web/watchall/components/Introduce.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="text-com">
+    <Title topTitle="项目概况"/>
+    <NoteContentItem class="text-container">
+      <template v-slot:main>
+        <el-input
+          ref="textarea"
+          type="textarea" 
+          class="text-content" 
+          :class="{ editing: editing }"
+          v-model="content"
+          :readonly="!editing"
+          resize="none"
+        />
+        <div class="btn-group" :style="{ display: editing ? 'block':'' }">
+          <el-button v-if="!editing" size="mini" type="primary" @click.stop="startEdit">编辑</el-button>
+          <templat v-else>
+            <el-button size="mini" type="primary" @click.stop="confirmEdit" :loading="loading">完成</el-button>
+            <el-button size="mini" @click.stop="cancelEdit">取消</el-button>
+          </templat>
+        </div>
+      </template>
+    </NoteContentItem>
+  </div>
+</template>
+
+<script>
+  // 显示文字信息的组件
+  import Title from "./title";
+  import NoteContentItem from "./NoteContentItem";
+import { firstCharToUpperCase } from '@/utils/tool';
+import { wrapErrorHint } from '@/utils/request';
+  export default {
+    components: {
+      Title,
+      NoteContentItem
+    },
+    props: {
+      content: {
+        type: String,
+        default: '',
+      }
+    },
+    data() {
+      return {
+        editing: false,
+        loading: false,
+        originContent: '',
+      }
+    },
+    methods: {
+      startEdit() {
+        this.editing = true;
+        this.originContent = this.content;
+        this.$refs.textarea.focus();
+      },
+      cancelEdit() {
+        this.editing = false;
+        console.log(this.originContent);
+        this.content = this.originContent;
+      },
+      async confirmEdit() {
+        this.loading = true;
+        this.$emit('updateIntroduce', this.content, (res) => {
+          this.loading = false;
+          wrapErrorHint(res);
+          if(res.Code) { return; }
+          this.originContent = this.content;
+          this.editing = false;  
+        });
+      }
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .text-com {
+    .text-container {
+      position: relative;
+      height: calc(100% - 40px);
+      &:hover {
+        .btn-group {
+          display: block;
+        }
+      }
+      .btn-group {
+        display: none;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+      }
+    }
+    .content-title {
+      font-size: 12px;
+      color: rgb(109,109,109);
+      margin: 0 0 4px 0;
+    }
+    .content-body {
+      font-size: 14px;
+      color: #32323c;
+    }
+    .text-content {
+      width: 100%;
+      height: 100%;
+      border-bottom: 1px solid #eaeaea;
+      box-sizing: border-box;
+      ::v-deep .el-textarea__inner {
+        padding: 11px 18px 13px 24px;
+        height: 100%;
+        background-color: transparent;
+        border: none;
+        font-size: inherit;
+        color: inherit;
+        transition: padding .2s linear;
+      }
+      &.editing {
+        ::v-deep .el-textarea__inner {
+          padding-top: 32px;
+        }
+      }
+    }
+    .text-content:last-child {
+      border-bottom: none;
+    }
+    
+  }
+</style>
diff --git a/src/views/main_web/watchall/components/NoteContentItem.vue b/src/views/main_web/watchall/components/NoteContentItem.vue
index 158aec94..2d54875f 100644
--- a/src/views/main_web/watchall/components/NoteContentItem.vue
+++ b/src/views/main_web/watchall/components/NoteContentItem.vue
@@ -24,6 +24,7 @@
     color: #32323c;
     border-bottom-left-radius: 14px;
     border-bottom-right-radius: 14px;
+    box-sizing: border-box;
   }
 
 </style>
\ No newline at end of file
diff --git a/src/views/main_web/watchall/watchall.vue b/src/views/main_web/watchall/watchall.vue
index 5e81579f..abe5d055 100644
--- a/src/views/main_web/watchall/watchall.vue
+++ b/src/views/main_web/watchall/watchall.vue
@@ -1,175 +1,300 @@
 <template>
   <div class="watch-all-page">
-    <app-header backBtnTitle="我的项目" theme="basis" 
-    :title="joinProjName" :showUserCenter="false" :showBackBtn="true"
-    :onBackBtnClick="backToIndex"/>
-    <ChangeModelBtn ref="topModelBtn" :titleList="titleList"
-    v-show="!isShowLeftPage"  class="top-change-model-btn" 
-     @changeModelBtnClick="changeModelBtnClick"/>
+    <app-header
+      backBtnTitle="我的项目"
+      theme="basis"
+      :title="joinProjName"
+      :showUserCenter="false"
+      :showBackBtn="true"
+      :onBackBtnClick="backToIndex"
+    />
+    <ChangeModelBtn
+      ref="topModelBtn"
+      :titleList="titleList"
+      v-show="!isShowLeftPage"
+      class="top-change-model-btn"
+      @changeModelBtnClick="changeModelBtnClick"
+    />
     <div class="main-content">
-      <div class="control-btn" @click.stop="changeShowLeftPageClick" :style="{left: btnLeft }"><img src="static/img/收起与弹出.svg" alt :style="iconRotateStyle"/></div>
-      <div class="left-page" v-show="isShowLeftPage">
-        <ChangeModelBtn ref="leftModelBtn" :titleList="titleList"
-        @changeModelBtnClick="changeModelBtnClick"
-         class="left-change-model-btn"/>
-        <div v-for="(textNote, ti) in textData" :key="ti + '1'">
+      <div
+        class="control-btn"
+        @click.stop="changeShowLeftPageClick"
+        :style="{left: btnLeft }"
+      ><img
+          src="static/img/收起与弹出.svg"
+          alt
+          :style="iconRotateStyle"
+        /></div>
+      <div
+        class="left-page"
+        v-show="isShowLeftPage"
+      >
+        <ChangeModelBtn
+          ref="leftModelBtn"
+          :titleList="titleList"
+          @changeModelBtnClick="changeModelBtnClick"
+          class="left-change-model-btn"
+        />
+        <!-- <div v-for="(textNote, ti) in textData" :key="ti + '1'">
           <TextItem :textItem="textNote"/>
-        </div>
-        <div v-for="(progressNote, pi) in progressData" :key="pi + '2'">
+        </div> -->
+        <Introduce
+          :content="config.projectIntroduce"
+          :style="{ height: `${896 - 58}px` }"
+          @updateIntroduce="updateIntroduce"
+        />
+        <!-- <div v-for="(progressNote, pi) in progressData" :key="pi + '2'">
           <ProgressItem :progressItem="progressNote"/>
-        </div>
-        <div v-for="(graphNote, gi) in graphData" :key="gi + '3'">
+        </div> -->
+        <!-- <div v-for="(graphNote, gi) in graphData" :key="gi + '3'">
           <GraphItem :graphItem="graphNote"/>
-        </div>
+        </div> -->
       </div>
       <div class="right-show-area">
-        <iframe :src="rightPartUrl" frameborder="0"></iframe>
-      </div>  
+        <el-carousel ref="watchCarousel" class="watch-carousel" height="100%" :autoplay="false" indicator-position="none" arrow="never">
+          <el-carousel-item key="forge">
+            <iframe v-if="config.forgeUrl" :key="config.forgeUrl" :src="config.forgeUrl" frameborder="0" />
+          </el-carousel-item>
+          <el-carousel-item key="supermap">
+            <iframe v-if="config.gsUrl" :key="config.gsUrl" :src="config.gsUrl" frameborder="0" />
+          </el-carousel-item>
+        </el-carousel>
+        
+        <!-- <iframe :src="rightPartUrl" frameborder="0"></iframe> -->
+        <el-popover
+          placement="top-start"
+          :width="400"
+          :offset="500"
+          ref="urlModal"
+          trigger="click">
+          <el-form :model="urlForm">
+            <el-form-item label="forgeURL">
+              <el-input v-model="urlForm.forgeUrl" placeholder="http://" />
+            </el-form-item>
+            <el-form-item label="超图URL">
+              <el-input v-model="urlForm.gsUrl" placeholder="http://" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click.stop="onChangeUrl">修改</el-button>
+              <el-button @click.stop="resetUrl">取消</el-button>
+            </el-form-item>
+          </el-form>
+          <el-button slot="reference" class="popover-btn" type="primary" size="mini">设置URL</el-button>
+        </el-popover>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-  import AppHeader from "@/components/app-header";
-  import ChangeModelBtn from './components/ChangeModelBtn';
-  import TextItem from "./components/TextItem";
-  import ProgressItem from "./components/ProgressItem";
-  import GraphItem from "./components/GraphItem";
-  import { getDetailTextData, getProgressData, getGraphData, getGraphData2 } from "./service";
-  export default {
-    components: {
-      AppHeader,
-      ChangeModelBtn,
-      TextItem,
-      ProgressItem,
-      GraphItem
-    },
-    data() {
+import AppHeader from "@/components/app-header";
+import ChangeModelBtn from "./components/ChangeModelBtn";
+import TextItem from "./components/TextItem";
+import { pick } from 'lodash';
+// import ProgressItem from "./components/ProgressItem";
+// import GraphItem from "./components/GraphItem";
+import {
+  getDetailTextData,
+  getProgressData,
+  getGraphData,
+  getGraphData2,
+} from "./service";
+import Introduce from "./components/Introduce.vue";
+import { firstCharToLowerCase, firstCharToUpperCase } from '@/utils/tool';
+import { wrapErrorHint } from '@/utils/request';
+
+export default {
+  components: {
+    AppHeader,
+    ChangeModelBtn,
+    // TextItem,
+    Introduce,
+    // ProgressItem,
+    // GraphItem
+  },
+  data() {
+    return {
+      projectId: sessionStorage.projId,
+      titleList: ["forge模型", "超图"],
+      joinProjName: `观全局-${sessionStorage.projName}`,
+      textData: [],
+      progressData: [],
+      graphData: [],
+      isShowLeftPage: true, //是否显示左边部分的信息
+      btnLeft: 24, //控制按钮的位置
+      iconRotateDeg: 90,
+      // rightPartUrl: "",
+      // superMapUrl: "http://www.lockingos.org:9001/?scene=http://cim.azut.cn:8090/iserver/services/3D-FuHuaYuan/rest/realspace",
+      // forgeModelUrl: "http://www.lockingos.org:9000/fhy-model/fhy/index.html",
+      // temp: ["341999987607363584", "341984912360235008", "342002217261621248"],
+      // 概览配置
+      config: {},
+      urlForm: {
+        gsUrl: '',
+        forgeUrl: '',
+      }
+    };
+  },
+  mounted() {
+    this.getWatchAllGeneralData();
+    this.rightPartUrl = this.temp.includes(sessionStorage.projId)
+      ? "http://www.lockingos.org:9000/fhy-model/forgemd2020120603/index.html"
+      : "http://www.lockingos.org:9000/fhy-model/fhy/index.html";
+    this.forgeModelUrl = this.temp.includes(sessionStorage.projId)
+      ? "http://www.lockingos.org:9000/fhy-model/forgemd2020120603/index.html"
+      : "http://www.lockingos.org:9000/fhy-model/fhy/index.html";
+  },
+  computed: {
+    iconRotateStyle() {
       return {
-        titleList: ['forge模型', '超图'],
-        joinProjName:`观全局-${sessionStorage.projName}`,
-        textData: [],
-        progressData: [],
-        graphData: [],
-        isShowLeftPage: true,//是否显示左边部分的信息
-        btnLeft: 24,//控制按钮的位置
-        iconRotateDeg: 90,
-        rightPartUrl: '',
-        superMapUrl: 'http://www.lockingos.org:9001/?scene=http://cim.azut.cn:8090/iserver/services/3D-FuHuaYuan/rest/realspace',
-        forgeModelUrl: 'http://www.lockingos.org:9000/fhy-model/fhy/index.html',
-        temp:['341999987607363584','341984912360235008','342002217261621248'],
+        transform: `rotate(${this.iconRotateDeg}deg)`,
+      };
+    },
+  },
+  methods: {
+    async getWatchAllGeneralData() {
+      const [configRes, res1, res2, res3, res4] = await Promise.all([
+        this.$fetchApi('project/queryProjectGobalConfig', { id: this.projectId }),
+        getDetailTextData(),
+        getProgressData(),
+        getGraphData(),
+        getGraphData2(),
+      ]);
+
+      this.config = firstCharToLowerCase(configRes.Data || { id: this.projectId });
+      this.urlForm = pick(this.config, ['gsUrl', 'forgeUrl']);
+      this.textData = [{ ...res1 }];
+      this.progressData = [{ ...res2 }];
+      this.graphData = [{ ...res3 }];
+      this.graphData.push(res4);
+      this.graphData = [...this.graphData];
+    },
+    async updateIntroduce(introStr, callback) {
+      const res = await this.updateConfig({ projectIntroduce: introStr });
+      callback(res);
+    },
+    async updateConfig(partialConfig) {
+      const nextCfg = {...this.config, ...partialConfig };
+      const res = await this.$fetchApi('project/addProjectGobalConfig', firstCharToUpperCase(nextCfg));
+      if(!res.Code) {
+        this.config = nextCfg;
       }
+      return res;
+    },
+    async onChangeUrl() {
+      const res = await this.updateConfig(this.urlForm);
+      wrapErrorHint(res);
+      if(res.Code) { return; }
+      this.$refs.urlModal.doClose();
     },
-    mounted() {
-      this.getWatchAllGeneralData();
-      this.rightPartUrl = this.temp.includes(sessionStorage.projId) ? 'http://www.lockingos.org:9000/fhy-model/forgemd2020120603/index.html' : 'http://www.lockingos.org:9000/fhy-model/fhy/index.html';
-      this.forgeModelUrl = this.temp.includes(sessionStorage.projId) ? 'http://www.lockingos.org:9000/fhy-model/forgemd2020120603/index.html' : 'http://www.lockingos.org:9000/fhy-model/fhy/index.html';
+    resetUrl() {
+      // console.log(this.$refs.urlModal);
+      this.$refs.urlModal.doClose();
+      this.urlForm = pick(this.config, ['gsUrl', 'forgeUrl']);
     },
-    computed: {
-      iconRotateStyle() {
-        return {
-          'transform': `rotate(${this.iconRotateDeg}deg)`
-        }
+    // 切换左边部分显示
+    changeShowLeftPageClick() {
+      this.isShowLeftPage = !this.isShowLeftPage;
+      this.btnLeft = this.isShowLeftPage ? "24px" : "0";
+      if (this.btnLeft == "24px") {
+        this.iconRotateDeg = 90;
+      } else {
+        this.iconRotateDeg = -90;
       }
     },
-    methods: {
-      getWatchAllGeneralData() {
-        let res = Promise.all([
-          getDetailTextData(),
-          getProgressData(),
-          getGraphData(),
-          getGraphData2()
-        ]).then(([res1, res2, res3, res4]) => {
-          this.textData = [{...res1}];
-          this.progressData = [{...res2}];
-          this.graphData = [{...res3}];
-          this.graphData.push(res4);
-          this.graphData = [...this.graphData];
+    // 保持两个切换模型的组件是一致的
+    changeModelBtnClick(i) {
+      // this.viewType = i == 0 ? 'forge' : 'supermap';
+      this.$refs.topModelBtn.currentIndex = i;
+      this.$refs.leftModelBtn.currentIndex = i;
+      this.$refs.watchCarousel.setActiveItem(i);
+      // if (i == 0) {
+      //   this.rightPartUrl = this.forgeModelUrl;
+      // } else if (i == 1) {
+      //   this.rightPartUrl = this.superMapUrl;
+      // }
+    },
+    // 按到后退按钮返回主界面
+    backToIndex() {
+      this.$router
+        .push({
+          path: "index",
         })
-      },
-      // 切换左边部分显示
-      changeShowLeftPageClick() {
-        this.isShowLeftPage = !this.isShowLeftPage;
-        this.btnLeft = this.isShowLeftPage ? '24px' : '0';
-        if(this.btnLeft == '24px') {
-          this.iconRotateDeg = 90;
-        } else {
-          this.iconRotateDeg = -90;
-        }
-      },
-      // 保持两个切换模型的组件是一致的
-      changeModelBtnClick(i) {
-        this.$refs.topModelBtn.currentIndex = i;
-        this.$refs.leftModelBtn.currentIndex = i;
-        if(i == 0) {
-          this.rightPartUrl = this.forgeModelUrl;
-        } else if(i == 1) {
-          this.rightPartUrl = this.superMapUrl;
-        }
-      },
-      // 按到后退按钮返回主界面
-      backToIndex() {
-        this.$router.push({
-          path: 'index'
-        }).catch(err => {
+        .catch((err) => {
           console.log(err);
-        })
-      }
-    }
-  }
+        });
+    },
+  },
+};
 </script>
 
-<style scoped>
-  .watch-all-page {
-    background-color: #f6f6f6;
-  }
-  .watch-all-page .main-content {
-    position: relative;
-    display: flex;
-    margin: 18px 0 0 0;
-    padding: 0 64px;
-  }
-  .top-change-model-btn {
-    margin: 0 auto 20px;
-    width: 22.4%;
-  }
-  .left-change-model-btn {
-    margin: 0 0 26px 0;
-  }
-  .control-btn {
-    position: fixed;
-    top: 352px;
-    width: 32px;
-    left: 24px;
-    height: 56px;
-    border-radius: 8px;
-    margin-right: 8px;
-    background-color: rgba(252, 252, 252, 1);
-    box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
-    cursor: pointer;
-  }
-  .control-btn img {
-    /* 位置和大小要根据图标再修正 */
-    display: block;
-    width: 22px;
-    margin: 18px auto;
-  }
-  .left-page {
-    width: 22.4%;
-    margin: 0 32px 0 0;
-  }
-  .right-show-area {
-    flex: 1;
-    border-radius: 16px;
-    margin: 0 0 64px 0;
-    background-color: #ededed;
-    height: 896px;
-    min-width: 1%;
-    overflow: hidden;
+<style lang="less" scoped>
+.watch-all-page {
+  background-color: #f6f6f6;
+}
+.watch-all-page .main-content {
+  position: relative;
+  display: flex;
+  margin: 18px 0 0 0;
+  padding: 0 64px;
+}
+.top-change-model-btn {
+  margin: 0 auto 20px;
+  width: 22.4%;
+}
+.left-change-model-btn {
+  margin: 0 0 26px 0;
+}
+.control-btn {
+  position: fixed;
+  top: 352px;
+  width: 32px;
+  left: 24px;
+  height: 56px;
+  border-radius: 8px;
+  margin-right: 8px;
+  background-color: rgba(252, 252, 252, 1);
+  box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1),
+    0px 1px 3px 0px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+.control-btn img {
+  /* 位置和大小要根据图标再修正 */
+  display: block;
+  width: 22px;
+  margin: 18px auto;
+}
+.left-page {
+  width: 22.4%;
+  margin: 0 32px 0 0;
+}
+.right-show-area {
+  position: relative;
+  flex: 1;
+  border-radius: 16px;
+  margin: 0 0 64px 0;
+  background-color: #ededed;
+  height: 896px;
+  min-width: 1%;
+  /* overflow: hidden; */
+  .watch-carousel {
+    height: 100%;
   }
-  .right-show-area iframe {
+  iframe {
     width: 100%;
     height: 100%;
     border-radius: 16px;
   }
+  &:hover {
+    .popover-btn {
+      display: block;
+    }
+  }
+  .popover-btn {
+    display: none;
+    position: absolute;
+    bottom: -24px;
+    right: 10px;
+  }
+}
 </style>
\ No newline at end of file