Compare commits
12 Commits
c9a5bf9f69
...
dbb6d55bce
| Author | SHA1 | Date |
|---|---|---|
 wuhongjian
|
dbb6d55bce | |
|
wuhongjian
|
428af8b74f | |
851673013@qq.com
|
8376fb23d5 | |
|
a0049873
|
bab0c94093 | |
|
a0049873
|
fb78805786 | |
|
a0049873
|
1c7bdef115 | |
|
a0049873
|
fabd0da877 | |
 guoyue
|
488dbfbe5f | |
|
guoyue
|
816d07495c | |
 lizhicheng2
|
d9139ae621 | |
|
a0049873
|
ea3f4b3da1 | |
|
a0049873
|
fc524a6b43 |
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -5,10 +5,9 @@ import { isURL } from '@/utils/validate'
|
||||||
import store from '@/store'
|
import store from '@/store'
|
||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
|
|
||||||
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
|
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
|
||||||
const originalPush = Router.prototype.push
|
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)
|
return originalPush.call(this, location).catch(err => err)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -42,7 +41,8 @@ export const moduleRoutes = {
|
||||||
meta: { title: '主入口布局' },
|
meta: { title: '主入口布局' },
|
||||||
children: [
|
children: [
|
||||||
// todos 临时调整，后期去掉
|
// 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 } }
|
{ path: '/iframe', component: null, name: 'iframe', meta: { title: 'iframe', isTab: true } }
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 }) => {
|
||||||
|
|
|
||||||
|
|
@ -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 }) => {
|
||||||
|
|
|
||||||
|
|
@ -117,6 +117,7 @@
|
||||||
<ren-process-detail></ren-process-detail>
|
<ren-process-detail></ren-process-detail>
|
||||||
<el-dialog
|
<el-dialog
|
||||||
title="审批意见"
|
title="审批意见"
|
||||||
|
:close-on-click-modal="false"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
width="30%"
|
width="30%"
|
||||||
:before-close="handleClose"
|
:before-close="handleClose"
|
||||||
|
|
|
||||||
|
|
@ -65,6 +65,7 @@
|
||||||
<ren-process-detail></ren-process-detail>
|
<ren-process-detail></ren-process-detail>
|
||||||
<el-dialog
|
<el-dialog
|
||||||
title="审批意见"
|
title="审批意见"
|
||||||
|
:close-on-click-modal="false"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
width="30%"
|
width="30%"
|
||||||
:before-close="handleClose"
|
:before-close="handleClose"
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
* @Author: hisense.liangjunhua
|
* @Author: hisense.liangjunhua
|
||||||
* @Date: 2022-06-29 15:59:51
|
* @Date: 2022-06-29 15:59:51
|
||||||
* @LastEditors: hisense.liangjunhua
|
* @LastEditors: hisense.liangjunhua
|
||||||
* @LastEditTime: 2022-07-25 09:42:46
|
* @LastEditTime: 2022-07-28 17:23:05
|
||||||
* @Description: 告诉大家这是什么
|
* @Description: 告诉大家这是什么
|
||||||
-->
|
-->
|
||||||
<!-- 流程业务表单 -->
|
<!-- 流程业务表单 -->
|
||||||
|
|
@ -109,6 +109,7 @@
|
||||||
<ren-process-detail></ren-process-detail>
|
<ren-process-detail></ren-process-detail>
|
||||||
<el-dialog
|
<el-dialog
|
||||||
title="审批意见"
|
title="审批意见"
|
||||||
|
:close-on-click-modal="false"
|
||||||
:visible.sync="dialogVisible"
|
:visible.sync="dialogVisible"
|
||||||
width="30%"
|
width="30%"
|
||||||
:before-close="handleClose"
|
:before-close="handleClose"
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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%;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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通用方法
|
||||||
// 请求趋势图
|
// 请求趋势图
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -56,6 +56,7 @@ import { isEmail, isMobile } from '@/utils/validate'
|
||||||
export default {
|
export default {
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
submitFlag: true,
|
||||||
visible: false,
|
visible: false,
|
||||||
roleList: [],
|
roleList: [],
|
||||||
roleIdListDefault: [],
|
roleIdListDefault: [],
|
||||||
|
|
@ -170,6 +171,22 @@ export default {
|
||||||
]).then(() => {
|
]).then(() => {
|
||||||
if (this.dataForm.id) {
|
if (this.dataForm.id) {
|
||||||
this.getInfo()
|
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) {
|
if (!valid) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
this.dataForm.password = Encrypt(this.dataForm.password)
|
if (this.submitFlag) {
|
||||||
if (this.dataForm.id) {
|
this.submitFlag = false
|
||||||
delete this.dataForm.password
|
this.dataForm.password = Encrypt(this.dataForm.password)
|
||||||
}
|
if (this.dataForm.id) {
|
||||||
this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
|
delete this.dataForm.password
|
||||||
...this.dataForm,
|
|
||||||
roleIdList: [
|
|
||||||
...this.dataForm.roleIdList,
|
|
||||||
...this.roleIdListDefault
|
|
||||||
]
|
|
||||||
}).then(({ data: res }) => {
|
|
||||||
if (res.code !== 0) {
|
|
||||||
return this.$message.error(res.msg)
|
|
||||||
}
|
}
|
||||||
this.$message({
|
this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/user', {
|
||||||
message: this.$t('prompt.success'),
|
...this.dataForm,
|
||||||
type: 'success',
|
roleIdList: [
|
||||||
duration: 500,
|
...this.dataForm.roleIdList,
|
||||||
onClose: () => {
|
...this.roleIdListDefault
|
||||||
this.visible = false
|
]
|
||||||
this.$emit('refreshDataList')
|
}).then(({ data: res }) => {
|
||||||
|
if (res.code !== 0) {
|
||||||
|
return this.$message.error(res.msg)
|
||||||
}
|
}
|
||||||
})
|
this.$message({
|
||||||
}).catch(() => {})
|
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 })
|
}, 1000, { leading: true, trailing: false })
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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)
|
})
|
||||||
})
|
}
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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?query=sum(increase(apigateway_http_status))&time=${params}`,
|
||||||
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',
|
method: 'get',
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -453,6 +453,15 @@ export const constantRoutes = [
|
||||||
icon: 'error-warning-line',
|
icon: 'error-warning-line',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/packagingDetails',
|
||||||
|
name: 'packagingDetails',
|
||||||
|
component: () => import('@/views/home/packagingDetails'),
|
||||||
|
meta: {
|
||||||
|
title: '打包模式详情',
|
||||||
|
icon: 'error-warning-line',
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/integrationServices',
|
path: '/integrationServices',
|
||||||
name: 'integrationServices',
|
name: 'integrationServices',
|
||||||
|
|
|
||||||
|
|
@ -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 //判断是否是西海岸版本
|
||||||
|
|
@ -410,6 +411,13 @@
|
||||||
if (!xinhaianIsShow) {
|
if (!xinhaianIsShow) {
|
||||||
totalCallsSnum(end).then((res) => {
|
totalCallsSnum(end).then((res) => {
|
||||||
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 =
|
||||||
|
((snum.value[1].num - resSon.data.data.result[0].value[1]) /
|
||||||
|
snum.value[1].num) *
|
||||||
|
100 +
|
||||||
|
'%'
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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 = ''
|
||||||
|
|
|
||||||
|
|
@ -5,56 +5,28 @@
|
||||||
<div class="top">
|
<div class="top">
|
||||||
<div class="top-title">
|
<div class="top-title">
|
||||||
全部：
|
全部：
|
||||||
<div
|
<div v-for="(item, index) in titleName" :key="index" class="tabAll" @click="changeCards(index)"
|
||||||
v-for="(item, index) in titleName"
|
|
||||||
:key="index"
|
|
||||||
class="tabAll"
|
|
||||||
@click="changeCards(index)"
|
|
||||||
:class="{ sel: index == number }">
|
:class="{ sel: index == number }">
|
||||||
<span>{{ item.name }}</span>
|
<span>{{ item.name }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="resultListSearchInput-father">
|
<div class="resultListSearchInput-father">
|
||||||
<div class="resultListSearchInput-son">
|
<div class="resultListSearchInput-son">
|
||||||
模糊搜索
|
模糊搜索
|
||||||
<a-input-search
|
<a-input-search v-model:value="searchValue" placeholder="请输入关键词" enter-button="搜索" size="large"
|
||||||
v-model:value="searchValue"
|
@search="getAppResources" @change="onSearch" class="resultListSearchInput" />
|
||||||
placeholder="请输入关键词"
|
|
||||||
enter-button="搜索"
|
|
||||||
size="large"
|
|
||||||
@search="getAppResources"
|
|
||||||
@change="onSearch"
|
|
||||||
class="resultListSearchInput"
|
|
||||||
/>
|
|
||||||
<button class="button-reset" @click="chongzhi()">重置</button>
|
<button class="button-reset" @click="chongzhi()">重置</button>
|
||||||
<div class="hengxian"></div>
|
<div class="hengxian"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<searchResultList
|
<searchResultList v-show="resourceList.data && resourceList.data.length > 0" :key="listKey2"
|
||||||
v-show="resourceList.data && resourceList.data.length > 0"
|
:resourceList="resourceList" :resourceTotal="resourceTotal" :selectCardsname="number == 0 ? '融合服务' : '赋能场景'" />
|
||||||
:key="listKey2"
|
|
||||||
:resourceList="resourceList"
|
|
||||||
:resourceTotal="resourceTotal"
|
|
||||||
selectCardsname="融合服务"
|
|
||||||
/>
|
|
||||||
<div class="pagination">
|
<div class="pagination">
|
||||||
<a-pagination
|
<a-pagination v-if="resourceList.data && resourceList.data.length > 0" v-model:current="currentPage"
|
||||||
v-if="resourceList.data && resourceList.data.length > 0"
|
v-model:pageSize="currentPageSize" show-size-changer show-less-items show-quick-jumper :total="resourceTotal"
|
||||||
v-model:current="currentPage"
|
:page-size-options="pageSizeOptions" @change="pageChange" @showSizeChange="onShowSizeChange" />
|
||||||
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>
|
||||||
<div
|
<div v-if="resourceList.data && resourceList.data.length <= 0" style="margin-top: 2rem">
|
||||||
v-if="resourceList.data && resourceList.data.length <= 0"
|
|
||||||
style="margin-top: 2rem"
|
|
||||||
>
|
|
||||||
<a-empty />
|
<a-empty />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -62,327 +34,330 @@
|
||||||
<home-footer></home-footer>
|
<home-footer></home-footer>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import HomeFooter from '@/views/newHome/components/Footer'
|
import HomeFooter from '@/views/newHome/components/Footer'
|
||||||
import mybus from '@/myplugins/mybus'
|
import mybus from '@/myplugins/mybus'
|
||||||
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
|
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from 'vue'
|
||||||
|
|
||||||
import { getIntegrationServicesList } from '@/api/home.js'
|
import { getIntegrationServicesList } from '@/api/home.js'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import HomeHeader from '@/views/home/components/header'
|
import HomeHeader from '@/views/home/components/header'
|
||||||
import searchResultList from '@/views/home/components/searchResultList.vue'
|
import searchResultList from '@/views/home/components/searchResultList.vue'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
setup() {
|
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)
|
currentPage.value = 1
|
||||||
const currentPage = ref(1)
|
currentPageSize.value = 5
|
||||||
const currentPageSize = ref(5)
|
// 重置查询条件
|
||||||
const pageSizeOptions = ref(['5', '10', '20', '50'])
|
paramsGetResources.pageNum = 1
|
||||||
const router = useRouter()
|
paramsGetResources.pageSize = 5
|
||||||
const select = router.currentRoute.value.query.select
|
paramsGetResources.orderField = 'create_date'
|
||||||
const searchValue = ref('')
|
paramsGetResources.orderType = 'DESC'
|
||||||
const Cardsname = ref(select)
|
mybus.emit('chongzhi', {
|
||||||
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,
|
type: titleName.value[number.value].name,
|
||||||
name: '',
|
})
|
||||||
orderField: 'create_date', // total 综合 visits 访问量 applyCount 申请量 score 评分 collectCount 收藏量
|
getAppResources()
|
||||||
orderType: 'DESC', // ASC 升序 DESC 降序
|
}
|
||||||
}
|
|
||||||
|
|
||||||
const changeCards = (val) => {
|
const getAppResources = () => {
|
||||||
console.log(val)
|
getIntegrationList()
|
||||||
number.value = val
|
}
|
||||||
chongzhi()
|
|
||||||
}
|
|
||||||
|
|
||||||
// 查询
|
// 获取融合服务列表
|
||||||
const onSearch = () => {
|
const getIntegrationList = () => {
|
||||||
loading.value = true
|
let postData = {
|
||||||
currentPage.value = 1
|
limit: currentPageSize.value,
|
||||||
|
page: currentPage.value,
|
||||||
|
orderField: paramsGetResources.orderField,
|
||||||
|
orderType: paramsGetResources.orderType,
|
||||||
|
name: searchValue.value,
|
||||||
|
type: titleName.value[number.value].name,
|
||||||
}
|
}
|
||||||
// 重置数据
|
getIntegrationServicesList(postData).then(
|
||||||
const chongzhi = () => {
|
(res) => {
|
||||||
loading.value = true
|
if (res.data.code !== 0) {
|
||||||
// 重置模糊查字段
|
return message.error(res.data.msg)
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
)
|
resourceList.data = res.data.data.list || []
|
||||||
}
|
resourceTotal.value = res.data.data.total || 0
|
||||||
|
},
|
||||||
mybus.on('paramsGetResources', (ids) => {
|
(err) => {
|
||||||
if (ids && ids.length > 0) {
|
message.error(err)
|
||||||
paramsGetResources.deptIds = ids
|
|
||||||
} else {
|
|
||||||
delete paramsGetResources.deptIds
|
|
||||||
}
|
}
|
||||||
getAppResources()
|
)
|
||||||
console.log('paramsGetResources', paramsGetResources)
|
}
|
||||||
})
|
|
||||||
mybus.on('changePage', (page) => {
|
|
||||||
paramsGetResources.pageNum = page
|
|
||||||
getAppResources('分页查询')
|
|
||||||
})
|
|
||||||
mybus.on('changeSelcted', () => {
|
|
||||||
getAppResources()
|
|
||||||
})
|
|
||||||
|
|
||||||
mybus.on('refresh', () => {
|
mybus.on('paramsGetResources', (ids) => {
|
||||||
paramsGetResources.pageNum = 1
|
if (ids && ids.length > 0) {
|
||||||
currentPage.value = 1
|
paramsGetResources.deptIds = ids
|
||||||
getAppResources()
|
} else {
|
||||||
})
|
delete paramsGetResources.deptIds
|
||||||
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)
|
|
||||||
}
|
}
|
||||||
|
getAppResources()
|
||||||
|
console.log('paramsGetResources', paramsGetResources)
|
||||||
|
})
|
||||||
|
mybus.on('changePage', (page) => {
|
||||||
|
paramsGetResources.pageNum = page
|
||||||
|
getAppResources('分页查询')
|
||||||
|
})
|
||||||
|
mybus.on('changeSelcted', () => {
|
||||||
|
getAppResources()
|
||||||
|
})
|
||||||
|
|
||||||
onMounted(() => {
|
mybus.on('refresh', () => {
|
||||||
listKey2.value++
|
paramsGetResources.pageNum = 1
|
||||||
getAppResources()
|
currentPage.value = 1
|
||||||
})
|
getAppResources()
|
||||||
|
})
|
||||||
|
mybus.on('changeCondition', (condition) => {
|
||||||
|
paramsGetResources.orderField = condition.orderField
|
||||||
|
paramsGetResources.orderType = condition.orderType
|
||||||
|
getAppResources()
|
||||||
|
})
|
||||||
|
|
||||||
// 分页
|
const pageChange = (val) => {
|
||||||
const onShowSizeChange = (current, pageSize) => {
|
console.log(val)
|
||||||
currentPage.value = current
|
loading.value = true
|
||||||
currentPageSize.value = pageSize
|
currentPage.value = val
|
||||||
paramsGetResources.pageNum = current
|
paramsGetResources.pageNum = val
|
||||||
paramsGetResources.pageSize = pageSize
|
let params = '分页查询' //判断是否是点击下面的分页的调用模糊查询方法还是点击搜索调用模糊查询方法
|
||||||
getAppResources()
|
getAppResources(params)
|
||||||
}
|
}
|
||||||
watch(currentPageSize, () => {
|
|
||||||
console.log('pageSize', currentPageSize.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
return {
|
onMounted(() => {
|
||||||
listKey,
|
listKey2.value++
|
||||||
searchValue,
|
getAppResources()
|
||||||
currentPage,
|
})
|
||||||
resourceList,
|
|
||||||
resourceTotal,
|
// 分页
|
||||||
pageChange,
|
const onShowSizeChange = (current, pageSize) => {
|
||||||
listKey2,
|
currentPage.value = current
|
||||||
Cardsname,
|
currentPageSize.value = pageSize
|
||||||
getAppResources,
|
paramsGetResources.pageNum = current
|
||||||
chongzhi,
|
paramsGetResources.pageSize = pageSize
|
||||||
onSearch,
|
getAppResources()
|
||||||
currentPageSize,
|
}
|
||||||
pageSizeOptions,
|
watch(currentPageSize, () => {
|
||||||
current,
|
console.log('pageSize', currentPageSize.value)
|
||||||
loading,
|
})
|
||||||
titleName,
|
|
||||||
changeCards,
|
return {
|
||||||
number,
|
listKey,
|
||||||
}
|
searchValue,
|
||||||
},
|
currentPage,
|
||||||
components: {
|
resourceList,
|
||||||
HomeHeader,
|
resourceTotal,
|
||||||
HomeFooter,
|
pageChange,
|
||||||
searchResultList,
|
listKey2,
|
||||||
},
|
Cardsname,
|
||||||
beforeUnmount() {
|
getAppResources,
|
||||||
mybus.off('paramsGetResources')
|
chongzhi,
|
||||||
mybus.off('changeCondition')
|
onSearch,
|
||||||
mybus.off('refresh')
|
currentPageSize,
|
||||||
mybus.off('changePage')
|
pageSizeOptions,
|
||||||
},
|
current,
|
||||||
})
|
loading,
|
||||||
|
titleName,
|
||||||
|
changeCards,
|
||||||
|
number,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
HomeHeader,
|
||||||
|
HomeFooter,
|
||||||
|
searchResultList,
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
mybus.off('paramsGetResources')
|
||||||
|
mybus.off('changeCondition')
|
||||||
|
mybus.off('refresh')
|
||||||
|
mybus.off('changePage')
|
||||||
|
},
|
||||||
|
})
|
||||||
</script>
|
</script>
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.resultListSearchInput-father {
|
.resultListSearchInput-father {
|
||||||
background: #f3f5f9;
|
background: #f3f5f9;
|
||||||
padding: 0.2rem;
|
padding: 0.2rem;
|
||||||
|
|
||||||
// padding-left: 0.2rem;
|
// padding-left: 0.2rem;
|
||||||
// padding-top: 0.2rem;
|
// padding-top: 0.2rem;
|
||||||
.resultListSearchInput-son {
|
.resultListSearchInput-son {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 0.2rem 0.2rem 0rem 0.3rem;
|
padding: 0.2rem 0.2rem 0rem 0.3rem;
|
||||||
|
|
||||||
.hengxian {
|
.hengxian {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.01rem;
|
height: 0.01rem;
|
||||||
background: rgba(150, 144, 144, 0.3);
|
background: rgba(150, 144, 144, 0.3);
|
||||||
margin-top: 0.2rem;
|
margin-top: 0.2rem;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.resultListSearchInput {
|
.resultListSearchInput {
|
||||||
margin-left: 0.1rem;
|
margin-left: 0.1rem;
|
||||||
|
|
||||||
:deep(.ant-input) {
|
:deep(.ant-input) {
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 0.36rem;
|
height: 0.36rem;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 0.04rem;
|
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 {
|
:deep(.ant-input-search-button) {
|
||||||
border: 0;
|
|
||||||
outline: none;
|
|
||||||
width: 0.8rem;
|
width: 0.8rem;
|
||||||
height: 0.36rem;
|
height: 0.36rem;
|
||||||
background: #e1edfa;
|
background: #0087ff;
|
||||||
border-radius: 0.04rem;
|
border-radius: 0.04rem !important;
|
||||||
font-size: 0.14rem;
|
font-size: 0.14rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #0087ff;
|
color: #fff;
|
||||||
line-height: 0.34rem;
|
line-height: 0.34rem;
|
||||||
margin-left: 2.5rem;
|
margin-left: 0.1rem;
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.details-pageconetent {
|
:deep(.ant-input-group-addon) {
|
||||||
height: 100%;
|
left: 0 !important;
|
||||||
width: 100%;
|
}
|
||||||
display: flex;
|
}
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
.button-reset {
|
||||||
margin-top: 0.67rem;
|
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;
|
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 {
|
.pagination {
|
||||||
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;
|
background: #f3f5f9;
|
||||||
|
padding-bottom: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
.pagination {
|
.top-title {
|
||||||
background: #f3f5f9;
|
padding: 0.2rem;
|
||||||
padding-bottom: 0.6rem;
|
display: flex;
|
||||||
|
font-size: 18px;
|
||||||
|
|
||||||
|
.tabAll {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #000000;
|
||||||
|
margin-right: 35px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-title {
|
.tabAll:nth-child(1) {
|
||||||
padding: 0.2rem;
|
margin-left: 20px;
|
||||||
display: flex;
|
}
|
||||||
font-size: 22px;
|
|
||||||
.tabAll {
|
.sel {
|
||||||
font-size: 22px;
|
font-weight: 600;
|
||||||
color: #000000;
|
color: #0087ff;
|
||||||
margin-right: 35px;
|
border-bottom: 0.02rem solid #0087ff;
|
||||||
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) {
|
:deep(.ant-card-grid) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
-webkit-line-clamp: 1;
|
-webkit-line-clamp: 1;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -23,13 +23,44 @@
|
||||||
</div>
|
</div>
|
||||||
</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
|
<div
|
||||||
id="integration-combination-ability"
|
id="integration-combination-ability"
|
||||||
class="combination-ability scrollBox"
|
class="combination-ability scrollBox"
|
||||||
>
|
>
|
||||||
<div class="title-1">
|
<div class="title-1">
|
||||||
<DetalsTitle title="组合能力" type="COMBINATION ABILITY"></DetalsTitle>
|
<DetalsTitle title="使用能力" type="COMBINATION ABILITY"></DetalsTitle>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-row-center combine-content">
|
<div class="flex-row-center combine-content">
|
||||||
<div class="combine-item" v-for="(item, i) in combineList" :key="i">
|
<div class="combine-item" v-for="(item, i) in combineList" :key="i">
|
||||||
|
|
@ -43,48 +74,23 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 使用方式 -->
|
<!-- 构建步骤 -->
|
||||||
<div id="integration-use-way" class="use-way scrollBox">
|
<div
|
||||||
|
id="integration-step"
|
||||||
|
class="step scrollBox"
|
||||||
|
>
|
||||||
<div class="title-1">
|
<div class="title-1">
|
||||||
<DetalsTitle title="使用方式" type="USE WAY"></DetalsTitle>
|
<DetalsTitle title="构建步骤" type="STEP"></DetalsTitle>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="flex-row-center">
|
||||||
<div class="content-card flex-row-between left word-bg">
|
<div style="height: 300px;">
|
||||||
<div class="content-card-item left-item">
|
<el-steps direction="vertical" :active="step.length">
|
||||||
<div class="card-title">文档</div>
|
<el-step v-for="(item, i) in step" :key="i" :title="item.question" :description="item.answer"></el-step>
|
||||||
<!-- <div class="card-text">文档描述文档描述文档描述文档描述</div> -->
|
</el-steps>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 常见问题-->
|
|
||||||
<application-common-problem
|
|
||||||
:dataList="detailInfoObj"
|
|
||||||
id="common-problem"
|
|
||||||
class="scrollBox"
|
|
||||||
></application-common-problem>
|
|
||||||
|
|
||||||
<home-footer></home-footer>
|
<home-footer></home-footer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -102,6 +108,9 @@
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const scrollTop = ref(0)
|
const scrollTop = ref(0)
|
||||||
const domArr = ref([])
|
const domArr = ref([])
|
||||||
|
const painPoint = ref([])
|
||||||
|
const solution = ref([])
|
||||||
|
const step=ref([])
|
||||||
const id = router.currentRoute.value.query.id
|
const id = router.currentRoute.value.query.id
|
||||||
document.documentElement.style.transition = 'all 0.3s ease'
|
document.documentElement.style.transition = 'all 0.3s ease'
|
||||||
document.documentElement.scrollTop = 0
|
document.documentElement.scrollTop = 0
|
||||||
|
|
@ -117,20 +126,24 @@
|
||||||
|
|
||||||
const navList = ref([
|
const navList = ref([
|
||||||
{
|
{
|
||||||
name: '组合能力',
|
name: '场景痛点',
|
||||||
|
key: 'integration-pain-point',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '解决方案',
|
||||||
|
key: 'integration-solution',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '使用能力',
|
||||||
key: 'integration-combination-ability',
|
key: 'integration-combination-ability',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '使用方式',
|
name: '构建步骤',
|
||||||
key: 'integration-use-way',
|
key: 'integration-step',
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '常见问题',
|
|
||||||
key: 'common-problem',
|
|
||||||
},
|
},
|
||||||
])
|
])
|
||||||
|
|
||||||
const selectNow = ref('integration-combination-ability')
|
const selectNow = ref('integration-pain-point')
|
||||||
|
|
||||||
const useWayShowList = ref([
|
const useWayShowList = ref([
|
||||||
{
|
{
|
||||||
|
|
@ -214,9 +227,12 @@
|
||||||
attrType: '常见问题',
|
attrType: '常见问题',
|
||||||
attrValue: questionValue.attrValue || '[]',
|
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 = {
|
let areaObj = {
|
||||||
attrType: '应用领域',
|
attrType: '应用领域',
|
||||||
attrValue: detailInfoObj.value.applicationArea,
|
attrValue: fuseAttrList.find((v) => v.attrType === '应用领域').attrValue,
|
||||||
}
|
}
|
||||||
combineList.value.map((item) => {
|
combineList.value.map((item) => {
|
||||||
let arr = (
|
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 {
|
.combination-ability {
|
||||||
padding: 0.8rem 0;
|
padding: 0.8rem 0;
|
||||||
background: rgb(247, 248, 250);
|
background: rgb(247, 248, 250);
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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 = ''
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue