Prechádzať zdrojové kódy

合并代码 解决冲突

fujunwen 4 rokov pred
rodič
commit
35701b9d12
58 zmenil súbory, kde vykonal 2769 pridanie a 28285 odobranie
  1. 0 0
      public/g.js
  2. 6 1
      public/index.html
  3. 5 5
      public/systemConf.js
  4. 6 0
      src/App.vue
  5. 2 7
      src/api/coreDeviceReport.js
  6. 2 1
      src/api/equipmentList.js
  7. 14 0
      src/api/ganttChart.js
  8. 6 0
      src/api/httputils.js
  9. 4 0
      src/api/legendLibrary.js
  10. 10 1
      src/api/specificationUpdateRecord.js
  11. 10 0
      src/assets/css/rotation.css
  12. 10 0
      src/assets/css/rotation.less
  13. BIN
      src/assets/imgs/analysis/picture.png
  14. BIN
      src/assets/imgs/analysis/report_pdf.png
  15. BIN
      src/assets/imgs/analysis/report_word.png
  16. BIN
      src/assets/imgs/nkt.jpg
  17. BIN
      src/assets/imgs/qwt.jpg
  18. BIN
      src/assets/provinceData.rar
  19. 21 0
      src/assets/svg/menu.svg
  20. 16 0
      src/assets/svg/picture.svg
  21. 20 0
      src/assets/svg/plan_time.svg
  22. 18 0
      src/assets/svg/real_time.svg
  23. 19 0
      src/assets/svg/report.svg
  24. 18 0
      src/assets/svg/task.svg
  25. 29 12
      src/components/Legend/src/legend.vue
  26. BIN
      src/components/Rotation/src/3440.jpg
  27. 28 6
      src/components/Rotation/src/rotation.vue
  28. 1 0
      src/components/floorMap/index.vue
  29. 94 94
      src/lib/items/SFHFQZoneLegendItem.js
  30. 98 94
      src/lib/items/SFHFQZoneLegendItem.ts
  31. 55 63
      src/lib/items/SLineMarkerItem.js
  32. 51 58
      src/lib/items/SLineMarkerItem.ts
  33. 96 96
      src/lib/items/SSCPZZoneLegendItem.js
  34. 98 94
      src/lib/items/SSCPZZoneLegendItem.ts
  35. 94 94
      src/lib/items/SZoneLegendItem.js
  36. 101 97
      src/lib/items/SZoneLegendItem.ts
  37. 63 63
      src/lib/items/TipelineItem.js
  38. 156 157
      src/lib/items/TipelineItem.ts
  39. 14 0
      src/main.ts
  40. 16 111
      src/router/index.js
  41. 19 11
      src/store/index.js
  42. 153 60
      src/utils/ganttChart/GanttChart.js
  43. 438 0
      src/utils/ganttChart/GanttChart_old.js
  44. 71 21
      src/views/analysis/CoreDeviceReport.vue
  45. 253 8
      src/views/analysis/GanttChart.vue
  46. 44 9
      src/views/analysis/SpecificationUpdateRecord.vue
  47. 8 0
      src/views/analysis/index.vue
  48. 30 14
      src/views/equipment/index.vue
  49. 4 4
      src/views/equipment/table/eqDetaileDialog.vue
  50. 27 31
      src/views/homepage/index.vue
  51. 15 5
      src/views/other/index.vue
  52. 1 1
      src/views/other/zhsxOtherTable1.vue
  53. 18 6
      src/views/other/zhsxOtherTable2.vue
  54. 17 6
      src/views/overview/index.vue
  55. 1 1
      src/views/overview/picModal.vue
  56. 4 2
      src/views/room/index.vue
  57. 485 566
      src/views/statistics/index.vue
  58. 0 26486
      static/g.js

src/utils/ganttChart/g.js → public/g.js


+ 6 - 1
public/index.html

@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <script src="<%= BASE_URL %>systemConf.js"></script>
+    <script src="<%= BASE_URL %>g.js"></script>
     <title>万达广场管理说明书</title>
     <style>
         .map-p-label{
@@ -15,6 +16,11 @@
             border:none!important;
             box-shadow:none!important;
         }
+        .my-leaflet-div-icon{
+            width: auto!important;
+            white-space: nowrap;
+            word-break: normal;
+        }
         .leaflet-container{
             background: #f7f9fa!important;
         }
@@ -84,7 +90,6 @@
         <strong>We're sorry but wandaspecificationofsanming doesn't work properly without JavaScript enabled. Please enable
             it to continue.</strong>
         </noscript>
-    <script src="http://localhost/g.js" type="text/JavaScript"></script>
     <div id="app"></div>
  
 </body>

+ 5 - 5
public/systemConf.js

@@ -24,11 +24,11 @@ var __systemConf = {
     systemCode: 'wandaBmGuide',
     conf: {
         // 阿里云
-        // editerUrl: 'http://60.205.177.43:80/wandaEditer/', // 编辑器地址
-        // wandaBmGuideUrl: 'http://60.205.177.43:80/wandaBmGuide/', //管理书地址
+        editerUrl: 'http://60.205.177.43:80/wandaEditer/', // 编辑器地址
+        wandaBmGuideUrl: 'http://60.205.177.43:80/wandaBmGuide/', //管理书地址
         // http://glsms.wanda-dev.cn/ 测试服
-        editerUrl: 'http://glsms.wanda-dev.cn/wandaEditer/', // 编辑器地址
-        wandaBmGuideUrl: 'http://glsms.wanda-dev.cn/wandaBmGuide/', //管理书地址
+        // editerUrl: 'http://glsms.wanda-dev.cn/wandaEditer/', // 编辑器地址
+        // wandaBmGuideUrl: 'http://glsms.wanda-dev.cn/wandaBmGuide/', //管理书地址
     },
 }
-window.__systemConf = __systemConf
+window.__systemConf = __systemConf

+ 6 - 0
src/App.vue

@@ -268,4 +268,10 @@ body {
         width: 8%;
     }
 }
+.el-dialog__header{
+  border-bottom: 1px solid rgba(239,240,241,1);
+}
+.gantt-chart .el-dialog__title{
+  font-weight: 500;
+}
 </style>

+ 2 - 7
src/api/coreDeviceReport.js

@@ -1,19 +1,14 @@
 /*
  * @Author: your name
  * @Date: 2020-07-03 19:04:47
- * @LastEditTime: 2020-07-09 19:58:31
- * @LastEditors: your name
+ * @LastEditTime: 2020-07-12 11:15:12
+ * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \wanda-bm-guide\src\api\coreDeviceReport.js
  */
 
 // 核心设备报表 接口
 import httputils from '@/api/httputils'
-
-// 系统列表
-// export function queryEquipmentList() {
-//     return httputils.getJson(`/data/v_glsms_systemcfg/querySmsxt`)
-// }
 /**
  * 系统列表
  */

+ 2 - 1
src/api/equipmentList.js

@@ -1,4 +1,5 @@
-import httputils from '@/api/httputils'
+ 
+import httputils from "@/api/httputils"
 
 // 设备设施-主要设备清单
 export function queryEquipmentList({ data, postParams }) {

+ 14 - 0
src/api/ganttChart.js

@@ -1,5 +1,19 @@
 import httputils from "@/api/httputils";
 
+/**
+ * 获取甘特图数据
+ * @param {*} url 
+ * @param {*} getParams 
+ */
 export function queryGanttChart(url, getParams) {
   return httputils.getJson(url, getParams);
+}
+
+/**
+ * 获取甘特图任务数据
+ * @param {*} url 
+ * @param {*} getParams 
+ */
+export function queryGanttDetail(url, getParams) {
+  return httputils.getJson(url, getParams);
 }

+ 6 - 0
src/api/httputils.js

@@ -28,6 +28,12 @@ axiosservice.interceptors.request.use(
                 isPreview: isPreview, //默认false,当预览开启的时候是true
             }
         }
+        // if (config.url.indexOf('/data') > -1 && config.url !== '/data/data/auth/check') {
+        if (config.url.indexOf('/data') > -1) {
+            config.headers = {
+                'sso-token': 'admin:xiejialin1',
+            }
+        }
         return config
     },
     (error) => {

+ 4 - 0
src/api/legendLibrary.js

@@ -72,10 +72,14 @@ export function graphElementSearch({ postParams }) {
 // }
 
 // 业下设备分类和位置分类树形结构
+ 
+ 
+ 
 
 export function queryDeviceAndPOsition({
     postParams
 }) {
+ 
     return httputils.postJson(`/data/t_system_wzfl/query`, postParams)
 }
 

+ 10 - 1
src/api/specificationUpdateRecord.js

@@ -1,6 +1,15 @@
 // 说明说更新记录 接口
 import httputils from "@/api/httputils";
 
+export function queryEventypes(url, param) {
+  return httputils.postJson(url, param);
+}
+
+/**
+ * 获取表数据
+ * @param {*} url 
+ * @param {*} param 
+ */
 export function getSpecificaltionData(url, param) {
   return httputils.getJson(url, param);
-}
+}

+ 10 - 0
src/assets/css/rotation.css

@@ -93,6 +93,11 @@
   right: 8px;
   cursor: pointer;
 }
+.overview .view-box .view-left .lb-left .lb-left-noImg {
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}
 .overview .view-box .view-left .lb-bottom {
   height: 34%;
   background: #ffffff;
@@ -223,6 +228,11 @@
   right: 8px;
   cursor: pointer;
 }
+.overview .view-box .view-right .view-right-box .lb-right .lb-left-noImg {
+  width: 100%;
+  height: 100%;
+  object-fit: fill;
+}
 .overview .view-box .view-right .view-right-box .lb-right-bottom {
   height: 53%;
   background: #ffffff;

+ 10 - 0
src/assets/css/rotation.less

@@ -94,6 +94,11 @@
                     right: 8px;
                     cursor: pointer;
                 }
+                .lb-left-noImg {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: fill;
+                }
             }
             .lb-bottom {
                 height: 34%;
@@ -224,6 +229,11 @@
                         right: 8px;
                         cursor: pointer;
                     }
+                    .lb-left-noImg {
+                        width: 100%;
+                        height: 100%;
+                        object-fit: fill;
+                    }
                 }
                 .lb-right-bottom {
                     height: 53%;

BIN
src/assets/imgs/analysis/picture.png


BIN
src/assets/imgs/analysis/report_pdf.png


BIN
src/assets/imgs/analysis/report_word.png


BIN
src/assets/imgs/nkt.jpg


BIN
src/assets/imgs/qwt.jpg


BIN
src/assets/provinceData.rar


+ 21 - 0
src/assets/svg/menu.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="12px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
+    <title>菜单</title>
+    <desc>Created with Sketch.</desc>
+    <g id="各种首页" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="甘特图-弹窗" transform="translate(-301.000000, -563.000000)" fill-rule="nonzero">
+            <g id="编组-3">
+                <g id="菜单" transform="translate(301.000000, 561.000000)">
+                    <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                    <path d="M0.699333328,3.66666667 C0.699333328,4.21895142 1.14704858,4.66666667 1.69933333,4.66666667 C2.25161808,4.66666667 2.69933333,4.21895142 2.69933333,3.66666667 C2.69933333,3.11438192 2.25161808,2.66666667 1.69933333,2.66666667 C1.14704858,2.66666667 0.699333328,3.11438192 0.699333328,3.66666667 Z" id="路径" fill="#8D9399"></path>
+                    <path d="M0.666666672,8.28 C0.666666672,8.83228475 1.11438192,9.28 1.66666667,9.28 C2.21895142,9.28 2.66666667,8.83228475 2.66666667,8.28 C2.66666667,7.72771525 2.21895142,7.28 1.66666667,7.28 C1.11438192,7.28 0.666666672,7.72771525 0.666666672,8.28 Z" id="路径" fill="#8D9399"></path>
+                    <path d="M0.666666672,12.984 C0.666666672,13.5362847 1.11438192,13.984 1.66666667,13.984 C2.21895142,13.984 2.66666667,13.5362847 2.66666667,12.984 C2.66666667,12.4317153 2.21895142,11.984 1.66666667,11.984 C1.11438192,11.984 0.666666672,12.4317153 0.666666672,12.984 Z" id="路径" fill="#8D9399"></path>
+                    <path d="M4.38333333,2.988 L14.3833333,2.988 C14.8277778,2.988 15.05,3.21022222 15.05,3.65466667 L15.05,3.65466667 C15.05,4.09911112 14.8277778,4.32133333 14.3833333,4.32133333 L4.38333333,4.32133333 C3.93888888,4.32133333 3.71666667,4.09911111 3.71666667,3.65466667 L3.71666667,3.65466667 C3.71666667,3.21022222 3.93888889,2.988 4.38333333,2.988 L4.38333333,2.988 Z" id="路径" fill="#8D9399"></path>
+                    <path d="M4.38333333,7.65466667 L14.3833333,7.65466667 C14.8277778,7.65466667 15.05,7.87688889 15.05,8.32133333 L15.05,8.32133333 C15.05,8.76577778 14.8277778,8.988 14.3833333,8.988 L4.38333333,8.988 C3.93888888,8.988 3.71666667,8.76577778 3.71666667,8.32133333 L3.71666667,8.32133333 C3.71666667,7.87688888 3.93888889,7.65466667 4.38333333,7.65466667 Z" id="路径" fill="#8D9399"></path>
+                    <path d="M4.38333333,12.3213333 L14.3833333,12.3213333 C14.8277778,12.3213333 15.05,12.5435556 15.05,12.988 L15.05,12.988 C15.05,13.4324444 14.8277778,13.6546667 14.3833333,13.6546667 L4.38333333,13.6546667 C3.93888888,13.6546667 3.71666667,13.4324444 3.71666667,12.988 L3.71666667,12.988 C3.71666667,12.5435556 3.93888889,12.3213333 4.38333333,12.3213333 Z" id="路径" fill="#8D9399"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 16 - 0
src/assets/svg/picture.svg


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 20 - 0
src/assets/svg/plan_time.svg


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 18 - 0
src/assets/svg/real_time.svg


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 19 - 0
src/assets/svg/report.svg


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 18 - 0
src/assets/svg/task.svg


+ 29 - 12
src/components/Legend/src/legend.vue

@@ -6,10 +6,10 @@
 <template>
     <div>
         <div class='legend-container'>
-            <div v-show='!show' class='legend' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage'>图例</div>
-            <div v-show='show' class='legend2' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage'>图例</div>
+            <div :class='showView===1?"legend2":"legend"' @click='showTl' v-if='(type==1 || floors.length>0)&& isMessage'>图例</div>
+            <!-- 图里展示状态组件 -->
             <el-collapse-transition v-if='(type==1 || floors.length>0)&& isMessage'>
-                <div class='legend-tab' v-if='show'>
+                <div class='legend-tab' v-if='showView===1'>
                     <div class='legend-table2' v-if='systemName=="土建系统"'>
                         <lengend-view @changeSwitch='handleSwich' :remarksText='remarksText' ref='viewLengend' :systemName='systemName'></lengend-view>
                     </div>
@@ -18,8 +18,9 @@
                     </div>
                 </div>
             </el-collapse-transition>
+            <!-- 图例编辑状态组件 -->
             <el-collapse-transition @isShow2='isShow2'>
-                <div v-if='show2'>
+                <div v-if='showView===2'>
                     <lengend-edit
                         @handleSwich2='handleSwich2'
                         v-if='editTable.length>=0'
@@ -136,7 +137,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters(['plazaId', 'fmapID', 'floorSelect', 'isMessage', 'ssoToken'])
+        ...mapGetters(['plazaId', 'fmapID', 'floorSelect', 'isMessage', 'ssoToken', 'showView'])
     },
     props: {
         floors: {
@@ -253,19 +254,29 @@ export default {
         },
         // 点击展示图例框
         showTl() {
-            this.show = !this.show
-            this.queryView(false)
-            if (this.show) {
-                this.show2 = false
+            if (this.showView != 1) {
+                this.$store.commit('SETSHOWVIEW', 1)
+            } else {
+                this.$store.commit('SETSHOWVIEW', 0)
             }
+            // this.showView = !this.showView
+            this.queryView(false)
+            // if (this.showView) {
+            //     this.show2 = false
+            // }
         },
         cance() {
             this.show2 = false
         },
         // 编辑图例
         editTl() {
-            this.show = false
-            this.show2 = true
+            if (this.showView != 2) {
+                this.$store.commit('SETSHOWVIEW', 2)
+            } else {
+                this.$store.commit('SETSHOWVIEW', 0)
+            }
+            // this.show = false
+            // this.show2 = true
             this.queryEditNum(true)
         },
         /**
@@ -291,8 +302,14 @@ export default {
             let url = editerUrl + 'editer?' + encodeURIComponent(data)
             window.open(url, true)
         },
+        // 编辑状态取消
         isShow2() {
-            this.show2 = !this.show2
+            // if (this.showView != 2) {
+            //     this.$store.commit('SETSHOWVIEW', 1)
+            // } else {
+            //     this.$store.commit('SETSHOWVIEW', 0)
+            // }
+            // this.show2 = !this.show2
         },
         handleSwich(val) {
             this.queryView(!val)

BIN
src/components/Rotation/src/3440.jpg


+ 28 - 6
src/components/Rotation/src/rotation.vue

@@ -4,15 +4,16 @@
 *@info:图片轮播
 */
 <template>
-    <div class='rotation'>
+    <div :class='[type?"rotationFull":"rotation"]'>
         <div v-if='rotationImg.length==1' class='rotationCon'>
             <!-- <img
                 src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
                 alt
             />-->
             <img :src='rotationImg[0].url' alt />
+            <!-- <img src='./3440.jpg' alt /> -->
         </div>
-        <el-carousel v-else trigger='click' style='height:100%' :interval='5000' arrow='always'>
+        <el-carousel v-else trigger='click' style='height:100%;width:100%' :interval='5000' arrow='always'>
             <el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
                 <img :src='item.url' alt />
             </el-carousel-item>
@@ -22,7 +23,7 @@
 <script>
 export default {
     name: 'Rotation',
-    props: ['rotationImg'],
+    props: ['rotationImg', 'type'],
     data() {
         return {
             rotationImgs: [{ url: require('@/assets/images/login_back.png') }]
@@ -51,12 +52,33 @@ export default {
         // margin: auto;
         width: 100%;
         height: 100%;
-        object-fit: fill;
+        object-fit: cover;
+    }
+}
+.rotationFull {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .rotationCon {
+        height: 100%;
+        width: 100%;
+        // display: flex;
+    }
+    img {
+        // max-width: 100%;
+        // max-height: 100%;
+        // display: block;
+        // margin: auto;
+        min-width: 100%;
     }
 }
 </style>
 <style lang="less">
-.rotation {
+.rotation,
+.rotationFull {
     .el-carousel__item h3 {
         color: #475669;
         font-size: 14px;
@@ -72,7 +94,7 @@ export default {
         background-color: #d3dce6;
     }
     .el-carousel__container {
-        height: 100%;
+        height: 100% !important;
     }
     .el-carousel__button {
         height: 3px;

+ 1 - 0
src/components/floorMap/index.vue

@@ -108,6 +108,7 @@ export default {
                         this.fParser.parseData(res)
                         this.fParser.spaceList.forEach(t => {
                             this.scene.addItem(t)
+                            t.nameSize = 16
                             if (t.data.Name && this.bunkObj[t.data.Name]) {
                                 t.name = this.bunkObj[t.data.Name].detailtype
                             } else {

+ 94 - 94
src/lib/items/SFHFQZoneLegendItem.js

@@ -1,7 +1,7 @@
-import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
-import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until";
-import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
+import { STextItem } from '@saga-web/graph/lib'
+import { hexify } from '@/components/mapClass/until'
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
 /**
  *图例节点Item(区域类型 --防火分区)
  *
@@ -15,174 +15,174 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent, data) {
-        super(parent);
+        super(parent)
         /** text item   */
-        this.textItem = new STextItem(this);
+        this.textItem = new STextItem(this)
         /** 是否显示文字  */
-        this._showText = true;
+        this._showText = true
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        this._maskFlag = false
+        this.textItem.isTransform = false
+        this.zOrder = ItemOrder.polygonOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.text = data.Name
         if (data) {
-            this.setPointList = [];
-            let setPointList;
+            this.setPointList = []
+            let setPointList
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine;
-                }
-                else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y));
-                    });
-                    this.setPointList = setPointList;
+                    this.setPointList = data.OutLine
+                } else {
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
+                    })
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
-                this.lineWidth = data.Properties.LineWidth;
+                this.lineWidth = data.Properties.LineWidth
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+                this.strokeColor = data.Properties.StrokeColor.includes('#')
+                    ? new SColor(data.Properties.StrokeColor)
+                    : new SColor(hexify(data.Properties.StrokeColor))
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
+                this.fillColor = data.Properties.FillColor.includes('#')
+                    ? new SColor(data.Properties.FillColor)
+                    : new SColor(hexify(data.Properties.FillColor))
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color);
+                this.color = new SColor(data.Properties.color)
             }
             if (data.Properties.font) {
-                this.font = new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont('sans-serif', data.Properties.font)
             }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length);
-            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.y / arr.length);
-            }, 0);
-            this.textItem.moveTo(x, y);
-        });
+                    return pre + cur.x / arr.length
+                }, 0),
+                y = this.getPointList.reduce((pre, cur, index, arr) => {
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
+        })
     }
     get text() {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color() {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font() {
-        return this.textItem.font;
+        return this.textItem.font
     }
     set font(v) {
-        this.textItem.font = v;
+        this.textItem.font = v
     }
     get status() {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value) {
-        this._status = value;
+        this._status = value
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
             if (this.undoStack) {
-                this.undoStack.clear();
+                this.undoStack.clear()
             }
-        }
-        else if (value == SItemStatus.Edit) {
+        } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
-        }
-        else if (value == SItemStatus.Create) {
+            this.textItem.moveable = true
+        } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false;
+            this.showText = false
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
         }
