Browse Source

1、系统图支持修改加粗
2、文本改变时附带影响文本背景
3、新增系统图时,系统图名称查验重复
4、业务空间台账 -> 列表tab页无数据的提示居中

niuheng 2 years ago
parent
commit
29cb3eccec

+ 13 - 3
src/components/old-adm/business_space/business/handsontable.vue

@@ -83,14 +83,24 @@
       >
     </el-row>
     <div v-show="main && main.length" :id="id"></div>
-    <div
+    <!-- <div
       class="center"
       v-show="!main || !main.length"
       style="height: 400px; padding-top: 140px; box-sizing: border-box"
     >
       <i class="icon-wushuju iconfont"></i>
       暂无数据
-    </div>
+    </div> -->
+    <div
+        class="middle_sty"
+        style="height: 91%; text-align: center;margin-top:16%;"
+        v-show="!main || !main.length"
+      >
+        <p>
+          <i class="icon-wushuju iconfont"></i>
+          暂无数据
+        </p>
+      </div>
     <!-- <add-business :buildMess="buildMess" :dialog="dialog"></add-business> -->
     <el-pagination
       class="right"
@@ -234,7 +244,7 @@ export default {
       headers: null,
       main: [],
       hot: null,
-      isLoading: true,
+      isLoading: false,
       options: [
         {
           value: true,

+ 43 - 4
src/components/systemGraph/edit.vue

@@ -308,10 +308,22 @@
           <div class="title titleMargin">字体样式</div>
           <div class="titleMargin fontSizeContainer">
             <img
+              src="@/assets/images/systemGraph/fontNotWeight.svg"
+              class="fontStyleSvg"
+              title="点击加粗"
+              v-if="operState == 1&&(selText.style || {}).fontWeight == notFotWeight"
+              @click="fontWeightChange(1)"
+            />
+            <img
               src="@/assets/images/systemGraph/fontStyle.svg"
               class="fontStyleSvg"
+              title="点击取消加粗"
+              v-if="operState == 1&&(selText.style || {}).fontWeight == fontWeight"
+              @click="fontWeightChange(0)"
             />
+            <span v-if="operState == 0" v-text="selFontSize.name"></span>
             <el-select
+              v-if="operState == 1"
               v-model="selFontSize"
               value-key="id"
               @change="selFontSizeChange"
@@ -484,6 +496,10 @@ export default {
       fontColor: "#eb5757",
       //字体背景颜色
       fontBackColor: "#ffffff",
+      //不加粗的数值
+      notFotWeight: 400,
+      //加粗的数值
+      fontWeight: window.__systemConf.systemGraph.peiDian.text.weight,
       //系统图原始数据
       graphOriginInfo: {},
       //系统图数据
@@ -597,6 +613,22 @@ export default {
         fontSize: this.selFontSize.id,
       });
     },
+    //加粗变化事件
+    fontWeightChange: function (change) {
+      if (this.operState != 1) return;
+      this.selText.style.fontWeight =
+        change == 1
+          ? window.__systemConf.systemGraph.peiDian.text.weight
+          : this.notFotWeight;
+
+      //更新graphInfo中的数据
+      this.updateGraphInfo(3, 9, { id: this.selText.id });
+      //更新图形以及图形数据源
+      this.$refs.graphc.updateDataAndGraph(3, 9, {
+        id: this.selText.id,
+        fontWeight: this.selText.style.fontWeight,
+      });
+    },
     //字体颜色改变事件
     selFontColorChange: function () {
       //更新graphInfo中的数据
@@ -913,7 +945,7 @@ export default {
     /**
      * 更新graphInfo中的数据
      * dataType 1 设备;  2 线;  3 文本
-     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点;  6 修改文本位置;  7 修改文本内容; 8删除线
+     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点;  6 修改文本位置;  7 修改文本内容; 8删除线;  9 修改加粗
      * exprObj 扩展数据,支持:{id:'数据id',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容'}}
      */
     updateGraphInfo: function (dataType, operType, exprObj) {
@@ -977,6 +1009,10 @@ export default {
               case 7:
                 _dataObj.label.content = exprObj.text.content;
                 break;
+              case 9:
+                _dataObj.label.style.fontWeight =
+                  _this.selText.style.fontWeight;
+                break;
             }
 
             return dataArr;
@@ -1033,7 +1069,9 @@ export default {
       });
       if (resultObj.result != logicConfig.resultObj.success) {
         this.fullscreenLoading = false;
-        Message.error("保存失败");
+        Message.error(
+          "保存失败" + (resultObj.message ? ",原因:" + resultObj.message : "")
+        );
         return;
       }
       this.graphOriginInfo.name = this.graphInfo.name;
@@ -1202,7 +1240,7 @@ export default {
   margin-left: 12px;
   margin-top: 21px;
   font-size: 12px;
-  color:#6F777F;
+  color: #6f777f;
 }
 
 #divGraphEdit .graphInfoFirstEdit {
@@ -1320,7 +1358,8 @@ export default {
   width: 80px;
 }
 
-#divGraphEdit .rightDetail .fontSizeContainer .el-select {
+#divGraphEdit .rightDetail .fontSizeContainer .el-select,
+#divGraphEdit .rightDetail .fontSizeContainer span {
   margin-left: 42px;
 }
 

+ 114 - 49
src/components/systemGraph/graph.vue

@@ -97,6 +97,8 @@ export default {
       },
       //是否是点击的图形上的元素
       isClickGraphNode: false,
+      //往图形实例上追加的属性名称
+      graphInstanceAppendProName: "_data",
     };
   },
   computed: {},
@@ -253,36 +255,15 @@ export default {
         });
 
         //----------------------------------------绘制文本的矩形背景框
