Merge branch 'hm' into dev

.env.development

@@ -12,6 +12,6 @@ VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
 # VUE_APP_BASE_API  = 'http://10.1.161.127:8080'
 # VUE_APP_BASE_API  = 'http://10.1.161.183:6661'
-VUE_APP_BASE_API  = 'http://192.168.136.213:6661'
+VUE_APP_BASE_API  = 'http://10.1.161.57:6661'
 
 # VUE_APP_BASE_API  = 'http://10.1.162.158:6661'

src/api/unified-access/access-feedback.js

@@ -65,4 +65,12 @@ export function delThirdStepTabAccessReady (id) {
     url: `/web/tab-datasource-msg/deleteDataSun/${id}`,
     method: 'post',
   })
+}
+
+// 取消接入反馈
+export function deleteTabAccessFeedbackById (accessOnlyId) {
+  return request({
+    url: `/web/tab-access-feedback/deleteTabAccessFeedbackById/${accessOnlyId}`,
+    method: 'post',
+  })
 }

src/views/unified-access/access-feedback/dialog/FeedbackDialog.vue

@@ -370,7 +370,7 @@
       <el-button type="primary" @click="handleBackStep" v-if="activeName > 1">上一步</el-button>
       <el-button type="primary" @click="handleNextStep" v-if="activeName < 4">下一步</el-button>
 
-      <el-button @click="handleCancel">取 消</el-button>
+      <el-button @click="beforeClose">取 消</el-button>
       <el-button type="primary" @click="handleConfirm">暂 存</el-button>
       <el-button type="primary" @click="handleConfirm" v-if="activeName === 4">确 定</el-button>
     </div>
@@ -401,7 +401,10 @@ import {
   addSecondStepTabAccessReady,
 
   // 第三步
-  addThirdStepTabAccessReady
+  addThirdStepTabAccessReady,
+
+  // 取消
+  deleteTabAccessFeedbackById
 } from "@/api/unified-access/access-feedback.js";
 import { getTabAccessList } from "@/api/unified-access/access-party-maintenance.js";
 import MyTable from "@/components/MyTable";
@@ -871,16 +874,36 @@ export default {
     handleUpdateVisible (val) {
       this.visible = val;
     },
-    beforeClose (done) {
-      this.visible = false;
-      this.$emit("before-close", done);
-    },
+    // beforeClose (done) {
+    //   this.visible = false;
+    //   this.$emit("before-close", done);
+    // },
     // 取消按钮处理方法
-    handleCancel () {
-      this.visible = false;
-      this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
+    beforeClose () {
+      if(this.accessOnlyId){
+        deleteTabAccessFeedbackById(this.accessOnlyId).then(res=>{
+        if(+res.code===200){
+          this.visible = false;
+          this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
+        }
+      })
+      }else{
+        this.visible = false;
+        this.$emit("cancel"); // 可以在父组件监听 'cancel' 事件
+      }
+      this.firstStep= {
+        code: "", //标识符
+        persion: "", //交换需求联系人
+        phone: "", //联系方式
+        offers: [], // 数据提供方
+        access: [], //数据接收方
+        auditDetail: "", //审核意见
+        auditName: "", //审核人
+        auditTime: "", //审核时间
+      }
     },
 
+
     // 确定按钮处理方法
     handleConfirm () {
       // this.$refs.myFormComponent.validateForm();

src/views/unified-resources/link-monitor/link-monitor-center/components/VisualMonitor.vue

@@ -1,75 +1,214 @@
 <template>
   <el-container>
-    <el-row :gutter="20">
-      <el-col :span="8">
-        <div class="grid-content1">
-          <div class="left_top">
-            <div class="title">统一门户</div>
-            <div class="small_title">
-              <img src="../../../../../assets/img/unified-resources/小标题.png" alt />
-              <span>热点应用</span>
-              <div>
-                <span v-for="item in hotUse" :key="item" class="num_bg">{{ item }}</span>
+    <div class="p_container">
+      <!-- 左 -->
+      <div class="grid-content1">
+        <div class="left_top">
+          <div class="title">统一门户</div>
+          <div class="small_title">
+            <img src="../../../../../assets/img/unified-resources/小标题.png" alt />
+            <span>热点应用</span>
+            <div>
+              <span v-for="item in hotUse" :key="item" class="num_bg">{{ item }}</span>
+            </div>
+          </div>
+          <div class="use_content">
+            <div class="use_count">
+              <div class="use_count_item">
+                <img src="../../../../../assets/img/unified-resources/非信创应用.png" alt />
+                <div>
+                  <div class="use_count_item_title">非信创应用</div>
+                  <div class="use_count_item_num">20</div>
+                </div>
+              </div>
+              <div class="use_count_item">
+                <img src="../../../../../assets/img/unified-resources/信创应用.png" alt />
+                <div>
+                  <div class="use_count_item_title">信创应用</div>
+                  <div class="use_count_item_num">15</div>
+                </div>
               </div>
             </div>
-            <div class="use_content">
-              <div class="use_count">
-                <div class="use_count_item">
-                  <img src="../../../../../assets/img/unified-resources/非信创应用.png" alt />
-                  <div>
-                    <div class="use_count_item_title">非信创应用</div>
-                    <div class="use_count_item_num">20</div>
-                  </div>
+            <div class="use_chart" ref="hot_chart">
+              <!-- <div  ></div> -->
+            </div>
+          </div>
+          <div class="small_title">
+            <img src="../../../../../assets/img/unified-resources/小标题.png" alt />
+            <span>常用浏览器</span>
+            <!-- <div>
+                <span v-for="item in hotUse" :key="item" class="num_bg">{{ item }}</span>
+            </div>-->
+          </div>
+          <div class="use_content">
+            <div class="use_count">
+              <div class="use_count_item">
+                <img src="../../../../../assets/img/unified-resources/浏览器.png" alt />
+                <div>
+                  <div class="use_count_item_num">80%</div>
+                  <div class="use_count_item_title">8:00-19:00</div>
                 </div>
-                <div class="use_count_item">
-                  <img src="../../../../../assets/img/unified-resources/信创应用.png" alt />
-                  <div>
-                    <div class="use_count_item_title">信创应用</div>
-                    <div class="use_count_item_num">15</div>
-                  </div>
+              </div>
+              <div class="use_count_item">
+                <img src="../../../../../assets/img/unified-resources/浏览器.png" alt />
+                <div>
+                  <div class="use_count_item_num">20%</div>
+                  <div class="use_count_item_title">19:00-8:00</div>
                 </div>
               </div>
-              <div class="use_chart" ref="hot_chart">
-                <!-- <div  ></div> -->
+            </div>
+            <div class="use_chart" ref="browser_chart">
+              <!-- <div  ></div> -->
+            </div>
+          </div>
+        </div>
+        <div class="left_center">
+          <div class="title">统一用户</div>
+          <el-table :data="userTableData" stripe style="width: 100%" max-height="200">
+            <el-table-column prop="date" label></el-table-column>
+            <el-table-column prop="name" label="用户总数" width="120"></el-table-column>
+          </el-table>
+        </div>
+        <div class="left_bottom">
+          <div class="title">接入</div>
+        </div>
+      </div>
+
+      <!-- 右 -->
+      <div class="grid-content2">
+        <div class="grid-content2_top">
+          <div class="title">统一接入</div>
+          <div class="grid-content2_top_box1">
+            <div class="grid-content2_top_item1">
+              <div class="grid-content2_top_item1_title">今日API接入总量</div>
+              <div>
+                <div>接口数量</div>
+                <div>169</div>
+              </div>
+              <div>
+                <div>转发数量</div>
+                <div>55/23</div>
               </div>
             </div>
-            <div class="small_title">
-              <img src="../../../../../assets/img/unified-resources/小标题.png" alt />
-              <span>常用浏览器</span>
-              <!-- <div>
-                <span v-for="item in hotUse" :key="item" class="num_bg">{{ item }}</span>
-              </div>-->
+            <div class="grid-content2_top_item1">
+              <div class="grid-content2_top_item1_title">库表接入总量</div>
+              <div>
+                <div>接口数量</div>
+                <div>169</div>
+              </div>
+              <div>
+                <div>转发数量</div>
+                <div>55/23</div>
+              </div>
             </div>
-            <div class="use_content">
-              <div class="use_count">
-                <div class="use_count_item">
-                  <img src="../../../../../assets/img/unified-resources/浏览器.png" alt />
-                  <div>
-                    <div class="use_count_item_num">80%</div>
-                    <div class="use_count_item_title">8:00-19:00</div>
-                  </div>
+            <div class="grid-content2_top_item1">
+              <div class="grid-content2_top_item1_title">Kafka topic总量</div>
+              <div>
+                <div>接口数量</div>
+                <div>169</div>
+              </div>
+              <div>
+                <div>转发数量</div>
+                <div>55/23</div>
+              </div>
+            </div>
+            <div class="grid-content2_top_item1">
+              <div class="grid-content2_top_item1_title">文件</div>
+              <div>
+                <div>接口数量</div>
+                <div>169</div>
+              </div>
+              <div>
+                <div>转发数量</div>
+                <div>55/23</div>
+              </div>
+            </div>
+          </div>
+          <div class="grid-content2_top_box2">
+            <div class="grid-content2_top_item2">
+              <div class="grid-content2_top_item2_img">
+                <img src="../../../../../assets/img/unified-resources/异常.png" alt />
+                <div>
+                  <div>接口数量</div>
+                  <div>169</div>
                 </div>
-                <div class="use_count_item">
-                  <img src="../../../../../assets/img/unified-resources/浏览器.png" alt />
+              </div>
+              <div class="grid-content2_top_item2_status_danger"></div>
+            </div>
+
+            <div class="grid-content2_top_item2">
+              <div class="grid-content2_top_item2_img">
+                <img src="../../../../../assets/img/unified-resources/最高.png" alt />
+                <div>
+                  <div>接口数量</div>
+                  <div>169</div>
+                </div>
+              </div>
+              <div class="grid-content2_top_item2_status_success"></div>
+            </div>
+            <div class="grid-content2_top_item2">
+              <div class="grid-content2_top_item2_img">
+                <img src="../../../../../assets/img/unified-resources/平均.png" alt />
+                <div>
+                  <div>接口数量</div>
+                  <div>169</div>
+                </div>
+              </div>
+              <div class="grid-content2_top_item2_status_primary"></div>
+            </div>
+            <div class="grid-content2_top_item2">
+              <div class="grid-content2_top_item2_img">
+                <img src="../../../../../assets/img/unified-resources/最低.png" alt />
+                <div>
+                  <div>接口数量</div>
+                  <div>169</div>
+                </div>
+              </div>
+              <div class="grid-content2_top_item2_status_warning"></div>
+            </div>
+          </div>
+        </div>
+        <div class="grid-content2_bottom">
+          <div class="title">统一资源</div>
+          <div class="grid-content2_bottom_content">
+            <!--  -->
+            <div class="count_box">
+              <div class="title_box">
+                <div v-for="item in titleData" :key="item">{{ item.title }}</div>
+              </div>
+              <div class="num_box">
+                <div class="num_box_top">
                   <div>
-                    <div class="use_count_item_num">20%</div>
-                    <div class="use_count_item_title">19:00-8:00</div>
+                    <div>数据目录</div>
+                    <div>
+                      <span v-for="item in hotUse" :key="item" class="num_bg">{{ item }}</span>
+                    </div>
                   </div>
                 </div>
+                <div class="num_box_bottom"></div>
               </div>
-              <div class="use_chart" ref="browser_chart">
-                <!-- <div  ></div> -->
+              <div class="bar_chart"></div>
+            </div>
+            <!-- 表格 -->
+            <div>
+              <div class="small_title">
+                <img src="../../../../../assets/img/unified-resources/小标题.png" alt />
+                <span>统一接口监控状态监听</span>
+              </div>
+              <div style="tab_table">
+                <div class="tab_img" :class="{tab_active:''}">存储空间</div>
+                <div class="tab_img" :class="{tab_active:''}">监控预警</div>
               </div>
+              <el-table :data="userTableData" stripe style="width: 100%" max-height="200">
+                <el-table-column type="index" width="50"></el-table-column>
+                <el-table-column prop="name" label="接口"></el-table-column>
+                <el-table-column prop="name" label="状态" width=""></el-table-column>
+              </el-table>
             </div>
           </div>
-          <div class="left_center"></div>
-          <div class="left_bottom"></div>
         </div>
-      </el-col>
-      <el-col :span="16">
-        <div class="grid-content2">2222222222222222</div>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
   </el-container>
 </template>
 
@@ -92,7 +231,36 @@ export default {
         { name: "Firefox", value: 5.6 },
         { name: "Chrome", value: 8 },
         { name: "Safari", value: 9 }
-      ]
+      ],
+      userTableData: [
+        {
+          date: "2016-05-02",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1518 弄"
+        },
+        {
+          date: "2016-05-04",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1517 弄"
+        },
+        {
+          date: "2016-05-01",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1519 弄"
+        },
+        {
+          date: "2016-05-03",
+          name: "王小虎",
+          address: "上海市普陀区金沙江路 1516 弄"
+        }
+      ],
+      titleData: [
+        { title: "上链" },
+        { title: "数据归集" },
+        { title: "数据共享" },
+        { title: "数据目录" }
+      ],
+      tabData: [{ title: "存储空间" }, { title: "监控预警" }]
     };
   },
   mounted() {
@@ -126,7 +294,7 @@ export default {
         graphic: [
           {
             type: "text",
-            left: "65%", // 将文字定位到右上角
+            right: "3%", // 将文字定位到右上角
             top: "5%",
             style: {
               text: "登录次数 成功/失败", // 显示的文本
@@ -171,21 +339,21 @@ export default {
             stack: "总量",
             data: normalizedData.map(item => item.success), // 使用归一化后的数据
             itemStyle: {
-        // 使用线性渐变，调整渐变颜色
-        color: (params) => {
-          const isEven = params.dataIndex % 2 === 0; // 判断是否为偶数索引
-          return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            {
-              offset: 0,
-              color: isEven ? '#d2ebfb' : '#fbf0e4' // 蓝色和黄色交替
+              // 使用线性渐变，调整渐变颜色
+              color: params => {
+                const isEven = params.dataIndex % 2 === 0; // 判断是否为偶数索引
+                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                  {
+                    offset: 0,
+                    color: isEven ? "#d2ebfb" : "#fbf0e4" // 蓝色和黄色交替
+                  },
+                  {
+                    offset: 1,
+                    color: isEven ? "#0b91e9" : "#fe8e08" // 蓝色和黄色交替
+                  }
+                ]);
+              }
             },
-            {
-              offset: 1,
-              color: isEven ? '#0b91e9' : '#fe8e08' // 蓝色和黄色交替
-            }
-          ]);
-        }
-      },
             label: {
               show: false,
               //   position: 'insideRight', // 标签显示在柱体右侧
@@ -228,7 +396,7 @@ export default {
         },
         legend: {
           orient: "vertical",
-          left: "left",
+          left: "right",
           data: data.map(item => item.name),
           textStyle: {
             color: "#333"
@@ -239,6 +407,7 @@ export default {
             name: "浏览器市场份额",
             type: "pie",
             radius: ["40%", "70%"], // 设置环形图的内外半径
+            color: ["#fe8f02", "#0a7cff", "#2cb68c", "#e23636"],
             labelLine: {
               show: true // 显示标签连线
             },
@@ -248,14 +417,15 @@ export default {
             data: data.map(item => ({
               value: item.value,
               name: item.name
-            })),
-            itemStyle: {
-              // 设置每个部分的颜色
-              color: params => {
-                const colorList = ["#FF9F00", "#FF6F61", "#3E9D45", "#E74C3C"]; // 自定义颜色列表
-                return colorList[params.dataIndex];
-              }
-            }
+            }))
+            // itemStyle: {
+            //   // 设置每个部分的颜色
+            //   color: params => {
+            //     // const colorList = ["#FF9F00", "#FF6F61", "#3E9D45", "#E74C3C"]; // 自定义颜色列表
+            //     const colorList = ["#fe8f02", "#0a7cff", "#2cb68c", "#e23636"]; // 自定义颜色列表
+            //     return colorList[params.dataIndex];
+            //   }
+            // }
           }
         ]
       };
@@ -267,10 +437,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+* {
+  box-sizing: border-box;
+}
 .el-container {
+  width: 100%;
+  box-sizing: border-box;
   padding: 20px;
+  // padding: 20px 20px 0 0px;
+  height: calc(100vh - 90px);
+  background-color: #edf4fa;
+}
+.p_container {
+  width: 100%;
+  display: flex;
 }
-
 .title {
   padding-left: 30px;
   width: 340px;
@@ -289,7 +470,7 @@ export default {
   > span {
     font-family: Alibaba PuHuiTi;
     font-weight: 500;
-    font-size: 20px;
+    font-size: 16px;
     color: #333333;
     margin: 0 10px;
   }
@@ -316,12 +497,14 @@ export default {
 .grid-content1 {
   width: 574px;
   //   height: 500px;
-  height: calc(100vh - 80px);
-  background-color: pink;
+  // height: calc(100vh - 80px);
+  height: 100%;
+  margin-right: 20px;
 
   .left_top {
+    box-sizing: border-box;
     width: 574px;
-    height: 585px;
+    height: 420px;
     background: rgba(255, 255, 255, 0.7);
     box-shadow: 0px 2px 15px 1px rgba(0, 26, 52, 0.08);
     padding: 20px;
@@ -373,5 +556,145 @@ export default {
       }
     }
   }
+  .left_center {
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: 0px 2px 15px 1px rgba(0, 26, 52, 0.08);
+    padding: 20px;
+    box-sizing: border-box;
+    margin: 20px 0;
+  }
+  .left_bottom {
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: 0px 2px 15px 1px rgba(0, 26, 52, 0.08);
+    padding: 20px;
+    box-sizing: border-box;
+  }
+}
+
+.grid-content2 {
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  .grid-content2_top {
+    width: 100%;
+    height: 30%;
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: 0px 2px 15px 1px rgba(0, 26, 52, 0.08);
+    padding: 20px;
+    box-sizing: border-box;
+    margin-bottom: 20px;
+    .grid-content2_top_box1 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      // gap: 20px;
+      .grid-content2_top_item1 {
+        flex: 1;
+        position: relative;
+
+        .grid-content2_top_item1_title {
+          position: absolute;
+          top: 15px;
+          left: 30px;
+        }
+        // padding: 0px 30px 10px;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        // width: 292px;
+        width: 25%;
+        height: 120px;
+        border: 1px solid #ffffff;
+        background: url(../../../../../assets/img/unified-resources/框.png)
+          no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+    .grid-content2_top_box2 {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .grid-content2_top_item2 {
+        flex: 1;
+        padding: 0 40px;
+        height: 100px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: url(../../../../../assets/img/unified-resources/面板.png)
+          no-repeat;
+        background-size: 100% 100%;
+        .grid-content2_top_item2_img {
+          display: flex;
+          align-items: center;
+          // margin-left: 40px;
+          > img {
+            margin-right: 20px;
+          }
+        }
+        .grid-content2_top_item2_status_danger {
+          height: 30px;
+          width: 2px;
+          border-right: 5px solid #f98a8c;
+          border-radius: 5px;
+        }
+        .grid-content2_top_item2_status_success {
+          height: 30px;
+          width: 2px;
+          border-right: 5px solid #60daa8;
+          border-radius: 5px;
+        }
+        .grid-content2_top_item2_status_primary {
+          height: 30px;
+          width: 2px;
+          border-right: 5px solid #8bc7f9;
+          border-radius: 5px;
+        }
+        .grid-content2_top_item2_status_warning {
+          height: 30px;
+          width: 2px;
+          border-right: 5px solid #fdd58c;
+          border-radius: 5px;
+        }
+      }
+    }
+  }
+  .grid-content2_bottom {
+    flex: 1;
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: 0px 2px 15px 1px rgba(0, 26, 52, 0.08);
+    padding: 20px;
+    box-sizing: border-box;
+    .count_box {
+      width: 100%;
+    }
+    .title_box {
+      > div {
+        width: 163px;
+        height: 40px;
+        background: url(../../../../../assets/img/unified-resources/三角箭头.png)
+          no-repeat;
+        background-size: 100% 100%;
+        line-height: 40px;
+        text-align: center;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+// 数字背景
+.num_bg {
+  width: 25px;
+  height: 31px;
+  margin-right: 5px;
+  background: url(../../../../../assets/img/unified-resources/数字背景.png)
+    no-repeat;
+  background-size: 100% 100%;
+  color: #269cfd;
+  text-align: center;
+  line-height: 31px;
 }
 </style>

vue.config.js

@@ -36,7 +36,7 @@ module.exports = {
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://10.1.161.127:8080`,
         // target: `http://10.1.161.183:6661`,
-        target: `http://192.168.136.213:6661`,
+        target: `http://10.1.161.57:6661`,
         // target: `http://10.1.162.158:6661`,
 
         changeOrigin: true,