-        this.update();
+        this.update()
     }
-    ;
     get showText() {
-        return this._showText;
+        return this._showText
     }
     set showText(v) {
         if (v === this._showText) {
-            return;
+            return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
-        }
-        else {
-            this.textItem.hide();
+            this.textItem.show()
+        } else {
+            this.textItem.hide()
         }
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.text;
-        this.data.Properties.FillColor = this.fillColor.value;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.OutLine = this.getPointList.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Name = this.text
+        this.data.Properties.FillColor = this.fillColor.value
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
-            };
-        });
-        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
-        this.data.Properties.font = this.font.size;
-        this.data.Properties.color = this.color.value;
-        return this.data;
+                Y: pos.y,
+            }
+        })
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
+        this.data.Properties.font = this.font.size
+        this.data.Properties.color = this.color.value
+        return this.data
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            let brushcolor = new SColor(this.fillColor);
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
-        }
-        else {
-            super.onDraw(painter);
+            painter.drawPolygon([...this.pointList])
+        } else {
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 98 - 94
src/lib/items/SFHFQZoneLegendItem.ts

@@ -1,10 +1,9 @@
-
-import { SGraphItem, SLineStyle } from "@saga-web/graph/lib";
-import { Legend } from '../types/Legend';
-import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
-import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until"
-import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SGraphItem, SLineStyle } from '@saga-web/graph/lib'
+import { Legend } from '../types/Legend'
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
+import { STextItem } from '@saga-web/graph/lib'
+import { hexify } from '@/components/mapClass/until'
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
 /**
  *图例节点Item(区域类型 --防火分区)
  *
@@ -12,23 +11,23 @@ import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
  */
 export class SFHFQZoneLegendItem extends SPolygonItem {
     /** 图例节点对象数据 */
-    data: Legend;
+    data: Legend
 
     /** text item   */
-    textItem: STextItem = new STextItem(this);
+    textItem: STextItem = new STextItem(this)
 
     get text(): string {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v: string) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color(): SColor {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v: SColor) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font(): SFont {
         return this.textItem.font
@@ -38,62 +37,62 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
     }
 
     get status(): SItemStatus {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value: SItemStatus) {
-        this._status = value;
+        this._status = value
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
 
             if (this.undoStack) {
-                this.undoStack.clear();
+                this.undoStack.clear()
             }
         } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
+            this.textItem.moveable = true
         } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false;
+            this.showText = false
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
         }
-        this.update();
-    };
+        this.update()
+    }
 
     /** 是否显示文字  */
-    _showText: boolean = true;
+    _showText: boolean = true
     get showText(): boolean {
-        return this._showText;
+        return this._showText
     }
     set showText(v: boolean) {
         if (v === this._showText) {
             return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
+            this.textItem.show()
         } else {
-            this.textItem.hide();
+            this.textItem.hide()
         }
     }
 
     /** 是否蒙版遮罩  */
-    _maskFlag: boolean = false;
+    _maskFlag: boolean = false
     get maskFlag(): boolean {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v: boolean) {
         if (v === this._maskFlag) {
             return
         }
-        this._maskFlag = v;
+        this._maskFlag = v
         this.update()
     }
 
@@ -104,24 +103,24 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent: SGraphItem | null, data: Legend) {
-        super(parent);
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        super(parent)
+        this.textItem.isTransform = false
+        this.zOrder = ItemOrder.polygonOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.text = data.Name
         if (data) {
-            this.setPointList = [];
-            let setPointList: SPoint[];
+            this.setPointList = []
+            let setPointList: SPoint[]
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine;
+                    this.setPointList = data.OutLine
                 } else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y))
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
                     })
-                    this.setPointList = setPointList;
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
@@ -129,92 +128,97 @@ export class SFHFQZoneLegendItem extends SPolygonItem {
                 this.lineWidth = data.Properties.LineWidth
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+                this.strokeColor = data.Properties.StrokeColor.includes('#')
+                    ? new SColor(data.Properties.StrokeColor)
+                    : new SColor(hexify(data.Properties.StrokeColor))
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
+                this.fillColor = data.Properties.FillColor.includes('#')
+                    ? new SColor(data.Properties.FillColor)
+                    : new SColor(hexify(data.Properties.FillColor))
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color);
+                this.color = new SColor(data.Properties.color)
             }
             if (data.Properties.font) {
-                this.font = new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont('sans-serif', data.Properties.font)
             }
             switch (data.Properties.LineDash) {
-                case "solid":
-                    this.lineStyle = SLineStyle.Solid;
-                    break;
-                case "dotted":
-                    this.lineStyle = SLineStyle.Dotted;
-                    break;
-                case "dashed":
-                    this.lineStyle = SLineStyle.Dashed;
-                    break;
+                case 'solid':
+                    this.lineStyle = SLineStyle.Solid
+                    break
+                case 'dotted':
+                    this.lineStyle = SLineStyle.Dotted
+                    break
+                case 'dashed':
+                    this.lineStyle = SLineStyle.Dashed
+                    break
                 default:
-                    this.lineStyle = SLineStyle.Solid;
+                    this.lineStyle = SLineStyle.Solid
             }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length)
-            }, 0),
+                    return pre + cur.x / arr.length
+                }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + (cur.y / arr.length)
-                }, 0);
-            this.textItem.moveTo(x, y);
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
         })
     }
 
     toData(): any {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.text;
-        this.data.Properties.FillColor = this.fillColor.value;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Name = this.text
+        this.data.Properties.FillColor = this.fillColor.value
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineWidth = this.lineWidth
         switch (this.lineStyle) {
             case SLineStyle.Solid:
-                this.data.Properties.LineDash = "solid";
-                break;
+                this.data.Properties.LineDash = 'solid'
+                break
             case SLineStyle.Dotted:
-                this.data.Properties.LineDash = "dotted";
-                break;
+                this.data.Properties.LineDash = 'dotted'
+                break
             case SLineStyle.Dashed:
-                this.data.Properties.LineDash = "dashed";
-                break;
+                this.data.Properties.LineDash = 'dashed'
+                break
             default:
-                this.data.Properties.LineDash = "solid";
+                this.data.Properties.LineDash = 'solid'
         }
-        this.data.OutLine = this.getPointList.map(pos => {
+        this.data.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
+                Y: pos.y,
             }
-        });
-        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
-        this.data.Properties.font =  this.font.size;
-        this.data.Properties.color =  this.color.value;
-        return this.data;
+        })
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
+        this.data.Properties.font = this.font.size
+        this.data.Properties.color = this.color.value
+        return this.data
     }
 
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
             let color = new SColor(this.strokeColor)
-            color.alpha = 100;
+            color.alpha = color.alpha / 2
             let brushcolor = new SColor(this.fillColor)
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
+            painter.drawPolygon([...this.pointList])
         } else {
-            super.onDraw(painter);
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 55 - 63
src/lib/items/SLineMarkerItem.js

@@ -1,6 +1,6 @@
-import { SLineStyle } from "@saga-web/graph/lib";
-import { SPoint, SColor } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
+import { SLineStyle } from '@saga-web/graph/lib'
+import { SPoint, SColor } from '@saga-web/draw/lib'
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib'
 /**
  * 标识对象Item(线类型)
  *
@@ -14,116 +14,108 @@ export class SLineMarkerItem extends SLineItem {
      * @param data      标识对象数据
      */
     constructor(parent, data) {
-        super(parent);
+        super(parent)
         /** 起始锚点  */
-        this.startItem = null;
+        this.startItem = null
         /** 结束锚点  */
-        this.endItem = null;
+        this.endItem = null
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
-        this.zOrder = ItemOrder.lineOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.moveTo(data.Pos.X, data.Pos.Y);
+        this._maskFlag = false
+        this.zOrder = ItemOrder.lineOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.moveTo(data.Pos.X, data.Pos.Y)
         if (data.Properties && data.Properties.Line) {
-            let setPointList;
-            setPointList = data.Properties.Line.map(i => {
-                return new SPoint(i.X, i.Y);
-            });
-            this.line = setPointList;
+            let setPointList
+            setPointList = data.Properties.Line.map((i) => {
+                return new SPoint(i.X, i.Y)
+            })
+            this.line = setPointList
         }
         if (data.Properties && data.Properties.LineWidth) {
-            this.lineWidth = data.Properties.LineWidth;
+            this.lineWidth = data.Properties.LineWidth
         }
         if (data.Properties && data.Properties.LineStyle) {
-            this.lineStyle = data.Properties.LineStyle;
+            this.lineStyle = data.Properties.LineStyle
         }
         if (data.Properties && data.Properties.StrokeColor) {
-            this.strokeColor = new SColor(data.Properties.StrokeColor);
+            this.strokeColor = new SColor(data.Properties.StrokeColor)
         }
     } // Constructor
     /** 是否完成绘制  */
     get status() {
-        return this._status;
+        return this._status
     }
     set status(v) {
-        this._status = v;
+        this._status = v
         if (v == SItemStatus.Edit) {
-            this.zOrder = ItemOrder.markOrder;
+            this.zOrder = ItemOrder.markOrder
+        } else {
+            this.zOrder = ItemOrder.lineOrder
         }
-        else {
-            this.zOrder = ItemOrder.lineOrder;
-        }
-        this.update();
+        this.update()
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     /** 接收事件作出修改  */
     changePos() {
         if (this.startItem) {
             // 判断删除equip后,不移动
             if (this.startItem.parent) {
-                let scenePoint = this.startItem.boundingRect().center();
-                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y);
+                let scenePoint = this.startItem.boundingRect().center()
+                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y)
             }
         }
         if (this.endItem) {
             // 删除equip后
             if (this.endItem.parent) {
-                let scenePoint = this.endItem.boundingRect().center();
-                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y);
+                let scenePoint = this.endItem.boundingRect().center()
+                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y)
             }
         }
     }
     toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Properties.Line = this.line.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Properties.Line = this.line.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
-            };
-        });
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineStyle = this.lineStyle;
+                Y: pos.y,
+            }
+        })
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineStyle = this.lineStyle
         if (this.startItem && this.startItem.parent) {
-            this.data.Properties.StartItemId = this.startItem.id;
+            this.data.Properties.StartItemId = this.startItem.id
         }
         if (this.endItem && this.endItem.parent) {
-            this.data.Properties.EndItemId = this.endItem.id;
+            this.data.Properties.EndItemId = this.endItem.id
         }
-        return this.data;
+        return this.data
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            painter.pen.color = new SColor(this.strokeColor);
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            painter.pen.color = new SColor(this.strokeColor)
             if (this.lineStyle == SLineStyle.Dashed) {
-                painter.pen.lineDash = [
-                    painter.toPx(this.lineWidth * 3),
-                    painter.toPx(this.lineWidth * 7)
-                ];
+                painter.pen.lineDash = [painter.toPx(this.lineWidth * 3), painter.toPx(this.lineWidth * 7)]
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [painter.toPx(this.lineWidth), painter.toPx(this.lineWidth)]
             }
-            else if (this.lineStyle == SLineStyle.Dotted) {
-                painter.pen.lineDash = [
-                    painter.toPx(this.lineWidth),
-                    painter.toPx(this.lineWidth)
-                ];
-            }
-            painter.drawLine(this.line[0], this.line[1]);
-        }
-        else {
-            super.onDraw(painter);
+            painter.drawLine(this.line[0], this.line[1])
+        } else {
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 } // Class SLineMarkerItem

+ 51 - 58
src/lib/items/SLineMarkerItem.ts

@@ -1,8 +1,7 @@
-
-import { SGraphItem, SLineStyle } from "@saga-web/graph/lib";
-import { SPoint, SPainter, SColor, SLineCapStyle } from "@saga-web/draw/lib";
-import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib';
-import { Marker } from '../types/Marker';
+import { SGraphItem, SLineStyle } from '@saga-web/graph/lib'
+import { SPoint, SPainter, SColor, SLineCapStyle } from '@saga-web/draw/lib'
+import { ItemOrder, SLineItem, SItemStatus } from '@saga-web/big/lib'
+import { Marker } from '../types/Marker'
 
 /**
  * 标识对象Item(线类型)
@@ -10,38 +9,38 @@ import { Marker } from '../types/Marker';
  * * @author  张宇(taohuzy@163.com)
  */
 export class SLineMarkerItem extends SLineItem {
-     /** 起始锚点  */
-    startItem: SGraphItem | null = null;
+    /** 起始锚点  */
+    startItem: SGraphItem | null = null
     /** 结束锚点  */
-    endItem: SGraphItem | null = null;
+    endItem: SGraphItem | null = null
 
     /** 标识对象数据 */
-    data: Marker;
+    data: Marker
 
     /** 是否完成绘制  */
     get status(): SItemStatus {
-        return this._status;
+        return this._status
     }
     set status(v: SItemStatus) {
-        this._status = v;
+        this._status = v
         if (v == SItemStatus.Edit) {
-            this.zOrder = ItemOrder.markOrder;
+            this.zOrder = ItemOrder.markOrder
         } else {
-            this.zOrder = ItemOrder.lineOrder;
+            this.zOrder = ItemOrder.lineOrder
         }
-        this.update();
+        this.update()
     }
 
     /** 是否蒙版遮罩  */
-    _maskFlag: boolean = false;
+    _maskFlag: boolean = false
     get maskFlag(): boolean {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v: boolean) {
         if (v === this._maskFlag) {
             return
         }
-        this._maskFlag = v;
+        this._maskFlag = v
         this.update()
     }
 
@@ -52,27 +51,27 @@ export class SLineMarkerItem extends SLineItem {
      * @param data      标识对象数据
      */
     constructor(parent: SGraphItem | null, data: Marker) {
-        super(parent);
-        this.zOrder = ItemOrder.lineOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.moveTo(data.Pos.X, data.Pos.Y);
+        super(parent)
+        this.zOrder = ItemOrder.lineOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.moveTo(data.Pos.X, data.Pos.Y)
         if (data.Properties && data.Properties.Line) {
-            let setPointList: SPoint[];
-            setPointList = data.Properties.Line.map(i => {
+            let setPointList: SPoint[]
+            setPointList = data.Properties.Line.map((i) => {
                 return new SPoint(i.X, i.Y)
             })
-            this.line = setPointList;
+            this.line = setPointList
         }
         if (data.Properties && data.Properties.LineWidth) {
-            this.lineWidth = data.Properties.LineWidth;
+            this.lineWidth = data.Properties.LineWidth
         }
         if (data.Properties && data.Properties.LineStyle) {
-            this.lineStyle = data.Properties.LineStyle;
+            this.lineStyle = data.Properties.LineStyle
         }
         if (data.Properties && data.Properties.StrokeColor) {
-            this.strokeColor = new SColor(data.Properties.StrokeColor);
+            this.strokeColor = new SColor(data.Properties.StrokeColor)
         }
     } // Constructor
 
@@ -81,59 +80,53 @@ export class SLineMarkerItem extends SLineItem {
         if (this.startItem) {
             // 判断删除equip后,不移动
             if (this.startItem.parent) {
-                let scenePoint: SPoint = this.startItem.boundingRect().center();
-                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y);
+                let scenePoint: SPoint = this.startItem.boundingRect().center()
+                this.line[0] = this.startItem.mapToScene(scenePoint.x, scenePoint.y)
             }
         }
         if (this.endItem) {
             // 删除equip后
             if (this.endItem.parent) {
-                let scenePoint: SPoint = this.endItem.boundingRect().center();
-                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y);
+                let scenePoint: SPoint = this.endItem.boundingRect().center()
+                this.line[1] = this.endItem.mapToScene(scenePoint.x, scenePoint.y)
             }
         }
     }
 
     toData(): Marker {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Properties.Line = this.line.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Properties.Line = this.line.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
+                Y: pos.y,
             }
-        });
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineStyle = this.lineStyle;
+        })
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineStyle = this.lineStyle
         if (this.startItem && this.startItem.parent) {
-            this.data.Properties.StartItemId = this.startItem.id;
+            this.data.Properties.StartItemId = this.startItem.id
         }
         if (this.endItem && this.endItem.parent) {
-            this.data.Properties.EndItemId = this.endItem.id;
+            this.data.Properties.EndItemId = this.endItem.id
         }
