系统图页面绘制

src/components/systemGraph/edit.vue

@@ -1,5 +1,175 @@
 <template>
-  <div class="container">我是编辑器</div>
+  <div id="divGraphEdit">
+    <div class="firstRow">
+      <div class="firstOperDivContainer">
+        <img
+          class="imgBar"
+          src="../../assets/images/systemGraph/editLogo.svg"
+        />
+        <span class="headerTitle">系统图编辑器</span>
+        <div class="operBtnDiv" v-if="operState === 0">
+          <span>回到首页</span>
+          <span>编辑系统图</span>
+          <span>上架系统图</span>
+          <span>下架系统图</span>
+        </div>
+        <div class="operBtnDiv" v-if="operState === 1">
+          <span>保存图纸</span>
+          <span>放弃编辑</span>
+        </div>
+        <span class="delBtn">删除图纸</span>
+      </div>
+      <div class="secondOperDivContainer">
+        <img
+          class="imgBar"
+          src="../../assets/images/systemGraph/barController.svg"
+        />
+        <span class="el-icon-caret-bottom sanjiaoBar"></span>
+        <hr class="splitLine" />
+        <el-select v-model="selectScale" value-key="value">
+          <el-option
+            v-for="item in scaleArr"
+            :key="item.value"
+            :label="item.name"
+            :value="item"
+          >
+          </el-option>
+        </el-select>
+        <span class="el-icon-zoom-in zoomin"></span>
+        <span class="el-icon-zoom-out zoomout"></span>
+        <hr class="splitLine" v-if="operState == 1" />
+        <img
+          v-if="operState == 1"
+          class="imgLeftTop"
+          src="../../assets/images/systemGraph/leftTop.svg"
+        />
+        <img
+          v-if="operState == 1"
+          class="rightLeftTop"
+          src="../../assets/images/systemGraph/rightTop.svg"
+        />
+        <hr class="splitLine" v-if="operState == 1" />
+        <img
+          v-if="operState == 1"
+          class="imgLeftTop"
+          src="../../assets/images/systemGraph/text.svg"
+        />
+        <span class="resetBtn" v-if="operState == 1">重置为自动出图样式</span>
+      </div>
+    </div>
+    <div class="secondRow">
+      <div class="graphInfoContainer" v-if="operState === 0 || operState === 1">
+        <div class="graphInfoFirst">
+          <span class="graphInfoName">系统图名称</span>
+          <span class="graphInfoFirstEdit">编辑</span>
+        </div>
+        <div class="graphInfoContent">
+          <span>高压系统1#系统图</span>
+        </div>
+
+        <div class="graphInfoName">
+          <span>系统图类型</span>
+        </div>
+        <div class="graphInfoContent">
+          <span>高压配电</span>
+        </div>
+
+        <div class="graphInfoName">
+          <span>系统实例</span>
+        </div>
+        <div class="graphInfoContent">
+          <span>实例1</span>
+        </div>
+
+        <div class="graphInfoName">
+          <span>系统图模版</span>
+        </div>
+        <div class="graphInfoContent">
+          <span>模版1</span>
+        </div>
+
+        <div class="graphInfoName">
+          <span>所属项目</span>
+        </div>
+        <div class="graphInfoContent">
+          <span>银泰中心</span>
+        </div>
+
+        <div class="graphInfoName">
+          <span>当前状态</span>
+        </div>
+        <div class="graphInfoContent">
+          <span>草稿</span>
+        </div>
+      </div>
+      <div></div>
+    </div>
+
+    <el-dialog title="新建系统图" :visible="operState == 2" :show-close="false">
+      <div class="createConContainer">
+        <div>系统图名称*</div>
+        <div class="createCdCon">
+          <el-input v-model="createGraphName" placeholder="请输入"></el-input>
+        </div>
+
+        <div class="createCdTitle">项目*</div>
+        <div class="createCdCon">
+          <el-select
+            v-model="selProject"
+            value-key="id"
+            placeholder="请选择项目"
+          >
+            <el-option
+              v-for="item in projects"
+              :key="item.id"
+              :label="item.name"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
+
+        <div class="createCdTitle">系统实例*</div>
+        <div class="createCdCon">
+          <el-select
+            v-model="selSystemIns"
+            value-key="id"
+            placeholder="请选择系统实例"
+          >
+            <el-option
+              v-for="item in systemInsArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
+
+        <div class="createCdTitle">系统图模板*</div>
+        <div class="createCdCon">
+          <el-select
+            v-model="selSystemTemplate"
+            value-key="id"
+            placeholder="请选择系统图模板"
+          >
+            <el-option
+              v-for="item in systemTemplateArr"
+              :key="item.id"
+              :label="item.name"
+              :value="item"
+            >
+            </el-option>
+          </el-select>
+        </div>
+
+        <div class="createFoot">
+          <el-button @click="cancelCreate">取消</el-button>
+          <el-button type="primary">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 <script>
 import { mapState } from "vuex";
