Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev
This commit is contained in:
commit
6b07f48dd1
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-04-11 10:11:40
|
||||
* @LastEditors: hisense.wuhongjian
|
||||
* @LastEditTime: 2022-07-26 20:23:13
|
||||
* @LastEditTime: 2022-07-28 20:14:40
|
||||
* @Description: 告诉大家这是什么
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
|
|
@ -45,9 +45,9 @@
|
|||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.166:8888/renren-admin';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://124.222.94.39:8888/renren-admin';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://10.16.5.35:8888/renren-admin';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://15.2.21.236:8888/renren-admin';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.236:8888/renren-admin';
|
||||
window.SITE_CONFIG['previewUrl'] = 'http://localhost:8080/';
|
||||
// window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin';
|
||||
window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
|
||||
// WebSocket地址
|
||||
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -801,6 +801,8 @@ export default {
|
|||
}
|
||||
)
|
||||
this.submitFrom.infoList = newArr
|
||||
// 检验是否有空值
|
||||
this.submitFrom.infoList = this.submitFrom.infoList.filter(item => item.attrValue)
|
||||
this.$http
|
||||
.put('/resource/update', this.submitFrom)
|
||||
.then(({ data: res }) => {
|
||||
|
|
|
|||
|
|
@ -709,6 +709,8 @@ export default {
|
|||
}
|
||||
})
|
||||
console.log('编辑===============>', this.submitFrom)
|
||||
// 检验是否有空值
|
||||
this.submitFrom.infoList = this.submitFrom.infoList.filter(item => item.attrValue)
|
||||
this.$http
|
||||
.put('/resource/update', this.submitFrom)
|
||||
.then(({ data: res }) => {
|
||||
|
|
|
|||
|
|
@ -40,6 +40,12 @@
|
|||
v-for="multipleAdditionsItem in itemsonson.note1"
|
||||
:key="multipleAdditionsItem"
|
||||
>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content"> {{
|
||||
multipleAdditionsItem.question ||
|
||||
multipleAdditionsItem.type ||
|
||||
multipleAdditionsItem.name
|
||||
}}</div>
|
||||
<div>
|
||||
{{
|
||||
multipleAdditionsItem.question ||
|
||||
|
|
@ -47,6 +53,13 @@
|
|||
multipleAdditionsItem.name
|
||||
}}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{
|
||||
multipleAdditionsItem.answer ||
|
||||
multipleAdditionsItem.price ||
|
||||
multipleAdditionsItem.img
|
||||
}}</div>
|
||||
<div>
|
||||
{{
|
||||
multipleAdditionsItem.answer ||
|
||||
|
|
@ -54,15 +67,21 @@
|
|||
multipleAdditionsItem.img
|
||||
}}
|
||||
</div>
|
||||
</el-tooltip>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{ multipleAdditionsItem.desc }}</div>
|
||||
<div>{{ multipleAdditionsItem.desc }}</div>
|
||||
</el-tooltip>
|
||||
<!-- <div>{{ multipleAdditionsItem }}</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<el-tooltip v-else placement="top">
|
||||
<div slot="content">{{ itemsonson.note1 }}</div>
|
||||
<el-input
|
||||
v-else
|
||||
v-model="itemsonson.note1"
|
||||
disabled="disabled"
|
||||
></el-input>
|
||||
</el-tooltip>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-for="itemsonson in itemson.children"
|
||||
|
|
@ -94,7 +113,10 @@
|
|||
style="border: 1px solid #3c9bcd;margin"
|
||||
>
|
||||
<div>{{ itemDataFormValue.name }}</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
||||
<div>{{ itemDataFormValue.desc }}</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -115,7 +137,10 @@
|
|||
style="border: 1px solid #3c9bcd;margin"
|
||||
>
|
||||
<div>{{ itemDataFormValue.name }}</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
||||
<div>{{ itemDataFormValue.desc }}</div>
|
||||
</el-tooltip>
|
||||
<div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -137,7 +162,10 @@
|
|||
style="border: 1px solid #3c9bcd;margin"
|
||||
>
|
||||
<div>{{ itemDataFormValue.name }}</div>
|
||||
<el-tooltip placement="top">
|
||||
<div slot="content">{{ itemDataFormValue.desc }}</div>
|
||||
<div>{{ itemDataFormValue.desc }}</div>
|
||||
</el-tooltip>
|
||||
<div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -432,6 +460,11 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.el-tooltip__popper {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
.dataTitle {
|
||||
|
|
@ -464,6 +497,28 @@ export default {
|
|||
margin-bottom: 10px;
|
||||
font-weight: bold;
|
||||
line-height: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
& > div:nth-child(2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
line-height: initial;
|
||||
}
|
||||
& > div:nth-child(3) {
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 6;
|
||||
line-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -503,7 +558,7 @@ export default {
|
|||
& > div:nth-child(3) {
|
||||
margin-top: 10px;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
border: 1px solid #3c9bcd;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.liangjunhua
|
||||
* @Date: 2022-07-08 09:54:50
|
||||
* @LastEditors: hisense.liangjunhua
|
||||
* @LastEditTime: 2022-07-25 11:20:25
|
||||
* @LastEditTime: 2022-07-28 20:09:53
|
||||
* @Description: 多条数据特殊处理
|
||||
-->
|
||||
<template>
|
||||
|
|
@ -164,9 +164,10 @@ export default {
|
|||
},
|
||||
del (title, index) {
|
||||
this.data.splice(index, 1)
|
||||
const str = this.data.length > 0 ? JSON.stringify(this.data) : ''
|
||||
this.$emit('changeInfoList', {
|
||||
attrType: title,
|
||||
attrValue: JSON.stringify(this.data),
|
||||
attrValue: str,
|
||||
delFlag: 0
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,14 +6,14 @@
|
|||
<img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
|
||||
<div>
|
||||
<h4>API总数</h4>
|
||||
<p>99999</p>
|
||||
<p>{{ Apisnum }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ApiBox">
|
||||
<img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
|
||||
<div>
|
||||
<h4>异常API总数</h4>
|
||||
<p>99999</p>
|
||||
<p>{{ ApisnumShiBai }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,12 +24,23 @@
|
|||
<div class="RankingList">
|
||||
<h4 class="title">API异常次数排行TOP10</h4>
|
||||
<ul>
|
||||
<li class="RankingListData" v-for="(item, index) in RankingData" :key="index">
|
||||
<i><b>{{ index + 1 }}</b></i>
|
||||
<el-tooltip class="item" effect="dark" :content="item.name" placement="top">
|
||||
<li
|
||||
class="RankingListData"
|
||||
v-for="(item, index) in RankingData"
|
||||
:key="index"
|
||||
>
|
||||
<i
|
||||
><b>{{ index + 1 }}</b></i
|
||||
>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="item.name"
|
||||
placement="top"
|
||||
>
|
||||
<h6>{{ item.name }}</h6>
|
||||
</el-tooltip>
|
||||
<span>{{ item.num }}</span>
|
||||
<span>{{ item.count }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -45,24 +56,62 @@
|
|||
<h4 class="title">API异常次数统计</h4>
|
||||
<div class="AnomalyStatisticsTable">
|
||||
<el-table :data="AnomalyStatisticsTable" border style="width: 100%">
|
||||
<el-table-column prop="name" label="接口名称" width="80" :resizable="false" :show-overflow-tooltip="true">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="接口名称"
|
||||
width="80"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="address" label="接口地址" width="200" :resizable="false" :show-overflow-tooltip="true">
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="接口地址"
|
||||
width="200"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="method" label="调用方法" :resizable="false" :show-overflow-tooltip="true">
|
||||
<el-table-column
|
||||
prop="method"
|
||||
label="调用方法"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="type" label="组件类型" :resizable="false" :show-overflow-tooltip="true">
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="组件类型"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="provider" label="提供商" :resizable="false" :show-overflow-tooltip="true">
|
||||
<el-table-column
|
||||
prop="provider"
|
||||
label="提供商"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" label="监控状态" :resizable="false" :show-overflow-tooltip="true">
|
||||
<el-table-column
|
||||
prop="state"
|
||||
label="监控状态"
|
||||
:resizable="false"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<!-- 分页 -->
|
||||
<div class="tablePagination">
|
||||
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
||||
:current-page="currentPage4" :page-size="5" layout="total, prev, pager, next, jumper" :total="total">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage4"
|
||||
:page-size="5"
|
||||
layout="total, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -72,55 +121,26 @@
|
|||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
import * as moment from 'moment'
|
||||
export default {
|
||||
// components: {},
|
||||
// props: {},
|
||||
props: {
|
||||
callTheTrendData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
timeSwitchindex: {
|
||||
type: String,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
endAndstartTime: {},
|
||||
ApisnumShiBai: '',
|
||||
Apisnum: '',
|
||||
// 排行榜
|
||||
RankingData: [
|
||||
{
|
||||
name: '能力名称一能力名称一能力名称一能力名称一能力名称一',
|
||||
num: '239'
|
||||
},
|
||||
{
|
||||
name: '能力名称二',
|
||||
num: '222'
|
||||
},
|
||||
{
|
||||
name: '能力名称三',
|
||||
num: '123'
|
||||
},
|
||||
{
|
||||
name: '能力名称四',
|
||||
num: '88'
|
||||
},
|
||||
{
|
||||
name: '能力名称五',
|
||||
num: '88'
|
||||
},
|
||||
{
|
||||
name: '能力名称六',
|
||||
num: '88'
|
||||
},
|
||||
{
|
||||
name: '能力名称七',
|
||||
num: '88'
|
||||
},
|
||||
{
|
||||
name: '能力名称八',
|
||||
num: '88'
|
||||
},
|
||||
{
|
||||
name: '能力名称九',
|
||||
num: '88'
|
||||
},
|
||||
{
|
||||
name: '能力名称十',
|
||||
num: '88'
|
||||
}
|
||||
],
|
||||
RankingData: [],
|
||||
// 表格
|
||||
AnomalyStatisticsTable: [
|
||||
{
|
||||
|
|
@ -174,6 +194,181 @@ export default {
|
|||
// 分页
|
||||
this.total = this.AnomalyStatisticsTable.length
|
||||
},
|
||||
watch: {
|
||||
callTheTrendData: {
|
||||
deep: true,
|
||||
handler () {
|
||||
this.endAndstartTime = this.callTheTrendData
|
||||
if (this.endAndstartTime.end !== this.endAndstartTime.start) {
|
||||
if (this.timeSwitchindex === '周') {
|
||||
// API总数（周）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[7d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[7d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[7d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
// // API异常次数统计(周)
|
||||
// this.$http
|
||||
// .get(
|
||||
// `/metrics/api/v1/query?query=topk(10, sum(increase(apigateway_http_status{code != "200"}[7d])) by (matched_uri))&time=${this.callTheTrendData.end}`
|
||||
// )
|
||||
// .then((res) => {
|
||||
// debugger
|
||||
// })
|
||||
} else if (this.timeSwitchindex === '月') {
|
||||
// API总数（月）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[30d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(月)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[30d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(月)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[30d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
} else if (this.timeSwitchindex === '时间段') {
|
||||
// API总数（时间段）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
|
||||
this.callTheTrendData.end
|
||||
}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
}
|
||||
} else {
|
||||
// API总数（日）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[1d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(日)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[1d]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(日)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[1d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
timeSwitchindex: {
|
||||
handler () {
|
||||
if (this.timeSwitchindex === '时间段') {
|
||||
// API总数（时间段）
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.Apisnum = parseInt(res.data.data.result[0].value[1])
|
||||
// API异常总数(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((resSon) => {
|
||||
this.ApisnumShiBai = parseInt(
|
||||
this.Apisnum - resSon.data.data.result[0].value[1]
|
||||
)
|
||||
})
|
||||
})
|
||||
// API异常分析(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
|
||||
this.callTheTrendData.end
|
||||
}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.RankingData = res.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 分页
|
||||
handleSizeChange (val) {
|
||||
|
|
@ -276,7 +471,7 @@ export default {
|
|||
}
|
||||
|
||||
.ApiBox {
|
||||
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png")
|
||||
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
width: 22.5rem;
|
||||
|
|
@ -314,7 +509,7 @@ export default {
|
|||
}
|
||||
|
||||
.ApiBox:last-of-type {
|
||||
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png")
|
||||
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png')
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
>
|
||||
<div>{{ item.name }}</div>
|
||||
</el-tooltip>
|
||||
<div>{{ item.snum }}</div>
|
||||
<div>{{ item.count }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,6 +98,10 @@ export default {
|
|||
callTheTrendData: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
timeSwitchindex: {
|
||||
type: String,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
|
|
@ -151,56 +155,93 @@ export default {
|
|||
},
|
||||
abilityListTabData: ['请求次数', '请求失败次数', '平均延时'], // 能力排行榜tab切换
|
||||
newTab: '请求次数',
|
||||
abilityListData: [
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一222222222222222222222222',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
},
|
||||
{
|
||||
name: '能里名称一',
|
||||
snum: '239'
|
||||
}
|
||||
] // 能力排行数据初始化
|
||||
abilityListData: [] // 能力排行数据初始化
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
callTheTrendData: {
|
||||
dataRange: {
|
||||
deep: true,
|
||||
handler () {
|
||||
this.endAndstartTime = this.callTheTrendData
|
||||
if (this.endAndstartTime.end != this.endAndstartTime.start) {
|
||||
if (this.timeSwitchindex === '周') {
|
||||
if (this.newTab === '请求次数') {
|
||||
// 能力排行榜请求次数(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[7d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
this.abilityListData.forEach((item) => {
|
||||
item.count = parseInt(item.count)
|
||||
})
|
||||
})
|
||||
} else if (this.newTab === '请求失败次数') {
|
||||
// 能力排行榜请求失败次数(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[7d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
})
|
||||
}
|
||||
} else if (this.timeSwitchindex === '月') {
|
||||
if (this.newTab === '请求次数') {
|
||||
// 能力排行榜请求次数(月)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[30d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
this.abilityListData.forEach((item) => {
|
||||
item.count = parseInt(item.count)
|
||||
})
|
||||
})
|
||||
} else if (this.newTab === '请求失败次数') {
|
||||
// 能力排行榜请求失败次数(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[30d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
})
|
||||
}
|
||||
} else if (this.timeSwitchindex === '时间段') {
|
||||
if (this.newTab === '请求次数') {
|
||||
// 能力排行榜请求次数(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
|
||||
this.callTheTrendData.end
|
||||
}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
this.abilityListData.forEach((item) => {
|
||||
item.count = parseInt(item.count)
|
||||
})
|
||||
})
|
||||
} else if (this.newTab === '请求失败次数') {
|
||||
// 能力排行榜请求失败次数(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
|
||||
this.callTheTrendData.end
|
||||
}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
})
|
||||
}
|
||||
}
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query?' +
|
||||
|
|
@ -240,6 +281,29 @@ export default {
|
|||
}
|
||||
})
|
||||
} else {
|
||||
if (this.newTab === '请求次数') {
|
||||
// 能力排行榜请求次数(日)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[1d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
this.abilityListData.forEach((item) => {
|
||||
item.count = parseInt(item.count)
|
||||
})
|
||||
})
|
||||
} else if (this.newTab === '请求失败次数') {
|
||||
// 能力排行榜请求失败次数(周)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status{code!='200'}[1d]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${this.callTheTrendData.end}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
})
|
||||
}
|
||||
|
||||
this.$http
|
||||
.get(
|
||||
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=' +
|
||||
|
|
@ -282,7 +346,6 @@ export default {
|
|||
)
|
||||
.then((res) => {
|
||||
if (res.data.data.result[0]) {
|
||||
debugger
|
||||
this.requestOverviewData[3].tatol = parseInt(
|
||||
res.data.data.result[0].value[1]
|
||||
)
|
||||
|
|
@ -406,7 +469,6 @@ export default {
|
|||
86400
|
||||
)
|
||||
.then((res) => {
|
||||
debugger
|
||||
if (res.data.data.result[0]) {
|
||||
res.data.data.result[0].values.map((item, index) => {
|
||||
this.shuJuLiuLiang.ruvalue.push(
|
||||
|
|
@ -422,9 +484,39 @@ export default {
|
|||
}
|
||||
console.log('this.endAndstartTime', this.endAndstartTime)
|
||||
}
|
||||
},
|
||||
timeSwitchindex: {
|
||||
handler () {
|
||||
if (this.timeSwitchindex === '时间段' && this.newTab === '请求次数') {
|
||||
// 能力排行榜请求次数(时间段)
|
||||
this.$http
|
||||
.get(
|
||||
`/gateway-monitor/queryGroupByAbility?query=topk(10, sum(label_replace(increase(apigateway_http_status[${
|
||||
this.callTheTrendData.end - this.callTheTrendData.start
|
||||
}s:1s]), "groupInfo", "$2", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (groupInfo))&time=${
|
||||
this.callTheTrendData.end
|
||||
}`
|
||||
)
|
||||
.then((res) => {
|
||||
this.abilityListData = res.data.data
|
||||
this.abilityListData.forEach((item) => {
|
||||
item.count = parseInt(item.count)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
dataRange () {
|
||||
const { timeSwitchindex, callTheTrendData, newTab } = this
|
||||
return {
|
||||
timeSwitchindex,
|
||||
callTheTrendData,
|
||||
newTab
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
// echarts通用方法
|
||||
// 请求趋势图
|
||||
|
|
|
|||
|
|
@ -40,16 +40,22 @@
|
|||
:picker-options="pickerOptions1"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-button type="primary" round>确定</el-button>
|
||||
<el-button type="primary" round @click="switchTimeFunction()"
|
||||
>确定</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="capability-operation-monitoring-center">
|
||||
<abnormal-situation></abnormal-situation>
|
||||
<abnormal-situation
|
||||
:callTheTrendData="callTheTrendData"
|
||||
:timeSwitchindex="timeSwitchindex"
|
||||
></abnormal-situation>
|
||||
</div>
|
||||
<div class="capability-operation-monitoring-bottom">
|
||||
<analysis-of-the-request
|
||||
:callTheTrendData="callTheTrendData"
|
||||
:timeSwitchindex="timeSwitchindex"
|
||||
></analysis-of-the-request>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -67,8 +73,9 @@ export default {
|
|||
data () {
|
||||
return {
|
||||
timeSwitchindex: '日',
|
||||
timeStart: '',
|
||||
timeEnd: '',
|
||||
timeStart: new Date(),
|
||||
leftAndrightTime: 0,
|
||||
timeEnd: new Date(),
|
||||
pickerOptions0: {
|
||||
disabledDate: (time) => {
|
||||
if (this.timeEnd != '') {
|
||||
|
|
@ -87,29 +94,53 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
watch: {
|
||||
timeSwitchindex: {
|
||||
handler () {
|
||||
var time = new Date()
|
||||
switch (this.timeSwitchindex) {
|
||||
case '日':
|
||||
this.timeStart = time
|
||||
this.timeEnd = time
|
||||
break
|
||||
case '周':
|
||||
this.timeStart = new Date(time.getTime() - 168 * 60 * 60 * 1000)
|
||||
this.timeEnd = time
|
||||
break
|
||||
case '月':
|
||||
this.timeStart = new Date(time.getTime() - 720 * 60 * 60 * 1000)
|
||||
this.timeEnd = time
|
||||
}
|
||||
}
|
||||
},
|
||||
timeStart: {
|
||||
handler () {
|
||||
this.callTheTrendData.start = parseInt(this.timeStart / 1000)
|
||||
}
|
||||
},
|
||||
timeEnd: {
|
||||
handler () {
|
||||
this.callTheTrendData.end = parseInt(this.timeEnd / 1000)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
switchTimeFunction () {
|
||||
this.timeSwitchindex = '时间段'
|
||||
},
|
||||
timeSwitch (name) {
|
||||
this.timeSwitchindex = name
|
||||
if (name == '周') {
|
||||
if (name === '周') {
|
||||
const start = parseInt(
|
||||
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
|
||||
)
|
||||
this.callTheTrendData.start = start
|
||||
console.log(
|
||||
'this.callTheTrendData',
|
||||
parseInt((Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000)
|
||||
)
|
||||
} else if (name == '月') {
|
||||
} else if (name === '月') {
|
||||
const start = parseInt(
|
||||
(Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
|
||||
)
|
||||
this.callTheTrendData.start = start
|
||||
console.log(
|
||||
'this.callTheTrendData',
|
||||
parseInt((Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000)
|
||||
)
|
||||
} else {
|
||||
this.callTheTrendData.start = Date.parse(new Date()) / 1000
|
||||
this.callTheTrendData.end = Date.parse(new Date()) / 1000
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// /resource/getByDept
|
||||
import http from '@/utils/request';
|
||||
import http from '@/utils/request'
|
||||
|
||||
function Request({
|
||||
methods, url, data, success, fali
|
||||
}) {
|
||||
let _key = methods == 'get' ? 'params' : 'data';
|
||||
const _key = methods == 'get' ? 'params' : 'data'
|
||||
return new Promise((resolve, reject) => {
|
||||
http[methods](url, {
|
||||
[_key]: data
|
||||
|
|
@ -14,7 +14,6 @@ function Request({
|
|||
reject(err)
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
function RequestPost({
|
||||
methods, url, data, success, fali
|
||||
|
|
@ -28,7 +27,6 @@ function RequestPost({
|
|||
reject(err)
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
// /resource/getByDept:获取当前登录用户所在部门发布的资源
|
||||
|
|
@ -72,7 +70,6 @@ export const getTotalByDept = (data, success, fail) => {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
// 部门申请
|
||||
export const getApply = (data, success, fail) => {
|
||||
Request({
|
||||
|
|
@ -141,9 +138,8 @@ export const getApplyByDept = (data, success, fail) => {
|
|||
// 部门发布能力被调用趋势
|
||||
export const getByDept = (data, success, fail) => {
|
||||
RequestPost({
|
||||
methods: 'post',
|
||||
url: '/resource/trafficDeptResource',
|
||||
data
|
||||
methods: 'get',
|
||||
url: `/gateway-monitor/queryGroupByDeptInRange?query=sum(label_replace(increase(apigateway_http_status[1d]), "deptInfo", "$1", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (deptInfo)&start=${data.startDate}&end=${data.endDate}&step=86400`
|
||||
}).then(res => {
|
||||
success && success(res)
|
||||
}).catch(err => {
|
||||
|
|
|
|||
|
|
@ -1,42 +1,41 @@
|
|||
import * as echarts from 'echarts'
|
||||
//折线图
|
||||
// 折线图
|
||||
export const trendLineChart = (id, chartData, _option) => {
|
||||
|
||||
let { xaxis = [], ydata = [], } = chartData;
|
||||
const { xaxis = [], ydata = [] } = chartData
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
trigger: 'axis'
|
||||
},
|
||||
grid: {
|
||||
top: '16%',
|
||||
left: '7%',
|
||||
right: '7%',
|
||||
bottom: '10%',
|
||||
bottom: '10%'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
boundaryGap: true,
|
||||
axisLine: { //坐标轴轴线相关设置。数学上的x轴
|
||||
axisLine: { // 坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(138,178,241)'
|
||||
}
|
||||
},
|
||||
},
|
||||
axisLabel: { //坐标轴刻度标签的相关设置
|
||||
axisLabel: { // 坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
color: '#2b2b2b',
|
||||
margin: 15,
|
||||
fontSize: '14'
|
||||
},
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
show: false
|
||||
},
|
||||
data: xaxis,
|
||||
data: xaxis
|
||||
}],
|
||||
yAxis: [{
|
||||
name: '使用量(万次)',
|
||||
nameTextStyle:{color:"#2b2b2b"},
|
||||
nameTextStyle: { color: '#2b2b2b' },
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
|
|
@ -51,7 +50,7 @@ export const trendLineChart = (id, chartData, _option) => {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
color: 'rgba(138,178,241)'
|
||||
},
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
|
|
@ -59,12 +58,12 @@ export const trendLineChart = (id, chartData, _option) => {
|
|||
color: '#2b2b2b',
|
||||
margin: 15,
|
||||
fontSize: '14'
|
||||
},
|
||||
}
|
||||
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '使用量',
|
||||
|
|
@ -72,7 +71,7 @@ export const trendLineChart = (id, chartData, _option) => {
|
|||
showAllSymbol: true,
|
||||
symbolSize: 0,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5, //设定实心点的大小
|
||||
symbolSize: 5, // 设定实心点的大小
|
||||
lineStyle: {
|
||||
normal: {
|
||||
|
||||
|
|
@ -87,17 +86,17 @@ export const trendLineChart = (id, chartData, _option) => {
|
|||
borderColor: '#f0f'
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#0058ee",
|
||||
color: '#0058ee'
|
||||
}
|
||||
},
|
||||
// 区域填充样式
|
||||
areaStyle: {
|
||||
normal: {
|
||||
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
// 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: 'rgba(0,88,225,0.16)'
|
||||
|
|
@ -107,23 +106,23 @@ export const trendLineChart = (id, chartData, _option) => {
|
|||
color: 'rgba(0,88,225,0)'
|
||||
}
|
||||
], false),
|
||||
shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
|
||||
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
|
||||
shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
}
|
||||
},
|
||||
data: ydata
|
||||
}]
|
||||
};
|
||||
}
|
||||
|
||||
if (_option !== undefined) {
|
||||
option = Object.assign({}, option, _option)
|
||||
}
|
||||
|
||||
const client = document.getElementById(id);
|
||||
let myChart = echarts.init(client);
|
||||
const clientWidth = client.clientWidth;
|
||||
const clientHeight = client.clientHeight;
|
||||
myChart.clear();
|
||||
myChart.resize({ width: clientWidth, height: clientHeight });
|
||||
myChart.setOption(option);
|
||||
const client = document.getElementById(id)
|
||||
const myChart = echarts.init(client)
|
||||
const clientWidth = client.clientWidth
|
||||
const clientHeight = client.clientHeight
|
||||
myChart.clear()
|
||||
myChart.resize({ width: clientWidth, height: clientHeight })
|
||||
myChart.setOption(option)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,78 @@
|
|||
<template>
|
||||
<div class="risk">
|
||||
<contentTitle title="部门能力风险TOP5"></contentTitle>
|
||||
<div class="no-data">暂无数据</div>
|
||||
|
||||
<div class="no-data" v-if="topData.length > 0">
|
||||
<div
|
||||
class="data-card"
|
||||
v-for="(item, index) in topData"
|
||||
:key="`data${index}`"
|
||||
>
|
||||
<div class="data-index">{{ index + 1 }}</div>
|
||||
<div class="data-name-And-progress">
|
||||
<div class="data-title">{{ item.name }}</div>
|
||||
<div class="data-progress-And-value">
|
||||
<div class="data-progress">
|
||||
<div :style="widthFunction(item.count)"></div>
|
||||
</div>
|
||||
<div class="data-count">
|
||||
{{ item.count }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="no-data"
|
||||
v-else
|
||||
style="display: flex; align-items: center; justify-content: center"
|
||||
>
|
||||
暂无数据
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import contentTitle from './content-title.vue'
|
||||
export default {
|
||||
components: { contentTitle }
|
||||
components: { contentTitle },
|
||||
data () {
|
||||
return {
|
||||
oneData: 100,
|
||||
topData: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 判断值域范围
|
||||
widthFunction (value) {
|
||||
value = (value / this.oneData) * 100
|
||||
if (value >= 80) {
|
||||
return `height:10px;width: ${value}%;background: linear-gradient(to right,#ee8a08,#ffcb64)`
|
||||
} else if (value >= 60 && value < 80) {
|
||||
return `height:10px;width: ${value}%;background: linear-gradient(to right,#788da5,#d4dbe4)`
|
||||
} else if (value >= 40 && value < 60) {
|
||||
return `height:10px;width: ${value}%;background: linear-gradient(to right,#d29c62,#e8c5a2)`
|
||||
} else if (value < 40) {
|
||||
return `height:10px;width: ${value}%;background: linear-gradient(to right,#6fa1ef,#9bbef8)`
|
||||
}
|
||||
},
|
||||
queryGroupByDepartment () {
|
||||
this.$http
|
||||
.get(
|
||||
'/gateway-monitor/queryGroupByDepartment?query=topk(5, sum(label_replace(apigateway_http_status{code!="200"}, "deptInfo", "$1", "matched_uri", "/juapi/(.*?)/(.*?)/.*")) by (deptInfo))&time=1659058871'
|
||||
)
|
||||
.then((res) => {
|
||||
console.log(res.data.data)
|
||||
if (res.data.data) {
|
||||
this.topData = res.data.data
|
||||
this.oneData = this.topData[0].count
|
||||
} else {
|
||||
this.topData = []
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.queryGroupByDepartment()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -24,9 +88,42 @@ export default {
|
|||
width: 520px;
|
||||
height: 287px;
|
||||
background: #fff;
|
||||
line-height: 232px;
|
||||
font-size: 16px;
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
.data-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
.data-index {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: #515151;
|
||||
margin-right: 13px;
|
||||
}
|
||||
.data-name-And-progress {
|
||||
.data-title {
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
color: #515151;
|
||||
margin-bottom: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
.data-progress-And-value {
|
||||
display: flex;
|
||||
.data-progress {
|
||||
width: 422px;
|
||||
height: 10px;
|
||||
background: #eeeeee;
|
||||
}
|
||||
.data-count {
|
||||
margin-left: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
color: #2b2b2b;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,108 +8,132 @@
|
|||
@click="handleTitleSwitch(idx)"
|
||||
class="top-title"
|
||||
:class="{ active: idx == selectedTitle }"
|
||||
>{{ item }}</div>
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</content-title>
|
||||
<div id="trendId" class="trend-echart"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { trendLineChart } from "./lineOption";
|
||||
import contentTitle from "./content-title";
|
||||
import * as Apis from "../api";
|
||||
import { trendLineChart } from './lineOption'
|
||||
import contentTitle from './content-title'
|
||||
import * as Apis from '../api'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
data() {
|
||||
data () {
|
||||
return {
|
||||
titles: ["近七日", "月度"],
|
||||
titles: ['近七日', '月度'],
|
||||
selectedTitle: 0,
|
||||
trendChartData: {},
|
||||
startDate: "",
|
||||
endDate:
|
||||
new Date().getFullYear() +
|
||||
"-" +
|
||||
(new Date().getMonth() + 1) +
|
||||
"-" +
|
||||
new Date().getDate()
|
||||
};
|
||||
startDate: '',
|
||||
endDate: Math.round(new Date() / 1000),
|
||||
ydata: [],
|
||||
xaxis: []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
contentTitle
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
mounted () {
|
||||
this.initChart()
|
||||
},
|
||||
watch: {
|
||||
selectedTitle: {
|
||||
handler: function(newVal, oldVal) {
|
||||
this.startDate = this.getData(newVal == 0 ? 7 : 30);
|
||||
handler: function (newVal, oldVal) {
|
||||
this.startDate = this.getData(newVal == 0 ? 7 : 30)
|
||||
this.ydata = this.getday2(this.selectedTitle === 0 ? 7 : 30)
|
||||
this.ydata.map((item) => {
|
||||
this.xaxis.push(0)
|
||||
})
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//发布动态
|
||||
initChart() {
|
||||
// 返回最近七天的日期
|
||||
getday2 (index) {
|
||||
const days = []
|
||||
var Dates = new Date()
|
||||
for (let i = 0; i <= 24 * (index - 1); i += 24) {
|
||||
// 今天加上前6天
|
||||
const dateItem = new Date(Dates.getTime() - i * 60 * 60 * 1000) // 使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
|
||||
const y = dateItem.getFullYear() // 获取年份
|
||||
let m = dateItem.getMonth() + 1 // 获取月份js月份从0开始，需要+1
|
||||
let d = dateItem.getDate() // 获取日期
|
||||
m = this.addDate0(m) // 给为单数的月份补零
|
||||
d = this.addDate0(d) // 给为单数的日期补零
|
||||
const valueItem = y + '-' + m + '-' + d // 组合
|
||||
days.unshift(valueItem) // 添加至数组
|
||||
}
|
||||
console.log('最近七天日期：', days)
|
||||
|
||||
return days
|
||||
},
|
||||
|
||||
// 给日期加0
|
||||
addDate0 (time) {
|
||||
if (time.toString().length == 1) {
|
||||
time = '0' + time.toString()
|
||||
}
|
||||
return time
|
||||
},
|
||||
// 发布动态
|
||||
initChart () {
|
||||
Apis.getByDept(
|
||||
{
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate
|
||||
},
|
||||
res => {
|
||||
if (res.data.code !== 0) {
|
||||
return;
|
||||
(res) => {
|
||||
// if (res.data.code !== 0) {
|
||||
// return
|
||||
// }
|
||||
this.data = res.data.data[0].values
|
||||
this.data.map((item) => {
|
||||
const time = moment(item[0] * 1000).format('YYYY-MM-DD')
|
||||
this.ydata.map((itemSon, indexSon) => {
|
||||
if (itemSon === time) {
|
||||
this.xaxis[indexSon] = parseInt(item[1])
|
||||
}
|
||||
this.data = res.data.data.browseDayList || [];
|
||||
let xaxis = [],
|
||||
ydata = [];
|
||||
this.data.forEach(v => {
|
||||
Object.keys(v).map((key, value) => {
|
||||
xaxis.push(key);
|
||||
ydata.push(value);
|
||||
});
|
||||
});
|
||||
console.log(xaxis)
|
||||
console.log(ydata)
|
||||
})
|
||||
})
|
||||
this.trendChartData = {
|
||||
xaxis: xaxis,
|
||||
ydata: ydata
|
||||
};
|
||||
xaxis: this.ydata,
|
||||
ydata: this.xaxis
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
trendLineChart("trendId", this.trendChartData);
|
||||
});
|
||||
trendLineChart('trendId', this.trendChartData)
|
||||
})
|
||||
},
|
||||
err => {
|
||||
console.log("err", err);
|
||||
(err) => {
|
||||
console.log('err', err)
|
||||
}
|
||||
);
|
||||
)
|
||||
},
|
||||
handleTitleSwitch(idx) {
|
||||
this.selectedTitle = idx;
|
||||
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30);
|
||||
console.log(this.startDate);
|
||||
this.initChart();
|
||||
handleTitleSwitch (idx) {
|
||||
this.selectedTitle = idx
|
||||
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30)
|
||||
console.log(this.startDate)
|
||||
this.initChart()
|
||||
},
|
||||
getData(aa) {
|
||||
let date1 = new Date(),
|
||||
time1 =
|
||||
getData (aa) {
|
||||
const date1 = new Date()
|
||||
const time1 =
|
||||
date1.getFullYear() +
|
||||
"-" +
|
||||
'-' +
|
||||
(date1.getMonth() + 1) +
|
||||
"-" +
|
||||
date1.getDate(); //time1表示当前时间
|
||||
let date2 = new Date(date1);
|
||||
date2.setDate(date1.getDate() - aa);
|
||||
let time2 =
|
||||
date2.getFullYear() +
|
||||
"-" +
|
||||
(date2.getMonth() + 1) +
|
||||
"-" +
|
||||
date2.getDate();
|
||||
return time2;
|
||||
'-' +
|
||||
date1.getDate() // time1表示当前时间
|
||||
const date2 = new Date(date1)
|
||||
date2.setDate(date1.getDate() - aa)
|
||||
const time2 = Math.round(date2 / 1000)
|
||||
return time2
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trend {
|
||||
|
|
|
|||
|
|
@ -97,8 +97,15 @@ export function callTheTrendPort(start, end, params) {
|
|||
export function totalCallsSnum(params) {
|
||||
return request({
|
||||
url:
|
||||
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' +
|
||||
params,
|
||||
`/metrics/api/v1/query?time=${params}&query=sum(apigateway_http_status)`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
//能力云图-调用成功次数
|
||||
export function totalCallsSnum2(params) {
|
||||
return request({
|
||||
url:
|
||||
`metrics/api/v1/query?query=sum(apigateway_http_status{code=~"^2.."})&time=${params}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -237,7 +237,7 @@
|
|||
type: 'pie',
|
||||
selectedMode: 'single',
|
||||
radius: ['50%', '30%'],
|
||||
color: ['#fe845e', '#6cc95a', '#02d1b0', '#1772ff', '#fe8455'],
|
||||
color: ['#fe845e', '#6cc95a', '#02d1b0', '#1772ff', '#FAC858'],
|
||||
top: '0',
|
||||
label: {
|
||||
normal: {
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@
|
|||
componentServiceRank,
|
||||
callTheTrendPort,
|
||||
totalCallsSnum,
|
||||
totalCallsSnum2,
|
||||
} from '@/api/capabilityCloud'
|
||||
import * as moment from 'moment'
|
||||
let xinhaianIsShow = whoShow.itShowXiHaiAn //判断是否是西海岸版本
|
||||
|
|
@ -407,11 +408,14 @@
|
|||
//总调用次数接口
|
||||
const TotalCallsAPI = () => {
|
||||
const end = Date.parse(new Date()) / 1000
|
||||
if (!xinhaianIsShow) {
|
||||
totalCallsSnum(end).then((res) => {
|
||||
debugger
|
||||
snum.value[1].num = res.data.data.result[0].value[1]
|
||||
totalCallsSnum2(end).then((resSon) => {
|
||||
snum.value[2].num =
|
||||
(resSon.data.data.result[0].value[1] / snum.value[1].num) * 100 + '%'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
const init = () => {
|
||||
timeSwitch(timeSwitchindex.value)
|
||||
|
|
|
|||
|
|
@ -47,10 +47,7 @@
|
|||
<div :class="contentLocation(1, dataFrom.attrType)">
|
||||
<div class="content-right-scene" :class="'content-right-case'">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,10 +167,10 @@
|
|||
.tab-top {
|
||||
min-width: 120px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 200px;
|
||||
height: 24px;
|
||||
height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
|
|||
|
|
@ -258,7 +258,7 @@
|
|||
// white-space: nowrap;
|
||||
font-size: 40px;
|
||||
margin-right: 20px;
|
||||
max-width: 7rem;
|
||||
max-width: 6rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -402,7 +402,7 @@
|
|||
.content-right-left {
|
||||
border-right: 0.01rem solid #707fe0;
|
||||
padding-right: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.content-right-title {
|
||||
|
|
@ -424,12 +424,12 @@
|
|||
flex-direction: column;
|
||||
|
||||
p {
|
||||
// width: 1.60rem;
|
||||
width: 2.3rem;
|
||||
height: 0.2rem;
|
||||
display: -webkit-box;
|
||||
// overflow: hidden;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.08rem;
|
||||
white-space: nowrap;
|
||||
// white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
|
|||
|
|
@ -47,10 +47,7 @@
|
|||
<div class="content-right">
|
||||
<div class="content-right-scene">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,10 +150,10 @@
|
|||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
line-height: 0.26rem;
|
||||
margin-bottom: 0.2rem;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
height: 0.26rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<div class="card-title">{{ item.childrenTitle }}</div>
|
||||
<div class="card-content">
|
||||
<div v-for="carditem in item.childrenContent" :key="carditem">
|
||||
<div>
|
||||
<div style="display: flex">
|
||||
<span>{{ carditem.attrType }}：</span>
|
||||
<a-tooltip>
|
||||
<template #title>{{ carditem.attrValue }}</template>
|
||||
|
|
@ -220,11 +220,21 @@
|
|||
|
||||
div {
|
||||
max-width: 2.8rem;
|
||||
display: flex;
|
||||
// overflow: hidden;
|
||||
// text-overflow: ellipsis;
|
||||
// display: -webkit-box;
|
||||
// -webkit-box-orient: vertical;
|
||||
// -webkit-line-clamp: 1;
|
||||
span:last-child {
|
||||
display: block;
|
||||
width: 2.3rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -44,14 +44,6 @@
|
|||
</a-tooltip>
|
||||
</div>
|
||||
<div class="bottom" v-if="props.dataList.id">
|
||||
<a-button type="primary" @click="toView()">
|
||||
<template #icon><form-outlined /></template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button type="primary" @click="addShoppingCart()">
|
||||
<template #icon><shopping-cart-outlined /></template>
|
||||
加入购物车
|
||||
</a-button>
|
||||
<!-- 融合服务 存在fuseResourceList -->
|
||||
<a-button
|
||||
type="primary"
|
||||
|
|
@ -63,6 +55,18 @@
|
|||
</template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button v-else type="primary" @click="toView()">
|
||||
<template #icon><form-outlined /></template>
|
||||
申请使用
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="!dataList.fuseResourceList"
|
||||
type="primary"
|
||||
@click="addShoppingCart()"
|
||||
>
|
||||
<template #icon><shopping-cart-outlined /></template>
|
||||
加入购物车
|
||||
</a-button>
|
||||
<a-button type="primary" @click="goTOCollection()">
|
||||
{{ props.dataList.isCollect == 'true' ? '已' : '' }}收藏
|
||||
</a-button>
|
||||
|
|
@ -257,7 +261,7 @@
|
|||
margin-right: 0.2rem;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
max-width: 7rem;
|
||||
max-width: 6rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -47,10 +47,7 @@
|
|||
<div :class="contentLocation(1, dataFrom.attrType)">
|
||||
<div class="content-right-scene" :class="'content-right-case'">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,10 +167,10 @@
|
|||
.tab-top {
|
||||
min-width: 120px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 200px;
|
||||
height: 24px;
|
||||
height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
|
|||
|
|
@ -47,10 +47,7 @@
|
|||
<div class="content-right">
|
||||
<div class="content-right-scene">
|
||||
<!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -150,10 +147,10 @@
|
|||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
line-height: 0.26rem;
|
||||
margin-bottom: 0.2rem;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
height: 0.26rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
|
|||
|
|
@ -243,7 +243,7 @@
|
|||
// white-space: nowrap;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
max-width: 7rem;
|
||||
max-width: 6rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
.content-right-left {
|
||||
border-right: 0.01rem solid #707fe0;
|
||||
padding-right: 0.1rem;
|
||||
margin-right: 0.1rem;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
|
||||
.content-right-title {
|
||||
|
|
@ -344,12 +344,11 @@
|
|||
word-break: break-all;
|
||||
|
||||
p {
|
||||
// width: 1.60rem;
|
||||
min-width: 2.2rem;
|
||||
height: 0.2rem;
|
||||
display: -webkit-box;
|
||||
// overflow: hidden;
|
||||
overflow: hidden;
|
||||
margin-bottom: 0.08rem;
|
||||
white-space: nowrap;
|
||||
-webkit-line-clamp: 1;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-right: 0.15rem;
|
||||
|
|
|
|||
|
|
@ -47,10 +47,7 @@
|
|||
<div :class="contentLocation(1, dataFrom.attrType)">
|
||||
<div class="content-right-scene" :class="'content-right-case'">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,10 +167,10 @@
|
|||
.tab-top {
|
||||
min-width: 120px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 200px;
|
||||
height: 24px;
|
||||
height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
|
|||
|
|
@ -47,10 +47,7 @@
|
|||
<div class="content-right">
|
||||
<div class="content-right-scene">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -149,11 +146,11 @@
|
|||
.tab-top {
|
||||
min-width: 1.2rem;
|
||||
font-size: 0.24rem;
|
||||
line-height: 0.24rem;
|
||||
line-height: 0.26rem;
|
||||
margin-bottom: 0.2rem;
|
||||
text-align: center;
|
||||
max-width: 2rem;
|
||||
height: 0.24rem;
|
||||
height: 0.26rem;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
|
|||
|
|
@ -265,7 +265,7 @@
|
|||
// -webkit-line-clamp: 1;
|
||||
& > span:last-child {
|
||||
display: inline-block;
|
||||
width: 1.49rem;
|
||||
width: 2rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
|
|
|||
|
|
@ -246,7 +246,7 @@
|
|||
// white-space: nowrap;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
max-width: 7rem;
|
||||
max-width: 6rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -47,10 +47,7 @@
|
|||
<div :class="contentLocation(1, dataFrom.attrType)">
|
||||
<div class="content-right-scene" :class="'content-right-case'">
|
||||
<div class="content-top">{{ itemSonTitle.name }}</div>
|
||||
<a-tooltip>
|
||||
<template #title>{{ itemSonTitle.desc }}</template>
|
||||
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -170,10 +167,10 @@
|
|||
.tab-top {
|
||||
min-width: 120px;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
line-height: 26px;
|
||||
margin-bottom: 20px;
|
||||
max-width: 200px;
|
||||
height: 24px;
|
||||
height: 26px;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 1;
|
||||
|
|
|
|||
|
|
@ -239,7 +239,7 @@
|
|||
// white-space: nowrap;
|
||||
font-size: 0.4rem;
|
||||
margin-right: 0.2rem;
|
||||
max-width: 7rem;
|
||||
max-width: 6rem;
|
||||
text-overflow: -o-ellipsis-lastline;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -345,8 +345,8 @@
|
|||
word-break: break-all;
|
||||
|
||||
p {
|
||||
// width: 1.60rem;
|
||||
height: 0.2rem;
|
||||
width: 2.6rem;
|
||||
// height: 0.2rem;
|
||||
margin-right: 0.15rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -447,7 +447,7 @@
|
|||
pageSize: mapSearchParam.value.pageSize,
|
||||
name: mapSearchParam.value.cameraName || '',
|
||||
longitude: mapSearchParam.value.gpsX || '',
|
||||
atitude: mapSearchParam.value.gpsY || '',
|
||||
latitude: mapSearchParam.value.gpsY || '',
|
||||
radius: mapSearchParam.value.radius || '',
|
||||
}
|
||||
let paramsFather = ''
|
||||
|
|
|
|||
|
|
@ -56,22 +56,43 @@
|
|||
|
||||
<!-- 使用能力 -->
|
||||
<div
|
||||
id="integration-combination-ability"
|
||||
class="combination-ability scrollBox"
|
||||
id="integration-ability"
|
||||
class="ability scrollBox"
|
||||
>
|
||||
<div class="title-1">
|
||||
<DetalsTitle title="使用能力" type="COMBINATION ABILITY"></DetalsTitle>
|
||||
</div>
|
||||
<div class="flex-row-center combine-content">
|
||||
<div class="combine-item" v-for="(item, i) in combineList" :key="i">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="name-box">
|
||||
<div class="name-text" v-for="(name, j) in item.list" :key="j">
|
||||
{{ name }}
|
||||
</div>
|
||||
<DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle>
|
||||
</div>
|
||||
<template v-for="(item, i) in combineList" :key="i">
|
||||
<div class="flex-row-center combine-content" v-if="item.list.length>0">
|
||||
<div class="title">{{item.title}}</div>
|
||||
<div>
|
||||
<el-table
|
||||
:data="item.list"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
:header-cell-style="{'text-align': 'center'}"
|
||||
@row-click="openResourceDetail">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="数据"
|
||||
align="center"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="dept"
|
||||
label="能力来源"
|
||||
align="center"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="platform"
|
||||
label="申请平台"
|
||||
align="center">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- 构建步骤 -->
|
||||
|
|
@ -82,7 +103,7 @@
|
|||
<div class="title-1">
|
||||
<DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
|
||||
</div>
|
||||
<div class="flex-row-center">
|
||||
<div class="flex-row-center step-content">
|
||||
<div style="height: 300px;">
|
||||
<el-steps direction="vertical" :active="step.length">
|
||||
<el-step v-for="(item, i) in step" :key="i" :title="item.question" :description="item.answer"></el-step>
|
||||
|
|
@ -135,7 +156,7 @@
|
|||
},
|
||||
{
|
||||
name: '使用能力',
|
||||
key: 'integration-combination-ability',
|
||||
key: 'integration-ability',
|
||||
},
|
||||
{
|
||||
name: '构建步骤',
|
||||
|
|
@ -234,14 +255,25 @@
|
|||
attrType: '应用领域',
|
||||
attrValue: fuseAttrList.find((v) => v.attrType === '应用领域').attrValue,
|
||||
}
|
||||
combineList.value.map((item) => {
|
||||
let arr = (
|
||||
fuseResourceList.filter(
|
||||
(v) => v.resource && v.resource.type == item.title
|
||||
) || []
|
||||
).map((d) => d.resource.name)
|
||||
combineList.value.forEach((item) => {
|
||||
let arr = []
|
||||
let resource=fuseResourceList.filter((v)=>v.resource && v.type == item.title)
|
||||
if(resource.length>0){
|
||||
if(item.title==='基础设施'){
|
||||
arr=resource.map(res=>({
|
||||
id: res.resource.idtCameraChannel, name: res.resource.channelName, dept: res.resource.nodeName, platform: 'UCS'
|
||||
}))
|
||||
}else if(item.title==='组件服务'){
|
||||
arr=resource.map(res=>({
|
||||
id: res.resource.id, name: res.resource.name, dept: res.resource.deptName, platform: 'UCS'
|
||||
}))
|
||||
}else if(item.title==='数据资源'){
|
||||
arr=resource.map(res=>({
|
||||
id: res.resource.zycode, name: res.resource.zyname, dept: res.resource.TGBM, platform: 'UCS'
|
||||
}))
|
||||
}
|
||||
}
|
||||
item.list = arr
|
||||
return item
|
||||
})
|
||||
detailInfoObj.value.infoList = []
|
||||
detailInfoObj.value.infoList.push(questionObj)
|
||||
|
|
@ -254,6 +286,10 @@
|
|||
}
|
||||
getIntegrationServicesDeatil(id)
|
||||
|
||||
function openResourceDetail(row, column, event){
|
||||
console.log(row)
|
||||
}
|
||||
|
||||
function handleOpenUrl(type) {
|
||||
let obj =
|
||||
(detailInfoObj.value.fuseAttrList || []).find(
|
||||
|
|
@ -459,10 +495,12 @@
|
|||
.step {
|
||||
padding: 0.8rem 0;
|
||||
background: rgb(247, 248, 250);
|
||||
|
||||
.step-content {
|
||||
margin-top: 0.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.combination-ability {
|
||||
.ability {
|
||||
padding: 0.8rem 0;
|
||||
background: rgb(247, 248, 250);
|
||||
|
||||
|
|
@ -471,34 +509,14 @@
|
|||
}
|
||||
|
||||
.combine-content {
|
||||
width: 13rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.combine-item {
|
||||
margin: 0 0.1rem;
|
||||
width: 4.28rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border: 1px solid #e4e6f5;
|
||||
border-radius: 0.1rem;
|
||||
padding: 0.1rem 0;
|
||||
cursor: pointer;
|
||||
height: 2.5rem;
|
||||
|
||||
&:hover {
|
||||
border-radius: 0.02rem;
|
||||
border: 0.01rem solid #0058e1;
|
||||
box-shadow: 0rem 0.08rem 0.2rem rgb(0 88 225 / 30%);
|
||||
}
|
||||
|
||||
margin-top: 0.3rem;
|
||||
align-items: flex-start;
|
||||
.title {
|
||||
color: #212121;
|
||||
text-align: center;
|
||||
padding: 0.2rem 0;
|
||||
font-size: 0.22rem;
|
||||
text-align: center;
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
margin-right: 0.5rem;
|
||||
background: url('~@/assets/home/rhfw_square.png') no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@
|
|||
pageSize: this.mapSearchParam.pageSize,
|
||||
name: this.mapSearchParam.cameraName || '',
|
||||
longitude: this.mapSearchParam.gpsX || '',
|
||||
atitude: this.mapSearchParam.gpsY || '',
|
||||
latitude: this.mapSearchParam.gpsY || '',
|
||||
radius: this.mapSearchParam.radius || '',
|
||||
}
|
||||
let paramsFather = ''
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
/>
|
||||
</div>
|
||||
<a-popconfirm
|
||||
v-if="checkedListAbility.length != 0"
|
||||
title="是否进行批量删除?"
|
||||
ok-text="是"
|
||||
cancel-text="否"
|
||||
|
|
@ -37,10 +38,26 @@
|
|||
background: #fff;
|
||||
color: #0558e1;
|
||||
"
|
||||
@click="ceshiFunction()"
|
||||
>
|
||||
批量删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button
|
||||
v-else
|
||||
type="primary"
|
||||
style="
|
||||
width: 1rem;
|
||||
height: 0.36rem;
|
||||
margin-right: 0.12rem;
|
||||
border-radius: 2px;
|
||||
background: #fff;
|
||||
color: #0558e1;
|
||||
"
|
||||
@click="ceshiFunction()"
|
||||
>
|
||||
批量删除
|
||||
</a-button>
|
||||
<a-button
|
||||
type="primary"
|
||||
style="
|
||||
|
|
@ -767,7 +784,13 @@
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
//ceshiFunction
|
||||
const ceshiFunction = () => {
|
||||
debugger
|
||||
if (checkedListAbility.value.length == 0) {
|
||||
message.warning('请先选择需要操作的数据！')
|
||||
}
|
||||
}
|
||||
const delOne = (item, index) => {
|
||||
// console.log(item)
|
||||
sgcDel({
|
||||
|
|
|
|||
Loading…
Reference in New Issue