-        return this.data;
+        return this.data
     }
 
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            painter.pen.color = new SColor(this.strokeColor);
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            painter.pen.color = new SColor(this.strokeColor)
             if (this.lineStyle == SLineStyle.Dashed) {
-                painter.pen.lineDash = [
-                    painter.toPx(this.lineWidth * 3),
-                    painter.toPx(this.lineWidth * 7)
-                ];
-            }
-            else if (this.lineStyle == SLineStyle.Dotted) {
-                painter.pen.lineDash = [
-                    painter.toPx(this.lineWidth),
-                    painter.toPx(this.lineWidth)
-                ];
+                painter.pen.lineDash = [painter.toPx(this.lineWidth * 3), painter.toPx(this.lineWidth * 7)]
+            } else if (this.lineStyle == SLineStyle.Dotted) {
+                painter.pen.lineDash = [painter.toPx(this.lineWidth), painter.toPx(this.lineWidth)]
             }
-            painter.drawLine(this.line[0], this.line[1]);
+            painter.drawLine(this.line[0], this.line[1])
         } else {
-            super.onDraw(painter);
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 } // Class SLineMarkerItem

+ 96 - 96
src/lib/items/SSCPZZoneLegendItem.js

@@ -1,7 +1,7 @@
-import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
-import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until";
-import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
+import { STextItem } from '@saga-web/graph/lib'
+import { hexify } from '@/components/mapClass/until'
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
 /**
  * 图例节点Item(区域类型 --石材铺装)
  *
@@ -15,181 +15,181 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent, data) {
-        super(parent);
+        super(parent)
         /** text item   */
-        this.textItem = new STextItem(this);
+        this.textItem = new STextItem(this)
         /** 是否显示文字  */
-        this._showText = true;
+        this._showText = true
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        this._maskFlag = false
+        this.textItem.isTransform = false
+        this.zOrder = ItemOrder.polygonOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.text = data.Name
         if (data) {
-            this.setPointList = [];
-            let setPointList;
+            this.setPointList = []
+            let setPointList
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine;
-                }
-                else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y));
-                    });
-                    this.setPointList = setPointList;
+                    this.setPointList = data.OutLine
+                } else {
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
+                    })
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
-                this.lineWidth = data.Properties.LineWidth;
+                this.lineWidth = data.Properties.LineWidth
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+                this.strokeColor = data.Properties.StrokeColor.includes('#')
+                    ? new SColor(data.Properties.StrokeColor)
+                    : new SColor(hexify(data.Properties.StrokeColor))
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
+                this.fillColor = data.Properties.FillColor.includes('#')
+                    ? new SColor(data.Properties.FillColor)
+                    : new SColor(hexify(data.Properties.FillColor))
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color);
+                this.color = new SColor(data.Properties.color)
             }
             if (data.Properties.font) {
-                this.font = new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont('sans-serif', data.Properties.font)
             }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length);
-            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.y / arr.length);
-            }, 0);
-            this.textItem.moveTo(x, y);
-        });
+                    return pre + cur.x / arr.length
+                }, 0),
+                y = this.getPointList.reduce((pre, cur, index, arr) => {
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
+        })
     }
     get text() {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color() {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font() {
-        return this.textItem.font;
+        return this.textItem.font
     }
     set font(v) {
-        this.textItem.font = v;
+        this.textItem.font = v
     }
     get status() {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value) {
-        this._status = value;
+        this._status = value
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
             if (this.undoStack) {
-                this.undoStack.clear();
+                this.undoStack.clear()
             }
-        }
-        else if (value == SItemStatus.Edit) {
+        } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
-        }
-        else if (value == SItemStatus.Create) {
+            this.textItem.moveable = true
+        } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false;
+            this.showText = false
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
         }
-        this.update();
+        this.update()
     }
-    ;
     get showText() {
-        return this._showText;
+        return this._showText
     }
     set showText(v) {
         if (v === this._showText) {
-            return;
+            return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
-        }
-        else {
-            this.textItem.hide();
+            this.textItem.show()
+        } else {
+            this.textItem.hide()
         }
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     /** 图例说明  */
     set itemExplain(v) {
-        this.data.Properties.ItemExplain = v;
+        this.data.Properties.ItemExplain = v
     }
     get itemExplain() {
-        return this.data.Properties.ItemExplain;
+        return this.data.Properties.ItemExplain
     }
     toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.text;
-        this.data.Properties.FillColor = this.fillColor.value;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.OutLine = this.getPointList.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Name = this.text
+        this.data.Properties.FillColor = this.fillColor.value
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
-            };
-        });
-        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
-        this.data.Properties.font = this.font.size;
-        this.data.Properties.color = this.color.value;
-        return this.data;
+                Y: pos.y,
+            }
+        })
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
+        this.data.Properties.font = this.font.size
+        this.data.Properties.color = this.color.value
+        return this.data
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            let brushcolor = new SColor(this.fillColor);
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
-        }
-        else {
-            super.onDraw(painter);
+            painter.drawPolygon([...this.pointList])
+        } else {
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 98 - 94
src/lib/items/SSCPZZoneLegendItem.ts

@@ -1,10 +1,9 @@
-
-import { SGraphItem, SLineStyle } from "@saga-web/graph/lib";
-import { Legend } from '../types/Legend';
-import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
-import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until"
-import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SGraphItem, SLineStyle } from '@saga-web/graph/lib'
+import { Legend } from '../types/Legend'
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
+import { STextItem } from '@saga-web/graph/lib'
+import { hexify } from '@/components/mapClass/until'
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
 /**
  * 图例节点Item(区域类型 --石材铺装)
  *
@@ -12,23 +11,23 @@ import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
  */
 export class SSCPZZoneLegendItem extends SPolygonItem {
     /** 图例节点对象数据 */
-    data: Legend;
+    data: Legend
 
     /** text item   */
-    textItem: STextItem = new STextItem(this);
+    textItem: STextItem = new STextItem(this)
 
     get text(): string {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v: string) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color(): SColor {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v: SColor) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font(): SFont {
         return this.textItem.font
@@ -38,62 +37,62 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
     }
 
     get status(): SItemStatus {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value: SItemStatus) {
-        this._status = value;
+        this._status = value
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
 
             if (this.undoStack) {
-                this.undoStack.clear();
+                this.undoStack.clear()
             }
         } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
+            this.textItem.moveable = true
         } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false;
+            this.showText = false
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
         }
-        this.update();
-    };
+        this.update()
+    }
 
     /** 是否显示文字  */
-    _showText: boolean = true;
+    _showText: boolean = true
     get showText(): boolean {
-        return this._showText;
+        return this._showText
     }
     set showText(v: boolean) {
         if (v === this._showText) {
             return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
+            this.textItem.show()
         } else {
-            this.textItem.hide();
+            this.textItem.hide()
         }
     }
 
     /** 是否蒙版遮罩  */
-    _maskFlag: boolean = false;
+    _maskFlag: boolean = false
     get maskFlag(): boolean {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v: boolean) {
         if (v === this._maskFlag) {
             return
         }
-        this._maskFlag = v;
+        this._maskFlag = v
         this.update()
     }
 
@@ -112,24 +111,24 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent: SGraphItem | null, data: Legend) {
-        super(parent);
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        super(parent)
+        this.textItem.isTransform = false
+        this.zOrder = ItemOrder.polygonOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.text = data.Name
         if (data) {
-            this.setPointList = [];
-            let setPointList: SPoint[];
+            this.setPointList = []
+            let setPointList: SPoint[]
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
-                    this.setPointList = data.OutLine;
+                    this.setPointList = data.OutLine
                 } else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y))
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
                     })
-                    this.setPointList = setPointList;
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
@@ -137,92 +136,97 @@ export class SSCPZZoneLegendItem extends SPolygonItem {
                 this.lineWidth = data.Properties.LineWidth
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+                this.strokeColor = data.Properties.StrokeColor.includes('#')
+                    ? new SColor(data.Properties.StrokeColor)
+                    : new SColor(hexify(data.Properties.StrokeColor))
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+                this.fillColor = data.Properties.FillColor.includes('#')
+                    ? new SColor(data.Properties.FillColor)
+                    : new SColor(hexify(data.Properties.FillColor))
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color);
+                this.color = new SColor(data.Properties.color)
             }
             if (data.Properties.font) {
-                this.font = new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont('sans-serif', data.Properties.font)
             }
             switch (data.Properties.LineDash) {
-                case "solid":
-                    this.lineStyle = SLineStyle.Solid;
-                    break;
-                case "dotted":
-                    this.lineStyle = SLineStyle.Dotted;
-                    break;
-                case "dashed":
-                    this.lineStyle = SLineStyle.Dashed;
-                    break;
+                case 'solid':
+                    this.lineStyle = SLineStyle.Solid
+                    break
+                case 'dotted':
+                    this.lineStyle = SLineStyle.Dotted
+                    break
+                case 'dashed':
+                    this.lineStyle = SLineStyle.Dashed
+                    break
                 default:
-                    this.lineStyle = SLineStyle.Solid;
+                    this.lineStyle = SLineStyle.Solid
             }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length)
-            }, 0),
+                    return pre + cur.x / arr.length
+                }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + (cur.y / arr.length)
-                }, 0);
-            this.textItem.moveTo(x, y);
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
         })
     }
 
     toData(): any {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.text;
-        this.data.Properties.FillColor = this.fillColor.value;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Name = this.text
+        this.data.Properties.FillColor = this.fillColor.value
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineWidth = this.lineWidth
         switch (this.lineStyle) {
             case SLineStyle.Solid:
-                this.data.Properties.LineDash = "solid";
-                break;
+                this.data.Properties.LineDash = 'solid'
+                break
             case SLineStyle.Dotted:
-                this.data.Properties.LineDash = "dotted";
-                break;
+                this.data.Properties.LineDash = 'dotted'
+                break
             case SLineStyle.Dashed:
-                this.data.Properties.LineDash = "dashed";
-                break;
+                this.data.Properties.LineDash = 'dashed'
+                break
             default:
-                this.data.Properties.LineDash = "solid";
+                this.data.Properties.LineDash = 'solid'
         }
-        this.data.OutLine = this.getPointList.map(pos => {
+        this.data.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
+                Y: pos.y,
             }
-        });
-        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
-        this.data.Properties.font =  this.font.size;
-        this.data.Properties.color =  this.color.value;
-        return this.data;
+        })
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
+        this.data.Properties.font = this.font.size
+        this.data.Properties.color = this.color.value
+        return this.data
     }
 
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
             let color = new SColor(this.strokeColor)
-            color.alpha = 100;
+            color.alpha = color.alpha / 2
             let brushcolor = new SColor(this.fillColor)
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
+            painter.drawPolygon([...this.pointList])
         } else {
-            super.onDraw(painter);
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 94 - 94
src/lib/items/SZoneLegendItem.js

@@ -1,7 +1,7 @@
-import { SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
-import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until";
-import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
+import { SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
+import { STextItem } from '@saga-web/graph/lib'
+import { hexify } from '@/components/mapClass/until'
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
 /**
  * 图例节点Item(区域类型)
  *
@@ -15,175 +15,175 @@ export class SZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent, data) {
-        super(parent);
+        super(parent)
         /** text item   */
-        this.textItem = new STextItem(this);
+        this.textItem = new STextItem(this)
         /** 是否显示文字  */
-        this._showText = true;
+        this._showText = true
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        this._maskFlag = false
+        this.textItem.isTransform = false
+        this.zOrder = ItemOrder.polygonOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.text = data.Name
         if (data) {
-            this.setPointList = [];
-            let setPointList;
+            this.setPointList = []
+            let setPointList
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
                     // @ts-ignore
-                    this.setPointList = data.OutLine;
-                }
-                else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y));
-                    });
-                    this.setPointList = setPointList;
+                    this.setPointList = data.OutLine
+                } else {
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
+                    })
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
             if (data.Properties.LineWidth) {
-                this.lineWidth = data.Properties.LineWidth;
+                this.lineWidth = data.Properties.LineWidth
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+                this.strokeColor = data.Properties.StrokeColor.includes('#')
+                    ? new SColor(data.Properties.StrokeColor)
+                    : new SColor(hexify(data.Properties.StrokeColor))
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor));
+                this.fillColor = data.Properties.FillColor.includes('#')
+                    ? new SColor(data.Properties.FillColor)
+                    : new SColor(hexify(data.Properties.FillColor))
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color);
+                this.color = new SColor(data.Properties.color)
             }
             if (data.Properties.font) {
-                this.font = new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont('sans-serif', data.Properties.font)
             }
             //    if( data.Properties.LineDash){
             //     this.LineDash =this._legend.Properties.LineDash
             //    }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length);
-            }, 0), y = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.y / arr.length);
-            }, 0);
-            this.textItem.moveTo(x, y);
-        });
+                    return pre + cur.x / arr.length
+                }, 0),
+                y = this.getPointList.reduce((pre, cur, index, arr) => {
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
+        })
     }
     get text() {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color() {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font() {
-        return this.textItem.font;
+        return this.textItem.font
     }
     set font(v) {
-        this.textItem.font = v;
+        this.textItem.font = v
     }
     get status() {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value) {
-        this._status = value;
+        this._status = value
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
             if (this.undoStack) {
-                this.undoStack.clear();
+                this.undoStack.clear()
             }
-        }
-        else if (value == SItemStatus.Edit) {
+        } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
-        }
-        else if (value == SItemStatus.Create) {
+            this.textItem.moveable = true
+        } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false;
+            this.showText = false
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
         }
-        this.update();
+        this.update()
     }
-    ;
     get showText() {
-        return this._showText;
+        return this._showText
     }
     set showText(v) {
         if (v === this._showText) {
-            return;
+            return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
-        }
-        else {
-            this.textItem.hide();
+            this.textItem.show()
+        } else {
+            this.textItem.hide()
         }
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     toData() {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.name;
-        this.data.Properties.FillColor = this.fillColor.value;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineWidth = this.lineWidth;
-        this.data.OutLine = this.getPointList.map(pos => {
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Name = this.name
+        this.data.Properties.FillColor = this.fillColor.value
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineWidth = this.lineWidth
+        this.data.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
-            };
-        });
-        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y };
-        this.data.Properties.font = this.font.size;
-        this.data.Properties.color = this.color.value;
-        return this.data;
+                Y: pos.y,
+            }
+        })
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
+        this.data.Properties.font = this.font.size
+        this.data.Properties.color = this.color.value
+        return this.data
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            let brushcolor = new SColor(this.fillColor);
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            let brushcolor = new SColor(this.fillColor)
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
-        }
-        else {
-            super.onDraw(painter);
+            painter.drawPolygon([...this.pointList])
+        } else {
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 101 - 97
src/lib/items/SZoneLegendItem.ts

@@ -1,11 +1,10 @@
-
-import { SGraphItem, SLineStyle } from "@saga-web/graph/lib";
-import { Legend } from '../types/Legend';
-import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from "@saga-web/draw";
-import { STextItem } from '@saga-web/graph/lib';
-import { hexify } from "@/components/mapClass/until"
-import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib';
-import { SMouseEvent } from "@saga-web/base/lib";
+import { SGraphItem, SLineStyle } from '@saga-web/graph/lib'
+import { Legend } from '../types/Legend'
+import { SPainter, SColor, SFont, SPoint, SLineCapStyle } from '@saga-web/draw'
+import { STextItem } from '@saga-web/graph/lib'
+import { hexify } from '@/components/mapClass/until'
+import { SItemStatus, ItemOrder, SPolygonItem } from '@saga-web/big/lib'
+import { SMouseEvent } from '@saga-web/base/lib'
 /**
  * 图例节点Item(区域类型)
  *
@@ -13,88 +12,88 @@ import { SMouseEvent } from "@saga-web/base/lib";
  */
 export class SZoneLegendItem extends SPolygonItem {
     /** 图例节点对象数据 */
-    data: Legend;
+    data: Legend
 
     /** text item   */
-    textItem: STextItem = new STextItem(this);
+    textItem: STextItem = new STextItem(this)
 
     get text(): string {
-        return this.textItem.text;
+        return this.textItem.text
     }
     set text(v: string) {
-        this.textItem.text = v;
-        this.update();
+        this.textItem.text = v
+        this.update()
     }
     get color(): SColor {
-        return this.textItem.color;
+        return this.textItem.color
     }
     set color(v: SColor) {
-        this.textItem.color = v;
+        this.textItem.color = v
     }
     get font(): SFont {
-        return this.textItem.font;
+        return this.textItem.font
     }
     set font(v: SFont) {
-        this.textItem.font = v;
+        this.textItem.font = v
     }
 
     get status(): SItemStatus {
-        return this._status;
+        return this._status
     }
     // 编辑当前状态
     set status(value: SItemStatus) {
-        this._status = value;
+        this._status = value
         // 如果状态为show则需清栈
         if (value == SItemStatus.Normal) {
             // 切换显示状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换显示状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
 
             if (this.undoStack) {
-                this.undoStack.clear();
+                this.undoStack.clear()
             }
         } else if (value == SItemStatus.Edit) {
             // 切换编辑状态显示文本
-            this.showText = true;
+            this.showText = true
             // 切换编辑状态可移动文本
-            this.textItem.moveable = true;
+            this.textItem.moveable = true
         } else if (value == SItemStatus.Create) {
             // 切换创建状态不显示文本
-            this.showText = false;
+            this.showText = false
             // 切换创建状态不可移动文本
-            this.textItem.moveable = false;
+            this.textItem.moveable = false
         }
-        this.update();
-    };
+        this.update()
+    }
 
     /** 是否显示文字  */
-    _showText: boolean = true;
+    _showText: boolean = true
     get showText(): boolean {
-        return this._showText;
+        return this._showText
     }
     set showText(v: boolean) {
         if (v === this._showText) {
             return
         }
-        this._showText = v;
+        this._showText = v
         if (v) {
-            this.textItem.show();
+            this.textItem.show()
         } else {
-            this.textItem.hide();
+            this.textItem.hide()
         }
     }
 
     /** 是否蒙版遮罩  */
-    _maskFlag: boolean = false;
+    _maskFlag: boolean = false
     get maskFlag(): boolean {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v: boolean) {
         if (v === this._maskFlag) {
             return
         }
-        this._maskFlag = v;
+        this._maskFlag = v
         this.update()
     }
 
@@ -105,25 +104,25 @@ export class SZoneLegendItem extends SPolygonItem {
      * @param data      图例节点对象数据
      */
     constructor(parent: SGraphItem | null, data: Legend) {
-        super(parent);
-        this.textItem.isTransform = false;
-        this.zOrder = ItemOrder.polygonOrder;
-        this.data = data;
-        this.id = data.ID;
-        this.name = data.Name;
-        this.text = data.Name;
+        super(parent)
+        this.textItem.isTransform = false
+        this.zOrder = ItemOrder.polygonOrder
+        this.data = data
+        this.id = data.ID
+        this.name = data.Name
+        this.text = data.Name
         if (data) {
-            this.setPointList = [];
-            let setPointList: SPoint[];
+            this.setPointList = []
+            let setPointList: SPoint[]
             if (data.OutLine) {
                 if (data.OutLine[0] instanceof SPoint) {
                     // @ts-ignore
-                    this.setPointList = data.OutLine;
+                    this.setPointList = data.OutLine
                 } else {
-                    setPointList = data.OutLine.map(i => {
-                        return (new SPoint(i.X, i.Y))
+                    setPointList = data.OutLine.map((i) => {
+                        return new SPoint(i.X, i.Y)
                     })
-                    this.setPointList = setPointList;
+                    this.setPointList = setPointList
                 }
             }
             // 设置线宽
@@ -131,92 +130,97 @@ export class SZoneLegendItem extends SPolygonItem {
                 this.lineWidth = data.Properties.LineWidth
             }
             if (data.Properties.StrokeColor) {
-                this.strokeColor = data.Properties.StrokeColor.includes('#') ? new SColor(data.Properties.StrokeColor) : new SColor(hexify(data.Properties.StrokeColor));
+                this.strokeColor = data.Properties.StrokeColor.includes('#')
+                    ? new SColor(data.Properties.StrokeColor)
+                    : new SColor(hexify(data.Properties.StrokeColor))
             }
             if (data.Properties.FillColor) {
-                this.fillColor = data.Properties.FillColor.includes('#') ? new SColor(data.Properties.FillColor) : new SColor(hexify(data.Properties.FillColor))
+                this.fillColor = data.Properties.FillColor.includes('#')
+                    ? new SColor(data.Properties.FillColor)
+                    : new SColor(hexify(data.Properties.FillColor))
             }
             if (data.Properties.TextPos) {
-                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y);
+                this.textItem.moveTo(data.Properties.TextPos.X, data.Properties.TextPos.Y)
             }
             if (data.Properties.color) {
-                this.color = new SColor(data.Properties.color);
+                this.color = new SColor(data.Properties.color)
             }
             if (data.Properties.font) {
-                this.font = new SFont("sans-serif", data.Properties.font);
+                this.font = new SFont('sans-serif', data.Properties.font)
             }
             switch (data.Properties.LineDash) {
-                case "solid":
-                    this.lineStyle = SLineStyle.Solid;
-                    break;
-                case "dotted":
-                    this.lineStyle = SLineStyle.Dotted;
-                    break;
-                case "dashed":
-                    this.lineStyle = SLineStyle.Dashed;
-                    break;
+                case 'solid':
+                    this.lineStyle = SLineStyle.Solid
+                    break
+                case 'dotted':
+                    this.lineStyle = SLineStyle.Dotted
+                    break
+                case 'dashed':
+                    this.lineStyle = SLineStyle.Dashed
+                    break
                 default:
-                    this.lineStyle = SLineStyle.Solid;
+                    this.lineStyle = SLineStyle.Solid
             }
         }
         // 监听多边形创建完成事件,并动态计算文本位置
-        this.connect("finishCreated", this, () => {
+        this.connect('finishCreated', this, () => {
             // 计算文本位置
             let x: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                return pre + (cur.x / arr.length)
-            }, 0),
+                    return pre + cur.x / arr.length
+                }, 0),
                 y: number = this.getPointList.reduce((pre, cur, index, arr) => {
-                    return pre + (cur.y / arr.length)
-                }, 0);
-            this.textItem.moveTo(x, y);
+                    return pre + cur.y / arr.length
+                }, 0)
+            this.textItem.moveTo(x, y)
         })
     }
 
     toData(): any {
-        this.data.Pos = { X: this.x, Y: this.y };
-        this.data.Name = this.name;
-        this.data.Properties.FillColor = this.fillColor.value;
-        this.data.Properties.StrokeColor = this.strokeColor.value;
-        this.data.Properties.LineWidth = this.lineWidth;
+        this.data.Pos = { X: this.x, Y: this.y }
+        this.data.Name = this.name
+        this.data.Properties.FillColor = this.fillColor.value
+        this.data.Properties.StrokeColor = this.strokeColor.value
+        this.data.Properties.LineWidth = this.lineWidth
         switch (this.lineStyle) {
             case SLineStyle.Solid:
-                this.data.Properties.LineDash = "solid";
-                break;
+                this.data.Properties.LineDash = 'solid'
+                break
             case SLineStyle.Dotted:
-                this.data.Properties.LineDash = "dotted";
-                break;
+                this.data.Properties.LineDash = 'dotted'
+                break
             case SLineStyle.Dashed:
-                this.data.Properties.LineDash = "dashed";
-                break;
+                this.data.Properties.LineDash = 'dashed'
+                break
             default:
-                this.data.Properties.LineDash = "solid";
+                this.data.Properties.LineDash = 'solid'
         }
-        this.data.OutLine = this.getPointList.map(pos => {
+        this.data.OutLine = this.getPointList.map((pos) => {
             return {
                 X: pos.x,
-                Y: pos.y
+                Y: pos.y,
             }
-        });
-        this.data.Properties.TextPos = {X: this.textItem.x, Y: this.textItem.y};
-        this.data.Properties.font =  this.font.size;
-        this.data.Properties.color =  this.color.value;
-        return this.data;
+        })
+        this.data.Properties.TextPos = { X: this.textItem.x, Y: this.textItem.y }
+        this.data.Properties.font = this.font.size
+        this.data.Properties.color = this.color.value
+        return this.data
     }
 
     onDraw(painter: SPainter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
             let color = new SColor(this.strokeColor)
-            color.alpha = 100;
+            color.alpha = color.alpha / 2
             let brushcolor = new SColor(this.fillColor)
-            brushcolor.alpha = 100;
-            painter.pen.color = color;
-            painter.pen.lineCapStyle = SLineCapStyle.Square;
-            painter.pen.lineWidth = painter.toPx(this._lineWidth);
-            painter.brush.color = brushcolor;
+            brushcolor.alpha = brushcolor.alpha / 2
+            painter.pen.color = color
+            painter.pen.lineCapStyle = SLineCapStyle.Square
+            painter.pen.lineWidth = painter.toPx(this._lineWidth)
+            painter.brush.color = brushcolor
             // @ts-ignore
-            painter.drawPolygon([...this.pointList]);
+            painter.drawPolygon([...this.pointList])
         } else {
-            super.onDraw(painter);
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 } // Class SZoneLegendItem