@@ -7,22 +177,242 @@ import { mapState } from "vuex";
 export default {
   props: [],
   data() {
-    return {};
+    return {
+      //缩放范围
+      scaleArr: [
+        {
+          name: "25%",
+          value: 25,
+        },
+        {
+          name: "50%",
+          value: 50,
+        },
+        {
+          name: "75%",
+          value: 75,
+        },
+        {
+          name: "100%",
+          value: 100,
+        },
+        {
+          name: "150%",
+          value: 150,
+        },
+      ],
+      //选择的缩放范围
+      selectScale: {},
+      //操作状态  0 预览； 1 编辑；  2 新建
+      operState: -1,
+      //系统图ID
+      diagramId: "",
+      //系统图名称，用于新建时绑定输入框
+      createGraphName: "",
+      //选择的项目，用于新建时绑定选择框
+      selProject: {},
+      //系统实例列表
+      systemInsArr: [
+        { id: "1", name: "实例1" },
+        { id: "2", name: "实例2" },
+      ],
+      //选择的系统实例
+      selSystemIns: {},
+      //系统图模板列表
+      systemTemplateArr: [
+        { id: "1", name: "模板1" },
+        { id: "2", name: "模板2" },
+      ],
+      //选择的系统图模板
+      selSystemTemplate: {},
+    };
   },
   computed: {
     ...mapState(["projects"]),
   },
-  methods: {},
-  created() {},
+  methods: {
+    //取消创建
+    cancelCreate: function () {
+      window.close();
+    },
+  },
+  created() {
+    this.operState = !this.$route.query.ost
+      ? -1
+      : parseInt(this.$route.query.ost);
+    this.diagramId = !this.$route.query.did
+      ? -1
+      : parseInt(this.$route.query.did);
+    this.selectScale = this.scaleArr[3];
+  },
 
   mounted() {},
   components: {},
 };
 </script>
 
