'update:jar包冲突预警'

cubic-ui/src/api/list.js

@@ -16,6 +16,14 @@ export function threadPoolList(query) {
   })
 }
 
+export function getJarList(query) {
+  return request({
+    url: '/jar/getList',
+    method: 'get',
+    params: query
+  })
+}
+
 
 export function getInstanceInfo(query) {
   return request({

cubic-ui/src/layout/components/LeftBar.vue

@@ -23,6 +23,10 @@
         <i class="el-icon-data-line"></i>
         <span slot="title">线程池监控</span>
     </el-menu-item>
+    <el-menu-item index="/clash/clash">
+        <i class="el-icon-warning"></i>
+        <span slot="title">依赖冲突预警</span>
+    </el-menu-item>
     </el-menu>
   </div>
 </template>

cubic-ui/src/router/index.js

@@ -112,6 +112,20 @@ export const constantRoutes = [
       }
     }]
   },
+  {
+    path: '/clash',
+    component: Layout,
+    redirect: '/clash',
+    children: [{
+      path: 'clash',
+      name: 'Clash',
+      component: () => import('@/views/clash/index'),
+      meta: { 
+        title: '依赖冲突预警',
+        showMenu: true
+      }
+    }]
+  },
   // {
   //   path: '/app',
   //   component: Layout,

cubic-ui/src/views/clash/index.vue

+<template>
+  <div class="app-container case-list-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span style="font-size: 14px;">应用： </span>
+        <el-select
+          class="mr"
+          v-model="instanceName"
+          size="mini"
+          style="width: 280px"
+          filterable
+          placeholder="请选择应用"
+          @change="appChange">
+          <el-option v-for="item in appOption" :key="item" :label="item" :value="item"/>
+        </el-select>
+
+        <span style="font-size: 14px;">实例： </span>
+        <el-select
+          v-model="instanceUid"
+          size="mini"
+          style="width: 280px"
+          placeholder="请选择应用实例"
+          @change="instanceUidChange"
+        >
+          <el-option v-for="item in instanceUidOption" :key="item" :label="item" :value="item"/>
+        </el-select>
+        <el-button
+            class="filter-item ml"
+            size="mini"
+            type="primary"
+            icon="el-icon-search"
+            @click="getList"
+          >搜索</el-button>
+      </div>
+      <!-- 依赖列表 -->
+      <div class="bottom-crad">
+        <el-card class="left-card">
+          <div slot="header" class="clearfix">
+            <span>依赖列表</span>
+          </div>
+          <div v-for="(value, key, index) in list" :key="index" class="text item">
+            <el-button @click="handleDetail(key)" type="text" size="small" :class="value.length > 1 ? 'red' : ''" >{{key + '(' + value.length + ')'}}</el-button>
+          </div>
+        </el-card>
+        <el-card class="left-card">
+          <div slot="header" class="clearfix">
+            <span>版本详情</span>
+          </div>
+          <el-collapse>
+            <el-collapse-item v-for="(item, index) in detail" :key="index" :title="item.jarName" :name="item.jarName">
+              <el-form label-width="80px">
+                <el-form-item label="服务名称:">
+                  {{ item.serviceName }}
+                </el-form-item>
+                <el-form-item label="jar包名称:">
+                  {{ item.jarName }}
+                </el-form-item>
+              </el-form>
+            </el-collapse-item>
+          </el-collapse>
+        </el-card>
+      </div>
+      
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {appList, getAppNames, getInstanceNames, getJarList} from '@/api/list'
+import moment from "moment";
+
+// arr to obj, such as { CN : "China", US : "USA" }
+export default {
+  name: 'Clash',
+  data() {
+    return {
+      total: '',
+      instanceUid: '',
+      instanceName: '',
+      instanceUidOption: [],
+      appOption: [],
+      search: '',
+      tableData: [],
+      listLoading: true,
+      list: {
+        "shanzhu": [
+            {
+                "id": 4,
+                "appId": "1",
+                "serviceName": "lihongtest",
+                "jarName": "shanzhu:01",
+                "createDate": "2021-04-24 00:21:08"
+            }
+        ],
+        "lihong": [
+            {
+                "id": 1,
+                "appId": "1",
+                "serviceName": "lihongtest",
+                "jarName": "lihong:01",
+                "createDate": "2021-04-23 23:31:20"
+            },
+            {
+                "id": 2,
+                "appId": "1",
+                "serviceName": "lihongtest",
+                "jarName": "lihong:02",
+                "createDate": "2021-04-24 00:19:43"
+            },
+            {
+                "id": 3,
+                "appId": "1",
+                "serviceName": "lihongtest",
+                "jarName": "lihong:03",
+                "createDate": "2021-04-24 00:20:14"
+            }
+        ]
+      },
+      detail: ''
+    }
+  },
+  created() {
+    this.instanceUid = this.$cookies.get('appId')
+    this.instanceName = this.$cookies.get('instanceName')
+    this.getInstanceList({name: this.instanceName})
+    this.getAppList()
+    this.getList()
+  },
+  methods: {
+    getInstanceList(params) {
+      const _this = this
+      getInstanceNames(params).then(res => {
+        _this.instanceUidOption = res.data
+        _this.instanceUid = res.data[0]
+      })
+    },
+    getAppList() {
+      const _this = this
+      getAppNames().then(res => {
+        _this.appOption = res.data
+        if (_this.instanceName !== '') {
+          //TODO 第一个赋值默认的
+        } else {
+          _this.instanceName = res.data[0]
+        }
+      })
+    },
+    instanceUidChange(val) {
+      this.$cookies.set("instanceUid", val)
+    },
+    appChange(val) {
+      this.instanceName = val;
+      this.instanceUid = '';
+      this.$cookies.set("instanceName", val)
+      this.$cookies.set("instanceUid", '')
+      this.getInstanceList({name: this.instanceName});
+    },
+    getList() {
+      this.listLoading = true
+      let _this;
+      _this = this;
+      _this.detail = ''
+      getJarList({ appId:  _this.instanceUid}).then(response => {
+        _this.list = response.data
+      }).finally(() => {
+        this.listLoading = false
+      })
+    },
+    handleDetail(row) {
+      this.detail = this.list[row]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .mr {
+    margin-right: 20px;
+  }
+  .ml {
+    margin-left: 10px;
+  }
+  .text {
+    font-size: 14px;
+  }
+
+  .item {
+    margin-bottom: 18px;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+  .clearfix:after {
+    clear: both
+  }
+
+  .left-card {
+    width: 500px;
+  }
+
+  .bottom-crad {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .red {
+    color: red;
+  }
+</style>

cubic-ui/src/views/dump/index.vue

@@ -105,6 +105,7 @@ export default {
     }
   },
   created() {
+    console.log(this.$cookies.get());
     this.instanceUid = this.$cookies.get('appId')
     this.instanceName = this.$cookies.get('instanceName')
     this.getInstanceList({name: this.instanceName})