-        var graphicsRect = new PIXI.Graphics();
-        graphicsRect.lineStyle({ width: 0 });
-        let newCordObjRect = _this.convertCoordToLeftOrigina({
-          x: _labelObj.absolutePosition.x - textDefaultConfig.padding,
-          y: _labelObj.absolutePosition.y - textDefaultConfig.padding,
+        var graphicsRect = _this.resetTextBack({
+          textId: _labelObj.id,
+          type: "new",
+          textOriginalX: _labelObj.absolutePosition.x,
+          textOriginalY: _labelObj.absolutePosition.y,
+          textOriginalWidth: textInstance.width,
+          textOriginalHeight: textInstance.height,
+          backColor: _labelObj.style.backColor,
         });
-        var newWidth =
-          (textInstance.width + 2 * textDefaultConfig.padding) *
-          _this.canvasProObj.originalScale;
-        var newHeight =
-          (textInstance.height + 2 * textDefaultConfig.padding) *
-          _this.canvasProObj.originalScale;
-        graphicsRect.beginFill(
-          "0x" + _labelObj.style.backColor.substring(1)
-        );
-        graphicsRect.drawRect(
-          newCordObjRect.x,
-          newCordObjRect.y,
-          newWidth,
-          newHeight
-        );
-        graphicsRect.endFill();
-        graphicsRect.name = _this.constructorTextBackId(_labelObj.id);
-        graphicsRect._data = {
-          x: newCordObjRect.x,
-          y: newCordObjRect.y,
-          width: newWidth,
-          height: newHeight,
-        };
-        // textInstance.zIndex = 1;
         pixiApp.stage.addChild(graphicsRect);
         pixiApp.stage.addChild(textInstance);
       });
@@ -645,6 +626,7 @@ export default {
       var dataObj = dataArr.filter((_data) => {
         return _data.id == dataId;
       })[0];
+
       this.$emit("click", dataObj, type);
     },
     //图形缩放比例递进计算
@@ -674,8 +656,8 @@ export default {
     /**
      * 更新graphInfo中的数据
      * dataType 1 设备;  2 线;  3 文本
-     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点  6 修改文本位置;  7 修改文本内容;   8删除线
-     * exprObj 扩展数据,支持:{id:'数据id',fontSize:'字体大小',fontColor:'文本颜色',fontBackColor:'文本背景色',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容'}}
+     * operType 1 移除设备节点;  2 更新文本字体大小;  3 更新文本颜色;  4 更新文本背景色;  5 移除文本节点  6 修改文本位置;  7 修改文本内容;   8删除线;  9 修改文本加粗
+     * exprObj 扩展数据,支持:{id:'数据id',fontSize:'字体大小',fontColor:'文本颜色',fontBackColor:'文本背景色',text:{xChange:1 新的绝对坐标减去旧的绝对坐标得出的值 ,yChange:1 新的绝对坐标减去旧的绝对坐标得出的值,content:'文本内容',fontWeight:0}}
      */
     updateDataAndGraph: function (dataType, operType, exprObj) {
       var dataArr =
@@ -702,6 +684,11 @@ export default {
               _dataObj.style.fontSize = exprObj.fontSize;
               _stageStyle.fontSize = exprObj.fontSize;
               stageChild.style = _stageStyle;
+              this.resetTextBack({
+                textId: exprObj.id,
+                textOriginalWidth: stageChild.width,
+                textOriginalHeight: stageChild.height,
+              });
               break;
             case 3:
               _dataObj.style.fontColor = exprObj.fontColor;
@@ -709,23 +696,10 @@ export default {
               stageChild.style = _stageStyle;
               break;
             case 4:
-              let rectId = this.constructorTextBackId(exprObj.id);
-              let stageRectChild = this.pixiApp.stage.getChildByName(rectId);
-              // stageChild.fill.color = "0x000000";
-              let _cachData = stageRectChild._data;
-              stageRectChild.clear();
-              stageRectChild.beginFill(
-                "0x" + exprObj.fontBackColor.substring(1)
-              );
-              stageRectChild.drawRect(
-                _cachData.x,
-                _cachData.y,
-                _cachData.width,
-                _cachData.height
-              );
-              stageRectChild.endFill();
-
-              _dataObj.style.backColor = exprObj.fontBackColor;
+              this.resetTextBack({
+                textId: exprObj.id,
+                backColor: exprObj.fontBackColor,
+              });
               break;
             case 6:
               let newCordObj = this.convertCoordToLeftOrigina({
@@ -733,12 +707,30 @@ export default {
                 y: _dataObj.absolutePosition.y,
               });
               stageChild.position.set(newCordObj.x, newCordObj.y);
+              this.resetTextBack({
+                textId: exprObj.id,
+                textOriginalX: _dataObj.absolutePosition.x,
+                textOriginalY: _dataObj.absolutePosition.y,
+              });
               break;
             case 7:
               stageChild.text = exprObj.text.content;
+              this.resetTextBack({
+                textId: exprObj.id,
+                textOriginalWidth: stageChild.width,
+                textOriginalHeight: stageChild.height,
+              });
+              break;
+            case 9:
+              _stageStyle.fontWeight = exprObj.fontWeight;
+              stageChild.style = _stageStyle;
+              this.resetTextBack({
+                textId: exprObj.id,
+                textOriginalWidth: stageChild.width,
+                textOriginalHeight: stageChild.height,
+              });
               break;
           }
-
           break;
         }
       }
@@ -749,6 +741,79 @@ export default {
     constructorTextBackId: function (textId) {
       return "textback_" + textId;
     },
+    /**
+     * 重置或新增文本背景
+     * _paramObj:{type:'new | update',textId:'文本ID',textOriginalWidth:0,textOriginalHeight:0,backColor:'#000000',textOriginalX:1 原始坐标,textOriginalY:1 原始坐标}
+     */
+    resetTextBack: function (_paramObj) {
+      let rectId = this.constructorTextBackId(_paramObj.textId);
+      let stageRectChild =
+        _paramObj.type == "new"
+          ? new PIXI.Graphics()
+          : this.pixiApp.stage.getChildByName(rectId);
+      let _cachData = stageRectChild[this.graphInstanceAppendProName];
+
+      _paramObj.backColor = _paramObj.backColor || _cachData.backColor;
+      _paramObj.textOriginalX =
+        _paramObj.textOriginalX || _cachData.textOriginalX;
+      _paramObj.textOriginalY =
+        _paramObj.textOriginalY || _cachData.textOriginalY;
+      _paramObj.textOriginalWidth =
+        _paramObj.textOriginalWidth || _cachData.textOriginalWidth;
+      _paramObj.textOriginalHeight =
+        _paramObj.textOriginalHeight || _cachData.textOriginalHeight;
+
+      let newCordObjRect = this.computeTextBackPosition({
+        textOriginalX: _paramObj.textOriginalX,
+        textOriginalY: _paramObj.textOriginalY,
+      });
+
+      let rectSize = this.computeTextBackSize({
+        textOriginalWidth: _paramObj.textOriginalWidth,
+        textOriginalHeight: _paramObj.textOriginalHeight,
+      });
+
+      stageRectChild.clear();
+      stageRectChild.beginFill("0x" + _paramObj.backColor.substring(1));
+
+      stageRectChild.drawRect(
+        newCordObjRect.x,
+        newCordObjRect.y,
+        rectSize.width,
+        rectSize.height
+      );
+      stageRectChild.endFill();
+      stageRectChild.name = rectId;
+      stageRectChild[this.graphInstanceAppendProName] = _paramObj;
+
+      return stageRectChild;
+    },
+    /**
+     * 根据文本的宽、高计算文本背景的宽高
+     * _paramObj:{textOriginalWidth:文本原始宽,textOriginalHeight:文本原始高}
+     */
+    computeTextBackSize: function (_paramObj) {
+      let textDefaultConfig = window.__systemConf.systemGraph.peiDian.text;
+      var newWidth =
+        (_paramObj.textOriginalWidth + 2 * textDefaultConfig.padding) *
+        this.canvasProObj.originalScale;
+      var newHeight =
+        (_paramObj.textOriginalHeight + 2 * textDefaultConfig.padding) *
+        this.canvasProObj.originalScale;
+      return { width: newWidth, height: newHeight };
+    },
+    /**
+     * 根据文本的坐标计算文本背景的坐标
+     * _paramObj:{textOriginalX:文本原始x坐标,textOriginalY:文本原始y坐标}
+     */
+    computeTextBackPosition: function (_paramObj) {
+      let textDefaultConfig = window.__systemConf.systemGraph.peiDian.text;
+      let newCordObjRect = this.convertCoordToLeftOrigina({
+        x: _paramObj.textOriginalX - textDefaultConfig.padding,
+        y: _paramObj.textOriginalY - textDefaultConfig.padding,
+      });
+      return { x: newCordObjRect.x, y: newCordObjRect.y };
+    },
   },
   created() {},
 

+ 26 - 0
src/controller/systemGraph/sysGraphController.ts

@@ -209,6 +209,19 @@ export class sysGraphController {
      * @param _paramObj {name:'系统图名称',type:'系统图类型编码',templateId:'引用的模板id',system:'所属的系统类型编码',projectId:'项目id',systemId:'对应的系统实例id',groupCode:'集团编码',}
      */
     static async createSysGraph(_paramObj: any) {
+        //判断系统图名称是否重复
+        var repeatUrl = '/diagram/judge/name/duplicate?groupCode=' + _paramObj.groupCode + '&projectId=' + _paramObj.projectId;
+        var repeatResultObj = await this.sysGraphHttpUtilsInstance.postRequest(repeatUrl, { name: _paramObj.name });
+        if(repeatResultObj.result!= logicConfig.resultObj.success){
+            repeatResultObj.message = '系统图名称判断是否重复请求失败';
+            return repeatResultObj; 
+        }
+        if(repeatResultObj.data==true){
+            repeatResultObj.message = '已存在该系统图名称';
+            repeatResultObj.result = logicConfig.resultObj.failure;
+            return repeatResultObj; 
+        }
+
         var url = '/diagram/newDiagram?groupCode=' + _paramObj.groupCode + '&projectId=' + _paramObj.projectId;
         var resultObj = await this.sysGraphHttpUtilsInstance.postRequest(url, _paramObj);
         if (resultObj.result != logicConfig.resultObj.success) {
@@ -421,6 +434,19 @@ export class sysGraphController {
     * @_paramObj {id:'系统图ID',name:'系统图名称'}
     */
     static async saveGraphName(_paramObj: any) {
+        //判断系统图名称是否重复
+        var repeatUrl = '/diagram/judge/name/duplicate';
+        var repeatResultObj = await this.sysGraphHttpUtilsInstance.postRequest(repeatUrl, { name: _paramObj.name });
+        if (repeatResultObj.result != logicConfig.resultObj.success) {
+            repeatResultObj.message = '系统图名称判断是否重复请求失败';
+            return repeatResultObj;
+        }
+        if (repeatResultObj.data == true) {
+            repeatResultObj.message = '已存在该系统图名称';
+            repeatResultObj.result = logicConfig.resultObj.failure;
+            return repeatResultObj;
+        }
+
         var url = '/diagram/update/name';
         var resultObj = await this.sysGraphHttpUtilsInstance.postRequest(url, _paramObj);
         return resultObj;