-<style scoped>
-.container {
+<style>
+#divGraphEdit {
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
+
+#divGraphEdit .firstRow {
+  height: 96px;
+  background: #ffffff;
+  box-shadow: 0px 2px 10px rgb(31 36 41 / 10%);
+  display: flex;
+  flex-direction: column;
+}
+
+#divGraphEdit .firstOperDivContainer {
+  flex: 1;
+  border-bottom: solid 1px #f2f2f2;
+  line-height: 48px;
+}
+
+#divGraphEdit .firstOperDivContainer > span:not(:first-child),
+#divGraphEdit .operBtnDiv span {
+  cursor: pointer;
+}
+
+#divGraphEdit .secondOperDivContainer {
+  flex: 1;
+}
+
+#divGraphEdit .headerTitle {
+  font-weight: 600;
+  margin-left: 15px;
+}
+
+#divGraphEdit .operBtnDiv {
+  display: inline-block;
+  margin-left: 52px;
+  font-weight: 500;
+}
+
+#divGraphEdit .operBtnDiv span {
+  margin-left: 20px;
+}
+
+#divGraphEdit .delBtn {
+  float: right;
+  margin-right: 49px;
+}
+
+#divGraphEdit .imgBar {
+  margin-left: 33px;
+  vertical-align: middle;
+}
+
+#divGraphEdit .sanjiaoBar {
+  vertical-align: middle;
+}
+
+#divGraphEdit .splitLine {
+  display: inline-block;
+  height: 30px;
+  border-left: solid 1px #d8d8d8;
+  vertical-align: middle;
+  margin-left: 26px;
+  border-top: none;
+}
+
+#divGraphEdit .secondOperDivContainer input {
+  border: none !important;
+  width: 66px;
+  padding: 0;
+}
+
+#divGraphEdit .secondOperDivContainer .el-select {
+  margin-left: 26px;
+}
+
+#divGraphEdit .zoomin {
+  margin-left: 20px;
+}
+
+#divGraphEdit .zoomout {
+  margin-left: 14px;
+}
+
+#divGraphEdit .imgLeftTop {
+  vertical-align: middle;
+  margin-left: 26px;
+}
+
+#divGraphEdit .rightLeftTop {
+  vertical-align: middle;
+  margin-left: 22px;
+}
+
+#divGraphEdit .resetBtn {
+  float: right;
+  margin-right: 49px;
+  line-height: 48px;
+  cursor: pointer;
+}
+
+#divGraphEdit .createCdTitle {
+  margin-top: 16px;
+}
+
+#divGraphEdit .createCdCon {
+  margin-top: 8px;
+  width: 360px;
+}
+
+#divGraphEdit .createCdCon .el-select {
+  width: 100%;
+}
+
+#divGraphEdit .createConContainer {
+  margin-left: 80px;
+}
+
+#divGraphEdit .createFoot {
+  float: right;
+  margin-right: 73px;
+  margin-top: 80px;
+}
+
+#divGraphEdit .el-dialog {
+  width: 560px;
+  height: 520px;
+}
+
+#divGraphEdit .secondRow {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+}
+
+#divGraphEdit .graphInfoContainer {
+  background: #fafafa;
+  width: 200px;
+  height: 100%;
+  box-shadow: 0px 0px 1px rgb(0 0 0 / 25%);
+}
+
+#divGraphEdit .graphInfoFirst {
+  margin-top: 31px;
+}
+
+#divGraphEdit .graphInfoName {
+  margin-left: 12px;
+  margin-top: 21px;
+}
+
+#divGraphEdit .graphInfoFirstEdit {
+  margin-right: 12px;
+  float: right;
+  color: #0091ff;
+  cursor: pointer;
+}
+
+#divGraphEdit .graphInfoContent {
+  margin-top: 12px;
+  margin-left: 36px;
+}
 </style>

src/components/systemGraph/index.vue

@@ -33,6 +33,7 @@
         </el-table-column>
       </el-table>
       <el-pagination
+        background
         v-if="dataCount > 0"
         @size-change="handlePageSizeChange"
         @current-change="handleCurrentPageChange"
@@ -64,6 +65,10 @@ export default {
       pageSize: 20,
       //总条数
       dataCount: 0,
+      //进入编辑页面时的状态 0 预览； 1 编辑；  2 新建
+      state: 0,
+      //系统图ID
+      diagramId: "",
     };
   },
   computed: {
@@ -76,10 +81,15 @@ export default {
     handleCurrentPageChange: function () {},
     //新建系统图
     createSystemGraph: function () {
+      this.state = 2;
       window.open(
         "/" +
           packageConfig.name +
-          logicConfig.routerNameConfig.systemGraphEditName
+          logicConfig.routerNameConfig.systemGraphEditName +
+          "?ost=" +
+          this.state +
+          "&did=" +
+          this.diagramId
       );
     },
   },