+ 63 - 63
src/lib/items/TipelineItem.js

@@ -1,158 +1,158 @@
-import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
-import { SColor } from '@saga-web/draw';
-import { SPoint } from "@saga-web/draw/lib";
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib'
+import { SColor } from '@saga-web/draw'
+import { SPoint } from '@saga-web/draw/lib'
 /**
  * 管道item
  *
  * */
 export class TipelineItem extends SPolylineItem {
     constructor(parent, data) {
-        super(parent, []);
+        super(parent, [])
         /** 起始锚点  */
-        this.startAnchor = null;
+        this.startAnchor = null
         /** 结束锚点  */
-        this.endAnchor = null;
+        this.endAnchor = null
         /** 对应的图例ID  */
-        this._graphElementId = "";
+        this._graphElementId = ''
         /** 关联节点1ID  */
-        this._node1Id = "";
+        this._node1Id = ''
         /** 关联节点2ID  */
-        this._node2Id = "";
+        this._node2Id = ''
         /** 关联锚点1ID  */
-        this._anchor1ID = "";
+        this._anchor1ID = ''
         /** 关联锚点2ID  */
-        this._anchor2ID = "";
+        this._anchor2ID = ''
         /** 是否蒙版遮罩  */
-        this._maskFlag = false;
+        this._maskFlag = false
         /** 数据存储  */
-        this.data = null;
-        this.zOrder = ItemOrder.polylineOrder;
-        this.pointList = data.PointList.map(item => {
-            return new SPoint(item.X, item.Y);
-        });
-        this.data = data;
-        this.name = data.Name;
-        this.id = data.ID;
+        this.data = null
+        this.zOrder = ItemOrder.polylineOrder
+        this.pointList = data.PointList.map((item) => {
+            return new SPoint(item.X, item.Y)
+        })
+        this.data = data
+        this.name = data.Name
+        this.id = data.ID
         if (data.GraphElementId) {
-            this._graphElementId = data.GraphElementId;
+            this._graphElementId = data.GraphElementId
         }
         if (data.Node1ID) {
-            this._node1Id = data.Node1ID;
+            this._node1Id = data.Node1ID
         }
         if (data.Node2ID) {
-            this._node2Id = data.Node2ID;
+            this._node2Id = data.Node2ID
         }
         if (data.Anchor1ID) {
-            this._anchor1ID = data.Anchor1ID;
+            this._anchor1ID = data.Anchor1ID
         }
         if (data.Anchor2ID) {
-            this._anchor2ID = data.Anchor2ID;
+            this._anchor2ID = data.Anchor2ID
         }
         if (data.Properties && data.Properties.Color) {
-            this.strokeColor = new SColor(data.Properties.Color);
+            this.strokeColor = new SColor(data.Properties.Color)
         }
         // if(data.Properties && data.Properties.LineDash){
         //   this.LineDash = data.Properties.LineDash
         // }
         if (data.Properties && data.Properties.LineWidth) {
-            this.lineWidth = data.Properties.LineWidth;
+            this.lineWidth = data.Properties.LineWidth
         }
     }
     get graphElementId() {
-        return this._graphElementId;
+        return this._graphElementId
     }
     set graphElementId(v) {
-        this._graphElementId = v;
+        this._graphElementId = v
         if (this.data) {
-            this.data.GraphElementId = this._graphElementId;
+            this.data.GraphElementId = this._graphElementId
         }
     }
     get node1Id() {
-        return this._node1Id;
+        return this._node1Id
     }
     set node1Id(v) {
-        this._node1Id = v;
+        this._node1Id = v
         if (this.data) {
-            this.data.Node1ID = this._node1Id;
+            this.data.Node1ID = this._node1Id
         }
     }
     get node2Id() {
-        return this._node2Id;
+        return this._node2Id
     }
     set node2Id(v) {
-        this._node2Id = v;
+        this._node2Id = v
         if (this.data) {
-            this.data.Node2ID = this._node2Id;
+            this.data.Node2ID = this._node2Id
         }
     }
     get anchor1ID() {
-        return this._anchor1ID;
+        return this._anchor1ID
     }
     set anchor1ID(v) {
-        this._anchor1ID = v;
+        this._anchor1ID = v
         if (this.data) {
-            this.data.Anchor1ID = this._anchor1ID;
+            this.data.Anchor1ID = this._anchor1ID
         }
     }
     get anchor2ID() {
-        return this._anchor2ID;
+        return this._anchor2ID
     }
     set anchor2ID(v) {
-        this._anchor2ID = v;
+        this._anchor2ID = v
         if (this.data) {
-            this.data.Anchor2ID = this._anchor2ID;
+            this.data.Anchor2ID = this._anchor2ID
         }
     }
     get maskFlag() {
-        return this._maskFlag;
+        return this._maskFlag
     }
     set maskFlag(v) {
         if (v === this._maskFlag) {
-            return;
+            return
         }
-        this._maskFlag = v;
-        this.update();
+        this._maskFlag = v
+        this.update()
     }
     /** 接收事件作出修改  */
     changePos() {
         if (this.startAnchor) {
             // 判断删除equip后,不移动
             if (this.startAnchor.parent && this.startAnchor.parent.parent) {
-                this.pointList[0] = this.startAnchor.mapToScene(0, 0);
+                this.pointList[0] = this.startAnchor.mapToScene(0, 0)
             }
         }
         if (this.endAnchor) {
             // 删除equip后
             if (this.endAnchor.parent && this.endAnchor.parent.parent) {
-                this.pointList[this.pointList.length - 1] = this.endAnchor.mapToScene(0, 0);
+                this.pointList[this.pointList.length - 1] = this.endAnchor.mapToScene(0, 0)
             }
         }
     }
     /** 获取data数据  */
     toData() {
-        let pointList = this.pointList.map(item => {
+        let pointList = this.pointList.map((item) => {
             return {
                 X: item.x,
-                Y: item.y
-            };
-        });
+                Y: item.y,
+            }
+        })
         if (this.data) {
-            this.data.PointList = pointList;
-            this.data.Properties.LineWidth = this.lineWidth;
+            this.data.PointList = pointList
+            this.data.Properties.LineWidth = this.lineWidth
             // this.data.Properties.LineDash = this.LineDash;
-            this.data.Properties.Color = this.strokeColor.value;
+            this.data.Properties.Color = this.strokeColor.value
         }
-        return this.data;
+        return this.data
     }
     onDraw(painter) {
         if (this.maskFlag && this.status == SItemStatus.Normal) {
-            let color = new SColor(this.strokeColor);
-            color.alpha = 100;
-            painter.pen.color = color;
-            painter.drawPolyline(this.pointList);
-        }
-        else {
-            super.onDraw(painter);
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            painter.pen.color = color
+            painter.drawPolyline(this.pointList)
+        } else {
+            this.selected = true
+            super.onDraw(painter)
         }
     }
 }

+ 156 - 157
src/lib/items/TipelineItem.ts

@@ -1,170 +1,169 @@
-import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib';
-import { SPainter, SColor } from '@saga-web/draw';
-import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib';
-import { Relation } from '../types/Relation';
-import { SPoint } from "@saga-web/draw/lib";
-import { Point } from "@saga-web/big/lib/types/Point";
+import { SPolylineItem, ItemOrder, SItemStatus } from '@saga-web/big/lib'
+import { SPainter, SColor } from '@saga-web/draw'
+import { SAnchorItem, SGraphItem } from '@saga-web/graph/lib'
+import { Relation } from '../types/Relation'
+import { SPoint } from '@saga-web/draw/lib'
+import { Point } from '@saga-web/big/lib/types/Point'
 
 /**
  * 管道item
  *
  * */
 export class TipelineItem extends SPolylineItem {
-  /** 起始锚点  */
-  startAnchor: SAnchorItem | null = null;
-  /** 结束锚点  */
-  endAnchor: SAnchorItem | null = null;
-  /** 对应的图例ID  */
-  _graphElementId: string = "";
-  get graphElementId(): string {
-    return this._graphElementId;
-  }
-  set graphElementId(v: string) {
-    this._graphElementId = v;
-    if (this.data) {
-      this.data.GraphElementId = this._graphElementId;
-    }
-  }
-  /** 关联节点1ID  */
-  _node1Id: string = "";
-  get node1Id(): string {
-    return this._node1Id;
-  }
-  set node1Id(v: string) {
-    this._node1Id = v;
-    if (this.data) {
-      this.data.Node1ID = this._node1Id;
-    }
-  }
-  /** 关联节点2ID  */
-  _node2Id: string = "";
-  get node2Id(): string {
-    return this._node2Id;
-  }
-  set node2Id(v: string) {
-    this._node2Id = v;
-    if (this.data) {
-      this.data.Node2ID = this._node2Id;
-    }
-  }
-  /** 关联锚点1ID  */
-  _anchor1ID: string = "";
-  get anchor1ID(): string {
-    return this._anchor1ID;
-  }
-  set anchor1ID(v: string) {
-    this._anchor1ID = v;
-    if (this.data) {
-      this.data.Anchor1ID = this._anchor1ID;
-    }
-  }
-  /** 关联锚点2ID  */
-  _anchor2ID: string = "";
-  get anchor2ID(): string {
-    return this._anchor2ID;
-  }
-  set anchor2ID(v: string) {
-    this._anchor2ID = v;
-    if (this.data) {
-      this.data.Anchor2ID = this._anchor2ID;
-    }
-  }
+    /** 起始锚点  */
+    startAnchor: SAnchorItem | null = null
+    /** 结束锚点  */
+    endAnchor: SAnchorItem | null = null
+    /** 对应的图例ID  */
+    _graphElementId: string = ''
+    get graphElementId(): string {
+        return this._graphElementId
+    }
+    set graphElementId(v: string) {
+        this._graphElementId = v
+        if (this.data) {
+            this.data.GraphElementId = this._graphElementId
+        }
+    }
+    /** 关联节点1ID  */
+    _node1Id: string = ''
+    get node1Id(): string {
+        return this._node1Id
+    }
+    set node1Id(v: string) {
+        this._node1Id = v
+        if (this.data) {
+            this.data.Node1ID = this._node1Id
+        }
+    }
+    /** 关联节点2ID  */
+    _node2Id: string = ''
+    get node2Id(): string {
+        return this._node2Id
+    }
+    set node2Id(v: string) {
+        this._node2Id = v
+        if (this.data) {
+            this.data.Node2ID = this._node2Id
+        }
+    }
+    /** 关联锚点1ID  */
+    _anchor1ID: string = ''
+    get anchor1ID(): string {
+        return this._anchor1ID
+    }
+    set anchor1ID(v: string) {
+        this._anchor1ID = v
+        if (this.data) {
+            this.data.Anchor1ID = this._anchor1ID
+        }
+    }
+    /** 关联锚点2ID  */
+    _anchor2ID: string = ''
+    get anchor2ID(): string {
+        return this._anchor2ID
+    }
+    set anchor2ID(v: string) {
+        this._anchor2ID = v
+        if (this.data) {
+            this.data.Anchor2ID = this._anchor2ID
+        }
+    }
+
+    /** 是否蒙版遮罩  */
+    _maskFlag: boolean = false
+    get maskFlag(): boolean {
+        return this._maskFlag
+    }
+    set maskFlag(v: boolean) {
+        if (v === this._maskFlag) {
+            return
+        }
+        this._maskFlag = v
+        this.update()
+    }
 
-  /** 是否蒙版遮罩  */
-  _maskFlag: boolean = false;
-  get maskFlag(): boolean {
-    return this._maskFlag;
-  }
-  set maskFlag(v: boolean) {
-    if (v === this._maskFlag) {
-      return
-    }
-    this._maskFlag = v;
-    this.update()
-  }
+    /** 数据存储  */
+    data: Relation | null = null
+    /** 接收事件作出修改  */
+    changePos() {
+        if (this.startAnchor) {
+            // 判断删除equip后,不移动
+            if (this.startAnchor.parent && this.startAnchor.parent.parent) {
+                this.pointList[0] = this.startAnchor.mapToScene(0, 0)
+            }
+        }
+        if (this.endAnchor) {
+            // 删除equip后
+            if (this.endAnchor.parent && this.endAnchor.parent.parent) {
+                this.pointList[this.pointList.length - 1] = this.endAnchor.mapToScene(0, 0)
+            }
+        }
+    }
 
-  /** 数据存储  */
-  data: Relation | null = null;
-  /** 接收事件作出修改  */
-  changePos() {
-    if (this.startAnchor) {
-      // 判断删除equip后,不移动
-      if (this.startAnchor.parent && this.startAnchor.parent.parent) {
-        this.pointList[0] = this.startAnchor.mapToScene(0, 0);
-      }
-    }
-    if (this.endAnchor) {
-      // 删除equip后
-      if (this.endAnchor.parent && this.endAnchor.parent.parent) {
-        this.pointList[
-          this.pointList.length - 1
-        ] = this.endAnchor.mapToScene(0, 0);
-      }
-    }
-  }
+    constructor(parent: SGraphItem | null, data: Relation) {
+        super(parent, [])
+        this.zOrder = ItemOrder.polylineOrder
+        this.pointList = data.PointList.map((item) => {
+            return new SPoint(item.X, item.Y)
+        })
+        this.data = data
+        this.name = data.Name
+        this.id = data.ID
+        if (data.GraphElementId) {
+            this._graphElementId = data.GraphElementId
+        }
+        if (data.Node1ID) {
+            this._node1Id = data.Node1ID
+        }
+        if (data.Node2ID) {
+            this._node2Id = data.Node2ID
+        }
+        if (data.Anchor1ID) {
+            this._anchor1ID = data.Anchor1ID
+        }
+        if (data.Anchor2ID) {
+            this._anchor2ID = data.Anchor2ID
+        }
+        if (data.Properties && data.Properties.Color) {
+            this.strokeColor = new SColor(data.Properties.Color)
+        }
+        // if(data.Properties && data.Properties.LineDash){
+        //   this.LineDash = data.Properties.LineDash
+        // }
+        if (data.Properties && data.Properties.LineWidth) {
+            this.lineWidth = data.Properties.LineWidth
+        }
+    }
 
-  constructor(parent: SGraphItem | null, data: Relation) {
-    super(parent, []);
-    this.zOrder = ItemOrder.polylineOrder;
-    this.pointList = data.PointList.map(item => {
-      return new SPoint(item.X, item.Y);
-    });
-    this.data = data;
-    this.name = data.Name;
-    this.id = data.ID;
-    if (data.GraphElementId) {
-      this._graphElementId = data.GraphElementId
-    }
-    if (data.Node1ID) {
-      this._node1Id = data.Node1ID
-    }
-    if (data.Node2ID) {
-      this._node2Id = data.Node2ID
-    }
-    if (data.Anchor1ID) {
-      this._anchor1ID = data.Anchor1ID
-    }
-    if (data.Anchor2ID) {
-      this._anchor2ID = data.Anchor2ID
-    }
-    if (data.Properties && data.Properties.Color) {
-      this.strokeColor = new SColor(data.Properties.Color);
-    }
-    // if(data.Properties && data.Properties.LineDash){
-    //   this.LineDash = data.Properties.LineDash
-    // }
-    if (data.Properties && data.Properties.LineWidth) {
-      this.lineWidth = data.Properties.LineWidth;
-    }
-  }
+    /** 获取data数据  */
+    toData(): Relation | null {
+        let pointList: Point[] = this.pointList.map((item) => {
+            return {
+                X: item.x,
+                Y: item.y,
+            }
+        })
 
-  /** 获取data数据  */
-  toData(): Relation | null {
-    let pointList: Point[] = this.pointList.map(item => {
-      return {
-        X: item.x,
-        Y: item.y
-      }
-    });
+        if (this.data) {
+            this.data.PointList = pointList
+            this.data.Properties.LineWidth = this.lineWidth
+            // this.data.Properties.LineDash = this.LineDash;
+            this.data.Properties.Color = this.strokeColor.value
+        }
 
-    if (this.data) {
-      this.data.PointList = pointList;
-      this.data.Properties.LineWidth = this.lineWidth;
-      // this.data.Properties.LineDash = this.LineDash;
-      this.data.Properties.Color = this.strokeColor.value;
+        return this.data
     }
 
-    return this.data
-  }
-
-  onDraw(painter: SPainter) {
-    if (this.maskFlag && this.status == SItemStatus.Normal) {
-      let color = new SColor(this.strokeColor)
-      color.alpha = 100;
-      painter.pen.color = color;
-      painter.drawPolyline(this.pointList);
-    } else {
-      super.onDraw(painter);
-    }
-  }
-}
+    onDraw(painter: SPainter) {
+        if (this.maskFlag && this.status == SItemStatus.Normal) {
+            let color = new SColor(this.strokeColor)
+            color.alpha = color.alpha / 2
+            painter.pen.color = color
+            painter.drawPolyline(this.pointList)
+        } else {
+            this.selected = true
+            super.onDraw(painter)
+        }
+    }
+}

