wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

Merge branch 'hi-ucs-dev' of http://124.222.94.39:3001/wuhongjian/hi-ucs into hi-ucs-dev

This commit is contained in:
guoyue 2022-07-29 15:36:32 +08:00
parent 32ad0904c2 c8a8a58705
commit 6b07f48dd1
36 changed files with 1112 additions and 574 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
back/public/index.html
View File

@ -2,7 +2,7 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-04-11 10:11:40 * @Date: 2022-04-11 10:11:40
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-07-26 20:23:13 * @LastEditTime: 2022-07-28 20:14:40
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!DOCTYPE html> <!DOCTYPE html>
@ -45,9 +45,9 @@
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.166:8888/renren-admin'; // 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://124.222.94.39:8888/renren-admin';
// window.SITE_CONFIG['apiURL'] = 'http://10.16.5.35: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['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地址 // WebSocket地址
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket'; window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';
</script> </script>

2
back/src/views/modules/ability/bsabilityai.vue
View File

@ -801,6 +801,8 @@ export default {
} }
) )
this.submitFrom.infoList = newArr this.submitFrom.infoList = newArr
// 检验是否有空值
this.submitFrom.infoList = this.submitFrom.infoList.filter(item => item.attrValue)
this.$http this.$http
.put('/resource/update', this.submitFrom) .put('/resource/update', this.submitFrom)
.then(({ data: res }) => { .then(({ data: res }) => {

2
back/src/views/modules/ability/bsabilityservice.vue
View File

@ -709,6 +709,8 @@ export default {
} }
}) })
console.log('编辑===============>', this.submitFrom) console.log('编辑===============>', this.submitFrom)
// 检验是否有空值
this.submitFrom.infoList = this.submitFrom.infoList.filter(item => item.attrValue)
this.$http this.$http
.put('/resource/update', this.submitFrom) .put('/resource/update', this.submitFrom)
.then(({ data: res }) => { .then(({ data: res }) => {

71
back/src/views/modules/myAgent/demo/ResourcesAndServices.vue
View File

@ -40,29 +40,48 @@
v-for="multipleAdditionsItem in itemsonson.note1" v-for="multipleAdditionsItem in itemsonson.note1"
:key="multipleAdditionsItem" :key="multipleAdditionsItem"
> >
<div> <el-tooltip placement="top">
<div slot="content"> {{
multipleAdditionsItem.question ||
multipleAdditionsItem.type ||
multipleAdditionsItem.name
}}</div>
<div>
{{ {{
multipleAdditionsItem.question || multipleAdditionsItem.question ||
multipleAdditionsItem.type || multipleAdditionsItem.type ||
multipleAdditionsItem.name multipleAdditionsItem.name
}} }}
</div> </div>
<div> </el-tooltip>
<el-tooltip placement="top">
<div slot="content">{{
multipleAdditionsItem.answer ||
multipleAdditionsItem.price ||
multipleAdditionsItem.img
}}</div>
<div>
{{ {{
multipleAdditionsItem.answer || multipleAdditionsItem.answer ||
multipleAdditionsItem.price || multipleAdditionsItem.price ||
multipleAdditionsItem.img multipleAdditionsItem.img
}} }}
</div> </div>
<div>{{ multipleAdditionsItem.desc }}</div> </el-tooltip>
<el-tooltip placement="top">
<div slot="content">{{ multipleAdditionsItem.desc }}</div>
<div>{{ multipleAdditionsItem.desc }}</div>
</el-tooltip>
<!-- <div>{{ multipleAdditionsItem }}</div> --> <!-- <div>{{ multipleAdditionsItem }}</div> -->
</div> </div>
</div> </div>
<el-tooltip v-else placement="top">
<div slot="content">{{ itemsonson.note1 }}</div>
<el-input <el-input
v-else
v-model="itemsonson.note1" v-model="itemsonson.note1"
disabled="disabled" disabled="disabled"
></el-input> ></el-input>
</el-tooltip>
</el-form-item> </el-form-item>
<el-form-item <el-form-item
v-for="itemsonson in itemson.children" v-for="itemsonson in itemson.children"
@ -94,7 +113,10 @@
style="border: 1px solid #3c9bcd;margin" style="border: 1px solid #3c9bcd;margin"
> >
<div>{{ itemDataFormValue.name }}</div> <div>{{ itemDataFormValue.name }}</div>
<div>{{ itemDataFormValue.desc }}</div> <el-tooltip placement="top">
<div slot="content">{{ itemDataFormValue.desc }}</div>
<div>{{ itemDataFormValue.desc }}</div>
</el-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -115,7 +137,10 @@
style="border: 1px solid #3c9bcd;margin" style="border: 1px solid #3c9bcd;margin"
> >
<div>{{ itemDataFormValue.name }}</div> <div>{{ itemDataFormValue.name }}</div>
<div>{{ itemDataFormValue.desc }}</div> <el-tooltip placement="top">
<div slot="content">{{ itemDataFormValue.desc }}</div>
<div>{{ itemDataFormValue.desc }}</div>
</el-tooltip>
<div @click="videoAndImg(itemDataFormValue.img)">浏览</div> <div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
</div> </div>
</div> </div>
@ -137,7 +162,10 @@
style="border: 1px solid #3c9bcd;margin" style="border: 1px solid #3c9bcd;margin"
> >
<div>{{ itemDataFormValue.name }}</div> <div>{{ itemDataFormValue.name }}</div>
<div>{{ itemDataFormValue.desc }}</div> <el-tooltip placement="top">
<div slot="content">{{ itemDataFormValue.desc }}</div>
<div>{{ itemDataFormValue.desc }}</div>
</el-tooltip>
<div @click="videoAndImg(itemDataFormValue.img)">浏览</div> <div @click="videoAndImg(itemDataFormValue.img)">浏览</div>
</div> </div>
</div> </div>
@ -432,6 +460,11 @@ export default {
} }
} }
</script> </script>
<style lang="scss">
.el-tooltip__popper {
max-width: 300px;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
.dataTitle { .dataTitle {
@ -464,6 +497,28 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
line-height: 14px; 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) { & > div:nth-child(3) {
margin-top: 10px; margin-top: 10px;
position: absolute; position: absolute;
bottom: 30px; bottom: 8px;
cursor: pointer; cursor: pointer;
font-size: 12px; font-size: 12px;
border: 1px solid #3c9bcd; border: 1px solid #3c9bcd;

5
back/src/views/modules/putOnTheShelf/components/special.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-07-08 09:54:50 * @Date: 2022-07-08 09:54:50
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-25 11:20:25 * @LastEditTime: 2022-07-28 20:09:53
* @Description: 多条数据特殊处理 * @Description: 多条数据特殊处理
--> -->
<template> <template>
@ -164,9 +164,10 @@ export default {
}, },
del (title, index) { del (title, index) {
this.data.splice(index, 1) this.data.splice(index, 1)
const str = this.data.length > 0 ? JSON.stringify(this.data) : ''
this.$emit('changeInfoList', { this.$emit('changeInfoList', {
attrType: title, attrType: title,
attrValue: JSON.stringify(this.data), attrValue: str,
delFlag: 0 delFlag: 0
}) })
}, },

315
back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue
View File

@ -6,14 +6,14 @@
<img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" /> <img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
<div> <div>
<h4>API总数</h4> <h4>API总数</h4>
<p>99999</p> <p>{{ Apisnum }}</p>
</div> </div>
</div> </div>
<div class="ApiBox"> <div class="ApiBox">
<img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" /> <img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
<div> <div>
<h4>异常API总数</h4> <h4>异常API总数</h4>
<p>99999</p> <p>{{ ApisnumShiBai }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -24,12 +24,23 @@
<div class="RankingList"> <div class="RankingList">
<h4 class="title">API异常次数排行TOP10</h4> <h4 class="title">API异常次数排行TOP10</h4>
<ul> <ul>
<li class="RankingListData" v-for="(item, index) in RankingData" :key="index"> <li
<i><b>{{ index + 1 }}</b></i> class="RankingListData"
<el-tooltip class="item" effect="dark" :content="item.name" placement="top"> 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> <h6>{{ item.name }}</h6>
</el-tooltip> </el-tooltip>
<span>{{ item.num }}</span> <span>{{ item.count }}</span>
</li> </li>
</ul> </ul>
</div> </div>
@ -45,24 +56,62 @@
<h4 class="title">API异常次数统计</h4> <h4 class="title">API异常次数统计</h4>
<div class="AnomalyStatisticsTable"> <div class="AnomalyStatisticsTable">
<el-table :data="AnomalyStatisticsTable" border style="width: 100%"> <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>
<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>
<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>
<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>
<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>
<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-column>
</el-table> </el-table>
</div> </div>
<!-- 分页 --> <!-- 分页 -->
<div class="tablePagination"> <div class="tablePagination">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" <el-pagination
:current-page="currentPage4" :page-size="5" layout="total, prev, pager, next, jumper" :total="total"> @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-size="5"
layout="total, prev, pager, next, jumper"
:total="total"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
@ -72,55 +121,26 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import * as moment from 'moment'
export default { export default {
// components: {}, // components: {},
// props: {}, props: {
callTheTrendData: {
type: Object,
default: () => {}
},
timeSwitchindex: {
type: String,
default: () => {}
}
},
data () { data () {
return { return {
endAndstartTime: {},
ApisnumShiBai: '',
Apisnum: '',
// 排行榜 // 排行榜
RankingData: [ 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'
}
],
// 表格 // 表格
AnomalyStatisticsTable: [ AnomalyStatisticsTable: [
{ {
@ -174,6 +194,181 @@ export default {
// 分页 // 分页
this.total = this.AnomalyStatisticsTable.length 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: { methods: {
// 分页 // 分页
handleSizeChange (val) { handleSizeChange (val) {
@ -276,7 +471,7 @@ export default {
} }
.ApiBox { .ApiBox {
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-blue.png") background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png')
no-repeat; no-repeat;
background-size: 100%; background-size: 100%;
width: 22.5rem; width: 22.5rem;
@ -314,7 +509,7 @@ export default {
} }
.ApiBox:last-of-type { .ApiBox:last-of-type {
background: url("~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png") background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png')
no-repeat; no-repeat;
background-size: 100%; background-size: 100%;

186
back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue
View File

@ -81,7 +81,7 @@
> >
<div>{{ item.name }}</div> <div>{{ item.name }}</div>
</el-tooltip> </el-tooltip>
<div>{{ item.snum }}</div> <div>{{ item.count }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -98,6 +98,10 @@ export default {
callTheTrendData: { callTheTrendData: {
type: Object, type: Object,
default: () => {} default: () => {}
},
timeSwitchindex: {
type: String,
default: () => {}
} }
}, },
data () { data () {
@ -151,56 +155,93 @@ export default {
}, },
abilityListTabData: ['请求次数', '请求失败次数', '平均延时'], // 能力排行榜tab切换 abilityListTabData: ['请求次数', '请求失败次数', '平均延时'], // 能力排行榜tab切换
newTab: '请求次数', newTab: '请求次数',
abilityListData: [ 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'
}
] // 能力排行数据初始化
} }
}, },
watch: { watch: {
callTheTrendData: { dataRange: {
deep: true, deep: true,
handler () { handler () {
this.endAndstartTime = this.callTheTrendData this.endAndstartTime = this.callTheTrendData
if (this.endAndstartTime.end != this.endAndstartTime.start) { 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 this.$http
.get( .get(
'/metrics/api/v1/query?' + '/metrics/api/v1/query?' +
@ -240,6 +281,29 @@ export default {
} }
}) })
} else { } 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 this.$http
.get( .get(
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=' + '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=' +
@ -282,7 +346,6 @@ export default {
) )
.then((res) => { .then((res) => {
if (res.data.data.result[0]) { if (res.data.data.result[0]) {
debugger
this.requestOverviewData[3].tatol = parseInt( this.requestOverviewData[3].tatol = parseInt(
res.data.data.result[0].value[1] res.data.data.result[0].value[1]
) )
@ -406,7 +469,6 @@ export default {
86400 86400
) )
.then((res) => { .then((res) => {
debugger
if (res.data.data.result[0]) { if (res.data.data.result[0]) {
res.data.data.result[0].values.map((item, index) => { res.data.data.result[0].values.map((item, index) => {
this.shuJuLiuLiang.ruvalue.push( this.shuJuLiuLiang.ruvalue.push(
@ -422,9 +484,39 @@ export default {
} }
console.log('this.endAndstartTime', this.endAndstartTime) 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: { methods: {
// echarts通用方法 // echarts通用方法
// 请求趋势图 // 请求趋势图

61
back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue
View File

@ -40,16 +40,22 @@
:picker-options="pickerOptions1" :picker-options="pickerOptions1"
> >
</el-date-picker> </el-date-picker>
<el-button type="primary" round>确定</el-button> <el-button type="primary" round @click="switchTimeFunction()"
>确定</el-button
>
</div> </div>
</div> </div>
</div> </div>
<div class="capability-operation-monitoring-center"> <div class="capability-operation-monitoring-center">
<abnormal-situation></abnormal-situation> <abnormal-situation
:callTheTrendData="callTheTrendData"
:timeSwitchindex="timeSwitchindex"
></abnormal-situation>
</div> </div>
<div class="capability-operation-monitoring-bottom"> <div class="capability-operation-monitoring-bottom">
<analysis-of-the-request <analysis-of-the-request
:callTheTrendData="callTheTrendData" :callTheTrendData="callTheTrendData"
:timeSwitchindex="timeSwitchindex"
></analysis-of-the-request> ></analysis-of-the-request>
</div> </div>
</div> </div>
@ -67,8 +73,9 @@ export default {
data () { data () {
return { return {
timeSwitchindex: '日', timeSwitchindex: '日',
timeStart: '', timeStart: new Date(),
timeEnd: '', leftAndrightTime: 0,
timeEnd: new Date(),
pickerOptions0: { pickerOptions0: {
disabledDate: (time) => { disabledDate: (time) => {
if (this.timeEnd != '') { 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: {}, computed: {},
methods: { methods: {
switchTimeFunction () {
this.timeSwitchindex = '时间段'
},
timeSwitch (name) { timeSwitch (name) {
this.timeSwitchindex = name this.timeSwitchindex = name
if (name == '周') { if (name === '周') {
const start = parseInt( const start = parseInt(
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000 (Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
) )
this.callTheTrendData.start = start this.callTheTrendData.start = start
console.log( } else if (name === '月') {
'this.callTheTrendData',
parseInt((Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000)
)
} else if (name == '月') {
const start = parseInt( const start = parseInt(
(Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000 (Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
) )
this.callTheTrendData.start = start this.callTheTrendData.start = start
console.log(
'this.callTheTrendData',
parseInt((Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000)
)
} else { } else {
this.callTheTrendData.start = Date.parse(new Date()) / 1000 this.callTheTrendData.start = Date.parse(new Date()) / 1000
this.callTheTrendData.end = Date.parse(new Date()) / 1000 this.callTheTrendData.end = Date.parse(new Date()) / 1000

208
back/src/views/modules/workBench/api.js
View File

@ -1,152 +1,148 @@
// /resource/getByDept // /resource/getByDept
import http from '@/utils/request'; import http from '@/utils/request'
function Request({ function Request({
methods, url, data, success, fali methods, url, data, success, fali
}) { }) {
let _key = methods == 'get' ? 'params' : 'data'; const _key = methods == 'get' ? 'params' : 'data'
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
http[methods](url, { http[methods](url, {
[_key]: data [_key]: data
}).then(res => { }).then(res => {
resolve(res) resolve(res)
}, err => { }, err => {
reject(err) reject(err)
})
}) })
})
} }
function RequestPost({ function RequestPost({
methods, url, data, success, fali methods, url, data, success, fali
}) { }) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
http[methods](url, http[methods](url,
data data
).then(res => { ).then(res => {
resolve(res) resolve(res)
}, err => { }, err => {
reject(err) reject(err)
})
}) })
})
} }
// /resource/getByDept:获取当前登录用户所在部门发布的资源 // /resource/getByDept:获取当前登录用户所在部门发布的资源
// 部门待办列表 // 部门待办列表
export const getToDoTask = (data, success, fail) => { export const getToDoTask = (data, success, fail) => {
Request({ Request({
methods: 'get', methods: 'get',
url: '/act/task/deptToDoTaskPage', url: '/act/task/deptToDoTaskPage',
data data
}).then(res => { }).then(res => {
success && success(res) success && success(res)
}).catch(err => { }).catch(err => {
fail && fail(err) fail && fail(err)
}) })
} }
// 部门已办列表 // 部门已办列表
export const getHasToDoTask = (data, success, fail) => { export const getHasToDoTask = (data, success, fail) => {
Request({ Request({
methods: 'get', methods: 'get',
url: '/act/his/getDeptHandledInstancePage', url: '/act/his/getDeptHandledInstancePage',
data data
}).then(res => { }).then(res => {
success && success(res) success && success(res)
}).catch(err => { }).catch(err => {
fail && fail(err) fail && fail(err)
}) })
} }
// 上架统计《====》饼图 // 上架统计《====》饼图
export const getTotalByDept = (data, success, fail) => { export const getTotalByDept = (data, success, fail) => {
Request({ Request({
methods: 'get', methods: 'get',
url: '/resource/selectTotalByDept', url: '/resource/selectTotalByDept',
data data
}).then(res => { }).then(res => {
success && success(res) success && success(res)
}).catch(err => { }).catch(err => {
fail && fail(err) fail && fail(err)
}) })
} }
// 部门申请 // 部门申请
export const getApply = (data, success, fail) => { export const getApply = (data, success, fail) => {
Request({ Request({
methods: 'get', methods: 'get',
url: '/resource/selectTotalApplyByDept', url: '/resource/selectTotalApplyByDept',
data data
}).then(res => { }).then(res => {
success && success(res) success && success(res)
}).catch(err => { }).catch(err => {
fail && fail(err) fail && fail(err)
}) })
} }
// 部门需求 // 部门需求
export const getRequire = (data, success, fail) => { export const getRequire = (data, success, fail) => {
Request({ Request({
methods: 'get', methods: 'get',
url: '/demanData/selectFlagCountByDepts', url: '/demanData/selectFlagCountByDepts',
data data
}).then(res => { }).then(res => {
success && success(res) success && success(res)
}).catch(err => { }).catch(err => {
fail && fail(err) fail && fail(err)
}) })
} }
// 频率top5 // 频率top5
export const getFrequence = (data, success, fail) => { export const getFrequence = (data, success, fail) => {
Request({ Request({
methods: 'get', methods: 'get',
url: '/resource/selectDeptResourceByApplyNum', url: '/resource/selectDeptResourceByApplyNum',
data data
}).then(res => { }).then(res => {
success && success(res) success && success(res)
}).catch(err => { }).catch(err => {
fail && fail(err) fail && fail(err)
}) })
} }
// 部门发布动态 // 部门发布动态
export const getResourceByDept = (data, success, fail) => { export const getResourceByDept = (data, success, fail) => {
Request({ Request({
methods: 'get', methods: 'get',
// url: '/resource/getByDept', // url: '/resource/getByDept',
url: '/workdynamics/getDeptWork', url: '/workdynamics/getDeptWork',
data data
}).then(res => { }).then(res => {
success && success(res) success && success(res)
}).catch(err => { }).catch(err => {
fail && fail(err) fail && fail(err)
}) })
} }
// 部门能力推荐 // 部门能力推荐
export const getApplyByDept = (data, success, fail) => { export const getApplyByDept = (data, success, fail) => {
Request({ Request({
methods: 'get', methods: 'get',
url: '/resource/getApplyByDept', url: '/resource/getApplyByDept',
data data
}).then(res => { }).then(res => {
success && success(res) success && success(res)
}).catch(err => { }).catch(err => {
fail && fail(err) fail && fail(err)
}) })
} }
// 部门发布能力被调用趋势 // 部门发布能力被调用趋势
export const getByDept = (data, success, fail) => { export const getByDept = (data, success, fail) => {
RequestPost({ RequestPost({
methods: 'post', methods: 'get',
url: '/resource/trafficDeptResource', 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`
data }).then(res => {
}).then(res => { success && success(res)
success && success(res) }).catch(err => {
}).catch(err => { fail && fail(err)
fail && fail(err) })
}) }
}

243
back/src/views/modules/workBench/components/lineOption.js
View File

@ -1,129 +1,128 @@
import * as echarts from 'echarts' import * as echarts from 'echarts'
//折线图 // 折线图
export const trendLineChart = (id, chartData, _option) => { export const trendLineChart = (id, chartData, _option) => {
const { xaxis = [], ydata = [] } = chartData
let option = {
tooltip: {
trigger: 'axis'
},
grid: {
top: '16%',
left: '7%',
right: '7%',
bottom: '10%'
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLine: { // 坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: 'rgba(138,178,241)'
}
},
axisLabel: { // 坐标轴刻度标签的相关设置
textStyle: {
color: '#2b2b2b',
margin: 15,
fontSize: '14'
}
},
axisTick: {
show: false
},
data: xaxis
}],
yAxis: [{
name: '使用量(万次)',
nameTextStyle: { color: '#2b2b2b' },
type: 'value',
min: 0,
max: 100,
splitNumber: 5,
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(138,178,241)'
}
},
axisLabel: {
show: true,
textStyle: {
color: '#2b2b2b',
margin: 15,
fontSize: '14'
}
let { xaxis = [], ydata = [], } = chartData; },
let option = { axisTick: {
tooltip: { show: false
trigger: 'axis', }
}],
series: [{
name: '使用量',
type: 'line',
showAllSymbol: true,
symbolSize: 0,
symbol: 'circle',
symbolSize: 5, // 设定实心点的大小
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#0058e1'
}, {
offset: 1,
color: '#0058e1'
}])
}, },
grid: { borderColor: '#f0f'
top: '16%', },
left: '7%', label: {
right: '7%', show: false
bottom: '10%', },
}, itemStyle: {
xAxis: [{ normal: {
type: 'category', color: '#0058ee'
boundaryGap: true, }
axisLine: { //坐标轴轴线相关设置。数学上的x轴 },
show: true, // 区域填充样式
lineStyle: { areaStyle: {
color: 'rgba(138,178,241)' normal: {
}, // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
}, color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
axisLabel: { //坐标轴刻度标签的相关设置 offset: 0,
textStyle: { color: 'rgba(0,88,225,0.16)'
color: '#2b2b2b', },
margin: 15, {
fontSize: '14' offset: 1,
}, color: 'rgba(0,88,225,0)'
}, }
axisTick: { ], false),
show: false, shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
}, shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
data: xaxis, }
}], },
yAxis: [{ data: ydata
name: '使用量(万次)', }]
nameTextStyle:{color:"#2b2b2b"}, }
type: 'value',
min: 0,
max: 100,
splitNumber: 5,
splitLine: {
show: false,
lineStyle: {
color: 'rgba(255,255,255,0.1)'
}
},
axisLine: {
show: true,
lineStyle: {
color: 'rgba(138,178,241)'
},
},
axisLabel: {
show: true,
textStyle: {
color: '#2b2b2b',
margin: 15,
fontSize: '14'
},
}, if (_option !== undefined) {
axisTick: { option = Object.assign({}, option, _option)
show: false, }
},
}],
series: [{
name: '使用量',
type: 'line',
showAllSymbol: true,
symbolSize: 0,
symbol: 'circle',
symbolSize: 5, //设定实心点的大小
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ const client = document.getElementById(id)
offset: 0, const myChart = echarts.init(client)
color: '#0058e1' const clientWidth = client.clientWidth
}, { const clientHeight = client.clientHeight
offset: 1, myChart.clear()
color: '#0058e1' myChart.resize({ width: clientWidth, height: clientHeight })
}]) myChart.setOption(option)
},
borderColor: '#f0f'
},
label: {
show: false,
},
itemStyle: {
normal: {
color: "#0058ee",
}
},
// 区域填充样式
areaStyle: {
normal: {
//线性渐变，前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)'
},
{
offset: 1,
color: 'rgba(0,88,225,0)'
}
], false),
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);
} }

133
back/src/views/modules/workBench/components/risk-view.vue
View File

@ -1,32 +1,129 @@
<template> <template>
<div class="risk"> <div class="risk">
<contentTitle title="部门能力风险TOP5"></contentTitle> <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>
<div
class="no-data"
v-else
style="display: flex; align-items: center; justify-content: center"
>
暂无数据
</div>
</div>
</template> </template>
<script> <script>
import contentTitle from './content-title.vue' import contentTitle from './content-title.vue'
export default { 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.risk { .risk {
width: 540px; width: 540px;
height: 335px; height: 335px;
background: #fff; background: #fff;
padding: 0 16px; padding: 0 16px;
box-sizing: border-box; box-sizing: border-box;
} }
.no-data { .no-data {
width: 520px; width: 520px;
height: 287px; height: 287px;
background: #fff; background: #fff;
line-height: 232px; font-size: 16px;
font-size: 16px; color: #212121;
color: #212121; text-align: center;
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> </style>

158
back/src/views/modules/workBench/components/trend-view.vue
View File

@ -8,108 +8,132 @@
@click="handleTitleSwitch(idx)" @click="handleTitleSwitch(idx)"
class="top-title" class="top-title"
:class="{ active: idx == selectedTitle }" :class="{ active: idx == selectedTitle }"
>{{ item }}</div> >
{{ item }}
</div>
</div> </div>
</content-title> </content-title>
<div id="trendId" class="trend-echart"></div> <div id="trendId" class="trend-echart"></div>
</div> </div>
</template> </template>
<script> <script>
import { trendLineChart } from "./lineOption"; import { trendLineChart } from './lineOption'
import contentTitle from "./content-title"; import contentTitle from './content-title'
import * as Apis from "../api"; import * as Apis from '../api'
import moment from 'moment'
export default { export default {
data() { data () {
return { return {
titles: ["近七日", "月度"], titles: ['近七日', '月度'],
selectedTitle: 0, selectedTitle: 0,
trendChartData: {}, trendChartData: {},
startDate: "", startDate: '',
endDate: endDate: Math.round(new Date() / 1000),
new Date().getFullYear() + ydata: [],
"-" + xaxis: []
(new Date().getMonth() + 1) + }
"-" +
new Date().getDate()
};
}, },
components: { components: {
contentTitle contentTitle
}, },
mounted() { mounted () {
this.initChart(); this.initChart()
}, },
watch: { watch: {
selectedTitle: { selectedTitle: {
handler: function(newVal, oldVal) { handler: function (newVal, oldVal) {
this.startDate = this.getData(newVal == 0 ? 7 : 30); 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, deep: true,
immediate: true immediate: true
} }
}, },
methods: { 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( Apis.getByDept(
{ {
startDate: this.startDate, startDate: this.startDate,
endDate: this.endDate endDate: this.endDate
}, },
res => { (res) => {
if (res.data.code !== 0) { // if (res.data.code !== 0) {
return; // return
} // }
this.data = res.data.data.browseDayList || []; this.data = res.data.data[0].values
let xaxis = [], this.data.map((item) => {
ydata = []; const time = moment(item[0] * 1000).format('YYYY-MM-DD')
this.data.forEach(v => { this.ydata.map((itemSon, indexSon) => {
Object.keys(v).map((key, value) => { if (itemSon === time) {
xaxis.push(key); this.xaxis[indexSon] = parseInt(item[1])
ydata.push(value); }
}); })
}); })
console.log(xaxis)
console.log(ydata)
this.trendChartData = { this.trendChartData = {
xaxis: xaxis, xaxis: this.ydata,
ydata: ydata ydata: this.xaxis
}; }
this.$nextTick(() => { this.$nextTick(() => {
trendLineChart("trendId", this.trendChartData); trendLineChart('trendId', this.trendChartData)
}); })
}, },
err => { (err) => {
console.log("err", err); console.log('err', err)
} }
); )
}, },
handleTitleSwitch(idx) { handleTitleSwitch (idx) {
this.selectedTitle = idx; this.selectedTitle = idx
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30); this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30)
console.log(this.startDate); console.log(this.startDate)
this.initChart(); this.initChart()
}, },
getData(aa) { getData (aa) {
let date1 = new Date(), const date1 = new Date()
time1 = const time1 =
date1.getFullYear() + date1.getFullYear() +
"-" + '-' +
(date1.getMonth() + 1) + (date1.getMonth() + 1) +
"-" + '-' +
date1.getDate(); //time1表示当前时间 date1.getDate() // time1表示当前时间
let date2 = new Date(date1); const date2 = new Date(date1)
date2.setDate(date1.getDate() - aa); date2.setDate(date1.getDate() - aa)
let time2 = const time2 = Math.round(date2 / 1000)
date2.getFullYear() + return time2
"-" +
(date2.getMonth() + 1) +
"-" +
date2.getDate();
return time2;
} }
} }
}; }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.trend { .trend {
@ -141,4 +165,4 @@ export default {
} }
} }
} }
</style> </style>

11
front/src/api/capabilityCloud.js
View File

@ -97,8 +97,15 @@ export function callTheTrendPort(start, end, params) {
export function totalCallsSnum(params) { export function totalCallsSnum(params) {
return request({ return request({
url: url:
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' + `/metrics/api/v1/query?time=${params}&query=sum(apigateway_http_status)`,
params, method: 'get',
})
}
//能力云图-调用成功次数
export function totalCallsSnum2(params) {
return request({
url:
`metrics/api/v1/query?query=sum(apigateway_http_status{code=~"^2.."})&time=${params}`,
method: 'get', method: 'get',
}) })
} }

2
front/src/views/abilityStatistics/components/ResourceAggregation.vue
View File

@ -237,7 +237,7 @@
type: 'pie', type: 'pie',
selectedMode: 'single', selectedMode: 'single',
radius: ['50%', '30%'], radius: ['50%', '30%'],
color: ['#fe845e', '#6cc95a', '#02d1b0', '#1772ff', '#fe8455'], color: ['#fe845e', '#6cc95a', '#02d1b0', '#1772ff', '#FAC858'],
top: '0', top: '0',
label: { label: {
normal: { normal: {

12
front/src/views/capabilityCloud/components/ComponentServices.vue
View File

@ -119,6 +119,7 @@
componentServiceRank, componentServiceRank,
callTheTrendPort, callTheTrendPort,
totalCallsSnum, totalCallsSnum,
totalCallsSnum2,
} from '@/api/capabilityCloud' } from '@/api/capabilityCloud'
import * as moment from 'moment' import * as moment from 'moment'
let xinhaianIsShow = whoShow.itShowXiHaiAn //判断是否是西海岸版本 let xinhaianIsShow = whoShow.itShowXiHaiAn //判断是否是西海岸版本
@ -407,11 +408,14 @@
//总调用次数接口 //总调用次数接口
const TotalCallsAPI = () => { const TotalCallsAPI = () => {
const end = Date.parse(new Date()) / 1000 const end = Date.parse(new Date()) / 1000
if (!xinhaianIsShow) { totalCallsSnum(end).then((res) => {
totalCallsSnum(end).then((res) => { debugger
snum.value[1].num = res.data.data.result[0].value[1] 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 = () => { const init = () => {
timeSwitch(timeSwitchindex.value) timeSwitch(timeSwitchindex.value)

9
front/src/views/detailsAll/components/Algorithm/AlgorithmApplicationScenarios.vue
View File

@ -47,10 +47,7 @@
<div :class="contentLocation(1, dataFrom.attrType)"> <div :class="contentLocation(1, dataFrom.attrType)">
<div class="content-right-scene" :class="'content-right-case'"> <div class="content-right-scene" :class="'content-right-case'">
<div class="content-top">{{ itemSonTitle.name }}</div> <div class="content-top">{{ itemSonTitle.name }}</div>
<a-tooltip> <div class="content-bottom">{{ itemSonTitle.desc }}</div>
<template #title>{{ itemSonTitle.desc }}</template>
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -170,10 +167,10 @@
.tab-top { .tab-top {
min-width: 120px; min-width: 120px;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 26px;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 200px; max-width: 200px;
height: 24px; height: 26px;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;

2
front/src/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue
View File

@ -258,7 +258,7 @@
// white-space: nowrap; // white-space: nowrap;
font-size: 40px; font-size: 40px;
margin-right: 20px; margin-right: 20px;
max-width: 7rem; max-width: 6rem;
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

8
front/src/views/detailsAll/components/Algorithm/AlgorithmUsageMode.vue
View File

@ -402,7 +402,7 @@
.content-right-left { .content-right-left {
border-right: 0.01rem solid #707fe0; border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem; padding-right: 0.1rem;
margin-right: 0.1rem; margin-right: 0.2rem;
} }
.content-right-title { .content-right-title {
@ -424,12 +424,12 @@
flex-direction: column; flex-direction: column;
p { p {
// width: 1.60rem; width: 2.3rem;
height: 0.2rem; height: 0.2rem;
display: -webkit-box; display: -webkit-box;
// overflow: hidden; overflow: hidden;
margin-bottom: 0.08rem; margin-bottom: 0.08rem;
white-space: nowrap; // white-space: nowrap;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
word-break: break-all; word-break: break-all;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;

9
front/src/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue
View File

@ -47,10 +47,7 @@
<div class="content-right"> <div class="content-right">
<div class="content-right-scene"> <div class="content-right-scene">
<div class="content-top">{{ itemSonTitle.name }}</div> <div class="content-top">{{ itemSonTitle.name }}</div>
<a-tooltip> <div class="content-bottom">{{ itemSonTitle.desc }}</div>
<template #title>{{ itemSonTitle.desc }}</template>
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -153,10 +150,10 @@
.tab-top { .tab-top {
min-width: 1.2rem; min-width: 1.2rem;
font-size: 0.24rem; font-size: 0.24rem;
line-height: 0.24rem; line-height: 0.26rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
max-width: 2rem; max-width: 2rem;
height: 0.24rem; height: 0.26rem;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;

12
front/src/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue
View File

@ -16,7 +16,7 @@
<div class="card-title">{{ item.childrenTitle }}</div> <div class="card-title">{{ item.childrenTitle }}</div>
<div class="card-content"> <div class="card-content">
<div v-for="carditem in item.childrenContent" :key="carditem"> <div v-for="carditem in item.childrenContent" :key="carditem">
<div> <div style="display: flex">
<span>{{ carditem.attrType }}：</span> <span>{{ carditem.attrType }}：</span>
<a-tooltip> <a-tooltip>
<template #title>{{ carditem.attrValue }}</template> <template #title>{{ carditem.attrValue }}</template>
@ -220,11 +220,21 @@
div { div {
max-width: 2.8rem; max-width: 2.8rem;
display: flex;
// overflow: hidden; // overflow: hidden;
// text-overflow: ellipsis; // text-overflow: ellipsis;
// display: -webkit-box; // display: -webkit-box;
// -webkit-box-orient: vertical; // -webkit-box-orient: vertical;
// -webkit-line-clamp: 1; // -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;
}
} }
} }

22
front/src/views/detailsAll/components/Application/ApplicationTopDetails.vue
View File

@ -44,14 +44,6 @@
</a-tooltip> </a-tooltip>
</div> </div>
<div class="bottom" v-if="props.dataList.id"> <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 --> <!-- 融合服务 存在fuseResourceList -->
<a-button <a-button
type="primary" type="primary"
@ -63,6 +55,18 @@
</template> </template>
申请使用 申请使用
</a-button> </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()"> <a-button type="primary" @click="goTOCollection()">
{{ props.dataList.isCollect == 'true' ? '已' : '' }}收藏 {{ props.dataList.isCollect == 'true' ? '已' : '' }}收藏
</a-button> </a-button>
@ -257,7 +261,7 @@
margin-right: 0.2rem; margin-right: 0.2rem;
font-size: 0.4rem; font-size: 0.4rem;
margin-right: 0.2rem; margin-right: 0.2rem;
max-width: 7rem; max-width: 6rem;
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

9
front/src/views/detailsAll/components/Business/BusinessApplicationScenarios.vue
View File

@ -47,10 +47,7 @@
<div :class="contentLocation(1, dataFrom.attrType)"> <div :class="contentLocation(1, dataFrom.attrType)">
<div class="content-right-scene" :class="'content-right-case'"> <div class="content-right-scene" :class="'content-right-case'">
<div class="content-top">{{ itemSonTitle.name }}</div> <div class="content-top">{{ itemSonTitle.name }}</div>
<a-tooltip> <div class="content-bottom">{{ itemSonTitle.desc }}</div>
<template #title>{{ itemSonTitle.desc }}</template>
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -170,10 +167,10 @@
.tab-top { .tab-top {
min-width: 120px; min-width: 120px;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 26px;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 200px; max-width: 200px;
height: 24px; height: 26px;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;

9
front/src/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue
View File

@ -47,10 +47,7 @@
<div class="content-right"> <div class="content-right">
<div class="content-right-scene"> <div class="content-right-scene">
<!-- <div class="content-top">{{ itemSonTitle.name }}</div>--> <!-- <div class="content-top">{{ itemSonTitle.name }}</div>-->
<a-tooltip> <div class="content-bottom">{{ itemSonTitle.desc }}</div>
<template #title>{{ itemSonTitle.desc }}</template>
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -150,10 +147,10 @@
.tab-top { .tab-top {
min-width: 1.2rem; min-width: 1.2rem;
font-size: 0.24rem; font-size: 0.24rem;
line-height: 0.24rem; line-height: 0.26rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
max-width: 2rem; max-width: 2rem;
height: 0.24rem; height: 0.26rem;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;

2
front/src/views/detailsAll/components/Business/BusinessTopDetails.vue
View File

@ -243,7 +243,7 @@
// white-space: nowrap; // white-space: nowrap;
font-size: 0.4rem; font-size: 0.4rem;
margin-right: 0.2rem; margin-right: 0.2rem;
max-width: 7rem; max-width: 6rem;
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

7
front/src/views/detailsAll/components/Business/BusinessUsageMode.vue
View File

@ -322,7 +322,7 @@
.content-right-left { .content-right-left {
border-right: 0.01rem solid #707fe0; border-right: 0.01rem solid #707fe0;
padding-right: 0.1rem; padding-right: 0.1rem;
margin-right: 0.1rem; margin-right: 0.3rem;
} }
.content-right-title { .content-right-title {
@ -344,12 +344,11 @@
word-break: break-all; word-break: break-all;
p { p {
// width: 1.60rem; min-width: 2.2rem;
height: 0.2rem; height: 0.2rem;
display: -webkit-box; display: -webkit-box;
// overflow: hidden; overflow: hidden;
margin-bottom: 0.08rem; margin-bottom: 0.08rem;
white-space: nowrap;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-right: 0.15rem; margin-right: 0.15rem;

9
front/src/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue
View File

@ -47,10 +47,7 @@
<div :class="contentLocation(1, dataFrom.attrType)"> <div :class="contentLocation(1, dataFrom.attrType)">
<div class="content-right-scene" :class="'content-right-case'"> <div class="content-right-scene" :class="'content-right-case'">
<div class="content-top">{{ itemSonTitle.name }}</div> <div class="content-top">{{ itemSonTitle.name }}</div>
<a-tooltip> <div class="content-bottom">{{ itemSonTitle.desc }}</div>
<template #title>{{ itemSonTitle.desc }}</template>
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -170,10 +167,10 @@
.tab-top { .tab-top {
min-width: 120px; min-width: 120px;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 26px;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 200px; max-width: 200px;
height: 24px; height: 26px;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;

9
front/src/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue
View File

@ -47,10 +47,7 @@
<div class="content-right"> <div class="content-right">
<div class="content-right-scene"> <div class="content-right-scene">
<div class="content-top">{{ itemSonTitle.name }}</div> <div class="content-top">{{ itemSonTitle.name }}</div>
<a-tooltip> <div class="content-bottom">{{ itemSonTitle.desc }}</div>
<template #title>{{ itemSonTitle.desc }}</template>
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -149,11 +146,11 @@
.tab-top { .tab-top {
min-width: 1.2rem; min-width: 1.2rem;
font-size: 0.24rem; font-size: 0.24rem;
line-height: 0.24rem; line-height: 0.26rem;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
text-align: center; text-align: center;
max-width: 2rem; max-width: 2rem;
height: 0.24rem; height: 0.26rem;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;

2
front/src/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue
View File

@ -265,7 +265,7 @@
// -webkit-line-clamp: 1; // -webkit-line-clamp: 1;
& > span:last-child { & > span:last-child {
display: inline-block; display: inline-block;
width: 1.49rem; width: 2rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

2
front/src/views/detailsAll/components/Developer/DeveloperTopDetails.vue
View File

@ -246,7 +246,7 @@
// white-space: nowrap; // white-space: nowrap;
font-size: 0.4rem; font-size: 0.4rem;
margin-right: 0.2rem; margin-right: 0.2rem;
max-width: 7rem; max-width: 6rem;
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

9
front/src/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue
View File

@ -47,10 +47,7 @@
<div :class="contentLocation(1, dataFrom.attrType)"> <div :class="contentLocation(1, dataFrom.attrType)">
<div class="content-right-scene" :class="'content-right-case'"> <div class="content-right-scene" :class="'content-right-case'">
<div class="content-top">{{ itemSonTitle.name }}</div> <div class="content-top">{{ itemSonTitle.name }}</div>
<a-tooltip> <div class="content-bottom">{{ itemSonTitle.desc }}</div>
<template #title>{{ itemSonTitle.desc }}</template>
<div class="content-bottom">{{ itemSonTitle.desc }}</div>
</a-tooltip>
</div> </div>
</div> </div>
</div> </div>
@ -170,10 +167,10 @@
.tab-top { .tab-top {
min-width: 120px; min-width: 120px;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 26px;
margin-bottom: 20px; margin-bottom: 20px;
max-width: 200px; max-width: 200px;
height: 24px; height: 26px;
display: -webkit-box; display: -webkit-box;
overflow: hidden; overflow: hidden;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;

2
front/src/views/detailsAll/components/LayerService/LayerServiceTopDetails.vue
View File

@ -239,7 +239,7 @@
// white-space: nowrap; // white-space: nowrap;
font-size: 0.4rem; font-size: 0.4rem;
margin-right: 0.2rem; margin-right: 0.2rem;
max-width: 7rem; max-width: 6rem;
text-overflow: -o-ellipsis-lastline; text-overflow: -o-ellipsis-lastline;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

4
front/src/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue
View File

@ -345,8 +345,8 @@
word-break: break-all; word-break: break-all;
p { p {
// width: 1.60rem; width: 2.6rem;
height: 0.2rem; // height: 0.2rem;
margin-right: 0.15rem; margin-right: 0.15rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

2
front/src/views/home/infrastructurePage.vue
View File

@ -447,7 +447,7 @@
pageSize: mapSearchParam.value.pageSize, pageSize: mapSearchParam.value.pageSize,
name: mapSearchParam.value.cameraName || '', name: mapSearchParam.value.cameraName || '',
longitude: mapSearchParam.value.gpsX || '', longitude: mapSearchParam.value.gpsX || '',
atitude: mapSearchParam.value.gpsY || '', latitude: mapSearchParam.value.gpsY || '',
radius: mapSearchParam.value.radius || '', radius: mapSearchParam.value.radius || '',
} }
let paramsFather = '' let paramsFather = ''

116
front/src/views/home/integrationServicesDetails.vue
View File

@ -56,22 +56,43 @@
<!-- 使用能力 --> <!-- 使用能力 -->
<div <div
id="integration-combination-ability" id="integration-ability"
class="combination-ability scrollBox" class="ability scrollBox"
> >
<div class="title-1"> <div class="title-1">
<DetalsTitle title="使用能力" type="COMBINATION ABILITY"></DetalsTitle> <DetalsTitle title="使用能力" type="ABILITY"></DetalsTitle>
</div> </div>
<div class="flex-row-center combine-content"> <template v-for="(item, i) in combineList" :key="i">
<div class="combine-item" 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 class="title">{{item.title}}</div>
<div class="name-box"> <div>
<div class="name-text" v-for="(name, j) in item.list" :key="j"> <el-table
{{ name }} :data="item.list"
</div> 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>
</div> </div>
</div> </template>
</div> </div>
<!-- 构建步骤 --> <!-- 构建步骤 -->
@ -82,7 +103,7 @@
<div class="title-1"> <div class="title-1">
<DetalsTitle title="构建步骤" type="STEP"></DetalsTitle> <DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
</div> </div>
<div class="flex-row-center"> <div class="flex-row-center step-content">
<div style="height: 300px;"> <div style="height: 300px;">
<el-steps direction="vertical" :active="step.length"> <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> <el-step v-for="(item, i) in step" :key="i" :title="item.question" :description="item.answer"></el-step>
@ -135,7 +156,7 @@
}, },
{ {
name: '使用能力', name: '使用能力',
key: 'integration-combination-ability', key: 'integration-ability',
}, },
{ {
name: '构建步骤', name: '构建步骤',
@ -234,14 +255,25 @@
attrType: '应用领域', attrType: '应用领域',
attrValue: fuseAttrList.find((v) => v.attrType === '应用领域').attrValue, attrValue: fuseAttrList.find((v) => v.attrType === '应用领域').attrValue,
} }
combineList.value.map((item) => { combineList.value.forEach((item) => {
let arr = ( let arr = []
fuseResourceList.filter( let resource=fuseResourceList.filter((v)=>v.resource && v.type == item.title)
(v) => v.resource && v.resource.type == item.title if(resource.length>0){
) || [] if(item.title==='基础设施'){
).map((d) => d.resource.name) 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 item.list = arr
return item
}) })
detailInfoObj.value.infoList = [] detailInfoObj.value.infoList = []
detailInfoObj.value.infoList.push(questionObj) detailInfoObj.value.infoList.push(questionObj)
@ -254,6 +286,10 @@
} }
getIntegrationServicesDeatil(id) getIntegrationServicesDeatil(id)
function openResourceDetail(row, column, event){
console.log(row)
}
function handleOpenUrl(type) { function handleOpenUrl(type) {
let obj = let obj =
(detailInfoObj.value.fuseAttrList || []).find( (detailInfoObj.value.fuseAttrList || []).find(
@ -459,10 +495,12 @@
.step { .step {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
.step-content {
margin-top: 0.3rem;
}
} }
.combination-ability { .ability {
padding: 0.8rem 0; padding: 0.8rem 0;
background: rgb(247, 248, 250); background: rgb(247, 248, 250);
@ -471,34 +509,14 @@
} }
.combine-content { .combine-content {
width: 13rem; margin-top: 0.3rem;
margin: 0 auto; align-items: flex-start;
}
.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%);
}
.title { .title {
color: #212121; height: 2rem;
text-align: center; width: 2rem;
padding: 0.2rem 0; margin-right: 0.5rem;
font-size: 0.22rem; background: url('~@/assets/home/rhfw_square.png') no-repeat;
text-align: center; background-size: 100%;
} }
} }

2
front/src/views/home/videoSurveillance/index.vue
View File

@ -224,7 +224,7 @@
pageSize: this.mapSearchParam.pageSize, pageSize: this.mapSearchParam.pageSize,
name: this.mapSearchParam.cameraName || '', name: this.mapSearchParam.cameraName || '',
longitude: this.mapSearchParam.gpsX || '', longitude: this.mapSearchParam.gpsX || '',
atitude: this.mapSearchParam.gpsY || '', latitude: this.mapSearchParam.gpsY || '',
radius: this.mapSearchParam.radius || '', radius: this.mapSearchParam.radius || '',
} }
let paramsFather = '' let paramsFather = ''

25
front/src/views/personalCenter/components/PurchaseVehicle.vue
View File

@ -21,6 +21,7 @@
/> />
</div> </div>
<a-popconfirm <a-popconfirm
v-if="checkedListAbility.length != 0"
title="是否进行批量删除?" title="是否进行批量删除?"
ok-text="是" ok-text="是"
cancel-text="否" cancel-text="否"
@ -37,10 +38,26 @@
background: #fff; background: #fff;
color: #0558e1; color: #0558e1;
" "
@click="ceshiFunction()"
> >
批量删除 批量删除
</a-button> </a-button>
</a-popconfirm> </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 <a-button
type="primary" type="primary"
style=" style="
@ -767,7 +784,13 @@
}) })
} }
} }
//ceshiFunction
const ceshiFunction = () => {
debugger
if (checkedListAbility.value.length == 0) {
message.warning('请先选择需要操作的数据！')
}
}
const delOne = (item, index) => { const delOne = (item, index) => {
// console.log(item) // console.log(item)
sgcDel({ sgcDel({