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

合并版本v0.8.3.2

This commit is contained in:
wuhongjian 2022-07-29 09:12:15 +08:00
parent c9a5bf9f69 428af8b74f
commit dbb6d55bce
24 changed files with 2262 additions and 1731 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
* @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>

6
back/src/router/index.js
View File

@ -5,10 +5,9 @@ import { isURL } from '@/utils/validate'
import store from '@/store'
import Cookies from 'js-cookie'
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
@ -42,7 +41,8 @@ export const moduleRoutes = {
meta: { title: '主入口布局' },
children: [
// todos 临时调整，后期去掉
{ path: '/home', redirect: '/bscatalogue-bscatalogue', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
// { path: '/home', redirect: '/bscatalogue-bscatalogue', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
{ path: '/home', redirect: '/workBench-workBench', component: () => import('@/views/modules/home'), name: 'home', meta: { title: '首页', isTab: true } },
{ path: '/iframe', component: null, name: 'iframe', meta: { title: 'iframe', isTab: true } }
]
}

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

@ -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 }) => {

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

@ -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 }) => {

1
back/src/views/modules/activiti/demo/putaway-process3.vue
View File

@ -117,6 +117,7 @@
<ren-process-detail></ren-process-detail>
<el-dialog
title="审批意见"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"

1
back/src/views/modules/myAgent/demo/ability-resource-shelf.vue
View File

@ -65,6 +65,7 @@
<ren-process-detail></ren-process-detail>
<el-dialog
title="审批意见"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"

3
back/src/views/modules/myAgent/demo/competency-application.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua
* @Date: 2022-06-29 15:59:51
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-25 09:42:46
* @LastEditTime: 2022-07-28 17:23:05
* @Description: 告诉大家这是什么
-->
<!-- 流程业务表单 -->
@ -109,6 +109,7 @@
<ren-process-detail></ren-process-detail>
<el-dialog
title="审批意见"
:close-on-click-modal="false"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"

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

@ -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
})
},

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

@ -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%;

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

@ -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通用方法
// 请求趋势图

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

@ -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

65
back/src/views/modules/sys/user-add-or-update.vue
View File

@ -56,6 +56,7 @@ import { isEmail, isMobile } from '@/utils/validate'
export default {
data () {
return {
submitFlag: true,
visible: false,
roleList: [],
roleIdListDefault: [],
@ -170,6 +171,22 @@ export default {
]).then(() => {
if (this.dataForm.id) {
this.getInfo()
} else {
this.dataForm = {
id: '',
username: '',
deptId: '',
deptName: '',
password: '',
confirmPassword: '',
realName: '',
gender: 0,
email: '',
mobile: '',
roleIdList: [],
postIdList: [],
status: 1
}
}
})
})
@ -219,30 +236,34 @@ export default {
if (!valid) {
return false
}
this.dataForm.password = Encrypt(this.dataForm.password)
if (this.dataForm.id) {
delete this.dataForm.password
}
this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
...this.dataForm,
roleIdList: [
...this.dataForm.roleIdList,
...this.roleIdListDefault
]
}).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
if (this.submitFlag) {
this.submitFlag = false
this.dataForm.password = Encrypt(this.dataForm.password)
if (this.dataForm.id) {
delete this.dataForm.password
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
...this.dataForm,
roleIdList: [
...this.dataForm.roleIdList,
...this.roleIdListDefault
]
}).then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg)
}
})
}).catch(() => {})
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
this.$emit('refreshDataList')
}
})
this.submitFlag = true
}).catch(() => {})
}
})
}, 1000, { leading: true, trailing: false })
}

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

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

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

@ -1,129 +1,128 @@
import * as echarts from 'echarts'
//折线图
// 折线图
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 = {
tooltip: {
trigger: 'axis',
},
axisTick: {
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, [{
offset: 0,
color: '#0058e1'
}, {
offset: 1,
color: '#0058e1'
}])
},
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'
},
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
}]
}
},
axisTick: {
show: false,
},
}],
series: [{
name: '使用量',
type: 'line',
showAllSymbol: true,
symbolSize: 0,
symbol: 'circle',
symbolSize: 5, //设定实心点的大小
lineStyle: {
normal: {
if (_option !== undefined) {
option = Object.assign({}, option, _option)
}
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#0058e1'
}, {
offset: 1,
color: '#0058e1'
}])
},
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);
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)
}

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

@ -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;
}
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)
(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.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 =
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;
getData (aa) {
const date1 = new Date()
const time1 =
date1.getFullYear() +
'-' +
(date1.getMonth() + 1) +
'-' +
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 {
@ -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) {
return request({
url:
'/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' +
params,
`metrics/api/v1/query?query=sum(increase(apigateway_http_status))&time=${params}`,
method: 'get',
})
}
//能力云图-调用成功次数
export function totalCallsSnum2(params) {
return request({
url:
`metrics/api/v1/query?query=sum(increase(apigateway_http_status{code=~"^2.."}))&time=${params}`,
method: 'get',
})
}

9
front/src/router/index.js
View File

@ -453,6 +453,15 @@ export const constantRoutes = [
icon: 'error-warning-line',
},
},
{
path: '/packagingDetails',
name: 'packagingDetails',
component: () => import('@/views/home/packagingDetails'),
meta: {
title: '打包模式详情',
icon: 'error-warning-line',
},
},
{
path: '/integrationServices',
name: 'integrationServices',

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

@ -119,6 +119,7 @@
componentServiceRank,
callTheTrendPort,
totalCallsSnum,
totalCallsSnum2,
} from '@/api/capabilityCloud'
import * as moment from 'moment'
let xinhaianIsShow = whoShow.itShowXiHaiAn //判断是否是西海岸版本
@ -410,6 +411,13 @@
if (!xinhaianIsShow) {
totalCallsSnum(end).then((res) => {
snum.value[1].num = res.data.data.result[0].value[1]
totalCallsSnum2(end).then((resSon) => {
snum.value[2].num =
((snum.value[1].num - resSon.data.data.result[0].value[1]) /
snum.value[1].num) *
100 +
'%'
})
})
}
}

1784
front/src/views/home/components/searchResultList.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -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 = ''

615
front/src/views/home/integrationServices.vue
View File

@ -5,56 +5,28 @@
<div class="top">
<div class="top-title">
全部：
<div
v-for="(item, index) in titleName"
:key="index"
class="tabAll"
@click="changeCards(index)"
<div v-for="(item, index) in titleName" :key="index" class="tabAll" @click="changeCards(index)"
:class="{ sel: index == number }">
<span>{{ item.name }}</span>
<span>{{ item.name }}</span>
</div>
</div>
<div class="resultListSearchInput-father">
<div class="resultListSearchInput-son">
模糊搜索
<a-input-search
v-model:value="searchValue"
placeholder="请输入关键词"
enter-button="搜索"
size="large"
@search="getAppResources"
@change="onSearch"
class="resultListSearchInput"
/>
<a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
@search="getAppResources" @change="onSearch" class="resultListSearchInput" />
<button class="button-reset" @click="chongzhi()">重置</button>
<div class="hengxian"></div>
</div>
</div>
<searchResultList
v-show="resourceList.data && resourceList.data.length > 0"
:key="listKey2"
:resourceList="resourceList"
:resourceTotal="resourceTotal"
selectCardsname="融合服务"
/>
<searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
:resourceList="resourceList" :resourceTotal="resourceTotal" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
<div class="pagination">
<a-pagination
v-if="resourceList.data && resourceList.data.length > 0"
v-model:current="currentPage"
v-model:pageSize="currentPageSize"
show-size-changer
show-less-items
show-quick-jumper
:total="resourceTotal"
:page-size-options="pageSizeOptions"
@change="pageChange"
@showSizeChange="onShowSizeChange"
/>
<a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper :total="resourceTotal"
:page-size-options="pageSizeOptions" @change="pageChange" @showSizeChange="onShowSizeChange" />
</div>
<div
v-if="resourceList.data && resourceList.data.length <= 0"
style="margin-top: 2rem"
>
<div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
<a-empty />
</div>
</div>
@ -62,327 +34,330 @@
<home-footer></home-footer>
</template>
<script>
import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus'
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus'
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
import { getIntegrationServicesList } from '@/api/home.js'
import { useRouter } from 'vue-router'
import HomeHeader from '@/views/home/components/header'
import searchResultList from '@/views/home/components/searchResultList.vue'
import { message } from 'ant-design-vue'
import { getIntegrationServicesList } from '@/api/home.js'
import { useRouter } from 'vue-router'
import HomeHeader from '@/views/home/components/header'
import searchResultList from '@/views/home/components/searchResultList.vue'
import { message } from 'ant-design-vue'
export default defineComponent({
setup() {
export default defineComponent({
setup() {
// 分页
const loading = ref(true)
const currentPage = ref(1)
const currentPageSize = ref(5)
const pageSizeOptions = ref(['5', '10', '20', '50'])
const router = useRouter()
const select = router.currentRoute.value.query.select
const searchValue = ref('')
const Cardsname = ref(select)
const resourceList = reactive({ data: [] })
const resourceTotal = ref(0)
const current = ref(1)
// 选项卡
const titleName = ref([
{
name: '打包模式',
},
{
name: '赋能场景',
},
])
const number = ref(0)
// 刷新筛选条件组件
let listKey = ref(0)
// 刷新筛选列表信息组件
const listKey2 = ref(0)
// 查询参数
const paramsGetResources = {
pageNum: 1,
pageSize: currentPageSize.value,
type: titleName.value[number.value].name,
name: '',
orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
orderType: 'DESC', // ASC 升序 DESC 降序
}
const changeCards = (val) => {
console.log(val)
number.value = val
chongzhi()
}
// 查询
const onSearch = () => {
loading.value = true
currentPage.value = 1
}
// 重置数据
const chongzhi = () => {
loading.value = true
// 重置模糊查字段
searchValue.value = ''
// 分页
const loading = ref(true)
const currentPage = ref(1)
const currentPageSize = ref(5)
const pageSizeOptions = ref(['5', '10', '20', '50'])
const router = useRouter()
const select = router.currentRoute.value.query.select
const searchValue = ref('')
const Cardsname = ref(select)
const resourceList = reactive({ data: [] })
const resourceTotal = ref(0)
const current = ref(1)
// 选项卡
const titleName = ref([
{
name: '打包模式',
},
{
name: '赋能场景',
},
])
const number = ref(0)
// 刷新筛选条件组件
let listKey = ref(0)
// 刷新筛选列表信息组件
const listKey2 = ref(0)
// 查询参数
const paramsGetResources = {
pageNum: 1,
pageSize: currentPageSize.value,
currentPage.value = 1
currentPageSize.value = 5
// 重置查询条件
paramsGetResources.pageNum = 1
paramsGetResources.pageSize = 5
paramsGetResources.orderField = 'create_date'
paramsGetResources.orderType = 'DESC'
mybus.emit('chongzhi', {
type: titleName.value[number.value].name,
name: '',
orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
orderType: 'DESC', // ASC 升序 DESC 降序
}
})
getAppResources()
}
const changeCards = (val) => {
console.log(val)
number.value = val
chongzhi()
}
const getAppResources = () => {
getIntegrationList()
}
// 查询
const onSearch = () => {
loading.value = true
currentPage.value = 1
// 获取融合服务列表
const getIntegrationList = () => {
let postData = {
limit: currentPageSize.value,
page: currentPage.value,
orderField: paramsGetResources.orderField,
orderType: paramsGetResources.orderType,
name: searchValue.value,
type: titleName.value[number.value].name,
}
// 重置数据
const chongzhi = () => {
loading.value = true
// 重置模糊查字段
searchValue.value = ''
// 分页
currentPage.value = 1
currentPageSize.value = 5
// 重置查询条件
paramsGetResources.pageNum = 1
paramsGetResources.pageSize = 5
paramsGetResources.orderField = 'create_date'
paramsGetResources.orderType = 'DESC'
mybus.emit('chongzhi', {
type: titleName.value[number.value].name,
})
getAppResources()
}
const getAppResources = () => {
getIntegrationList()
}
// 获取融合服务列表
const getIntegrationList = () => {
let postData = {
limit: currentPageSize.value,
page: currentPage.value,
orderField: paramsGetResources.orderField,
orderType: paramsGetResources.orderType,
name: searchValue.value,
type: titleName.value[number.value].name,
}
getIntegrationServicesList(postData).then(
(res) => {
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
resourceList.data = res.data.data.list || []
resourceTotal.value = res.data.data.total || 0
},
(err) => {
message.error(err)
getIntegrationServicesList(postData).then(
(res) => {
if (res.data.code !== 0) {
return message.error(res.data.msg)
}
)
}
mybus.on('paramsGetResources', (ids) => {
if (ids && ids.length > 0) {
paramsGetResources.deptIds = ids
} else {
delete paramsGetResources.deptIds
resourceList.data = res.data.data.list || []
resourceTotal.value = res.data.data.total || 0
},
(err) => {
message.error(err)
}
getAppResources()
console.log('paramsGetResources', paramsGetResources)
})
mybus.on('changePage', (page) => {
paramsGetResources.pageNum = page
getAppResources('分页查询')
})
mybus.on('changeSelcted', () => {
getAppResources()
})
)
}
mybus.on('refresh', () => {
paramsGetResources.pageNum = 1
currentPage.value = 1
getAppResources()
})
mybus.on('changeCondition', (condition) => {
paramsGetResources.orderField = condition.orderField
paramsGetResources.orderType = condition.orderType
getAppResources()
})
const pageChange = (val) => {
console.log(val)
loading.value = true
currentPage.value = val
paramsGetResources.pageNum = val
let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
getAppResources(params)
mybus.on('paramsGetResources', (ids) => {
if (ids && ids.length > 0) {
paramsGetResources.deptIds = ids
} else {
delete paramsGetResources.deptIds
}
getAppResources()
console.log('paramsGetResources', paramsGetResources)
})
mybus.on('changePage', (page) => {
paramsGetResources.pageNum = page
getAppResources('分页查询')
})
mybus.on('changeSelcted', () => {
getAppResources()
})
onMounted(() => {
listKey2.value++
getAppResources()
})
mybus.on('refresh', () => {
paramsGetResources.pageNum = 1
currentPage.value = 1
getAppResources()
})
mybus.on('changeCondition', (condition) => {
paramsGetResources.orderField = condition.orderField
paramsGetResources.orderType = condition.orderType
getAppResources()
})
// 分页
const onShowSizeChange = (current, pageSize) => {
currentPage.value = current
currentPageSize.value = pageSize
paramsGetResources.pageNum = current
paramsGetResources.pageSize = pageSize
getAppResources()
}
watch(currentPageSize, () => {
console.log('pageSize', currentPageSize.value)
})
const pageChange = (val) => {
console.log(val)
loading.value = true
currentPage.value = val
paramsGetResources.pageNum = val
let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
getAppResources(params)
}
return {
listKey,
searchValue,
currentPage,
resourceList,
resourceTotal,
pageChange,
listKey2,
Cardsname,
getAppResources,
chongzhi,
onSearch,
currentPageSize,
pageSizeOptions,
current,
loading,
titleName,
changeCards,
number,
}
},
components: {
HomeHeader,
HomeFooter,
searchResultList,
},
beforeUnmount() {
mybus.off('paramsGetResources')
mybus.off('changeCondition')
mybus.off('refresh')
mybus.off('changePage')
},
})
onMounted(() => {
listKey2.value++
getAppResources()
})
// 分页
const onShowSizeChange = (current, pageSize) => {
currentPage.value = current
currentPageSize.value = pageSize
paramsGetResources.pageNum = current
paramsGetResources.pageSize = pageSize
getAppResources()
}
watch(currentPageSize, () => {
console.log('pageSize', currentPageSize.value)
})
return {
listKey,
searchValue,
currentPage,
resourceList,
resourceTotal,
pageChange,
listKey2,
Cardsname,
getAppResources,
chongzhi,
onSearch,
currentPageSize,
pageSizeOptions,
current,
loading,
titleName,
changeCards,
number,
}
},
components: {
HomeHeader,
HomeFooter,
searchResultList,
},
beforeUnmount() {
mybus.off('paramsGetResources')
mybus.off('changeCondition')
mybus.off('refresh')
mybus.off('changePage')
},
})
</script>
<style lang="less" scoped>
.resultListSearchInput-father {
background: #f3f5f9;
padding: 0.2rem;
.resultListSearchInput-father {
background: #f3f5f9;
padding: 0.2rem;
// padding-left: 0.2rem;
// padding-top: 0.2rem;
.resultListSearchInput-son {
background: #fff;
padding: 0.2rem 0.2rem 0rem 0.3rem;
// padding-left: 0.2rem;
// padding-top: 0.2rem;
.resultListSearchInput-son {
background: #fff;
padding: 0.2rem 0.2rem 0rem 0.3rem;
.hengxian {
width: 100%;
height: 0.01rem;
background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem;
}
.hengxian {
width: 100%;
height: 0.01rem;
background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem;
}
}
}
.resultListSearchInput {
margin-left: 0.1rem;
.resultListSearchInput {
margin-left: 0.1rem;
:deep(.ant-input) {
width: 4rem;
height: 0.36rem;
background: #fff;
border-radius: 0.04rem;
}
:deep(.ant-input-search-button) {
width: 0.8rem;
height: 0.36rem;
background: #0087ff;
border-radius: 0.04rem !important;
font-size: 0.14rem;
font-weight: 400;
color: #fff;
line-height: 0.34rem;
margin-left: 0.1rem;
}
:deep(.ant-input-group-addon) {
left: 0 !important;
}
:deep(.ant-input) {
width: 4rem;
height: 0.36rem;
background: #fff;
border-radius: 0.04rem;
}
.button-reset {
border: 0;
outline: none;
:deep(.ant-input-search-button) {
width: 0.8rem;
height: 0.36rem;
background: #e1edfa;
border-radius: 0.04rem;
background: #0087ff;
border-radius: 0.04rem !important;
font-size: 0.14rem;
font-weight: 400;
color: #0087ff;
color: #fff;
line-height: 0.34rem;
margin-left: 2.5rem;
cursor: pointer;
margin-left: 0.1rem;
}
.details-pageconetent {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.67rem;
:deep(.ant-input-group-addon) {
left: 0 !important;
}
}
.button-reset {
border: 0;
outline: none;
width: 0.8rem;
height: 0.36rem;
background: #e1edfa;
border-radius: 0.04rem;
font-size: 0.14rem;
font-weight: 400;
color: #0087ff;
line-height: 0.34rem;
margin-left: 2.5rem;
cursor: pointer;
}
.details-pageconetent {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.67rem;
position: relative;
background: rgba(245, 243, 243, 0.3);
.details-pageconetent-left {
max-height: 6.9rem;
position: absolute;
width: 2.5rem;
top: 0.17rem;
left: 2.5rem;
margin-right: 0.17rem;
overflow: auto;
}
.top {
min-height: 7.2rem;
position: relative;
background: rgba(245, 243, 243, 0.3);
width: 11.5rem;
display: flex;
padding-top: 0.2rem;
flex-direction: column;
font-size: 0.16rem;
justify-content: left;
background: #f3f5f9;
.details-pageconetent-left {
max-height: 6.9rem;
position: absolute;
width: 2.5rem;
top: 0.17rem;
left: 2.5rem;
margin-right: 0.17rem;
overflow: auto;
}
.top {
min-height: 7.2rem;
position: relative;
width: 11.5rem;
display: flex;
padding-top: 0.2rem;
flex-direction: column;
font-size: 0.16rem;
justify-content: left;
.pagination {
background: #f3f5f9;
padding-bottom: 0.6rem;
}
.pagination {
background: #f3f5f9;
padding-bottom: 0.6rem;
.top-title {
padding: 0.2rem;
display: flex;
font-size: 18px;
.tabAll {
font-size: 18px;
color: #000000;
margin-right: 35px;
cursor: pointer;
}
.top-title {
padding: 0.2rem;
display: flex;
font-size: 22px;
.tabAll {
font-size: 22px;
color: #000000;
margin-right: 35px;
cursor: pointer;
}
.tabAll:nth-child(1) {
margin-left: 20px;
}
.sel {
font-weight: 600;
color: #0087ff;
border-bottom: 0.02rem solid #0087ff;
}
.tabAll:nth-child(1) {
margin-left: 20px;
}
.sel {
font-weight: 600;
color: #0087ff;
border-bottom: 0.02rem solid #0087ff;
}
}
}
}
:deep(.ant-card-grid) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
word-break: break-all;
}
:deep(.ant-card-grid) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
word-break: break-all;
}
</style>

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

@ -23,13 +23,44 @@
</div>
</div>
<!-- 组合能力 -->
<!-- 场景痛点 -->
<div
id="integration-pain-point"
class="pain-point scrollBox"
>
<div class="title-1">
<DetalsTitle title="场景痛点" type="PAIN POINT"></DetalsTitle>
</div>
<div class="flex-row-center">
<div class="bg"></div>
<div class="content">
<div class="content-item" v-for="(item, i) in painPoint" :key="i">{{i+1}}.{{item.description}}</div>
</div>
</div>
</div>
<!-- 解决方案 -->
<div
id="integration-solution"
class="solution scrollBox"
>
<div class="title-1">
<DetalsTitle title="解决方案" type="SOLUTION"></DetalsTitle>
</div>
<div class="flex-row-center">
<div class="content">
<div class="content-item" v-for="(item, i) in solution" :key="i">{{i+1}}.{{item.description}}</div>
</div>
</div>
</div>
<!-- 使用能力 -->
<div
id="integration-combination-ability"
class="combination-ability scrollBox"
>
<div class="title-1">
<DetalsTitle title="组合能力" type="COMBINATION ABILITY"></DetalsTitle>
<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">
@ -43,48 +74,23 @@
</div>
</div>
<!-- 使用方式 -->
<div id="integration-use-way" class="use-way scrollBox">
<!-- 构建步骤 -->
<div
id="integration-step"
class="step scrollBox"
>
<div class="title-1">
<DetalsTitle title="使用方式" type="USE WAY"></DetalsTitle>
<DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
</div>
<div class="content">
<div class="content-card flex-row-between left word-bg">
<div class="content-card-item left-item">
<div class="card-title">文档</div>
<!-- <div class="card-text">文档描述文档描述文档描述文档描述</div> -->
</div>
<div class="content-card-item btn-box">
<div class="btn" @click="handleOpenUrl('技术文档')">技术文档</div>
<div class="btn" @click="handleOpenUrl('使用手册')">使用手册</div>
</div>
</div>
<div class="content-card flex-row-start">
<div
class="right-item content-card-item"
v-for="(use, i) in useWayShowList"
:key="i"
>
<div class="card-title title">{{ use.title }}</div>
<div
class="card-text"
v-for="(d, k) in Object.keys(use.info)"
:key="k"
>
{{ use.info[d] }}:{{ detailInfoObj[d] || '--' }}
</div>
</div>
<div class="flex-row-center">
<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>
</el-steps>
</div>
</div>
</div>
<!-- 常见问题-->
<application-common-problem
:dataList="detailInfoObj"
id="common-problem"
class="scrollBox"
></application-common-problem>
<home-footer></home-footer>
</div>
</template>
@ -102,6 +108,9 @@
const router = useRouter()
const scrollTop = ref(0)
const domArr = ref([])
const painPoint = ref([])
const solution = ref([])
const step=ref([])
const id = router.currentRoute.value.query.id
document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0
@ -117,20 +126,24 @@
const navList = ref([
{
name: '组合能力',
name: '场景痛点',
key: 'integration-pain-point',
},
{
name: '解决方案',
key: 'integration-solution',
},
{
name: '使用能力',
key: 'integration-combination-ability',
},
{
name: '使用方式',
key: 'integration-use-way',
},
{
name: '常见问题',
key: 'common-problem',
name: '构建步骤',
key: 'integration-step',
},
])
const selectNow = ref('integration-combination-ability')
const selectNow = ref('integration-pain-point')
const useWayShowList = ref([
{
@ -214,9 +227,12 @@
attrType: '常见问题',
attrValue: questionValue.attrValue || '[]',
}
painPoint.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '场景痛点').attrValue) || []
solution.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '解决方案').attrValue) || []
step.value = JSON.parse(fuseAttrList.find((v) => v.attrType === '使用步骤').attrValue) || []
let areaObj = {
attrType: '应用领域',
attrValue: detailInfoObj.value.applicationArea,
attrValue: fuseAttrList.find((v) => v.attrType === '应用领域').attrValue,
}
combineList.value.map((item) => {
let arr = (
@ -409,6 +425,43 @@
}
}
.pain-point {
padding: 0.8rem 0;
background: rgb(247, 248, 250);
.bg {
height: 2rem;
width: 2rem;
background: url('~@/assets/home/rhfw_square.png') no-repeat;
background-size: 100%;
margin-top: 0.3rem;
}
.content {
height: 2rem;
width: 6rem;
.content-item {
margin: 0.1rem;
}
}
}
.solution {
padding: 0.8rem 0;
background: rgb(247, 248, 250);
.content {
height: 2rem;
width: 8rem;
.content-item {
margin: 0.3rem;
}
}
}
.step {
padding: 0.8rem 0;
background: rgb(247, 248, 250);
}
.combination-ability {
padding: 0.8rem 0;
background: rgb(247, 248, 250);

153
front/src/views/home/packagingDetails.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<!-- 青岛 -->
<div class="details-pageconetent">
<home-header></home-header>
<div></div>
<home-footer></home-footer>
</div>
</template>
<script setup>
import HomeFooter from '@/views/newHome/components/Footer'
import mybus from '@/myplugins/mybus'
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
import { getIntegrationServicesList } from '@/api/home.js'
import { useRouter } from 'vue-router'
import HomeHeader from '@/views/home/components/header'
import searchResultList from '@/views/home/components/searchResultList.vue'
import { message } from 'ant-design-vue'
</script>
<style lang="less" scoped>
.resultListSearchInput-father {
background: #f3f5f9;
padding: 0.2rem;
// padding-left: 0.2rem;
// padding-top: 0.2rem;
.resultListSearchInput-son {
background: #fff;
padding: 0.2rem 0.2rem 0rem 0.3rem;
.hengxian {
width: 100%;
height: 0.01rem;
background: rgba(150, 144, 144, 0.3);
margin-top: 0.2rem;
}
}
}
.resultListSearchInput {
margin-left: 0.1rem;
:deep(.ant-input) {
width: 4rem;
height: 0.36rem;
background: #fff;
border-radius: 0.04rem;
}
:deep(.ant-input-search-button) {
width: 0.8rem;
height: 0.36rem;
background: #0087ff;
border-radius: 0.04rem !important;
font-size: 0.14rem;
font-weight: 400;
color: #fff;
line-height: 0.34rem;
margin-left: 0.1rem;
}
:deep(.ant-input-group-addon) {
left: 0 !important;
}
}
.button-reset {
border: 0;
outline: none;
width: 0.8rem;
height: 0.36rem;
background: #e1edfa;
border-radius: 0.04rem;
font-size: 0.14rem;
font-weight: 400;
color: #0087ff;
line-height: 0.34rem;
margin-left: 2.5rem;
cursor: pointer;
}
.details-pageconetent {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0.67rem;
position: relative;
background: rgba(245, 243, 243, 0.3);
.details-pageconetent-left {
max-height: 6.9rem;
position: absolute;
width: 2.5rem;
top: 0.17rem;
left: 2.5rem;
margin-right: 0.17rem;
overflow: auto;
}
.top {
min-height: 7.2rem;
position: relative;
width: 11.5rem;
display: flex;
padding-top: 0.2rem;
flex-direction: column;
font-size: 0.16rem;
justify-content: left;
background: #f3f5f9;
.pagination {
background: #f3f5f9;
padding-bottom: 0.6rem;
}
.top-title {
padding: 0.2rem;
display: flex;
font-size: 18px;
.tabAll {
font-size: 18px;
color: #000000;
margin-right: 35px;
cursor: pointer;
}
.tabAll:nth-child(1) {
margin-left: 20px;
}
.sel {
font-weight: 600;
color: #0087ff;
border-bottom: 0.02rem solid #0087ff;
}
}
}
}
:deep(.ant-card-grid) {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
word-break: break-all;
}
</style>

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

@ -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 = ''