+ 14 - 0
src/main.ts

@@ -28,8 +28,22 @@ Vue.use(cookies)
 import Pui from 'meri-design'
 import 'meri-design/dist/index.css'
 import 'leaflet/dist/leaflet.css'
+
 Vue.use(Pui)
 
+ 
+//////////模拟传入参数
+const username = 'lengqiang'
+/////////////////
+// 在跳入路由之前要请求获取权限信息
+// console.log(store.state.isrequestAuth)
+// router.beforeEach(async (to, from, next) => {
+//     if (!store.state.isrequestAuth) {
+//         await store.dispatch('getUserInfo', username)
+//         await store.dispatch('getFloors')
+//     }
+//     next()
+// })
 new Vue({
     router,
     store,

+ 16 - 111
src/router/index.js

@@ -1,15 +1,15 @@
 import Vue from 'vue'
 import store from '@/store'
 import VueRouter from 'vue-router'
-import {
-    query
-} from '@/utils/query'
+import { query } from '@/utils/query'
+
+let level = 0
 Vue.use(VueRouter)
 const routes = [
     // 登陆页面
     {
         path: '/',
-        redirect: '/home/overview',
+        redirect: '/home/overview',        // 只有区域,及区域以上用户才能进入总部首页这一套
     },
     {
         path: '/404',
@@ -79,10 +79,21 @@ router.beforeEach(async (to, from, next) => {
         const token = query().token
         const ssoToken = store.getters['ssoToken']
         if (ssoToken) {
+            // if (to.path === '/group' ||  to.path === '/home/homepage') {
+            //     next()
+            //     return
+            // } 
             store.commit('SETSSOTOKEN', ssoToken)
             await store.dispatch('getUserInfo', router)
             await store.dispatch('getFloors')
             await store.dispatch('getBrand')
+            let level =store.state.accessLevel
+            console.log(level)
+            // if (level ===0) {
+            //     next('/group')
+            // } else {
+            //     next('/home/homepage')
+            // }
             next()
         } else if (token) {
             store.commit('SETSSOTOKEN', token)
@@ -100,6 +111,7 @@ router.beforeEach(async (to, from, next) => {
                 signal = new Date().getTime(),
                 version = '1.0.0'
             window.location.href = `${ssoServer}/login?systemcode=${systemcode}&signal=${signal}&version=${version}`
+            
         }
     } else {
         next()
@@ -107,110 +119,3 @@ router.beforeEach(async (to, from, next) => {
     }
 })
 export default router
-
-// import Vue from "vue"
-// import store from "@/store"
-// import VueRouter from "vue-router"
-// import {
-//     query
-// } from "@/utils/query"
-// Vue.use(VueRouter)
-
-// const routes = [
-//     // 登陆页面
-//     {
-//         path: "/",
-//         redirect: "/home/overview",
-//     },
-//     {
-//         path: "/404",
-//         component: () => import("../components/404"),
-//     },
-//     // home
-//     {
-//         path: "/home",
-//         name: "home",
-//         component: () => import("../views/index"),
-//         redirect: "/home/first",
-//         children: [{
-//                 path: "first",
-//                 component: () => import("../views/first"),
-//             },
-//             //概览
-//             {
-//                 path: "overview",
-//                 component: () => import("../views/overview"),
-//             },
-//             // 楼层功能
-//             {
-//                 path: "floorFunc",
-//                 component: () => import("../views/floorFunc"),
-//             },
-//             // 设备设施
-//             {
-//                 path: "equipment",
-//                 component: () => import("../views/equipment"),
-//             },
-//             // 其他功能
-//             {
-//                 path: "other",
-//                 component: () => import("../views/other"),
-//             },
-//             // 分析
-//             {
-//                 path: "analysis",
-//                 component: () => import("../views/analysis"),
-//             },
-//             //图例库管理
-//             {
-//                 path: "legendLibrary",
-//                 component: () => import("../views/legendLibrary"),
-//             },
-//             //图例绘制规则
-//             {
-//                 path: "legendRules",
-//                 component: () => import("../views/legendRules"),
-//             },
-//         ],
-//     },
-// ]
-// const router = new VueRouter({
-//     mode: "history",
-//     base: process.env.BASE_URL,
-//     routes,
-// })
-// const ignore = ["/404"]
-// router.beforeEach(async (to, from, next) => {
-//     next()
-//     // if (!ignore.includes(to.path)) {
-//     //     const token = query().token
-//     //     const ssoToken = store.getters["ssoToken"]
-//     //     if (ssoToken) {
-//     //         store.commit("SETSSOTOKEN", ssoToken)
-//     //         await store.dispatch("getUserInfo", router)
-//     //         await store.dispatch("getFloors")
-//     //         await store.dispatch("getBrand")
-//     //         next()
-//     //     } else if (token) {
-//     //         store.commit("SETSSOTOKEN", token)
-//     //         await store.dispatch("getUserInfo", router)
-//     //         next()
-//     //     } else {
-//     //         let lastRoute = {
-//     //             path: to.path,
-//     //             params: to.params,
-//     //             query: to.query,
-//     //         }
-//     //         store.commit("SETLASTROUTER", lastRoute)
-//     //         let ssoServer = "http://oauth.wanda-dev.cn"
-//     //         let systemcode = "CAD156",
-//     //             signal = new Date().getTime(),
-//     //             version = "1.0.0"
-//     //         window.location.href = `${ssoServer}/login?systemcode=${systemcode}&signal=${signal}&version=${version}`
-//     //     }
-//     // } else {
-//     //     next()
-//     //     return
-//     // }
-// })
-// export default router

+ 19 - 11
src/store/index.js

@@ -14,8 +14,8 @@ import router from '../router'
 Vue.use(Vuex)
 export default new Vuex.Store({
     state: {
-        // ssoToken: 'admin:lengqiang',
-        ssoToken: null,
+        ssoToken: 'admin:lengqiang',
+        // ssoToken: null,
         isPreview: false,
         lastRoute: '',
         isrequestAuth: true, // 是否请求登录校验接口
@@ -38,6 +38,7 @@ export default new Vuex.Store({
         remarksText: '', //备注
         bunkObj: {}, // 铺位名称
         currentFloor: {}, //当前选中的楼层信息
+        accessLevel:0, // 
     },
     getters: {
         isPreview: (state) => state.isPreview,
@@ -54,6 +55,7 @@ export default new Vuex.Store({
         legendTable: (state) => state.legendTable,
         remarksText: (state) => state.remarksText,
         bunkObj: (state) => state.bunkObj,
+        showView: (state) => state.showView,
     },
     mutations: {
         SETISPREVIEW(state, data) {
@@ -81,6 +83,7 @@ export default new Vuex.Store({
             state.isMessage = data
         },
         SETFLOORS(state, data) {
+            state.floorSelect = []
             state.floorsArr = data
             if (data.length > 0) {
                 data.forEach((e) => {
@@ -114,6 +117,9 @@ export default new Vuex.Store({
         SETCURRENTFLOOR(state, data) {
             state.currentFloor = data
         },
+        STOREACCESSLEVEL(state, data) {
+            state.accessLevel = data.level
+        }
     },
     actions: {
         // 获取项目列表、userId
@@ -122,16 +128,18 @@ export default new Vuex.Store({
         }, palyload) {
             await login({}).then((res) => {
                 if (res.result == 'success') {
-                    // token校验成功 拿到权限
-                    commit('SETISREQUESTtAUTH', true)
-                    if (res.permissions.length == 0) {
-                        router.push('/404')
-                    }
-                    commit('SETAUTHMSG', res)
-                } else {
-                    commit('SETISREQUESTtAUTH', false)
-                    router.push('/404')
+                    commit('STOREACCESSLEVEL', res)
                 }
+                    // token校验成功 拿到权限
+                    //commit("SETISREQUESTtAUTH", true)
+                //     if (res.permissions.length == 0) {
+                //         router.push('/404')
+                //     }
+                //     commit('SETAUTHMSG', res)
+                // } else {
+                //     commit('SETISREQUESTtAUTH', false)
+                //     router.push('/404')
+                // }
             })
         },
         getFloors(context) {

+ 153 - 60
src/utils/ganttChart/GanttChart.js

@@ -1,9 +1,5 @@
 import moment from 'moment';
 /**
- * 数据定义区域
- *
- */
-/**
  * 甘特图
  * @param {} options 
  */
@@ -28,7 +24,7 @@ export function GanttChart(options) {
   // 拖动过程事件
   this.dragingEvent = null;
   // 拖动偏移量
-  this.offsetDis = options['viewWidth'] || 800;
+  this.offsetDis = (options['viewWidth']/2) || 800;
   // 拖动定时器
   this.dragTimer = null;
   // 每天的间隔宽度
@@ -42,20 +38,21 @@ export function GanttChart(options) {
   // 总天数
   this.daysCount = options['daysCount'] || 60;
   // 任务图距离顶部高度
-  this.graphTopDis = 20
+  this.graphTopDis = 40
   
   // 每像素代表的小时数
   this.timePerPix = this.cWidth/this.daysCount/24/3600
   // 当前视图开始时间,向前推N天
   this.startAt = moment().subtract(this.daysCount / 3, 'days');
   this.endAt = moment(this.startAt).add(this.daysCount, 'days');
-  this.graphDiv = document.getElementById(options['chartContainer']);
+  this.graphDiv = document.getElementById(options['chartParentContainer']);
+  this.chartContainer = options['chartContainer']
   // 图形容器组
   this.graphGroup = null;
   // 上一次拖动的事件
   this.lastDragEv = null;
-  // 回调事件
-  this.callback = options.callback || null;
+  // 当日刻度线
+  this.todayTimeLineEl = null;
 }
 
 
@@ -113,6 +110,7 @@ GanttChart.prototype.forceRefreshGraph = function() {
   this.tasks.forEach((topTask) => {
     topTask.gGroup = null;
   });
+  this.todayTimeLineEl = null
   this.gCanvas.destroy();
   this.initDrawingReady();
 }
@@ -122,17 +120,21 @@ GanttChart.prototype.forceRefreshGraph = function() {
  */
 GanttChart.prototype.initDrawingReady = function() {
   this.initCanvas();
-  this.initDragHandler();
-  this.drawTimeZone();
-  this.processData();
-  this.drawTasks();
-  this.graphGroup = null
+  setTimeout(() => {
+    this.initDragHandler();
+    this.drawTimeZone();
+    this.processData();
+    this.drawTasks();
+    this.graphGroup = null
+  }, 200);
 }
 
 /**
  * 翻页
  */
 GanttChart.prototype.pageTo = function(dir = 'next') {
+  this.draging = false;
+  this.endEvent = null;
   if (dir == 'next') {
     // 向后翻页`
     this.startAt = this.startAt.add(this.daysCount, 'days');
@@ -154,7 +156,7 @@ let lastClickAt = null;
  * 改变graphDiv 滚动距离
  * 到达边界距离后,刷新页面
  */
-GanttChart.prototype.doDrag = function(sEvent, eEvent) {
+GanttChart.prototype.doDrag = function(sEvent, eEvent) {  
   if (sEvent == null) {
     sEvent = this.startEvent;
   }
@@ -173,7 +175,7 @@ GanttChart.prototype.doDrag = function(sEvent, eEvent) {
     this.offsetDis = this.viewWidth;
     this.pageTo('prev');
   }
-  if (this.offsetDis - 20 >= 2964 ){ //cWidth - viewWidth) {
+  if ((this.offsetDis - 20) >= this.viewWidth*2.2 ){ //cWidth - viewWidth) {
     // 向后滑动,向后翻页
     console.log('此处应该向后翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'),this.offsetDis);
     this.offsetDis = this.viewWidth;
@@ -185,10 +187,9 @@ GanttChart.prototype.doDrag = function(sEvent, eEvent) {
 /**
  * 初始化抓取拖动事件
  */
-
 GanttChart.prototype.initDragHandler = function() {
   this.graphDiv.scrollLeft = this.offsetDis;
-  let _canvas = document.getElementsByTagName('canvas')[1];
+  let _canvas = this._canvas
   _canvas.addEventListener('mousedown', (ev) => {
     this.draging = true;
     this.startEvent = ev;
@@ -199,6 +200,13 @@ GanttChart.prototype.initDragHandler = function() {
     this.lastDragEv = ev;
   });
 
+
+  _canvas.addEventListener('mouseleave', (ev) => {
+    console.log('leave...恢复')
+    this.draging = false;
+    this.endEvent = ev;
+  });
+
   _canvas.addEventListener('mouseup', (ev) => {
     this.draging = false;
     this.endEvent = ev;
@@ -215,11 +223,6 @@ GanttChart.prototype.initDragHandler = function() {
       this.lastDragEv = ev;
     }
   });
-  _canvas.addEventListener('mouseleave', (ev) => {
-    console.log('leave...恢复')
-    this.draging = false;
-    this.endEvent = ev;
-  });
 }
 /**
  * 初始化画布
@@ -227,11 +230,13 @@ GanttChart.prototype.initDragHandler = function() {
  */
 
 GanttChart.prototype.initCanvas = function() {
+  console.error('初始化画布...')
   this.gCanvas = new G.Canvas({
-    container: 'ganttContainer',
+    container: this.chartContainer,
     width: this.cWidth,
-    height: 800,
+    height: this.cHeight,
   });
+  this._canvas = document.getElementsByTagName('canvas')[0];
 }
 
 /**
@@ -242,45 +247,59 @@ GanttChart.prototype.drawTimeZone = function() {
   console.log('时间段', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
   let start = moment(this.startAt);
   let timeGroup = this.gCanvas.addGroup();
+  this.timeGroupEl = timeGroup
   timeGroup._tname = 'TimeGroup';
-  // 绘制第一级
-  timeGroup.addShape('text', {
-    attrs: {
-      x: 20,
-      y: 20,
-      fontSize: 12,
-      text: start.format('YYYY-MM'),
-      lineDash: [10, 10],
-      fill: '#8D9399',
-    },
-  });
-  timeGroup.addShape('text', {
-    attrs: {
-      x: 20 + this.viewWidth,
-      y: 20,
-      fontSize: 12,
-      text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
-      lineDash: [10, 10],
-      fill: '#8D9399',
-    },
-  });
-  timeGroup.addShape('text', {
+  let startSecond = moment(this.startAt);
+
+  // 顶部底部边框
+  timeGroup.addShape('rect',{
     attrs: {
-      x: 20 + this.viewWidth * 2,
-      y: 20,
-      fontSize: 12,
-      text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
-      lineDash: [10, 10],
-      fill: '#8D9399',
+      x: 0,
+      y: 0,
+      width: this.cWidth,
+      height: 52,
+      fill: '#F8F9FA',
+      radius: [2, 4],
     },
-  });
-  let startSecond = moment(this.startAt);
+  })
   // 绘制第二级
+  let nowAtStr = moment().format('YYYY-MM-DD')
   for (let i = 0; i < this.daysCount; i++) {
-    let timeText = startSecond.add(1, 'days').format('DD');
+    let tempAt = startSecond.add(1, 'days')
+    let timeText = tempAt.format('DD');
+    if(timeText == '01'){
+      // 第一天,顶部需要绘制年月
+      timeGroup.addShape('text', {
+        attrs: {
+          x: this.dayStep * i,
+          y: 20,
+          fontSize: 12,
+          text: tempAt.format('YYYY-MM'),
+          lineDash: [10, 10],
+          fill: '#8D9399',
+        },
+      });
+      
+    }
+    let isToday = nowAtStr == tempAt.format('YYYY-MM-DD')
+    if(isToday){
+      //是今日,需要画线
+      console.log('绘制 当日刻度线')
+      this.todayTimeLineOffsetPos = this.dayStep * i
+      timeGroup.addShape('rect',{
+        attrs: {
+          x: this.dayStep * i-10,
+          y: 25,
+          width: 30,
+          height: 16,
+          fill: '#0091FF',
+          radius: [2, 4],
+        },
+      })
+    }
     timeGroup.addShape('text', {
       attrs: {
-        x: 40 * i,
+        x: this.dayStep * i,
         y: 40,
         fontSize: 10,
         text: timeText,
@@ -288,6 +307,17 @@ GanttChart.prototype.drawTimeZone = function() {
         fill: '#8D9399',
       },
     });
+
+    timeGroup.addShape('rect', {
+      attrs: {
+        x: this.dayStep * i-10,
+        y: 20,
+        width: 1,
+        height: this.cHeight,
+        fill: '#deebeb',
+        radius: [2, 4],
+      },
+    });
   }
 }
 
@@ -364,10 +394,55 @@ GanttChart.prototype.drawTasks = function() {
       taskGroup = this.graphGroup.addGroup();
       taskGroup._tname = 'TaskGroup_' + topTask.id;
       topTask.gGroup = taskGroup;
-      // 第二层循环,用于 区分具体多少任务,例如,维保-商管1/商管2...    
-      topTask.dataList.forEach((taskP, index) => {                            
-        let taskPGroup = taskGroup.addGroup();
+
+      // 组名背景矩形
+      // let TopGroupRectEl = taskGroup.addShape('rect', {
+      //   attrs: {
+      //     x: 0,
+      //     y: topTask.renderOptions.startY,
+      //     width: this.cWidth,
+      //     height: this.taskRowHeight,
+      //     fill: '#a6ed53',
+      //     radius: [2, 4],
+      //   },
+      // });
+      // 第二层循环,用于 区分具体多少任务,例如,维保-商管1/商管2...
+      topTask.dataList.forEach((taskP, index) => {
+        let taskPGroup = taskGroup.addGroup()
         taskGroup.addGroup(taskPGroup);
+        // 任务背景矩形,主要用于Hover效果变更颜色
+        if(true){
+          let tempTaskContainerEl = taskPGroup.addShape('rect', {
+            attrs: {
+              x: 0,
+              y: topTask.renderOptions.startY + ((index+1)* (this.taskRowHeight + this.rowSpanDis))-5,
+              width: this.cWidth,
+              height: this.taskRowHeight+10,
+              fill: '#fff',
+              // stroke: 'black',
+              radius: [2, 4],
+            },
+          });
+          tempTaskContainerEl.setZIndex(1)
+          tempTaskContainerEl._pdata = taskP
+          tempTaskContainerEl.on('mouseenter',(ev)=>{
+            tempTaskContainerEl.attr({fill: '#F5F6F7'})
+            tempTaskContainerEl._pdata.tasks.forEach(_tempTask=>{
+              if(_tempTask._rectEl){
+                _tempTask._rectEl.setZIndex(5)
+              }
+            })
+          })
+          tempTaskContainerEl.on('mouseleave',(ev)=>{
+            tempTaskContainerEl.attr({fill: '#fff'})
+            tempTaskContainerEl._pdata.tasks.forEach(_tempTask=>{
+              if(_tempTask._rectEl){
+                _tempTask._rectEl.setZIndex(5)
+              }
+            })
+          })
+          taskP._containerEl = tempTaskContainerEl
+        }
         // 第三层循环,用户区分每个子任务的执行时间段,例如:维保-商管1-2020.05-2020.06 / 2020.08- 2020.09
         taskP.tasks.forEach((_taskItem, _index) => {
           let _isInView = this.isInView(_taskItem)
@@ -386,7 +461,9 @@ GanttChart.prototype.drawTasks = function() {
                 radius: [2, 4],
               },
             });
+            rectEl.setZIndex(5)
             rectEl._pdata = _taskItem;
+            _taskItem._rectEl = rectEl
             rectEl.on('mouseover', (ev) => {
               this.handleClick(ev.target, 'enter', ev);
             });
@@ -408,6 +485,22 @@ GanttChart.prototype.drawTasks = function() {
       }
     }
   });
+
+  // 画当前线条 TODO,放前面不行
+  let todayAt = new Date()
+  if(this.startAt < todayAt && this.endAt > todayAt){
+    this.todayTimeLineEl = this.gCanvas.addShape('rect',{
+      attrs: {
+        x: this.todayTimeLineOffsetPos,
+        y: 40,
+        width: 3,
+        height: this.cHeight,
+        fill: '#0091FF',
+        radius: [2, 4],
+      }
+    })
+    this.todayTimeLineEl.setZIndex(50)
+  }
 }
 
 /**

+ 438 - 0
src/utils/ganttChart/GanttChart_old.js

@@ -0,0 +1,438 @@
+import moment from 'moment';
+/**
+ * 数据定义区域
+ *
+ */
+/**
+ * 甘特图
+ * @param {} options 
+ */
+export function GanttChart(options) {
+  // 任务列表
+  this.tasks = options.tasks || [];
+  // AntVG Canvas
+  this.gCanvas = null;
+  // 视口宽度 800,可视区域
+  this.viewWidth = options['viewWidth'] || 800;
+  // 物理画布宽度 800
+  this.cWidth = options['cWidth'] || 2400;
+  this.cHeight = options['cHeight'] || 600;
+  // 画布偏移位置
+  this.startPos = 0;
+  // 是否拖动中
+  this.draging = false;
+  // 开始拖动事件
+  this.startEvent = null;
+  // 结束拖动事件
+  this.endEvent = null;
+  // 拖动过程事件
+  this.dragingEvent = null;
+  // 拖动偏移量
+  this.offsetDis = options['viewWidth'] || 800;
+  // 拖动定时器
+  this.dragTimer = null;
+  // 每天的间隔宽度
+  this.dayStep = 40;
+  // 分组标题高度
+  this.groupTitleHeight = 38;
+  // 任务矩形高度
+  this.taskRowHeight = 16;
+  // 每行任务的纵向间距
+  this.rowSpanDis = 22;
+  // 总天数
+  this.daysCount = options['daysCount'] || 60;
+  // 任务图距离顶部高度
+  this.graphTopDis = 20
+  
+  // 每像素代表的小时数
+  this.timePerPix = this.cWidth/this.daysCount/24/3600
+  // 当前视图开始时间,向前推N天
+  this.startAt = moment().subtract(this.daysCount / 3, 'days');
+  this.endAt = moment(this.startAt).add(this.daysCount, 'days');
+  this.graphDiv = document.getElementById(options['chartContainer']);
+  // 图形容器组
+  this.graphGroup = null;
+  // 上一次拖动的事件
+  this.lastDragEv = null;
+  // 回调事件
+  this.callback = options.callback || null;
+}
+
+
+/**
+ * 设置数据
+ * @param {*} _tasks 
+ */
+GanttChart.prototype.changeTasks = function(_tasks){
+  this.tasks = _tasks
+}
+
+/**
+ * 打开关闭分组
+ */
+
+GanttChart.prototype.toggle = function(index) {
+  if (this.tasks[index].open) {
+    this.tasks[index].open = false;
+  } else {
+    this.tasks[index].open = true;
+  }
+  this.processData();
+  this.drawTasks();
+}
+
+/**
+ * 预处理数据
+ */
+GanttChart.prototype.processData = function() {
+  for (let i = 0; i < this.tasks.length; i++) {
+    let currentTopTask = this.tasks[i];
+    let lastTopTask = null;
+    currentTopTask.renderOptions = {};
+    if (i != 0) {
+      // 非0个,要补上前面的数据
+      lastTopTask = this.tasks[i - 1];
+      currentTopTask.renderOptions.startY = lastTopTask.renderOptions.endY + 20;
+    } else {
+      // 第一个
+      currentTopTask.renderOptions.startY = this.graphTopDis;
+    }
+    if (currentTopTask.open) {
+      currentTopTask.renderOptions.endY =
+        currentTopTask.renderOptions.startY + this.rowSpanDis + this.groupTitleHeight + currentTopTask.dataList.length * this.taskRowHeight;
+    } else {
+      currentTopTask.renderOptions.endY = currentTopTask.renderOptions.startY + this.groupTitleHeight;
+    }
+  }
+}
+
+/**
+ * 强制清空图像,重绘
+ */
+GanttChart.prototype.forceRefreshGraph = function() {
+  this.tasks.forEach((topTask) => {
+    topTask.gGroup = null;
+  });
+  this.gCanvas.destroy();
+  this.initDrawingReady();
+}
+
+/**
+ * 准备绘制,用于初始化和强制刷新
+ */
+GanttChart.prototype.initDrawingReady = function() {
+  this.initCanvas();
+  this.initDragHandler();
+  this.drawTimeZone();
+  this.processData();
+  this.drawTasks();
+  this.graphGroup = null
+}
+
+/**
+ * 翻页
+ */
+GanttChart.prototype.pageTo = function(dir = 'next') {
+  if (dir == 'next') {
+    // 向后翻页`
+    this.startAt = this.startAt.add(this.daysCount, 'days');
+    this.offsetDis = 0
+  } else {
+    // 向前翻页
+    this.startAt = this.startAt.subtract(this.daysCount, 'days');
+    this.offsetDis = 2*this.viewWidth
+  }
+  this.endAt = moment(this.startAt).add(this.daysCount, 'days');
+  console.log('已翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'), this.offsetDis);
+  // offsetDis = viewWidth;
+  this.forceRefreshGraph();
+}
+// 上次点击时间,用于滚动时误触停止
+let lastClickAt = null;
+/**
+ * 执行拖动
+ * 改变graphDiv 滚动距离
+ * 到达边界距离后,刷新页面
+ */
+GanttChart.prototype.doDrag = function(sEvent, eEvent) {
+  if (sEvent == null) {
+    sEvent = this.startEvent;
+  }
+  
+  let sPos = sEvent.clientX;
+  let cPos = eEvent.clientX;
+  // 滚动距离
+  let dis = cPos - sPos;
+  let tempDis = this.offsetDis
+  // console.log('offsetDis before:', this.offsetDis, dis)
+  this.offsetDis = this.offsetDis - dis / 2;
+  // console.log('draging...',tempDis, this.offsetDis, dis)
+  if (this.offsetDis <= -20) {
+    // 向前滑动,向前翻页
+    console.log('此处应该向前翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'),this.offsetDis);
+    this.offsetDis = this.viewWidth;
+    this.pageTo('prev');
+  }
+  if (this.offsetDis - 20 >= 2964 ){ //cWidth - viewWidth) {
+    // 向后滑动,向后翻页
+    console.log('此处应该向后翻页', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'),this.offsetDis);
+    this.offsetDis = this.viewWidth;
+    this.pageTo('next');
+  }
+  this.graphDiv.scrollLeft = this.offsetDis;
+}
+
+/**
+ * 初始化抓取拖动事件
+ */
+
+GanttChart.prototype.initDragHandler = function() {
+  this.graphDiv.scrollLeft = this.offsetDis;
+  let _canvas = document.querySelector('#ganttContainer>canvas');
+  _canvas.addEventListener('mousedown', (ev) => {
+    this.draging = true;
+    this.startEvent = ev;
+    this.dragingEvent = null;
+    this.endEvent = null;
+    this.lastClickAt = new Date();
+    this.lastClickAt = ev;
+    this.lastDragEv = ev;
+  });
+
+  _canvas.addEventListener('mouseup', (ev) => {
+    this.draging = false;
+    this.endEvent = ev;
+  });
+
+  _canvas.addEventListener('mousemove', (ev) => {
+    // console.log('this over', this)
+    if (this.draging) {
+      if (new Date() - this.lastClickAt < 20) {
+        return false;
+      }
+      this.dragingEvent = ev;
+      this.doDrag(this.lastDragEv, ev);
+      this.lastDragEv = ev;
+    }
+  });
+  _canvas.addEventListener('mouseleave', (ev) => {
+    console.log('leave...恢复')
+    this.draging = false;
+    this.endEvent = ev;
+  });
+}
+/**
+ * 初始化画布
+ *
+ */
+
+GanttChart.prototype.initCanvas = function() {
+  this.gCanvas = new G.Canvas({
+    container: 'ganttContainer',
+    width: this.cWidth,
+    height: 800,
+  });
+}
+
+/**
+ * 绘制时间区域
+ */
+
+GanttChart.prototype.drawTimeZone = function() {
+  console.log('时间段', this.startAt.format('YYYY-MM-DD'),this.endAt.format('YYYY-MM-DD'));
+  let start = moment(this.startAt);
+  let timeGroup = this.gCanvas.addGroup();
+  timeGroup._tname = 'TimeGroup';
+  // 绘制第一级
+  timeGroup.addShape('text', {
+    attrs: {
+      x: 20,
+      y: 20,
+      fontSize: 12,
+      text: start.format('YYYY-MM'),
+      lineDash: [10, 10],
+      fill: '#8D9399',
+    },
+  });
+  timeGroup.addShape('text', {
+    attrs: {
+      x: 20 + this.viewWidth,
+      y: 20,
+      fontSize: 12,
+      text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
+      lineDash: [10, 10],
+      fill: '#8D9399',
+    },
+  });
+  timeGroup.addShape('text', {
+    attrs: {
+      x: 20 + this.viewWidth * 2,
+      y: 20,
+      fontSize: 12,
+      text: start.add(this.daysCount / 3, 'days').format('YYYY-MM'),
+      lineDash: [10, 10],
+      fill: '#8D9399',
+    },
+  });
+  let startSecond = moment(this.startAt);
+  // 绘制第二级
+  for (let i = 0; i < this.daysCount; i++) {
+    let timeText = startSecond.add(1, 'days').format('DD');
+    timeGroup.addShape('text', {
+      attrs: {
+        x: 40 * i,
+        y: 40,
+        fontSize: 10,
+        text: timeText,
+        lineDash: [10, 10],
+        fill: '#8D9399',
+      },
+    });
+  }
+}
+
+/**
+ * 处理点击
+ */
+GanttChart.prototype.handleClick = function(task, flag, ev) {
+  // let detailDiv = document.getElementById('detailDiv')
+  if(flag == 'enter'){
+    // detailDiv.style.display = 'block'
+    // detailDiv.style.left = ev.clientX+'px';
+    // detailDiv.style.top = ev.clientY+'px';
+    // document.getElementById('detailTaskName').textContent = task._pdata.description
+    // document.getElementById('detailTaskStatus').textContent = task._pdata.status
+    // document.getElementById('detailTaskStartDate').textContent = task._pdata.startDate
+    // document.getElementById('detailTaskEndDate').textContent = task._pdata.endDate
+    console.log('show:', task);
+  } else if (flag === 'leave'){
+    // detailDiv.style.display = 'none'
+    console.log('hide:', task);
+  } else {
+    this.callback(task);
+    console.log('click:', task);
+  }
+}
+
+
+/**
+ * 根据任务状态区分颜色
+ * 
+ */
+GanttChart.prototype.statusColor =function(task) {
+  switch (task.status) {
+    case '按时完成':
+      return 'aqua';
+      break;
+    case '计划批准':
+      return '#ff9800';
+      break;
+    case '已完成':
+      return '#19b720';
+      break;
+    default:
+      break;
+  }
+}
+
+/**
+ * 判断任务是否在视图内
+ * 
+ */ 
+GanttChart.prototype.isInView = function(task) {
+  let isLessThanEndAt = (task.endDate <= this.startAt.format('YYYY-MM-DD'))
+  let isGreaterThanStartAt = task.startDate >= this.endAt.format('YYYY-MM-DD')
+  return !(isLessThanEndAt || isGreaterThanStartAt)
+}
+
+/**
+ * 分组绘制任务块
+ *
+ */
+
+GanttChart.prototype.drawTasks = function() {
+  if (this.graphGroup) {
+    this.graphGroup.clear();
+  } else {
+    this.graphGroup = this.gCanvas.addGroup();
+    this.graphGroup._tname = 'graphGroup';
+  }
+  // 第一层循环,用于分组,例如,维保--xxxx
+  this.tasks.forEach((topTask, topIndex) => {
+    if (topTask.open) {
+      let taskGroup = null;
+      taskGroup = this.graphGroup.addGroup();
+      taskGroup._tname = 'TaskGroup_' + topTask.id;
+      topTask.gGroup = taskGroup;
+      // 第二层循环,用于 区分具体多少任务,例如,维保-商管1/商管2...    
+      topTask.dataList.forEach((taskP, index) => {                            
+        let taskPGroup = taskGroup.addGroup();
+        taskGroup.addGroup(taskPGroup);
+        // 第三层循环,用户区分每个子任务的执行时间段,例如:维保-商管1-2020.05-2020.06 / 2020.08- 2020.09
+        taskP.tasks.forEach((_taskItem, _index) => {
+          let _isInView = this.isInView(_taskItem)
+          // 在视图中才显示
+          if(_isInView){
+            let pos = this.calRectPos(_taskItem);
+            // console.log('render rect:', _taskItem, pos, topTask.renderOptions.startY + index * taskRowHeight);
+            let rectEl = taskPGroup.addShape('rect', {
+              attrs: {
+                x: pos.x,
+                y: topTask.renderOptions.startY + (index* (this.taskRowHeight + this.rowSpanDis)),
+                width: pos.width,
+                height: this.taskRowHeight,
+                fill: this.statusColor(_taskItem),
+                stroke: 'black',
+                radius: [2, 4],
+              },
+            });
+            rectEl._pdata = _taskItem;
+            rectEl.on('mouseover', (ev) => {
+              this.handleClick(ev.target, 'enter', ev);
+            });
+            rectEl.on('mouseleave', (ev) => {
+              this.handleClick(ev.target, 'leave', ev);
+            });
+            rectEl.on('click', (ev) => {
+              this.handleClick(ev.target, 'click', ev);
+            });
+          }
+        });
+      });
+
+      taskGroup.show();
+    } else {
+      if (topTask.gGroup) {
+        // topTask.gGroup.hide()
+        topTask.gGroup = null;
+      }
+    }
+  });
+}
+
+/**
+ * 根据 Task 计算矩形位置
+ *
+ */
+GanttChart.prototype.calRectPos = function(taskItem) {
+  let duraStartAt = new Date(taskItem.startDate) - new Date(this.startAt.format('YYYY-MM-DD'));
+  let secondsStartAt = duraStartAt/1000
+
+  let duraEndAt = new Date(taskItem.endDate) - new Date(taskItem.startDate);        
+  let secondsEndAt = duraEndAt/1000
+  return {
+    x: secondsStartAt * this.timePerPix,
+    y: 0,
+    width: secondsEndAt * this.timePerPix,
+    height: 0,
+  };
+}
+
+/**
+ * 主函数
+ *
+ */
+
+GanttChart.prototype.main = function() {  
+  this.initDrawingReady();
+}

+ 71 - 21
src/views/analysis/CoreDeviceReport.vue

@@ -28,12 +28,12 @@
     </div>
     <div class="main-right">
       <div class="search-container">
-        <Input iconType="search" v-model="searchKey" placeholder="搜索" width="192"/>
+        <Input iconType="search" v-model="searchKey" placeholder="搜索" width="192" @pressEnter="getTableData" @clear="getTableData"/>
       </div>
       <el-table :data="tableData" style="width: 100%;margin-bottom: 63px;" @row-click="showEquipmentStatus">
         <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
         <el-table-column prop="sbjc" label="设备简称"></el-table-column>
-        <el-table-column prop="assetnum" label="设备编号"></el-table-column>
+        <el-table-column prop="sbjbm" label="设备编号"></el-table-column>
         <el-table-column prop="is_exception" label="状态">
           <template slot-scope="scope">
             <span style="display: inline-block;width: 6px;height:6px;border-radius: 3px;background: #0091FF;" :style="{'background': !scope.row.is_exception?'#0091FF' : '#F54E45'}"></span>
@@ -102,11 +102,14 @@
       <el-dialog :title="detailTitle" :visible.sync="showDetail" width="1260px">
         <div class="detail-container">
           <div class="pictures-menu">
-
+            <div v-for="(item) in pictureList" :key="'id_' + item.id" class="item">
+              <img :src="item.url" alt="">
+            </div>
           </div>
         </div>
       </el-dialog>
     </div>
+  </div>
 </template>
 
 <script>
@@ -120,11 +123,11 @@ export default {
       systemId: '', // 当前系统Id
       systemList: [], // 系统
       systemContentData: [
-        {id: 1, name: '高压配电柜', isMaintenance: true, num: 95, statusNum: 0, abnormal: false, isActive: true},
-        {id: 2, name: '变压器', isMaintenance: false, num: 256, statusNum: 12, abnormal: true, isActive: false},
-        {id: 3, name: '低压配电柜', isMaintenance: false, num: 354, statusNum: 0, abnormal: false, isActive: false},
-        {id: 4, name: '直流屏', isMaintenance: false, num: 175, statusNum: 0, abnormal: false, isActive: false},
-        {id: 5, name: '柴油发电机组', isMaintenance: false, num: 186, status: 0, abnormal: false, isActive: false},
+        // {id: 1, name: '高压配电柜', isMaintenance: true, num: 95, statusNum: 0, abnormal: false, isActive: true},
+        // {id: 2, name: '变压器', isMaintenance: false, num: 256, statusNum: 12, abnormal: true, isActive: false},
+        // {id: 3, name: '低压配电柜', isMaintenance: false, num: 354, statusNum: 0, abnormal: false, isActive: false},
+        // {id: 4, name: '直流屏', isMaintenance: false, num: 175, statusNum: 0, abnormal: false, isActive: false},
+        // {id: 5, name: '柴油发电机组', isMaintenance: false, num: 186, status: 0, abnormal: false, isActive: false},
       ], // 系统下的各种组成
       searchKey: '', // 搜索关键字
       tableData: [
@@ -149,6 +152,7 @@ export default {
 
       showDetail: false, // 显示照片、报告详情
       detailTitle: '图片预览', // 弹窗名称
+      pictureList: [], // 图片列表
     }
   },
 
@@ -161,8 +165,8 @@ export default {
 
   mounted() {
     this.getSystemList();
-    this.getEquipmentOfSystem();
-    this.getTableData();
+    // this.getEquipmentOfSystem();
+    
   },
 
   methods: {
@@ -181,6 +185,13 @@ export default {
             })
           })
           this.systemList = newData;
+          const { query } = this.$route;
+          if (!_.isEmpty(query)) {
+            this.systemId = query.smsxt || newData[0].id;
+          } else {
+            this.systemId = newData[0].id;
+          }
+          this.getEquipmentOfSystem();
         }
       })
     },
@@ -189,6 +200,7 @@ export default {
      */
     changeCurSystem(val) {
       console.log('val', val)
+      this.getEquipmentOfSystem();
     },
     /**
      * 获取系统下的设备
@@ -197,28 +209,52 @@ export default {
       let param = {
         plazaId: 1000423,
         ccode: 1002347,
-      }
-      if (this.systemId !== '') {
-        param.smsxt = this.systemId;
+        smsxt: this.systemId
       }
       queryEquipmentList('/data/home/querySystemCard', param).then((res) => {
-        console.log('res', res)
+        const { result, data } = res;
+        if (result === 'success') {
+          let newData = [];
+          _.forEach(data[0].assetTypeList, (item, index) => {
+            newData.push({
+              id: item.id,
+              name: item.category_name,
+              isMaintenance: item.is_detecting,
+              statusNum: item.is_exception_num,
+              num: item.asset_num,
+              abnormal: item.is_exception_num !== 0,
+              isActive: index === 0,
+              category_code: item.category_code
+            })
+          })
+          this.systemContentData = newData;
+          const { query } = this.$route;
+          if (!_.isEmpty(query) && query.equipId) {
+            _.map(this.systemContentData, (o) => {return o.isActive = o.id == query.equipId});
+          }
+          this.getTableData();
+        }
       })
     },
     /**
      * 切换系统下的设备
      */
     changeEquipment(id) {
-      _.map(this.systemContentData, (o) => {return o.isActive = o.id === id})
+      _.map(this.systemContentData, (o) => {return o.isActive = o.id === id});
+      this.getTableData();
     },
     /**
      * 获取表数据
      */
     getTableData() {
       let query = {
-        category_code: 'gdc'
+        category_code: _.find(this.systemContentData, (o) => {return o.isActive}).category_code
+      }
+      let url = `/data/glsms_asset/query?plazaId=1000423&page=${this.curPage}&size=${this.pageSize}`;
+      if (_.trim(this.searchKey) !== '') {
+        url = `${url}&keyword=${this.searchKey}:sbjc,sbjbm`
       }
-      queryTableData(`/data/glsms_asset/query?plazaId=1000423&page=${this.curPage}&size=${this.pageSize}`, query).then((res) => {
+      queryTableData(url, query).then((res) => {
         const { result, count, data } = res;
         if (result === 'success') {
           this.tatol = count;
@@ -334,13 +370,24 @@ export default {
      */
     getDetailData(val) {
       let param = {
-        file_type: 1, // val.file_type
-        file_type_id: 2467908, // val.file_type_id
+        file_type: 0, // val.file_type
+        file_type_id: 1144, // val.file_type_id
         type: this.detailTitle === '图片预览'? 0 : 1
       }
 
       queryDetailData('/data/base/queryFileDetails', param).then((res) => {
         console.log('res', res)
+        const { result, data } = res;
+        if (result === 'success') {
+          let newData = [];
+          _.forEach(data, (item) => {
+            newData.push({
+              id: item.id,
+              url: item.urlname
+            })
+          })
+          this.pictureList = newData;
+        }
       })
     }
   }
@@ -458,8 +505,11 @@ export default {
     .pictures-menu{
       margin-right: 21px;
       width: 180px;
+      .item{
+        >img{
+          width: 180px;
+        }
+      }
     }
-
   }
-
 </style>

+ 253 - 8
src/views/analysis/GanttChart.vue

@@ -29,27 +29,104 @@
     <div class="main-gantt-container">
       <div class="task-title">
         <div class="title">任务标题</div>
-        <Tree :data="treeData" @openNode="toggleNode" />
+        <div>
+          <Tree :data="treeData" @openNode="toggleNode" />
+        </div>
       </div>
       <div class="chart-container" id="chartContainer" ref="chartContainer">
         <div id="ganttContainer"></div>
       </div>
       <el-dialog :title="detailTitle" :visible.sync="showDetail" width="840px">
-
+        <div class="dialog-container">
+          <div class="row task-status">
+            <div>
+              <Task class="icon"/>
+              <div class="title">任务状态</div>
+            </div>
+            <div>进行中</div>
+          </div>
+          <div class="row">
+            <div>
+              <PlanTime class="icon" />
+              <div class="title">计划时间</div>
+            </div>
+            <div class="info">{{this.ganttDetail.planTime}}</div>
+          </div>
+          <div class="row">
+            <div>
+              <RealTime class="icon" />
+              <div class="title">实际执行时间</div>
+            </div>
+            <div class="info">{{this.ganttDetail.realTime}}</div>
+          </div>
+          <div class="row picture">
+            <div>
+              <Picture class="icon" />
+              <div class="title">照片</div>
+            </div>
+            <div>
+              <div>
+                <div class="num">12张</div>
+                <div class="more">查看更多</div>
+              </div>
+              <div class="pictrue-container">
+                <div v-for="(item) in pictures" :key="'id_' + item.id">
+                  <img :src="item.imgSrc" alt="" />
+                  <div class="info">{{item.title}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row picture">
+            <div>
+              <Report class="icon" />
+              <div class="title">报告</div>
+            </div>
+            <div>
+              <div>
+                <div class="num">2张</div>
+              </div>
+              <div class="pictrue-container">
+                <div v-for="(item) in reports" :key="'id_' + item.id">
+                  <img :src="item.imgSrc" alt="" />
+                  <div class="info">{{item.title}}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row test-content">
+            <div>
+              <Menu class="icon" />
+              <div class="title">检测内容</div>
+            </div>
+            <el-table :data="tableData">
+              <el-table-column property="time" label="设备简称"></el-table-column>
+              <el-table-column property="evenType" label="设备编号"></el-table-column>
+              <el-table-column property="objid" label="设备数"></el-table-column>
+              <el-table-column property="content" label="空间位置"></el-table-column>
+            </el-table>
+          </div>
+        </div>
       </el-dialog>
     </div>
   </div>
 </template>
 
 <script>
-import { queryGanttChart } from '../../api/ganttChart';
-import { querySystemList } from '../../api/coreDeviceReport';
+import { queryGanttChart, queryGanttDetail } from '../../api/ganttChart';
+import { querySystemList, queryDetailData } from '../../api/coreDeviceReport';
 import { Tree } from 'meri-design';
 import _ from 'lodash';
 import moment from 'moment';
 // import '../../utils/ganttChart/g.js';
 import { GanttChart } from '../../utils/ganttChart/GanttChart.js';
 import { parse } from 'path';
+import Task from '../../assets/svg/task.svg';
+import PlanTime from '../../assets/svg/plan_time.svg';
+import RealTime from '../../assets/svg/real_time.svg';
+import Picture from '../../assets/svg/picture.svg';
+import Report from '../../assets/svg/report.svg';
+import Menu from '../../assets/svg/menu.svg';
 export default {
   data () {
     return {
@@ -67,10 +144,27 @@ export default {
       // 弹窗相关
       showDetail: false, // 弹框显示状态
       detailTitle: '', // 弹窗标题
+      pictures: [
+        {id: 1, imgSrc: require('../../assets/imgs/analysis/picture.png'), title: '2019年5月高压用具检测报告.jpg'},
+        {id: 2, imgSrc: require('../../assets/imgs/analysis/picture.png'), title: '2019年5月高压用具检测报告.jpg'},
+      ], // 照片
+      reports: [
+        {id: 1, imgSrc: require('../../assets/imgs/analysis/report_pdf.png'), title: '2019年5月高压用具检测报告.pdf'},
+        {id: 2, imgSrc: require('../../assets/imgs/analysis/report_word.png'), title: '2019年5月高压用具检测报告.docx'},
+      ], // 报告
+      ganttDetail: {}, // 甘特图明细
+      tableData: [], // 表数据
     }
   },
 
-  components: {},
+  components: {
+    Task,
+    PlanTime,
+    RealTime,
+    Picture,
+    Report,
+    Menu
+  },
 
   computed: {},
 
@@ -93,8 +187,13 @@ export default {
               name: item.name
             })
           })
-          this.systemId = newData[0].id;
           this.systemList = newData;
+          const { query } = this.$route;
+          if (!_.isEmpty(query) && query.smsxt) {
+            this.systemId = query.smsxt;
+          } else {
+            this.systemId = newData[0].id;
+          }
           this.getGanttChartData();
         }
       })
@@ -143,7 +242,8 @@ export default {
               id: index + 1,
               name: name[index],
               open: true,
-              children: name[index] === '专维'?[] : this.disGanttData(dsfList)
+              // children: name[index] === '专维'?[] : this.disGanttData(dsfList)
+              children: this.disGanttData(data[index])
             })
           })
           
@@ -166,10 +266,11 @@ export default {
           console.log('taskData', taskData)
           let width = this.$refs.chartContainer.offsetWidth;
           window.gc = new GanttChart({
+            chartParentContainer: 'chartContainer',
+            chartContainer: 'ganttContainer',
             viewWidth: width,
             cWidth: 3*width,
             tasks: taskData,
-            chartContainer: 'chartContainer',
             daysCount: parseInt(3*width/40),
             callback: this.showDialog
           });
@@ -202,6 +303,7 @@ export default {
      */
     toggleNode(status) {
       console.log('status', status)
+
     },
     /**
      * 显示弹窗
@@ -209,6 +311,54 @@ export default {
     showDialog(task) {
       this.showDetail = true;
       this.detailTitle = task._pdata.description;
+      this.getGanttDetailData();
+      this.getPictureOrReportData(0);
+      this.getPictureOrReportData(1);
+    },
+    /**
+     * 获取甘特图详情
+     */
+    getGanttDetailData() {
+      let param = {
+        plazaId: 1000423,
+        type: 2,
+        id: 1078467
+      }
+      queryGanttDetail('/data/base/queryGanttChartDetails', param).then((res) => {
+        const { result, data } = res;
+        if (result === 'success') {
+          const { status, planStartDate, planEndDate, realStartDate, realEndDate } = data;
+          let newData = {
+            status,
+            color: '',
+            planTime: this.dealDetailTime(planStartDate, planEndDate),
+            realTime: this.dealDetailTime(realStartDate, realEndDate)
+          }
+          this.ganttDetail = newData;
+        }
+      })
+    },
+    /**
+     * 处理时间
+     */
+    dealDetailTime(startTime, endTime) {
+      let start = moment.unix(startTime / 1000).format('YYYY.MM.DD HH:mm:ss'),
+          end = moment.unix(endTime / 1000).format('YYYY.MM.DD HH:mm:ss');
+      return `${start}-${end}`
+    },
+    /**
+     * 获取甘特图的图片/报告详情
+     */
+    getPictureOrReportData(type) {
+      let param = {
+        file_type: 1,
+        file_type_id: 1985,
+        type: type
+      }
+      queryDetailData('/data/base/queryFileDetails', param).then((res) => {
+        console.log('photo', res)
+
+      })
     }
   }
 }
@@ -272,10 +422,105 @@ export default {
         line-height: 19px;
         border-bottom: 1px solid #EFF0F1;
       }
+      >div:nth-of-type(2){
+        max-height: calc(100% - 50px);
+        overflow: auto;
+      }
     }
     .chart-container{
       flex: 1;
       overflow: hidden;
+      background: #fff;
+    }
+  }
+  .dialog-container{
+    max-height: 580px;
+    overflow: auto ;
+    .row{
+      display: flex;
+      >div:first-child{
+        margin-right: 24px;
+        display: flex;
+        align-items: center;
+      }
+      &:not(:last-of-type){
+        margin-bottom: 14px;
+      }
+      .info{
+        font-size: 14px;
+        color: #1F2429;
+        line-height: 22px;
+      }
+    }
+    .icon{
+      margin-right: 6px;
+      width: 16px;
+    }
+    .title{
+      width: 84px;
+      font-size: 14px;
+      color: #646C73;
+      line-height: 22px;
+      font-weight: 400;
+    }
+    .task-status>div:nth-of-type(2){
+      width: 58px;
+      height: 24px;
+      background: rgba(91,143,249,0.2);
+      border-radius: 2px;
+      color: #5B8FF9;
+      line-height: 24px;
+      text-align: center;
+    }
+    .picture{
+      margin-bottom: 19px!important;
+      >div:first-child{
+        align-items: baseline;
+      }
+      >div:nth-of-type(2){
+        flex: 1;
+      }
+      >div:nth-of-type(2)>div:first-child{
+        margin-bottom: 12px;
+        display: flex;
+      }
+      .num,
+      .more{
+        font-size: 14px;
+        line-height: 22px;
+        font-weight: 400;
+      }
+      .num{
+        margin-right: 22px;
+        color: #1F2429;
+      }
+      .more{
+        color: #025BAA;
+        cursor: pointer;
+      }
+    }
+    .pictrue-container{
+      >div{
+        padding: 10px 16px;
+        width: 100%;
+        border-radius:4px;
+        border:1px solid rgba(233,233,233,1);
+        display: flex;
+        align-items: center;
+        >img{
+          width: 24px;
+          margin-right: 15px;
+        }
+      }
+      >div:not(:last-child){
+        margin-bottom: 8px;
+      }
+    }
+    .test-content{
+      display: block;
+      >div:first-child{
+        margin-bottom: 13px;
+      }
     }
   }
 }

+ 44 - 9
src/views/analysis/SpecificationUpdateRecord.vue

@@ -43,20 +43,22 @@
 </template>
 
 <script>
-import { getSpecificaltionData } from '../../api/specificationUpdateRecord';
+import { getSpecificaltionData, queryEventypes } from '../../api/specificationUpdateRecord';
 import moment from 'moment';
 import _ from 'lodash';
 export default {
   data () {
     return {
-      incidentList: [
+      incidentList: [], // 事件列表
+      oraginIncidentList: [
+        {id: 'all', name: '全部'},
         {id: 0, name: '专维'},
         {id: 1, name: '维保'},
         {id: 2, name: '第三方检测'},
         {id: 3, name: '重点关注'},
-      ], // 事件列表
-      incidentType: '', // 事件类型
-      timeVal: '', // 时间
+      ], // 事件列表字典表
+      incidentType: 'all', // 事件类型
+      timeVal: null, // 时间
       tableData: [], // 表数据
       curPage: 1, // 当前页码
       pageSize: 10, // 每页条数
@@ -71,11 +73,45 @@ export default {
   computed: {},
 
   mounted() {
-    this.getTableData();
+    this.initTimePicker();
+    this.getEvenType();
   },
 
   methods: {
     /**
+     * 初始化时间
+     */
+    initTimePicker() {
+      let endTime = new Date(),
+          startTime = new Date(endTime.getTime() - 1000*60*60*24*30);
+      this.timeVal = [startTime, endTime];
+    },
+    /**
+     * 获取事件类型
+     */
+    getEvenType() {
+      let query = {
+        tableName: 'rpt_change_record',
+        columnName: {
+          objtype: 'objtype'
+        }
+      }
+      queryEventypes(`/data/base/queryOptions?plazaId=1000423`, [query]).then((res) => {
+        const { result, data } = res;
+        if (result === 'success') {
+          let newData = [this.oraginIncidentList[0]];
+          _.forEach(data.rpt_change_record.objtype, (item) => {
+            newData.push({
+              id: item.key,
+              name: _.find(this.oraginIncidentList, (o) => {return item.key === o.id}).name
+            })
+          })
+          this.incidentList = newData;
+          this.getTableData();
+        }
+      })
+    },
+    /**
      * 获取表数据
      */
     getTableData() {
@@ -92,7 +128,7 @@ export default {
       if (this.endTime !== '') {
         param.changeDateEndDate = this.endTime;
       }
-      if (this.incidentType !== '') {
+      if (this.incidentType !== 'all') {
         param.objtype = this.incidentType;
       }
       getSpecificaltionData('/data/rpt_change_record/query', param).then((res) => {
@@ -125,8 +161,7 @@ export default {
         this.startTime = moment.unix(new Date(this.timeVal[0]).getTime() / 1000).format('YYYYMMDDHHmmss');
         this.endTime = moment.unix(new Date(this.timeVal[1]).getTime() / 1000).format('YYYYMMDDHHmmss');
       } else {
-        this.startTime = 20171027000000;
-        this.endTime = 20171028000000;
+        this.initTimePicker();
       }
       this.getTableData();
     }

+ 8 - 0
src/views/analysis/index.vue

@@ -46,6 +46,14 @@ export default {
 		GanttChart
 	},
 	mounted() {
+		const { query } = this.$route;
+		if (!_.isEmpty(query)) {
+			if (query.module === 'specification') {
+				_.map(this.navList, (o) => {return o.isActive = o.id === 2});
+			} else if (query.module === 'gantt') {
+				_.map(this.navList, (o) => {return o.isActive = o.id === 3});
+			}
+		}
 		this.findCurModule();
 	},
 	methods: {

+ 30 - 14
src/views/equipment/index.vue

@@ -30,19 +30,22 @@
                         <floorMap ref='floorMap' :id='"equip"' :loadName='loadName' :type='"system"'></floorMap>
                         <!--  -->
                         <div class='additional-box' v-if='fqPic.length>0'>
-                            <div class='additional' @click='additionalColl' v-if='!show'>
-                                <img src='../../assets/imgs/bg.png' alt />
-                            </div>
-                            <div class='additional2' @click='additionalColl' v-else>
+                            <div class='additional2' @click='additionalColl' v-if='showView===3'>
                                 <img src='../../assets/imgs/bg2.png' alt />
                             </div>
+                            <div class='additional' @click='additionalColl' v-else>
+                                <img src='../../assets/imgs/bg.png' alt />
+                            </div>
                             <el-collapse-transition>
-                                <div v-if='show' class='add-img'>
-                                    <img :src='fqPic[0].url' alt />
+                                <div v-if='showView===3' class='add-img-container'>
+                                    <div class='add-img'>
+                                        <img :src='fqPic[0].url' alt />
+                                    </div>
                                 </div>
                             </el-collapse-transition>
                         </div>
                     </div>
+
                     <floor-list v-if='floorsArr.length>0' :floorsArr='floorsArr' @emitFloor='emitFloor' id='system'></floor-list>
                 </div>
             </div>
@@ -114,8 +117,13 @@ export default {
         dialogVisible(eve) {
             this.$refs.dialog.showModal(eve)
         },
+        //附加数据图片查看 showView为3展示状态
         additionalColl() {
-            this.show = !this.show
+            if (this.showView != 3) {
+                this.$store.commit('SETSHOWVIEW', 3)
+            } else {
+                this.$store.commit('SETSHOWVIEW', 0)
+            }
         },
         // 查询附加数据图片
         queryTable(system) {
@@ -156,7 +164,7 @@ export default {
         this.$refs.floorMap.init(this.floorInfo.gname)
     },
     computed: {
-        ...mapGetters(['floorsArr', 'plazaId'])
+        ...mapGetters(['floorsArr', 'plazaId', 'showView'])
     }
 }
 </script>
@@ -302,9 +310,10 @@ export default {
                             background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
                             box-shadow: 0px 2px 15px 0px rgba(31, 36, 41, 0.08);
                         }
-                        .add-img {
+                        .add-img-container {
                             width: 560px;
                             height: 360px;
+                            overflow: hidden;
                             background: #ffffff;
                             -webkit-box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
                             box-shadow: 0px 2px 8px 0px rgba(31, 36, 41, 0.06);
@@ -314,11 +323,18 @@ export default {
                             right: 77px;
                             bottom: 381px;
                             z-index: 2;
-                            img {
-                                max-width: 100%;
-                                max-height: 100%;
-                                display: block;
-                                margin: 0 auto;
+                            padding: 20px;
+                            .add-img {
+                                // padding: 0;
+                                width: 100%;
+                                height: 100%;
+                                overflow: scroll;
+                                img {
+                                    width: 100%;
+                                    // max-height: 100%;
+                                    display: block;
+                                    margin: 0 auto;
+                                }
                             }
                         }
                     }

+ 4 - 4
src/views/equipment/table/eqDetaileDialog.vue

@@ -49,11 +49,11 @@
         </div>
         <el-table :data='tableData' :border='true' style='width: 100%;amrgin-bottom:30px'>
             <el-table-column type='index' label='序号' width='60' :index='indexMethod'></el-table-column>
-            <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable min-width='150'>
+            <el-table-column prop='sbjc' label='设备名称' show-overflow-tooltip resizable width='230'>
                 <template slot-scope='{row}'>{{row.sbjc || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='assetnum' label='设备编号' show-overflow-tooltip resizable width='80'>
-                <template slot-scope='{row}'>{{row.assetnum || '--'}}</template>
+            <el-table-column prop='sbjbm' label='设备编号' show-overflow-tooltip resizable width='80'>
+                <template slot-scope='{row}'>{{row.sbjbm || '--'}}</template>
             </el-table-column>
             <el-table-column prop='sl' label='数量' width='80'>
                 <template slot-scope='{row}'>{{row.sl>=0?row.sl:'--'}}</template>
@@ -79,7 +79,7 @@
             <el-table-column prop='manufacturer' label='生产厂商' show-overflow-tooltip resizable min-width='150'>
                 <template slot-scope='{row}'>{{row.manufacturer || '--'}}</template>
             </el-table-column>
-            <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable>
+            <el-table-column prop='fws' label='服务商' show-overflow-tooltip resizable width='200'>
                 <template slot-scope='{row}'>{{row.fws || '--'}}</template>
             </el-table-column>
         </el-table>

+ 27 - 31
src/views/homepage/index.vue

@@ -20,17 +20,14 @@
                         </section>
                     </div>
                 </div>
-                <div v-else class='empty-content' style='border-top:none; height:8rem;line-height:8rem;'>暂无数据</div>
-                <div v-if='item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length' class='alert-list' @click='navToGanttPage(item, equip)'>
-                    <div class='alert-item' v-for='(option , index) in  item.rptGlsmsStatisticsList' :key='index'>
-                        <img v-if='option.total' :src='srcList[option.type][option.level]' />
-                        <div class='content' v-if='option.total'>
-                            <p class='line'>
-                                <span>{{option.type === 1 ? '维保': option.type === 0 ? '专维' : '第三方检测' }}</span>
-                                <span>
-                                    <em :style='{color:item.level == 1? "#646C73": item.level == 2 ? "#E07A04 " :"#C13830"}'>{{option.unfinished}}</em>/
-                                    <em>{{option.total}}</em>
-                                </span>
+                <div v-else class="empty-content"   style="border-top:none; height:8rem;line-height:8rem;">暂无数据</div>
+                <div v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" class="alert-list" @click="navToGanttPage(item)">
+                    <div class="alert-item"  v-for="(option , index) in  item.rptGlsmsStatisticsList" :key="index" >
+                        <img v-if="option.total"  :src="srcList[option.type][option.level]" > 
+                        <div  class="content" v-if="option.total">
+                            <p class="line">
+                                <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' :  '第三方检测' }}</span>
+                                <span><em :style="{color:item.level == 1? '#646C73': item.level == 2 ? '#E07A04 ' :'#C13830'}">{{option.unfinished}}</em>/<em>{{option.total}}</em></span>
                             </p>
                             <p class='desc'>当月未完成/总任务</p>
                         </div>
@@ -118,17 +115,17 @@ export default {
         this.getInstructionList()
     },
     methods: {
-        /**
+          /**
          *  点击跳转进入综合事项管理页面
          */
-        navToFocusItem() {
-            this.$router.push({ path: './调' })
+        navToFocusItem () {
+            this.$router.push({path:"./other", query:{module:'comprehensive'}})
         },
         /**
          *  点击跳转进入 分析|报表 说明书更新记录页面
          */
-        navToIntroduce() {
-            this.$router.push({ path: './analysis', query: { homepageKey: 2 } })
+        navToIntroduce () {
+            this.$router.push({path:"./analysis", query:{module:'specification'}})
         },
         itemStyle(option) {
             let num = 0
@@ -152,14 +149,15 @@ export default {
                 }
             }
         },
-        navToInnerPage(item, equip) {
-            this.$router.push({ path: './analysis', query: { smsxt: item.smsxt, equipId: equip.id } })
+        navToInnerPage (item, equip) {
+            this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, equipId: equip.id, module:'core'}})
         },
+         
         /**
          * 跳转到甘特图详情页
          */
-        navToGanttPage(item, equip) {
-            this.$router.push({ path: './analysis', query: { smsxt: item.smsxt } })
+        navToGanttPage (item) {
+            this.$router.push({path:"./analysis", query:{smsxt:item.smsxt, module:'gantt'}})
         },
         //TODO plazaId目前是写死的 后期需要更换成用户对应的ID
         testAjax() {
@@ -172,7 +170,6 @@ export default {
                 if (res.result == 'success') {
                     let result = res.data
                     if (result && Array.isArray(result)) {
-                        result[0].is_exception_num = 12
                         this.cardsList = result
                     }
                 }
@@ -254,7 +251,7 @@ export default {
         flex-wrap: wrap;
         justify-content: space-between;
         align-content: flex-start;
-        width: 70%;
+        width: 75%;
         .cards-item {
             width: calc(50% - 5px);
             height: 24%;
@@ -271,10 +268,7 @@ export default {
             }
             .equipment-list {
                 display: flex;
-                padding-bottom: 2rem;
-                margin-bottom: 0.8rem;
-                padding: 1rem;
-                padding-top: 0;
+                padding:0 1rem 1.2rem;
                 .equipment-item {
                     width: 33.33%;
                     padding: 0.6rem;
@@ -296,7 +290,7 @@ export default {
                         }
                         .exception-number {
                             position: absolute;
-                            right: -20px;
+                            right: -20%;
                             top: -5px;
                             height: 1.6rem;
                             border-radius: 8rem;
@@ -333,11 +327,10 @@ export default {
                 display: flex;
                 align-items: center;
                 justify-content: flex-start;
-                padding-top: 2rem;
                 border-top: 1px solid #f5f6f7;
+                height: 44%;
                 border-radius: 4px;
                 cursor: pointer;
-                padding: 2.2rem 1.4rem;
                 &:hover {
                     background: #f5f6f7;
                 }
@@ -348,7 +341,7 @@ export default {
                     img {
                         width: 4rem;
                         height: 4rem;
-                        margin-right: 1.4rem;
+                        margin:0 1rem;
                     }
                     .content {
                         border-right: 1px solid #f5f6f7;
@@ -363,6 +356,7 @@ export default {
                                 font-size: 1.2rem;
                                 color: #1f2429;
                                 font-weight: bold;
+                                white-space: nowrap;
                             }
                             em {
                                 font-weight: normal;
@@ -377,6 +371,7 @@ export default {
                             color: #8d9399;
                             font-size: 1.2rem;
                             text-align: right;
+                            white-space: nowrap;
                         }
                     }
                 }
@@ -392,7 +387,7 @@ export default {
         }
     }
     .homepage-nav-list {
-        width: calc(30% - 10px);
+        width: calc(25% - 10px);
         nav:first-child {
             height: 320px;
         }
@@ -429,6 +424,7 @@ export default {
                     }
                     article:nth-of-type(2) {
                         width: 30%;
+                        padding-left: 1.2rem;
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;

+ 15 - 5
src/views/other/index.vue

@@ -59,7 +59,8 @@ export default {
             picFloor: '',
             picFloorImg: [],
             dialogInfo: {},
-            floorData: []
+            floorData: [],
+            module: ''
         }
     },
     components: { floorListOther, OtherDialog, ZhsxOther, GcfzDialog },
@@ -130,6 +131,8 @@ export default {
                 //console.log('查询哪几层楼有图', res)
                 this.floorData = []
                 let data = res.data.data
+                console.log('data', data)
+
                 data.forEach(el => {
                     if (el.count > 0) {
                         let obj = {
@@ -155,6 +158,10 @@ export default {
         ...mapGetters(['floorsArr', 'plazaId'])
     },
     mounted() {
+        let module = window.location.href.split('=')[1]
+        if (module == 'comprehensive ') {
+            this.matterId = 1
+        }
         this.everySystem = this.matter[0].children
         this.tabSize()
     }
@@ -241,10 +248,13 @@ export default {
             margin: 0 auto;
             margin-top: 200px;
             img {
-                max-width: 100%;
-                max-height: 100%;
-                display: block;
-                margin: 0 auto;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                // max-width: 100%;
+                // max-height: 100%;
+                // display: block;
+                // margin: 0 auto;
             }
         }
         .fzyfwtp {

+ 1 - 1
src/views/other/zhsxOtherTable1.vue

@@ -41,7 +41,7 @@
             <el-table-column prop sortable label='日期' width='100' resizable>
                 <template slot-scope='{row}'>{{formatter(row.createdate)||'--'}}</template>
             </el-table-column>
-            <el-table-column prop label='政府部门' width='80'>
+            <el-table-column prop label='政府部门' width='160'>
                 <template slot-scope='{row}'>{{row.department||'--'}}</template>
             </el-table-column>
             <el-table-column prop label='记录事项' :show-overflow-tooltip='true' min-width='700'>

+ 18 - 6
src/views/other/zhsxOtherTable2.vue

@@ -20,19 +20,31 @@
                 :selectdata='status2'
                 :placeholder='"请选择"'
                 @change='dsfjc'
+                style='margin-right:12px'
             ></Select>
-            <Select
+            <!-- <Select
                 @change='dsfjc'
                 width='200'
                 tipPlace='top'
                 caption='部门:'
                 v-if='zgbm.length>0'
                 size='small'
+                style='margin-right:12px'
                 v-model='bmdsf'
                 :selectdata='zgbm'
                 :placeholder='"请选择"'
-            ></Select>
-            <Select
+            ></Select>-->
+            <el-input
+                clearable
+                @change='dsfjc'
+                placeholder='搜索部门'
+                size='small'
+                prefix-icon='el-icon-search'
+                v-model='bmdsf'
+                style='width:200px;margin-right:12px'
+            ></el-input>
+            <el-input clearable @change='dsfjc' placeholder='搜索检测结论' size='small' prefix-icon='el-icon-search' v-model='jcjldsf' style='width:200px'></el-input>
+            <!-- <Select
                 @change='dsfjc'
                 width='200'
                 tipPlace='top'
@@ -42,7 +54,7 @@
                 :selectdata='conclusion'
                 :placeholder='"请选择"'
                 v-model='jcjldsf'
-            ></Select>
+            ></Select>-->
         </div>
         <el-table
             row-key='id'
@@ -122,10 +134,10 @@ export default {
                 getParams.status2 = this.ztdsf
             }
             if (this.bmdsf) {
-                getParams.status2 = this.bmdsf
+                getParams.keyword = `${this.bmdsf}:zgbm`
             }
             if (this.jcjldsf) {
-                getParams.conclusion = this.jcjldsf
+                getParams.keyword = `${this.jcjldsf}:conclusion`
             }
             queryDsfrw({ getParams }).then(res => {
                 if (res.result == 'success') {

+ 17 - 6
src/views/overview/index.vue

@@ -18,9 +18,12 @@
         <div class='view-box'>
             <div class='view-left'>
                 <div class='lb-left'>
-                    <rotation :rotationImg='pic2'></rotation>
-                    <div class='lb-icon' @click='picClick("2")'></div>
-                    <img class='lb-img' @click='picClick("2")' src='../../assets/imgs/zk.png' alt />
+                    <div v-if='pic2.length>0' style='height:100%'>
+                        <rotation :rotationImg='pic2'></rotation>
+                        <div class='lb-icon' @click='picClick("2")'></div>
+                        <img class='lb-img' @click='picClick("2")' src='../../assets/imgs/zk.png' alt />
+                    </div>
+                    <img v-else class='lb-left-noImg' src='@/assets/imgs/nkt.jpg' alt />
                 </div>
                 <div class='lb-bottom'>
                     <nav>
@@ -74,9 +77,12 @@
             <div class='view-right'>
                 <div class='view-right-box'>
                     <div class='lb-right'>
-                        <rotation :rotationImg='pic1'></rotation>
-                        <div class='lb-icon' @click='picClick("1")'></div>
-                        <img class='lb-img' @click='picClick("1")' src='../../assets/imgs/zk.png' alt />
+                        <div v-if='pic1.length>0' style='height:100%'>
+                            <rotation :rotationImg='pic1'></rotation>
+                            <div class='lb-icon' @click='picClick("1")'></div>
+                            <img class='lb-img' @click='picClick("1")' src='../../assets/imgs/zk.png' alt />
+                        </div>
+                        <img v-else class='lb-left-noImg' src='@/assets/imgs/qwt.jpg' alt />
                     </div>
                     <div class='lb-right-bottom'>
                         <nav>
@@ -219,6 +225,11 @@ export default {
             queryFact(params).then(res => {
                 if (res.result == 'success') {
                     this.loading = false
+                    this.pic1 = []
+                    this.pic2 = []
+                    this.build = {}
+                    this.constructions = []
+                    this.shuzihuayijiao = ''
                     this.pic1 = res.pic1 ? res.pic1 : []
                     this.pic2 = res.pic2 ? res.pic2 : []
                     this.build = res.build ? res.build : {}

+ 1 - 1
src/views/overview/picModal.vue

@@ -5,7 +5,7 @@
                 src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
                 alt
             />-->
-            <rotation v-if='rotationImg.length>0' :rotationImg='rotationImg' style='height:100%;'></rotation>
+            <rotation :type='1' v-if='rotationImg.length>0' :rotationImg='rotationImg' style='height:100%;width:100%'></rotation>
             <span class='close' @click='close'>X</span>
         </el-dialog>
     </div>

+ 4 - 2
src/views/room/index.vue

@@ -7,7 +7,7 @@
     <div class='compute-box'>
         <el-dialog :title='`${systemName}`||"机房"' :visible.sync='visible' :fullscreen='true'>
             <div class='compute-span'></div>
-            <el-tooltip class='item' effect='dark' :content='content' placement='top' v-if='smsxtArr.length>0'>
+            <el-tooltip class='item' effect='dark' :content='content' placement='top' v-if='(type=="floor" && smsxtArr.length>0)||type=="system"'>
                 <div class='compute-zf' @click='jumpFloor'></div>
             </el-tooltip>
 
@@ -493,7 +493,8 @@ export default {
             rwwcrq: '',
             ycgdtbsj: '',
             ycgdyssj: '',
-            smsxtArr: { smsx: '1001', smsxtname: '供电系统' }
+            smsxtArr: { smsx: '1001', smsxtname: '供电系统' },
+            type: ''
         }
     },
     components: {
@@ -844,6 +845,7 @@ export default {
             this.visible = true
             this.systemName = name.name
             this.location = name.location
+            this.type = name.type
             if (name.type == 'floor') {
                 this.init()
             } else if (name.type == 'system') {

Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 485 - 566
src/views/statistics/index.vue


Rozdielové dáta súboru neboli zobrazené, pretože súbor je príliš veľký
+ 0 - 26486
static/g.js