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

合并版本

This commit is contained in:
wuhongjian 2022-07-04 11:57:44 +08:00
parent d99b983961 7303904f68
commit f8588795c4
146 changed files with 31685 additions and 4273 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20801
back/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
back/package.json
View File

@ -22,6 +22,7 @@
"carddragger": "^0.3.6", "carddragger": "^0.3.6",
"clipboard": "^2.0.6", "clipboard": "^2.0.6",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"crypto-js": "^4.1.1",
"echarts": "^4.7.0", "echarts": "^4.7.0",
"element-ui": "^2.13.2", "element-ui": "^2.13.2",
"file-saver": "^2.0.5", "file-saver": "^2.0.5",

9
back/public/index.html
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-04-11 10:11:40 * @Date: 2022-04-11 10:11:40
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-23 18:30:45 * @LastEditTime: 2022-06-29 19:38:17
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!DOCTYPE html> <!DOCTYPE html>
@ -42,8 +42,9 @@
<% if (process.env.VUE_APP_NODE_ENV === 'dev') { %> <% if (process.env.VUE_APP_NODE_ENV === 'dev') { %>
<script> <script>
// 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://15.2.21.238:8888/renren-admin'; window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
// window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://15.2.23.141:8000/renren-admin';
// WebSocket地址 // WebSocket地址
window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket'; window.SITE_CONFIG['socketURL'] ='ws://localhost:8080/renren-admin/websocket';

BIN
back/src/assets/img/CapabilityOperationMonitoring/API-allNum.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/API-badNum.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/bg-blue.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/bg-yellow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/calendar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/number-bule-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/number-bule.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/number-grenn-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/number-grenn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/number-red-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/number-red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/上一页.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1013 B

BIN
back/src/assets/img/CapabilityOperationMonitoring/下一页.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1015 B

BIN
back/src/assets/img/CapabilityOperationMonitoring/下拉.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/更多.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/消息.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/消息中心.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
back/src/assets/img/CapabilityOperationMonitoring/账号下拉.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1016 B

BIN
back/src/assets/img/CapabilityOperationMonitoring/选择.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1020 B

BIN
back/src/assets/img/workBench/NO1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.8 KiB

BIN
back/src/assets/img/workBench/NO2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
back/src/assets/img/workBench/NO3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
back/src/assets/img/workBench/hasToDo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
back/src/assets/img/workBench/one.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
back/src/assets/img/workBench/publish.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
back/src/assets/img/workBench/todo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
back/src/assets/img/workBench/two.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
back/src/assets/img/一级图标.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
back/src/assets/img/排行榜背景图.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

BIN
back/src/assets/img/搜索.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

34
back/src/mixins/view-module.js
View File

@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
import qs from 'qs' import qs from 'qs'
import { deepClone } from '@/utils/form-generator/index' import { deepClone } from '@/utils/form-generator/index'
export default { export default {
data() { data () {
/* eslint-disable */ /* eslint-disable */
return { return {
// 设置属性 // 设置属性
@ -38,19 +38,19 @@ export default {
} }
/* eslint-enable */ /* eslint-enable */
}, },
created() { created () {
if (this.mixinViewModuleOptions.createdIsNeed) { if (this.mixinViewModuleOptions.createdIsNeed) {
this.query() this.query()
} }
}, },
activated() { activated () {
if (this.mixinViewModuleOptions.activatedIsNeed) { if (this.mixinViewModuleOptions.activatedIsNeed) {
this.query() this.query()
} }
}, },
methods: { methods: {
// 获取数据列表 // 获取数据列表
query() { query () {
this.dataListLoading = true this.dataListLoading = true
this.$http.get( this.$http.get(
this.mixinViewModuleOptions.getDataListURL + '?' + qs.stringify({ this.mixinViewModuleOptions.getDataListURL + '?' + qs.stringify({
@ -102,7 +102,7 @@ export default {
return item return item
} }
}) })
this.total = this.mixinViewModuleOptions.getDataListIsPage ? this.dataList.length : 0 this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
}) })
} else { } else {
this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0 this.total = this.mixinViewModuleOptions.getDataListIsPage ? res.data.total : 0
@ -118,11 +118,11 @@ export default {
}) })
}, },
// 多选 // 多选
dataListSelectionChangeHandle(val) { dataListSelectionChangeHandle (val) {
this.dataListSelections = val this.dataListSelections = val
}, },
// 排序 // 排序
dataListSortChangeHandle(data) { dataListSortChangeHandle (data) {
if (!data.order || !data.prop) { if (!data.order || !data.prop) {
this.order = '' this.order = ''
this.orderField = '' this.orderField = ''
@ -133,13 +133,13 @@ export default {
this.query() this.query()
}, },
// 分页, 每页条数 // 分页, 每页条数
pageSizeChangeHandle(val) { pageSizeChangeHandle (val) {
this.page = 1 this.page = 1
this.limit = val this.limit = val
this.query() this.query()
}, },
// 分页, 当前页 // 分页, 当前页
pageCurrentChangeHandle(val) { pageCurrentChangeHandle (val) {
this.page = val this.page = val
this.query() this.query()
}, },
@ -148,7 +148,7 @@ export default {
this.query() this.query()
}, },
// 新增 // 新增
addOrUpdateHandle(id) { addOrUpdateHandle (id) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true
this.disabled = false this.disabled = false
this.$nextTick(() => { this.$nextTick(() => {
@ -159,7 +159,7 @@ export default {
}, },
// 组件服务新增 // 组件服务新增
addOrUpdateHandleAI(id) { addOrUpdateHandleAI (id) {
// const infoList = [] // const infoList = []
let showList = [] let showList = []
this.$http.get('category/getCategoryTree').then(({ data: res }) => { this.$http.get('category/getCategoryTree').then(({ data: res }) => {
@ -217,7 +217,7 @@ export default {
}, 100) }, 100)
}, },
// 应用资源新增 // 应用资源新增
addOrUpdateHandleServe(id) { addOrUpdateHandleServe (id) {
// const infoList = [] // const infoList = []
let showList = [] let showList = []
this.$http.get('category/getCategoryTree').then(({ data: res }) => { this.$http.get('category/getCategoryTree').then(({ data: res }) => {
@ -275,7 +275,7 @@ export default {
}, 100) }, 100)
}, },
// 修改 // 修改
UpdateHandle(val) { UpdateHandle (val) {
this.addOrUpdateVisible = true this.addOrUpdateVisible = true
this.disabled = false this.disabled = false
const cloneVal = deepClone(val) const cloneVal = deepClone(val)
@ -300,7 +300,7 @@ export default {
}) })
}, },
// 关闭当前窗口 // 关闭当前窗口
closeCurrentTab(data) { closeCurrentTab (data) {
var tabName = this.$store.state.contentTabsActiveName var tabName = this.$store.state.contentTabsActiveName
this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName) this.$store.state.contentTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
if (this.$store.state.contentTabs.length <= 0) { if (this.$store.state.contentTabs.length <= 0) {
@ -312,7 +312,7 @@ export default {
} }
}, },
// 删除 // 删除
deleteHandle(id) { deleteHandle (id) {
if (this.mixinViewModuleOptions.deleteIsBatch && !id && this.dataListSelections.length <= 0) { if (this.mixinViewModuleOptions.deleteIsBatch && !id && this.dataListSelections.length <= 0) {
return this.$message({ return this.$message({
message: this.$t('prompt.deleteBatch'), message: this.$t('prompt.deleteBatch'),
@ -346,7 +346,7 @@ export default {
}).catch(() => { }) }).catch(() => { })
}, },
deleteHandle2(id) { deleteHandle2 (id) {
console.log('删除========================》', id, this.dataListSelections) console.log('删除========================》', id, this.dataListSelections)
const ids = [] const ids = []
if (id) { if (id) {
@ -364,7 +364,7 @@ export default {
}) })
}, },
// 导出 // 导出
exportHandle() { exportHandle () {
var params = qs.stringify({ var params = qs.stringify({
token: Cookies.get('ucsToken'), token: Cookies.get('ucsToken'),
...this.dataForm ...this.dataForm

450
back/src/views/modules/ability/IntegratedServices.vue Normal file
View File

@ -0,0 +1,450 @@
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-ability__bsabilityai">
<el-form :inline="true" :model="dataForm">
<el-form-item>
<el-input
v-model="dataForm.name"
placeholder="名称"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataList2(dataForm.name)">{{
$t("query")
}}</el-button>
</el-form-item>
<el-form-item>
<el-button type="info" @click="exportHandle()">{{
$t("export")
}}</el-button>
</el-form-item>
<el-form-item>
<el-button
v-if="$hasPermission('ability:bsabilityai:save')"
type="primary"
@click="addOrUpdateHandleServe()"
>挂接</el-button
>
</el-form-item>
<el-form-item>
<el-button
v-if="$hasPermission('ability:bsabilityai:delete')"
type="danger"
@click="deleteHandle2()"
>{{ $t("deleteBatch") }}</el-button
>
</el-form-item>
<el-form-item>
<el-button @click="reset">重置</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
style="width: 100%"
:height="qp ? '810px' : '650px'"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column
prop="name"
label="应用名称"
header-align="center"
align="center"
></el-table-column>
<el-table-column
v-for="(item, index) in dataList[0].infoList"
:key="index"
:label="item.attrType"
header-align="center"
align="center"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
{{ findValue(scope.row.infoList, item.attrType) }}
</template>
</el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="94"
right="0"
>
<template slot-scope="scope">
<el-button
v-if="$hasPermission('ability:bsabilityai:update')"
type="text"
size="small"
@click="UpdateHandle(scope.row)"
>{{ $t("update") }}</el-button
>
<el-button
v-if="$hasPermission('ability:bsabilityai:delete')"
type="text"
size="small"
@click="deleteHandle2(scope.row.id)"
>{{ $t("delete") }}</el-button
>
<el-button type="text" size="small" @click="showDetail(scope.row)"
>展示</el-button
>
<el-button type="text" size="small" @click="showDocument(scope.row)"
>开发文档</el-button
>
<el-button
type="text"
size="small"
@click="applyAndAssembly(scope.row)"
>应用与组件</el-button
>
<el-button
type="text"
size="small"
@click="applyAndDataResource(scope.row)"
>应用与数据资源</el-button
>
<el-button
type="text"
size="small"
@click="applyAndProject(scope.row)"
>应用与项目</el-button
>
<el-button
type="text"
size="small"
@click="applyAndInfrastructure(scope.row)"
>应用与基础设施</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="Number(total)"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
<!-- 弹窗, 新增 / 修改 -->
<add-or-update
:disabled="disabled"
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getDataList"
></add-or-update>
<relate-application
v-if="relateApplicationResourceVisible"
ref="relateApplication"
:relateInfo="relationData"
:nameArray="topNameArray"
@isShowRelatePopup="handleIsShowRelatePopupApply"
></relate-application>
</div>
</el-card>
</template>
<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./bsabilityservice-add-or-update";
import dictionaries from "@/utils/dictionaries";
import RelateApplication from "./bsabilityai-relate-application.vue";
import qs from "qs";
import { type } from "os";
export default {
mixins: [mixinViewModule],
data() {
return {
mixinViewModuleOptions: {
getDataListURL: "/resource/page",
getDataListIsPage: true,
exportURL: "/ability/bsabilityai/export",
deleteURL: "/resource/delete",
deleteIsBatch: true,
},
disabled: false,
sceneArr: dictionaries.sceneArr,
fieldArr: dictionaries.fieldArr,
shareFormArr: dictionaries.shareFormArr,
dataForm: {
name: "",
creator: "",
selectType: 0,
delFlag: 0,
type: "应用资源",
},
qp: false,
relateApplicationResourceVisible: false,
relationData: {}, //打开穿梭框时传递的参数
topNameArray: [], //
};
},
watch: {},
components: {
AddOrUpdate,
RelateApplication,
},
created() {
this.dataForm.name = "";
this.dataForm.type = "应用资源";
},
mounted() {
window.addEventListener("resize", this.a);
this.fullScreen();
},
methods: {
reset() {
this.$http
.get(
this.mixinViewModuleOptions.getDataListURL +
"?" +
qs.stringify({
// order: this.order,
// orderField: this.orderField,
// type: '组件服务',
page: 1,
selectType: 0,
limit: 10,
delFlag: 0,
creator: "",
type: "应用资源",
name: "",
})
)
.then(({ data: res }) => {
this.dataForm.name = "";
if (res.code !== 0) {
this.dataList = [];
this.total = 0;
return this.$message.error(res.msg);
}
this.dataList = this.mixinViewModuleOptions.getDataListIsPage
? res.data.list
: res.data;
this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total
: 0;
if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data);
}
this.dataListLoading = false;
})
.catch(() => {
this.dataListLoading = false;
});
},
showDetail(val) {
this.addOrUpdateVisible = true;
this.disabled = false;
this.$nextTick(() => {
this.$refs.addOrUpdate.UpdateState = false;
this.$refs.addOrUpdate.dataFormShowDetails = val;
this.$refs.addOrUpdate.init();
});
this.disabled = true;
},
showDocument(val) {
console.log(val);
window.open(
window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
"_blank"
);
},
findValue(list, type) {
const found = list.find((item) => item.attrType === type);
if (found) {
return found.attrValue;
} else {
return "暂无数据";
}
},
getDataList2(names) {
if (names != null) {
this.$http
.get(
this.mixinViewModuleOptions.getDataListURL +
"?" +
qs.stringify({
// order: this.order,
// orderField: this.orderField,
// type: '组件服务',
pageNum: 1,
pageSize: this.limit,
type: "应用资源",
creator: "",
selectType: 0,
delFlag: 0,
name: names,
})
)
.then(({ data: res }) => {
if (res.code !== 0) {
this.dataList = [];
this.total = 0;
return this.$message.error(res.msg);
}
if (res.data.list.length !== 0) {
this.dataList = res.data.list;
this.total = this.mixinViewModuleOptions.getDataListIsPage
? res.data.total
: 0;
if (this.mixinViewModuleOptions.requestCallback) {
this.mixinViewModuleOptions.requestCallback(res.data);
}
this.dataListLoading = false;
} else {
this.$message.error("未查询到相关信息");
this.reset();
}
})
.catch(() => {
this.dataListLoading = false;
});
} else {
this.$message.error("查询不能输入为空");
}
},
fullScreen() {
if (window.outerHeight === screen.availHeight) {
if (window.outerWidth === screen.availWidth) {
console.log(
"全屏1",
window.outerHeight,
screen.availHeight,
window.outerWidth,
screen.availWidth
);
this.qp = false;
} else {
console.log(
"不是全屏2",
window.outerHeight,
screen.availHeight,
window.outerWidth,
screen.availWidth
);
this.qp = true;
}
} else {
console.log(
"不是全屏3",
window.outerHeight,
screen.availHeight,
window.outerWidth,
screen.availWidth
);
this.qp = true;
}
},
//应用与组件
applyAndAssembly(val) {
console.log("vvvv", val);
//根据id和类型查询已关联的组件，将id,type和查出来的数据传递给组件
let type = "组件服务";
let id = val.id;
this.$http
.get(`/dataResourceRel/queryResourceRelByKeyId`, {
params: {
keyId: id,
type: type,
referenceName: "",
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
console.log("rrrrressssz", res.data);
this.relateApplicationResourceVisible = true;
this.relationData = {
id: id,
linkType: "1",
responseData: res.data,
};
this.topNameArray = ["未关联组件名称", "已关联组件名称"];
console.log(" this.relationData", this.relationData);
//将数据传递给引入的组件
});
},
//应用与数据资源
applyAndDataResource(val) {
console.log("数据资源");
},
//应用与项目
applyAndProject(val) {
let type = "项目";
let id = val.id;
this.$http
.get(`/dataResourceRel/queryResourceRelByKeyId`, {
params: {
keyId: id,
type: type,
referenceName: "",
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
console.log("rrrrressssx", res.data);
this.relateApplicationResourceVisible = true;
this.relationData = {
id: id,
linkType: "1",
responseData: res.data,
};
this.topNameArray = ["未关联项目名称", "已关联项目名称"];
//将数据传递给引入的组件
});
},
//应用与基础设施
applyAndInfrastructure(val) {
let type = "基础设施";
let id = val.id;
this.$http
.get(`/dataResourceRel/queryResourceRelByKeyId`, {
params: {
keyId: id,
type: type,
referenceName: "",
},
})
.then(({ data: res }) => {
if (res.code !== 0) {
return this.$message.error(res.msg);
}
console.log("rrrrressssj", res.data);
this.relateApplicationResourceVisible = true;
this.relationData = {
id: id,
linkType: "1",
responseData: res.data,
};
this.topNameArray = ["未关联基础设施名称", "已关联基础设施名称"];
//将数据传递给引入的组件
});
},
// 是否展示关联应用弹窗
handleIsShowRelatePopupApply(type) {
this.relateApplicationResourceVisible = type;
},
},
};
</script>
<style lang="scss" scoped>
.el-tooltip__popper {
max-width: 50%;
}
</style>

40
back/src/views/modules/ability/bsdataresources.vue
View File

@ -20,8 +20,8 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;"> <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
<el-table-column prop="orderId" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column> <el-table-column prop="productName" :label="$t('dataresources.resourcesName')" header-align="center" align="center"></el-table-column>
<el-table-column prop="productName" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column> <el-table-column prop="orderId" :label="$t('dataresources.resourcesCode')" header-align="center" align="center"></el-table-column>
<el-table-column prop="payAmount" :label="$t('dataresources.resourcesProvide')" header-align="center" align="center"></el-table-column> <el-table-column prop="payAmount" :label="$t('dataresources.resourcesProvide')" header-align="center" align="center"></el-table-column>
<el-table-column prop="status" :label="$t('dataresources.resourcesAbstract')" header-align="center" align="center"></el-table-column> <el-table-column prop="status" :label="$t('dataresources.resourcesAbstract')" header-align="center" align="center"></el-table-column>
<el-table-column prop="payAt" :label="$t('dataresources.putOnDate')" header-align="center" align="center"></el-table-column> <el-table-column prop="payAt" :label="$t('dataresources.putOnDate')" header-align="center" align="center"></el-table-column>
@ -50,8 +50,8 @@
<script> <script>
import mixinViewModule from '@/mixins/view-module' import mixinViewModule from '@/mixins/view-module'
// import AddOrUpdate from './order-add-or-update' // import AddOrUpdate from './order-add-or-update'
import {addDynamicRoute} from "@/router"; import { addDynamicRoute } from '@/router'
import RelateApplication from "./bsabilityai-relate-application.vue" import RelateApplication from './bsabilityai-relate-application.vue'
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
@ -68,7 +68,7 @@ export default {
status: '', status: '',
userId: '' userId: ''
}, },
// 关联应用弹窗 // 关联应用弹窗
relateApplicationVisible: false, relateApplicationVisible: false,
relateInfo: { relateInfo: {
id: '', id: '',
@ -79,31 +79,31 @@ export default {
}, },
components: { components: {
// AddOrUpdate, // AddOrUpdate,
RelateApplication, RelateApplication
}, },
methods: { methods: {
//重置 // 重置
resetDataList(){ resetDataList () {
this.dataForm=this.noDataForm; this.dataForm = this.noDataForm
this.page=1; // 当前页码 this.page = 1 // 当前页码
this.query(); this.query()
}, },
// 点击关联应用按钮 // 点击关联应用按钮
showRelateApplication(row){ showRelateApplication (row) {
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => { this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
if( res && res.data ) { if (res && res.data) {
this.relateApplicationVisible = true; this.relateApplicationVisible = true
this.relateInfo = { this.relateInfo = {
id: row.id, id: row.id,
responseData: res.data, responseData: res.data,
linkType: '2' linkType: '2'
}; }
} }
}).catch(() => { }) }).catch(() => { })
}, },
// 是否展示关联应用弹窗 // 是否展示关联应用弹窗
handleIsShowRelatePopup(type) { handleIsShowRelatePopup (type) {
this.relateApplicationVisible = type; this.relateApplicationVisible = type
} }
} }
} }

36
back/src/views/modules/ability/bsinfrastructure.vue
View File

@ -46,8 +46,8 @@
<script> <script>
import mixinViewModule from '@/mixins/view-module' import mixinViewModule from '@/mixins/view-module'
// import AddOrUpdate from './order-add-or-update' // import AddOrUpdate from './order-add-or-update'
import {addDynamicRoute} from "@/router"; import { addDynamicRoute } from '@/router'
import RelateApplication from "./bsabilityai-relate-application.vue" import RelateApplication from './bsabilityai-relate-application.vue'
export default { export default {
mixins: [mixinViewModule], mixins: [mixinViewModule],
data () { data () {
@ -62,7 +62,7 @@ export default {
orderId: '', orderId: '',
status: '', status: '',
userId: '', userId: '',
type: "基础设施", type: '基础设施'
}, },
// 关联应用弹窗 // 关联应用弹窗
relateApplicationVisible: false, relateApplicationVisible: false,
@ -75,31 +75,31 @@ export default {
}, },
components: { components: {
// AddOrUpdate, // AddOrUpdate,
RelateApplication, RelateApplication
}, },
methods: { methods: {
//重置 // 重置
resetDataList(){ resetDataList () {
this.dataForm=this.noDataForm; this.dataForm.orderId = ''
this.page=1; // 当前页码 this.page = 1 // 当前页码
this.query(); this.query()
}, },
// 点击关联应用按钮 // 点击关联应用按钮
showRelateApplication(row){ showRelateApplication (row) {
this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => { this.$http.get(`dataResourceRel/queryApplicationRelByResourceId?referenceId=${row.id}`).then(({ data: res }) => {
if( res && res.data ) { if (res && res.data) {
this.relateApplicationVisible = true; this.relateApplicationVisible = true
this.relateInfo = { this.relateInfo = {
id: row.id, id: row.id,
responseData: res.data, responseData: res.data,
linkType: '2' linkType: '2'
}; }
} }
}).catch(() => { }) }).catch(() => { })
}, },
// 是否展示关联应用弹窗 // 是否展示关联应用弹窗
handleIsShowRelatePopup(type) { handleIsShowRelatePopup (type) {
this.relateApplicationVisible = type; this.relateApplicationVisible = type
} }
} }

668
back/src/views/modules/abilityStatistics/applicationResources.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<div class='container'> <div class='container'>
<span class='title-style'>应用资源</span> <div>
<span class='page-introduction'>发布情况统计</span> <span class='title-style'>应用资源</span>
<span class='page-introduction'>发布情况统计</span>
<button class='back-btn' @click="backBtn">返回</button>
</div>
<div class='container-body'> <div class='container-body'>
<div class='container-body1'> <div class='container-body1'>
<span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span> <span style='font-size:18px;color;#000000;'>应用贡献组件被调用次数分布</span>
@ -57,31 +61,215 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
props:{
tableId:{
type:String,
default:''
},
fatherId:{
type:Number,
default:null,
}
},
data(){ data(){
return{ return{
data2:[],
data3:[],
data4:[],
data5:[],
data6:[],
data7:[],
data8:[],
data9:[],
data10:[],
data11:[],
colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',], colorList:['linear-gradient(to right, rgba(82, 106, 255,0.8),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
widthList:['90px','80px','70px','60px','50px'], widthList:['90px','80px','70px','60px','50px'],
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'], numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},], usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},],
} }
},
created(){
this.getDistributedList()
this.getUsedList()
this.getTopList()
this.getApplicationDistribution()
this.getFieldDistribution()
this.getStatuesDistribution()
}, },
mounted(){ mounted(){
this.myEcharts1() this.myEcharts1()
this.myEcharts2() // this.myEcharts2()
this.myEcharts3() // this.myEcharts3()
this.myEcharts4() // this.myEcharts4()
this.myEcharts6() // this.myEcharts6()
this.myEcharts7() // this.myEcharts7()
this.myEcharts8() // this.myEcharts8()
this.myEcharts9() // this.myEcharts9()
}, },
methods:{ methods:{
// 应用贡献组件数量分布（算法、图层、开发、业务）
getDistributedList () {
this.$http.get('/census/center/v3/assemblerUseProjectInfo/' ,{
params : {
keyId:'1522550195034857476'
// this.tableId
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.num,
name:item.attr_value
}
this.data2.push(single)
this.data5.push(single.value)
this.data6.push(single.name)
this.myEcharts2()
this.myEcharts4()
})
})
},
// 应用贡献组件分别被多少应用使用
getUsedList () {
this.$http.get('/census/center/v3/applicationUsedCapabilityNum/' ,{
params : {
id:
// '1522550195034857476'
this.tableId
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.useNum,
name:item.name
}
this.data3.push(single.name)
this.data4.push(single.value)
console.log("2222", this.data3);
this.myEcharts3()
})
})
},
//评分分布12345
getTopList () {
this.$http.get('/census/center/v3/assemblerScoreInfo/' ,{
params : {
id:this.tableId,
// '1067246875800000066',
resourceType:'应用资源'
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.scoreNum,
name:item.score
}
this.data8.push(single)
this.myEcharts6()
})
})
},
//发布端应用分布情况
getApplicationDistribution() {
this.$http.get('/census/center/v3/applicationReleaseCapabilitySet/' ,{
params : {
id:
// '1067246875800000066',
this.tableId,
resourceType:'应用资源'
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.num,
name:item.publisher
}
this.data7.push(single)
this.myEcharts7()
})
})
},
//应用领域分布情况
getFieldDistribution() {
this.$http.get('/census/center/v3/applicationAreaCapabilityList/' ,{
params : {
id:
// '1067246875800000066',
this.tableId,
resourceType:'应用资源'
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.total,
name:item.type
}
this.data9.push(single)
this.myEcharts8()
})
})
},
//应用状态分布情况
getStatuesDistribution() {
this.$http.get('/census/center/v3/applicationStateCapabilitySet/' ,{
params : {
id:
// '1067246875800000066',
this.tableId,
resourceType:'应用资源'
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.num,
name:item.state
}
this.data10.push(single)
this.myEcharts9()
})
})
},
myEcharts1(){ myEcharts1(){
var chartDom = document.getElementById('main1'); var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
trigger: 'axis',
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,0.20)',
borderWidth: 1,
textStyle: { // 文字提示样式
color: '#fff',
fontSize: '12'
},
axisPointer: { // 坐标轴虚线
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
},
grid: { grid: {
bottom: '23%', bottom: '23%',
}, },
@ -98,7 +286,7 @@ export default {
}, },
axisLine:{ axisLine:{
lineStyle:{ lineStyle:{
color:"#ebebeb" color:"#f5f5f5"
} }
}, },
axisLabel: {//y轴文字的配置 axisLabel: {//y轴文字的配置
@ -133,11 +321,25 @@ export default {
}, },
}, },
series: [ series: [
{
data: [5, 5, 5, 5, 5, 5],
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
])
},
},
{ {
data: [60, 90, 50, 80], data: [60, 90, 50, 80],
type: 'bar', type: 'bar',
barWidth: 14, barWidth: 14,
stack: '1',
itemStyle: { itemStyle: {
barBorderRadius: [20,20,20,20], barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -217,12 +419,7 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data:this.data2
{ value: 1048, name: '算法' },
{ value: 735, name: '图层' },
{ value: 580, name: '开发' },
{ value: 484, name: '业务' },
]
} }
] ]
}; };
@ -234,12 +431,29 @@ export default {
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
tooltip: { // 鼠标悬浮提示框显示 X和Y 轴数据
trigger: 'axis',
backgroundColor: 'rgba(32, 33, 36,.7)',
borderColor: 'rgba(32, 33, 36,0.20)',
borderWidth: 1,
textStyle: { // 文字提示样式
color: '#fff',
fontSize: '12'
},
axisPointer: { // 坐标轴虚线
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
},
},
grid: { grid: {
bottom: '23%', bottom: '23%',
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['算法', '图层', '开发', '业务'], data:this.data3,
fontSize:12,
color:['#f5f5f5'], color:['#f5f5f5'],
axisTick:{ axisTick:{
show:false,//不显示坐标轴刻度线 show:false,//不显示坐标轴刻度线
@ -254,8 +468,17 @@ export default {
} }
}, },
axisLabel: {//x轴文字的配置 axisLabel: {//x轴文字的配置
formatter: val => {
let txt = val
if (val.length > 3) {
txt = val.substr(0, 3) + '...'
}
return txt
},
textStyle: { textStyle: {
color: "#999999",//x轴内容文字颜色 color: "#999999",//x轴内容文字颜色
}, },
}, },
}, },
@ -285,11 +508,25 @@ export default {
}, },
}, },
series: [ series: [
{ {
data: [60, 90, 50, 80], data: [1, 1, 1, 1, 1, 1],
type: 'bar', type: 'bar',
barWidth: 14, barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
])
},
},
{
data: this.data4,
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: { itemStyle: {
barBorderRadius: [20,20,20,20], barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -315,11 +552,11 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['组件名称1', '组件名称2', '组件名称3', '组件名称4', '组件名称5', '组件名称6'], data:this.data6,
color:['#f5f5f5'], color:['#f5f5f5'],
axisTick:{ axisTick: { // 坐标轴 刻度
show:false,//不显示坐标轴刻度线 show: false, // 是否显示
}, },
splitLine: { splitLine: {
show: true, show: true,
color:['#f5f5f5'] color:['#f5f5f5']
@ -362,10 +599,24 @@ export default {
}, },
series: [ series: [
{ {
data: [60, 90, 50, 80, 50, 80], data: [5, 5, 5, 5, 5, 5],
type: 'bar', type: 'bar',
barWidth: 14, barWidth: 14,
stack: '1',
itemStyle: {
barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(178, 189, 255,0)' },
// { offset: 0.5, color: '#188df0' },
{ offset: 1, color: 'rgba(82, 106, 255,0)' }
])
},
},
{
data:this.data5,
type: 'bar',
barWidth: 14,
stack: '1',
itemStyle: { itemStyle: {
barBorderRadius: [20,20,20,20], barBorderRadius: [20,20,20,20],
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -374,7 +625,7 @@ export default {
{ offset: 1, color: 'rgba(82, 106, 255,0.8)' } { offset: 1, color: 'rgba(82, 106, 255,0.8)' }
]) ])
}, },
} },
] ]
}; };
@ -444,13 +695,7 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data:this.data8
{ value: 1048, name: '1分' },
{ value: 735, name: '2分' },
{ value: 580, name: '3分' },
{ value: 484, name: '4分' },
{ value: 300, name: '5分' }
]
} }
] ]
}; };
@ -522,175 +767,197 @@ export default {
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data:this.data7
{ value: 1048, name: '应用名称1' }, // [
{ value: 735, name: '应用名称2' }, // { value: 1048, name: '应用名称1' },
{ value: 580, name: '应用名称3' }, // { value: 735, name: '应用名称2' },
{ value: 484, name: '应用名称4' }, // { value: 580, name: '应用名称3' },
{ value: 300, name: '应用名称5' } // { value: 484, name: '应用名称4' },
] // { value: 300, name: '应用名称5' }
// ]
} }
] ]
}; };
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
myEcharts8(){ myEcharts8(){
var chartDom = document.getElementById('main8'); var chartDom = document.getElementById('main8');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: '', orient: "vertical", type: 'scroll',
top: '14%', top: '14%',
left: '40%', left: '40%',
width:"auto", width:"auto",
height:"auto", height:"auto",
orient: "vertical", orient: "vertical",
itemGap: 15, itemGap: 15,
itemWidth: 14, itemWidth: 14,
// 使用回调函数 // 使用回调函数
formatter: function(name) { formatter: function(name) {
var data = option.series[0].data; var data = option.series[0].data;
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += data[i].value;
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
} }
var v = tarValue; var v = tarValue;
var p = Math.round(((tarValue / total) * 100)); var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`; return `{a|${name}} {b|${p}%}`;
}, },
itemStyle:{}, itemStyle:{},
textStyle: { textStyle: {
color: "#666666", color: "#666666",
fontSize:12, fontSize:12,
padding:[0,8,0,10] rich: {
}, // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
}, a: {
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'], // 设置文字、数学、英语这一列的样式
series: [ width: 80,
{ color: "#000000",
type: 'pie', fontSize: 12,
radius: ['30%', '45%'], fontWeight: "bolder",
center:['19%', '50%'], },
avoidLabelOverlap: false, b: {
itemStyle: { // 设置10分、20分、30分这一列的样式
borderRadius: 10, width: 35,
borderColor: '#fff', color: "#333",
borderWidth: 2 fontSize: 12,
}, },
label: { },
show: false, padding:[0,8,0,10]
position: 'center' },
}, },
// emphasis: { color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
// label: { series: [
// show: true, {
// fontSize: '40', type: 'pie',
// fontWeight: 'bold' radius: ['30%', '45%'],
// } center:['19%', '50%'],
// }, avoidLabelOverlap: false,
labelLine: { itemStyle: {
show: false borderRadius: 10,
}, borderColor: '#fff',
data: [ borderWidth: 2
{ value: 1048, name: '应用领域1' }, },
{ value: 735, name: '应用领域2' }, label: {
{ value: 580, name: '应用领域3' }, show: false,
{ value: 484, name: '应用领域4' }, position: 'center'
{ value: 300, name: '应用领域5' } },
] // emphasis: {
} // label: {
] // show: true,
}; // fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data:this.data9
// [
// { value: 1048, name: '应用领域1' },
// { value: 735, name: '应用领域2' },
// { value: 580, name: '应用领域3' },
// { value: 484, name: '应用领域4' },
// { value: 300, name: '应用领域5' }
// ]
}
]
};
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
myEcharts9(){ myEcharts9(){
var chartDom = document.getElementById('main9'); var chartDom = document.getElementById('main9');
var myChart = echarts.init(chartDom); var myChart = echarts.init(chartDom);
var option; var option;
option = { option = {
tooltip: { tooltip: {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: '', orient: '',
top: '14%', top: '14%',
left: '47%', left: '47%',
width:"auto", width:"auto",
height:"auto", height:"auto",
orient: "vertical", orient: "vertical",
itemGap: 15, itemGap: 15,
itemWidth: 14, itemWidth: 14,
// 使用回调函数 // 使用回调函数
formatter: function(name) { formatter: function(name) {
var data = option.series[0].data; var data = option.series[0].data;
var total = 0; var total = 0;
var tarValue; var tarValue;
for (var i = 0; i < data.length; i++) { for (var i = 0; i < data.length; i++) {
total += data[i].value; total += data[i].value;
if (data[i].name == name) { if (data[i].name == name) {
tarValue = data[i].value; tarValue = data[i].value;
} }
} }
var v = tarValue; var v = tarValue;
var p = Math.round(((tarValue / total) * 100)); var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`; return `${name} ${p}%`;
}, },
itemStyle:{}, itemStyle:{},
textStyle: { textStyle: {
color: "#666666", color: "#666666",
fontSize:12, fontSize:12,
padding:[0,8,0,10] padding:[0,8,0,10]
}, },
}, },
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'], color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [ series: [
{ {
type: 'pie', type: 'pie',
radius: ['30%', '45%'], radius: ['30%', '45%'],
center:['22%', '50%'], center:['22%', '50%'],
avoidLabelOverlap: false, avoidLabelOverlap: false,
itemStyle: { itemStyle: {
borderRadius: 10, borderRadius: 10,
borderColor: '#fff', borderColor: '#fff',
borderWidth: 2 borderWidth: 2
}, },
label: { label: {
show: false, show: false,
position: 'center' position: 'center'
}, },
// emphasis: { // emphasis: {
// label: { // label: {
// show: true, // show: true,
// fontSize: '40', // fontSize: '40',
// fontWeight: 'bold' // fontWeight: 'bold'
// } // }
// }, // },
labelLine: { labelLine: {
show: false show: false
}, },
data: [ data:this.data10
{ value: 1048, name: '应用状态1' }, // [
{ value: 735, name: '应用状态2' }, // { value: 1048, name: '应用状态1' },
{ value: 580, name: '应用状态3' }, // { value: 735, name: '应用状态2' },
{ value: 484, name: '应用状态4' }, // { value: 580, name: '应用状态3' },
{ value: 300, name: '应用状态5' } // { value: 484, name: '应用状态4' },
] // { value: 300, name: '应用状态5' }
} // ]
] }
}; ]
};
option && myChart.setOption(option); option && myChart.setOption(option);
}, },
backBtn(){
this.$emit('closeApplication')
}
} }
} }
</script> </script>
@ -698,6 +965,8 @@ export default {
<style scoped> <style scoped>
.container{ .container{
padding-top: 15px; padding-top: 15px;
display: flex;
flex-direction: column;
} }
.title-style{ .title-style{
font-size: 24px; font-size: 24px;
@ -708,6 +977,13 @@ export default {
font-size: 18px; font-size: 18px;
color:#666666; color:#666666;
margin-left: 20px; margin-left: 20px;
}
.back-btn{
background: #3e8ef7;
border-color: rgba(101, 165, 249,0);
color: #FFF;
margin-left:1030px;
padding-bottom: 3px;
} }
.container-body{ .container-body{
width:1300px; width:1300px;

614
back/src/views/modules/abilityStatistics/componentServices.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<div class='container'> <div class='container'>
<span class='title-style'>组件服务</span> <div>
<span class='page-introduction'>发布情况统计</span> <span class='title-style'>组件服务</span>
<span class='page-introduction'>发布情况统计</span>
<button class='back-btn' @click="backBtn">返回</button>
</div>
<div class='container-body'> <div class='container-body'>
<div class='container-body1'> <div class='container-body1'>
<span style='font-size:18px;color;#000000;'>评分发布情况</span> <span style='font-size:18px;color;#000000;'>评分发布情况</span>
@ -26,7 +30,7 @@
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span> <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
</div> </div>
<span class='num-style'>{{item.name}}</span> <span class='num-style'>{{item.name}}</span>
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span> <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -41,7 +45,7 @@
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span> <span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
</div> </div>
<span class='num-style'>{{item.name}}</span> <span class='num-style'>{{item.name}}</span>
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.count}}</span> <span class='count-style' :style="{color:numColorList[index%5]}">{{item.resourceCarNum}}</span>
</div> </div>
</div> </div>
</div> </div>
@ -57,258 +61,383 @@
import * as echarts from 'echarts'; import * as echarts from 'echarts';
export default { export default {
props:{
tableId:{
type:String,
default:''
},
fatherId:{
type:Number,
default:null,
}
},
data(){ data(){
return{ return{
data1:[],
data2: [
// { value: 1048,name: '算法' },
// { value: 735, name: '图层' },
// { nums: 580, attr_value: '开发' },
// { nums: 484, attr_value: '业务' },
],
data3: [
// { value: 1048,name: '算法' },
],
colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',], colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
widthList:['90px','80px','70px','60px','50px'], widthList:['90px','80px','70px','60px','50px'],
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'], numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
usedList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},], usedList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},],
applicationList:[{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称一',count:111},{name:'组件名称四',count:111},{name:'组件名称五',count:111},] applicationList:[{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称一',resourceCarNum:111},{name:'组件名称四',resourceCarNum:111},{name:'组件名称五',resourceCarNum:111},]
} }
}, },
created(){
if(this.fatherId===1){
this.getBeCalled()
this.getBeApplied()
this.getAlgorithm()
this.getDistributed()
this.getScoreList()
}else{
}
},
mounted(){ mounted(){
this.myEcharts1()
this.myEcharts2()
this.myEcharts3()
}, },
methods:{ methods:{
myEcharts1(){ // 评分发布情况
var chartDom = document.getElementById('main1'); getScoreList () {
var myChart = echarts.init(chartDom); this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
var option; params : {
option = { id:this.tableId,
tooltip: { resourceType:"应用资源"
trigger: 'item' // pageNo: pageNo || 1,
}, // pageSize: 20
legend: { }
orient: '', }).then(res => {
top: '14%', let arry=[]
left: '55%', arry=res.data.data
width:"auto", arry.forEach((item)=>{
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`;
},
itemStyle:{},
textStyle: {
color: "#666666",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: [
{ value: 1048, name: '1分' },
{ value: 735, name: '2分' },
{ value: 580, name: '3分' },
{ value: 484, name: '4分' },
{ value: 300, name: '5分' }
]
}
]
};
option && myChart.setOption(option); const single={
}, value:item.scoreNum,
myEcharts2(){ name:item.score
var chartDom = document.getElementById('main2'); }
var myChart = echarts.init(chartDom); // const newList=[]
var option; this.data1.push(single)
option = { // this.data2=newList
tooltip: { this.myEcharts1()
trigger: 'item' })
}, })
legend: {
orient: '',
top: '22%',
left: '50%',
width:"auto",
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`;
},
itemStyle:{},
textStyle: {
color: "#666666",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: [
{ value: 1048, name: '算法' },
{ value: 735, name: '图层' },
{ value: 580, name: '开发' },
{ value: 484, name: '业务' },
]
}
]
};
option && myChart.setOption(option);
}, },
myEcharts3(){ // 算法图层开发业务
var chartDom = document.getElementById('main3'); getAlgorithm () {
var myChart = echarts.init(chartDom); this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
var option; params : {
option = { id:this.tableId,
tooltip: { resourceType:"组件服务"
trigger: 'item' // pageNo: pageNo || 1,
}, // pageSize: 20
legend: { }
orient: '', }).then(res => {
top: '22%', let arry=[]
left: '50%', arry=res.data.data
width:"auto", arry.forEach((item)=>{
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`;
},
itemStyle:{},
textStyle: {
color: "#666666",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: [
{ value: 1048, name: '应用领域' },
{ value: 735, name: '应用领域2' },
{ value: 580, name: '应用领域3' },
{ value: 484, name: '应用领域4' },
]
}
]
};
option && myChart.setOption(option); const single={
} value:item.nums,
name:item.attr_value
}
// const newList=[]
this.data2.push(single)
// this.data2=newList
this.myEcharts2()
})
})
},
// 应用领域分布
getDistributed () {
this.$http.get('/census/center/v3/applicationAreaCapabilityList' ,{
params : {
id:this.tableId,
resourceType:"应用资源"
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.total,
name:item.type
}
const newList=[]
this.data3.push(single)
// this.data2=newList
this.myEcharts3()
})
})
},
// 被调用组件及数量
getBeCalled () {
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
params : {
id:this.tableId,
resourceType:"应用资源"
// pageNo: pageNo || 1,
// pageSize: 20
}
}).then(res => {
this.applicationList =res.data.data
})
},
// 被申请组件及数量
getBeApplied () {
this.$http.get('/census/center/v3/assemblerCaredTopInfo' ,{
params : {
id:this.tableId,
resourceType:"应用资源"
// pageNo: pageNo || 1,
// pageSize: 20
}
}).then(res => {
this.applicationList =res.data.data
})
},
myEcharts1(){
var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: '',
top: '14%',
left: '55%',
width:"auto",
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((v / total) * 100));
return `${name} ${p}%`;
},
itemStyle:{},
textStyle: {
color: "#666666",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: this.data1
}
]
};
option && myChart.setOption(option);
},
myEcharts2(){
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: '',
top: '22%',
left: '50%',
width:"auto",
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`;
},
itemStyle:{},
textStyle: {
color: "#666666",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: this.data2
}
]
};
option && myChart.setOption(option);
},
myEcharts3(){
var chartDom = document.getElementById('main3');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: "vertical", type: 'scroll',
top: '22%',
left: '50%',
width:"auto",
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `{a|${name}} {b|${p}%}`;
},
itemStyle:{},
textStyle: {
rich: {
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
a: {
// 设置文字、数学、英语这一列的样式
width: 100,
color: "#000000",
fontSize: 12,
fontWeight: "bolder",
},
b: {
// 设置10分、20分、30分这一列的样式
width: 35,
color: "#333",
fontSize: 12,
},
},
color: "#666666",
backgroundColor: "transparent",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data:this.data3
}
]
};
option && myChart.setOption(option);
},
backBtn(){
this.$emit('closeChild')
}
} }
} }
</script> </script>
<style scoped> <style scoped>
.container{ .container{
padding-top: 15px; padding-top: 15px;
display: flex;
flex-direction: column;
} }
.title-style{ .title-style{
font-size: 24px; font-size: 24px;
@ -320,6 +449,13 @@ export default {
color:#666666; color:#666666;
margin-left: 20px; margin-left: 20px;
} }
.back-btn{
background: #3e8ef7;
border-color: rgba(101, 165, 249,0);
color: #FFF;
margin-left:1030px;
padding-bottom: 3px;
}
.container-body{ .container-body{
width:1300px; width:1300px;
margin-top:30px; margin-top:30px;
@ -358,6 +494,9 @@ export default {
padding-left: 20px; padding-left: 20px;
margin-top: 20px; margin-top: 20px;
margin-right: 20px; margin-right: 20px;
background-image:url("../../../assets/img/排行榜背景图.png");
background-repeat:no-repeat;
background-size: 100% 100%;
} }
.container-body5{ .container-body5{
width:640px; width:640px;
@ -366,6 +505,9 @@ export default {
padding-top:20px; padding-top:20px;
padding-left: 20px; padding-left: 20px;
margin-top: 20px; margin-top: 20px;
background-image:url("../../../assets/img/排行榜背景图.png");
background-repeat:no-repeat;
background-size: 100% 100%;
} }
.footer{ .footer{
display: flex; display: flex;

557
back/src/views/modules/abilityStatistics/componentUsed.vue Normal file
View File

@ -0,0 +1,557 @@
<template>
<div class='container'>
<div>
<span class='title-style'>组件服务</span>
<span class='page-introduction'>使用情况统计</span>
<button class='back-btn' @click="backBtn">返回</button>
</div>
<div class='container-body'>
<!-- <div class='container-body1'>
<span style='font-size:18px;color;#000000;'>评分发布情况</span>
<div id="main1" style="width: 400px;height:200px;"></div>
</div> -->
<div class='container-body2'>
<span style='font-size:18px;color;#000000;'>使用组件数量分布</span>
<div id="main2" style="width: 400px;height:200px;"></div>
</div>
<div class='container-body3'>
<span style='font-size:18px;color;#000000;'>使用组件应用领域分布情况</span>
<div id="main8" style="width: 400px;height:200px;"></div>
</div>
<div class='container-body4'>
<div style='margin-bottom:30px'>
<span style='font-size:18px;color;#000000;'>Top5使用组件</span>
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
</div>
<div v-for="(item,index) in usedList" :key='index' >
<div style='display:flex'>
<div class='ranking-img' :style="{background:colorList[index%5],width: widthList[index%5]}">
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
</div>
<span class='num-style'>{{item.name}}</span>
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.useNum}}</span>
</div>
</div>
</div>
<div class='container-body5'>
<div style='margin-bottom:30px'>
<span style='font-size:18px;color;#000000;'>使用组件评分Top5</span>
<img src="@/assets/img/TOP5.png" style='margin-left:10px'>
</div>
<div v-for="(item,index) in applicationList" :key='index' >
<div style='display:flex'>
<div class='ranking-img' :style="{background:colorList[index%5],width: widthList[index%5]}">
<span style='font-weight:bold' :style="{color:numColorList[index%5]}">{{index+1}}</span>
</div>
<span class='num-style'>{{item.name}}</span>
<span class='count-style' :style="{color:numColorList[index%5]}">{{item.score}}</span>
</div>
</div>
</div>
</div>
<div class='footer'>
<div class='footer-left' ></div>
<span style='color:#b7c2d1;font-size:16px'>到底啦</span>
<div class='footer-right'></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
props:{
tableId:{
type:String,
default:''
},
fatherId:{
type:Number,
default:null,
}
},
data(){
return{
data1:[],
data2: [
// { value: 1048,name: '算法' },
// { value: 735, name: '图层' },
// { nums: 580, attr_value: '开发' },
// { nums: 484, attr_value: '业务' },
],
data3: [
// { value: 1048,name: '算法' },
],
colorList:['linear-gradient(to right, rgba(251, 59, 5,0.6),transparent)', 'linear-gradient(to right,rgba(251, 123, 5),transparent)','linear-gradient(to right,rgba(250, 179, 2,.6),transparent)','linear-gradient(to right,rgba(82, 106, 255,.6),transparent','linear-gradient(to right,rgba(82, 106, 255,.6),transparent)',],
widthList:['90px','80px','70px','60px','50px'],
numColorList:['#fc5656','#ff8a00','#f9af0a','#808fff','#808fff'],
usedList:[{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称一',useNum:111},{name:'组件名称四',useNum:111},{name:'组件名称五',useNum:111},],
applicationList:[{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称一',score:111},{name:'组件名称四',score:111},{name:'组件名称五',score:111},]
}
},
created(){
if(this.fatherId===1){
this.getBeCalled()
this.getBeApplied()
this.getAlgorithm()
this.getDistributed()
this.getScoreList()
}else{
}
},
mounted(){
},
methods:{
// 评分发布情况
getScoreList () {
this.$http.get('/census/center/v3/assemblerScoreInfo' ,{
params : {
id:this.tableId,
resourceType:"应用资源"
// pageNo: pageNo || 1,
// pageSize: 20
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.scoreNum,
name:item.score
}
// const newList=[]
this.data1.push(single)
// this.data2=newList
this.myEcharts1()
})
})
},
// 算法图层开发业务
getAlgorithm () {
this.$http.get('/census/center/v3/assemblerUsedInfo' ,{
params : {
id:this.tableId,
resourceType:"组件服务"
// pageNo: pageNo || 1,
// pageSize: 20
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.nums,
name:item.attr_value
}
// const newList=[]
this.data2.push(single)
// this.data2=newList
this.myEcharts2()
})
})
},
// 应用领域分布
getDistributed () {
this.$http.get('/census/center/v3/applicationUsedAreaCapabilityList' ,{
params : {
id:this.tableId,
resourceType:"组件服务"
}
}).then(res => {
let arry=[]
arry=res.data.data
arry.forEach((item)=>{
const single={
value:item.total,
name:item.type
}
const newList=[]
this.data3.push(single)
// this.data2=newList
this.myEcharts3()
})
})
},
// top5使用组件
getBeCalled () {
this.$http.get('/census/center/v3/assemblerUseTopInfo' ,{
params : {
id:this.tableId,
resourceType:"组件服务"
// pageNo: pageNo || 1,
// pageSize: 20
}
}).then(res => {
this.usedList =res.data.data
})
},
// 使用组件评分5
getBeApplied () {
this.$http.get('/census/center/v3/assemblerUseScoreTopInfo' ,{
params : {
id:this.tableId,
resourceType:"应用资源"
// pageNo: pageNo || 1,
// pageSize: 20
}
}).then(res => {
this.applicationList =res.data.data
})
},
myEcharts1(){
var chartDom = document.getElementById('main1');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: '',
top: '14%',
left: '55%',
width:"auto",
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((v / total) * 100));
return `${name} ${p}%`;
},
itemStyle:{},
textStyle: {
color: "#666666",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: this.data1
}
]
};
option && myChart.setOption(option);
},
myEcharts2(){
var chartDom = document.getElementById('main2');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: '',
top: '22%',
left: '50%',
width:"auto",
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`;
},
itemStyle:{},
textStyle: {
color: "#666666",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: this.data2
}
]
};
option && myChart.setOption(option);
},
myEcharts3(){
var chartDom = document.getElementById('main3');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: "vertical", type: 'scroll',
top: '22%',
left: '50%',
width:"auto",
height:"auto",
orient: "vertical",
itemGap: 15,
itemWidth: 14,
// 使用回调函数
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `{a|${name}} {b|${p}%}`;
},
itemStyle:{},
textStyle: {
rich: {
// 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
a: {
// 设置文字、数学、英语这一列的样式
width: 100,
color: "#000000",
fontSize: 12,
fontWeight: "bolder",
},
b: {
// 设置10分、20分、30分这一列的样式
width: 35,
color: "#333",
fontSize: 12,
},
},
color: "#666666",
backgroundColor: "transparent",
padding:[0,8,0,18]
},
},
color: ['#0087ff', '#51cb8d', '#fcc549', '#ef6567', '#ff8a00', '#fc5656'],
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '60%'],
center:['22%', '50%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data:this.data3
}
]
};
option && myChart.setOption(option);
},
backBtn(){
this.$emit('closeChild')
}
}
}
</script>
<style scoped>
.container{
padding-top: 15px;
display: flex;
flex-direction: column;
}
.title-style{
font-size: 24px;
color:#000000;
font-weight: bold;
}
.page-introduction{
font-size: 18px;
color:#666666;
margin-left: 20px;
}
.back-btn{
background: #3e8ef7;
border-color: rgba(101, 165, 249,0);
color: #FFF;
margin-left:1030px;
padding-bottom: 3px;
}
.container-body{
width:1300px;
margin-top:30px;
display: flex;
flex-wrap:wrap
}
.container-body1{
width:420px;
height:250px;
background-color: #ffffff;
margin-right:20px;
padding-top:20px;
padding-left: 20px;
}
.container-body2{
width:640px;
height:250px;
background-color: #ffffff;
margin-right:20px;
padding-top:20px;
padding-left: 20px;
}
.container-body3{
width:640px;
height:250px;
background-color: #ffffff;
padding-top:20px;
padding-left: 20px;
}
.container-body4{
width:640px;
height:300px;
background-color: #ffffff;
padding-top:20px;
padding-left: 20px;
margin-top: 20px;
margin-right: 20px;
background-image:url("../../../assets/img/排行榜背景图.png");
background-repeat:no-repeat;
background-size: 100% 100%;
}
.container-body5{
width:640px;
height:300px;
background-color: #ffffff;
padding-top:20px;
padding-left: 20px;
margin-top: 20px;
background-image:url("../../../assets/img/排行榜背景图.png");
background-repeat:no-repeat;
background-size: 100% 100%;
}
.footer{
display: flex;
margin-top:50px;
margin-left:365px;
}
.footer-left{
width:250px;
height:1px;
background-color:#e0eaf8;
margin-right:10px;
margin-top:8px
}
.footer-right{
width:250px;
height:1px;
background-color:#e0eaf8;
margin-left:10px;
margin-top:8px
}
.ranking-img{
width:60px;
height:26px;
display: flex;
line-height: 26px;
margin-bottom:15px;
margin-right:10px;
padding-left: 15px;
}
.num-style{
position:absolute;
display: flex;
margin-left:90px;
margin-top:5px;
color:#333333;
font-size: 16px;
}
.count-style{
position:absolute;
display: flex;
margin-left:400px;
margin-top:5px;
color:#333333;
font-size: 18px;
font-weight: bold;
}
</style>

417
back/src/views/modules/abilityStatistics/index.vue
View File

@ -1,5 +1,27 @@
<template> <template>
<div> <div >
<div class='container'>
<!-- <div class='container-left' v-if='homeIsShow'>
<div class='left-search'>
<div>
<input type="text" class='input-style' placeholder="请输入部门关键词" v-model="inputTxt">
<div class='input-search' @click='searchBtn'>
<img src="@/assets/img/搜索.png" style='margin-top:7px;margin-left:16px' >
</div>
</div>
</div>
<el-tree
class='tree-style'
:data="treeData"
:props="defaultProps"
accordion
@node-click="handleNodeClick">
<span slot-scope="{ node }" class='tree-text-style'>
<img src="@/assets/img/一级图标.png" style="width: 16px; height: 16px" />
{{ node.label }}
</span>
</el-tree>
</div> -->
<el-card shadow="never" class="aui-card--fill" v-if='homeIsShow'> <el-card shadow="never" class="aui-card--fill" v-if='homeIsShow'>
<div class="mod-demand__bsdemand"> <div class="mod-demand__bsdemand">
<div class='top-box'> <div class='top-box'>
@ -14,60 +36,70 @@
<span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)"> <span style='margin-right:30px' :class="[departmentId===1?'departmentStyle':'']" @click="handleChose(1)">
部门发布情况 部门发布情况
</span> </span>
<span :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)"> <span v-if='this.choseId===0' :class="[departmentId===2?'departmentStyle':'']" @click="handleChose(2)">
部门使用情况 部门使用情况
</span> </span>
</div> </div>
<div class='line-style'></div> <div class='line-style'></div>
<el-table <el-table
:data="tableData" :data="tableData"
border border
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
prop="name" prop="deptName"
label="部门名称" label="部门名称"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if='this.departmentId===1'
prop="releaseNum" prop="resourceNum"
label="发布总数" label="发布总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="applyNum" prop="resourceCarNum"
label="被申请总数" label="被申请总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.departmentId===1"
prop="browseNmu" prop="resourceBrowseNum"
label="浏览总量" label="浏览总量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.departmentId===1"
prop="collectNum" prop="resourceCollectionNum"
label="收藏量" label="收藏量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="transferNum" prop="resourceVisits"
label="被调用总数" label="被调用总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="applicationNum" prop="resourceRelNum"
label="被应用总数" label="被应用总数"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="needApplicationNum" prop="resourceShareNum"
label="需申请数量" label="需申请数量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column <el-table-column v-if="this.choseId===0 && this.departmentId===1 "
prop="reductionNum" prop="resourceShareNonNum"
label="免批数量" label="免批数量"
min-width="100%"> min-width="100%">
</el-table-column> </el-table-column>
<el-table-column v-if="this.departmentId===2"
prop="resourceUseNum"
label="使用总数"
min-width="100%">
</el-table-column>
<el-table-column v-if="this.departmentId===2"
prop="resourceCarNum"
label="申请总数"
min-width="100%">
</el-table-column>
<el-table-column <el-table-column
label="操作" label="操作"
min-width="92%"> min-width="92%">
@ -78,118 +110,324 @@
</el-table> </el-table>
<div class="block"> <div class="block">
<el-pagination <el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[10, 20, 30, 40]"
layout="total, prev, pager, next, jumper" layout="total, prev, pager, next, jumper"
:total="40"> :total="total"
:page-size="5"
:current-page="currentPage"
>
</el-pagination> </el-pagination>
</div> </div>
</div> </div>
</el-card> </el-card>
<component-services v-if='servicesIsShow' ></component-services> </div>
<application-resources v-if='resourcesIsShow'></application-resources> <component-used v-if='UsedIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-used>
<component-services v-if='servicesIsShow' :tableId='tableId' :fatherId='fatherId' @closeChild='closeChild'></component-services>
<application-resources v-if='resourcesIsShow' :tableId='tableId' :fatherId='fatherId' @closeApplication='closeApplication'></application-resources>
</div> </div>
</template> </template>
<script> <script>
import componentServices from './componentServices.vue' import componentServices from './componentServices.vue'
import applicationResources from './applicationResources.vue' import applicationResources from './applicationResources.vue'
import ComponentUsed from './componentUsed.vue'
export default { export default {
components:{componentServices,applicationResources}, components:{componentServices,applicationResources, ComponentUsed},
data(){ data(){
return{ return{
choseId:null, inputTxt:'',
tableId:'',
fatherId:'',
treeData: [{
label: '一级 1',
children: [{
label: '二级 1-1',
children: [{
label: '三级 1-1-1'
}]
}]
}, {
label: '一级 2',
children: [{
label: '二级 2-1',
children: [{
label: '三级 2-1-1'
}]
}, {
label: '二级 2-2',
children: [{
label: '三级 2-2-1'
}]
}]
}, {
label: '一级 3',
children: [{
label: '二级 3-1',
children: [{
label: '三级 3-1-1'
}]
}, {
label: '二级 3-2',
children: [{
label: '三级 3-2-1'
}]
}]
}],
total:null,
defaultProps: {
children: 'children',
label: 'name'
},
choseId:0,
departmentId:1, departmentId:1,
currentPage4: 4, currentPage: 1,
homeIsShow:true, homeIsShow:true,
servicesIsShow:false, servicesIsShow:false,
resourcesIsShow:false, resourcesIsShow:false,
UsedIsShow:false,
titleList:[ titleList:[
{name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3}, {name:'组件服务',key:1}, {name:'应用资源',key:2}, {name:'基础设施',key:3}, {name:'数据资源',key:3}, {name:'知识库',key:3},
], ],
tableData: [{ tableData: [{deptName:'部门',resourceNum:222}]
name: '部门名称一',
releaseNum: 111,
applyNum: 222,
browseNmu: 333,
collectNum:444,
transferNum:555,
applicationNum:666,
needApplicationNum:777,
reductionNum:888,
},{
name: '部门名称一',
releaseNum: 111,
applyNum: 222,
browseNmu: 333,
collectNum:444,
transferNum:555,
applicationNum:666,
needApplicationNum:777,
reductionNum:888,
},{
name: '部门名称一',
releaseNum: 111,
applyNum: 222,
browseNmu: 333,
collectNum:444,
transferNum:555,
applicationNum:666,
needApplicationNum:777,
reductionNum:888,
},{
name: '部门名称一',
releaseNum: 111,
applyNum: 222,
browseNmu: 333,
collectNum:444,
transferNum:555,
applicationNum:666,
needApplicationNum:777,
reductionNum:888,
},
]
} }
},
created(){
},
mounted(){
this.getFirstTree()
}, },
methods: { methods: {
//搜索框
// searchBtn(){
// this.getALLTree()
// },
// //树
// handleNodeClick(data) {
// console.log(data.name);
// this.getTreeName(data)
// },
//翻页
handleCurrentChange(val){
if(this.choseId===0){
this.getFirstTree(val)
}
else if(this.choseId===1){
this.getReleaseTree(val)
}
},
getTreeName (data) {
this.$http.get('/census/center/v3/treeList/' ,{
params : {
keywords:data.name,
deptId:'1067246875800000066',
// pageNo: pageNo || 1,
// pageSize: 20
}
}).then(res => {
this.tableData =res.data.data
})
},
// // 获取部门列表
// getALLTree () {
// this.$http.get('/census/center/v3/treeList/' ,{
// params : {
// keywords:this.inputTxt,
// deptId:'1067246875800000066',
// // pageNo: pageNo || 1,
// // pageSize: 20
// }
// }).then(res => {
// this.treeData =res.data.data
// // this.tableData =res.data.data
// })
// },
// 组件服务部门发布情况
getFirstTree (page) {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
params : {
page:page||1,
limit:5,
// id:'1067246875800000066',
resourceType:'组件服务'
}
}).then(res => {
this.tableData =res.data.data.list
this.total = res.data.data.total
})
},
// 组件服务部门使用情况列表
getSecondTree () {
this.$http.get('/census/center/v3/resourceUsedDetails/' ,{
params : {
limit:5,
page:1,
// id:'1067246875800000064',
resourceType:'组件服务'
}
}).then(res => {
this.tableData =res.data.data.list
})
},
// 应用资源部门发布情况列表
getReleaseTree (page) {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
params : {
limit:5,
page:page||1,
// id:'1067246875800000066',
resourceType:'应用资源'
}
}).then(res => {
this.tableData =res.data.data.list
this.total = res.data.data.total
})
},
// 应用资源部门使用情况列表
getUsedTree () {
this.$http.get('/census/center/v3/resourceReleaseDetails/' ,{
params : {
limit:5,
page:1,
// id:'1067246875800000066',
resourceType:'应用资源'
}
}).then(res => {
this.tableData =res.data.data.list
})
},
handleClick(row) { handleClick(row) {
console.log(row); if(this.choseId===0){
if(this.departmentId===1){
this.homeIsShow=false
this.servicesIsShow=true
this.tableId=row.deptId
this.fatherId=1
}else if(this.departmentId===2){
this.homeIsShow=false
this.UsedIsShow=true
this.tableId=row.deptId
this.fatherId=1
}
} else if(this.choseId===1){
this.homeIsShow=false
this.resourcesIsShow=true
this.tableId=row.deptId
this.fatherId=2
}
}, },
//选择组件 //选择组件
choseBtn(index){ choseBtn(index){
this.choseId=index this.choseId=index
if (index===0){ this.handleChose(1)
this.homeIsShow=false
this.servicesIsShow=true
} else if(index===1){
this.homeIsShow=false
this.servicesIsShow=false
this.resourcesIsShow=true
}
}, },
// choseBtn(index){
// this.choseId=index
// if (index===0){
// this.homeIsShow=false
// this.servicesIsShow=true
// } else if(index===1){
// this.homeIsShow=false
// this.servicesIsShow=false
// this.resourcesIsShow=true
// }
// },
//选择发布or使用表格 //选择发布or使用表格
handleChose(index){ handleChose(index){
this.departmentId=index this.departmentId=index
if(index===1){
if(this.choseId===0){
this.getFirstTree()
}else if(this.choseId===1){
this.getReleaseTree()
}
}else if(index===2){
if(this.choseId===0){
this.getSecondTree()
}else{
this.getUsedTree()
}
}
}, },
//翻页 //翻页
handleSizeChange(val) { handleSizeChange(val) {
console.log(`每页 ${val} 条`); console.log(`每页 ${val} 条`);
}, },
handleCurrentChange(val) { closeChild(){
console.log(`当前页: ${val}`); this.homeIsShow=true
this.servicesIsShow=false
},
closeApplication(){
this.homeIsShow=true
this.resourcesIsShow=false
} }
}, },
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container{
display: flex;
}
.container-left{
width:250px;
height:1000px;
display: inline-block;
// background-color: #ffffff;
margin-right:10px
}
.left-search{
width:250px;
height:76px;
background-color: #ffffff;
}
.input-style{
width:210px;
height:36px;
margin:20px 20px;
padding-left: 20px;
border-radius: 18px;
border:1px solid transparent;
background-color: #f2f4fa;
}
input::placeholder {
font-weight: 400;
font-size: 14px;
color: #b0b3ca;
}
.input-search{
width:44px;
height:30px;
background-color: #ffffff;
position: absolute;
border-radius: 15px;
top:38px;
left:196px;
}
::v-deep.tree-style {
.el-tree-node__label{
font-size:16px;
}
.el-tree-node__content{
width:240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.top-box{ .top-box{
height:80px; height:80px;
width:100%;
background-color: #fafafc; background-color: #fafafc;
display: inline-block;
} }
.title{ .title{
display: flex; display: flex;
@ -247,4 +485,9 @@ export default {
.departmentStyle{ .departmentStyle{
color:#526aff color:#526aff
} }
::v-deep .tree-text-styleJ{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style> </style>

295
back/src/views/modules/activiti/demo/correction-process2.vue
View File

@ -241,180 +241,177 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .big-BOX{ ::v-deep .big-BOX {
background:rgba(244,245,248,0.8); background: rgba(244, 245, 248, 0.8);
padding:24px; padding: 24px;
h3{ h3 {
font-size:16px; font-size: 16px;
color:#212121 color: #212121;
} }
p{ p {
width:78%; width: 78%;
display:flex; display: flex;
justify-content: space-between; justify-content: space-between;
color:#212121; color: #212121;
font-size:14px; font-size: 14px;
span{ span {
display:inline-block; display: inline-block;
margin-left:8px; margin-left: 8px;
line-height:32px; line-height: 32px;
span{ span {
font-weight:bold; font-weight: bold;
} }
} }
} }
p:last-of-type{ p:last-of-type {
margin-top:16px; margin-top: 16px;
width:100%; width: 100%;
span{ span {
display:flex; display: flex;
span{ span {
padding:0 12px; padding: 0 12px;
height:32px; height: 32px;
background:rgba(232,234,239,1); background: rgba(232, 234, 239, 1);
border-radius:2px; border-radius: 2px;
button{ button {
background:unset; background: unset;
border:0; border: 0;
color:#0558e1; color: #0558e1;
font-size:14px; font-size: 14px;
} }
} }
} }
} }
} }
::v-deep .AbilityApply{ ::v-deep .AbilityApply {
margin-top:32px; margin-top: 32px;
h3{ h3 {
font-size:16px; font-size: 16px;
color:#212121; color: #212121;
border-bottom:1px solid #dddee1;
padding-bottom:10px;
}
ul{
padding-left: 0px;
li{
list-style:none;
padding: 30px 0;
border-bottom: 1px solid #dddee1; border-bottom: 1px solid #dddee1;
display:flex; padding-bottom: 10px;
img{ }
width:100px; ul {
height:100px; padding-left: 0px;
} li {
div{ list-style: none;
margin-left:16px; padding: 30px 0;
display: flex; border-bottom: 1px solid #dddee1;
flex-direction: column; display: flex;
justify-content: center; img {
h2{ width: 100px;
margin-bottom:20px; height: 100px;
font-size:20px; }
color:#000; div {
display:flex; margin-left: 16px;
span{
display:block;
font-size:14px;
color:#ffffff;
margin-left:8px;
background:rgba(0,184,230,0.8);
display: flex; display: flex;
align-items: center; flex-direction: column;
padding: 0 5px; justify-content: center;
border-radius: 4px; h2 {
margin-bottom: 20px;
font-size: 20px;
color: #000;
display: flex;
span {
display: block;
font-size: 14px;
color: #ffffff;
margin-left: 8px;
background: rgba(0, 184, 230, 0.8);
display: flex;
align-items: center;
padding: 0 5px;
border-radius: 4px;
}
}
p {
margin-bottom: 0;
}
} }
} }
p{ .clearfix:after {
margin-bottom:0; display: block;
content: "";
clear: both;
} }
.title {
color: #0558e1;
font-size: 18px;
padding-bottom: 0;
border-bottom: 0;
} }
.title:before {
content: "";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background: #0558e1;
vertical-align: middle;
margin-right: 10px;
margin-top: 6px;
} }
.clearfix:after{
display:block;
content:"";
clear:both;
}
.title{
color:#0558e1;
font-size:18px;
padding-bottom:0;
border-bottom: 0;
}
.title:before {
content: "";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background: #0558e1;
vertical-align: middle;
margin-right: 10px;
margin-top: 6px;
}
} }
} }
::v-deep .agreeOr>div{ ::v-deep .agreeOr > div {
display:flex; display: flex;
align-items: center; align-items: center;
.el-input{ .el-input {
margin-right: 10px; margin-right: 10px;
margin-left: 32px; margin-left: 32px;
} }
} }
::v-deep .agreeOr>div:last-of-type{ ::v-deep .agreeOr > div:last-of-type {
margin-top:15px; margin-top: 15px;
}
.blueAll {
::v-deep .el-radio-button__inner {
width: 80px;
height: 32px;
line-height: 32px;
padding: 0;
border-radius: 2px;
background: #ffffff;
color: #0558e1;
border: 1px solid #0558e1;
} }
.blueAll{ ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
::v-deep .el-radio-button__inner{ box-shadow: unset !important;
width:80px; background: #0558e1;
height:32px; color: #ffffff;
line-height:32px;
padding:0;
border-radius:2px;
background:#ffffff;
color:#0558e1;
border:1px solid #0558e1;
} }
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{ }
box-shadow: unset !important; .inputBule {
background:#0558e1; width: 55px;
color:#ffffff; height: 32px;
line-height: 32px;
padding: 0;
border-radius: 2px;
background: #0558e1;
color: #ffffff;
border: 1px solid #0558e1;
}
.redAll {
margin-left: 10px;
::v-deep .el-radio-button__inner {
width: 80px;
height: 32px;
line-height: 32px;
padding: 0;
border-radius: 2px;
border: 1px solid #e83a48;
background: #ffffff;
color: #e83a48;
margin-left: 10px;
} }
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
box-shadow: unset !important;
color: #ffffff;
background: #e83a48;
} }
.inputBule{ }
width:55px; .blueInput {
height:32px; width: 55px;
line-height:32px; }
padding:0;
border-radius:2px;
background:#0558e1;
color:#ffffff;
border:1px solid #0558e1;
}
.redAll{
margin-left:10px;
::v-deep .el-radio-button__inner{
width:80px;
height:32px;
line-height:32px;
padding:0;
border-radius:2px;
border:1px solid #e83a48;
background:#ffffff;
color:#e83a48;
margin-left:10px;
}
::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner{
box-shadow: unset !important;
color:#ffffff;
background: #e83a48;
}
}
.blueInput{
width:55px;
}
</style> </style>

42
back/src/views/modules/activiti/demo/putaway-process.vue
View File

@ -66,21 +66,35 @@
</el-form-item> </el-form-item>
</div> </div>
<div v-if="!shifoushizujian"> <div v-if="!shifoushizujian">
<el-form-item label="组件名称"> <el-form-item label="组件名称" v-if="algorithmShow">
<el-input <el-input
v-model="dataForm.name" v-model="dataForm.name"
:disabled="fieldDisabled" :disabled="fieldDisabled"
placeholder="组件名称" placeholder="组件名称"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="应用描述"> <el-form-item label="算法名称" v-if="nameNotShow">
<el-input
v-model="dataForm.name"
:disabled="fieldDisabled"
placeholder="算法名称"
></el-input>
</el-form-item>
<el-form-item label="应用描述" v-if="algorithmShow">
<el-input <el-input
v-model="dataForm.description" v-model="dataForm.description"
:disabled="fieldDisabled" :disabled="fieldDisabled"
placeholder="应用描述" placeholder="应用描述"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="部门联系人"> <el-form-item label="算法描述" v-if="nameNotShow">
<el-input
v-model="dataForm.description"
:disabled="fieldDisabled"
placeholder="算法描述"
></el-input>
</el-form-item>
<el-form-item label="部门联系人" v-if="algorithmShow">
<el-input <el-input
v-model="dataForm.deptContacts" v-model="dataForm.deptContacts"
:disabled="fieldDisabled" :disabled="fieldDisabled"
@ -94,7 +108,7 @@
placeholder="共享类型" placeholder="共享类型"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="共享方式"> <el-form-item label="共享方式" v-if="coverageNotShow && algorithmShow">
<el-input <el-input
v-model="dataForm.shareMode" v-model="dataForm.shareMode"
:disabled="fieldDisabled" :disabled="fieldDisabled"
@ -108,16 +122,16 @@
placeholder="共享方条件" placeholder="共享方条件"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="服务接口"> <el-form-item label="服务接口" v-if="coverageNotShow">
<el-input <el-input
v-model="dataForm.apiUrl" v-model="dataForm.apiUrl"
:disabled="fieldDisabled" :disabled="fieldDisabled"
placeholder="服务接口" placeholder="服务接口"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="接口请求方式"> <el-form-item label="接口请求方式" v-if="coverageNotShow">
<el-input <el-input
v-model="dataForm.applyCount" v-model="dataForm.apiMethodType"
:disabled="fieldDisabled" :disabled="fieldDisabled"
placeholder="接口请求方式" placeholder="接口请求方式"
></el-input> ></el-input>
@ -179,7 +193,10 @@ export default {
fieldDisabled: false, fieldDisabled: false,
dataForm: [], dataForm: [],
id: '', id: '',
shifoushizujian: true shifoushizujian: true,
coverageNotShow: true,
nameNotShow: false,
algorithmShow: true
} }
}, },
watch: {}, watch: {},
@ -209,6 +226,15 @@ export default {
this.dataForm = res.data.resourceDTO this.dataForm = res.data.resourceDTO
if (this.dataForm.type != '应用资源') { if (this.dataForm.type != '应用资源') {
this.shifoushizujian = false this.shifoushizujian = false
this.dataForm.infoList.forEach((val) => {
if (val.attrValue === '图层服务') {
this.coverageNotShow = false
} else if (val.attrValue === '智能算法') {
this.nameNotShow = true
this.algorithmShow = false
console.log(this.nameNotShow, 'wowowo')
}
})
} else { } else {
this.shifoushizujian = true this.shifoushizujian = true
} }

342
back/src/views/modules/activiti/my-work-dynamics.vue
View File

@ -132,7 +132,7 @@
show-word-limit show-word-limit
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="title" label="摘要"> <el-form-item prop="note1" label="摘要">
<el-input <el-input
v-model="addDataFrom.note1" v-model="addDataFrom.note1"
autocomplete="off" autocomplete="off"
@ -224,7 +224,7 @@
show-word-limit show-word-limit
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="title" label="摘要"> <el-form-item prop="note1" label="摘要">
<el-input <el-input
v-model="eidtDataForm.note1" v-model="eidtDataForm.note1"
autocomplete="off" autocomplete="off"
@ -340,15 +340,15 @@
<script> <script>
// @ is an alias to /src // @ is an alias to /src
export default { export default {
data() { data () {
return { return {
fileUploadUrl: window.SITE_CONFIG.apiURL + "/upload", fileUploadUrl: window.SITE_CONFIG.apiURL + '/upload',
// 表格筛选条件对象 // 表格筛选条件对象
queryData: { queryData: {
keyworld: "", keyworld: '',
pageIndex: 1, pageIndex: 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0
}, },
// 表格数据数组对象 // 表格数据数组对象
tableData: [], tableData: [],
@ -359,307 +359,307 @@ export default {
// imageUrl: '', // imageUrl: '',
// 新增数据表单对象 // 新增数据表单对象
addDataFrom: { addDataFrom: {
title: "", title: '',
note1: "", note1: '',
content: "", content: '',
imageUrl: "", imageUrl: '',
delFlag: 0, delFlag: 0
}, },
// 新增数据表单验证对象 // 新增数据表单验证对象
addDataFromRules: { addDataFromRules: {
title: [{ required: true, message: "请输入标题", trigger: "blur" }], title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
note1: [{ required: true, message: "请输入摘要", trigger: "blur" }], note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
content: [{ required: true, message: "请输入内容", trigger: "blur" }], content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
imageUrl: [ imageUrl: [
{ required: true, message: "请输入图片地址", trigger: "blur" }, { required: true, message: '请输入图片地址', trigger: 'blur' }
], ]
}, },
editDataDialogVisabled: false, editDataDialogVisabled: false,
eidtDataForm: { eidtDataForm: {
title: "", title: '',
note1: "", note1: '',
content: "", content: '',
imageUrl: "", imageUrl: ''
}, },
eidtDataFromRules: { eidtDataFromRules: {
title: [{ required: true, message: "请输入标题", trigger: "blur" }], title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
note1: [{ required: true, message: "请输入摘要", trigger: "blur" }], note1: [{ required: true, message: '请输入摘要', trigger: 'blur' }],
content: [{ required: true, message: "请输入内容", trigger: "blur" }], content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
imageUrl: [ imageUrl: [
{ required: true, message: "请输入图片地址", trigger: "blur" }, { required: true, message: '请输入图片地址', trigger: 'blur' }
], ]
}, },
perviewDataDialogVisabled: false, perviewDataDialogVisabled: false,
previewData: { previewData: {
title: "", title: '',
note1: "", note1: '',
content: "", content: '',
imageUrl: "", imageUrl: '',
delFlag: 0, delFlag: 0
}, },
previewImg: "", // 预览图片 previewImg: '', // 预览图片
deleteDataArr: [], deleteDataArr: [],
dialogVisibleImg: false, dialogVisibleImg: false
}; }
}, },
created() { created () {
this.getTableData(); this.getTableData()
}, },
methods: { methods: {
tableChange(val) { tableChange (val) {
this.deleteDataArr = val.map((item) => item.id); this.deleteDataArr = val.map((item) => item.id)
console.log(this.deleteDataArr); console.log(this.deleteDataArr)
}, },
restTableData() { restTableData () {
this.queryData.keyworld = ""; this.queryData.keyworld = ''
this.getTableData(); this.getTableData()
}, },
showView(file) { showView (file) {
this.previewImg = file.url; this.previewImg = file.url
this.dialogVisibleImg = true; this.dialogVisibleImg = true
}, },
getTableData() { getTableData () {
this.$http this.$http
.get("/workdynamics/page", { .get('/workdynamics/page', {
params: { params: {
limit: this.queryData.pageSize, limit: this.queryData.pageSize,
page: this.queryData.pageIndex, page: this.queryData.pageIndex,
name: this.queryData.keyworld, name: this.queryData.keyworld
}, }
}) })
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.tableData = res.data.list; this.tableData = res.data.list
this.queryData.total = res.data.total; this.queryData.total = res.data.total
}) })
.catch(() => {}); .catch(() => {})
}, },
flashTableData() { flashTableData () {
this.queryData.pageIndex = 1; this.queryData.pageIndex = 1
this.getTableData(); this.getTableData()
}, },
// 分页大小更改 // 分页大小更改
handleSizeChange(value) { handleSizeChange (value) {
this.queryData.pageSize = value; this.queryData.pageSize = value
this.getTableData(); this.getTableData()
}, },
// 当前索引更改 // 当前索引更改
handleCurrentChange(val) { handleCurrentChange (val) {
this.queryData.pageIndex = val; this.queryData.pageIndex = val
this.getTableData(); this.getTableData()
}, },
// 新增数据窗口关闭事件 // 新增数据窗口关闭事件
addDataDialogClose() { addDataDialogClose () {
this.$refs.addDataFormRef.resetFields(); this.$refs.addDataFormRef.resetFields()
this.addDataFrom.imageUrl = ""; this.addDataFrom.imageUrl = ''
this.$refs.addUpload.clearFiles(); this.$refs.addUpload.clearFiles()
// this.addDataFrom.imagesFiles = [] // this.addDataFrom.imagesFiles = []
// this.$refs.addDataFromUploadRef.clearFiles() // this.$refs.addDataFromUploadRef.clearFiles()
}, },
editDataDialogClose() { editDataDialogClose () {
this.$refs.editDataFormRef.resetFields(); this.$refs.editDataFormRef.resetFields()
this.eidtDataForm.imageUrl = ""; this.eidtDataForm.imageUrl = ''
this.$refs.editUpload.clearFiles(); this.$refs.editUpload.clearFiles()
}, },
// 追加数据 // 追加数据
addDataDialogConfirm() { addDataDialogConfirm () {
this.$refs.addDataFormRef.validate(async (valid) => { this.$refs.addDataFormRef.validate(async (valid) => {
if (valid) { if (valid) {
//console.log("新增新增", this.addDataFrom); // console.log("新增新增", this.addDataFrom);
this.$http this.$http
.post("/workdynamics/insert", this.addDataFrom) .post('/workdynamics/insert', this.addDataFrom)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.$message.success("新增成功"); this.$message.success('新增成功')
this.addDataDialogVisabled = false; this.addDataDialogVisabled = false
this.getTableData(); this.getTableData()
}) })
.catch(() => {}); .catch(() => {})
} else { } else {
this.$message.success("表单数据填写不完整"); this.$message.success('表单数据填写不完整')
} }
}); })
}, },
// 限定图片 // 限定图片
handleExceed() { handleExceed () {
this.$message({ type: "error", message: "最多支持一张图片上传" }); this.$message({ type: 'error', message: '最多支持一张图片上传' })
}, },
// 限制标题 // 限制标题
titleExceed(str) { titleExceed (str) {
if (str.length >= 200) { if (str.length >= 200) {
this.$message.error("标题文字不能超过200字"); this.$message.error('标题文字不能超过200字')
} }
}, },
// 限制内容 // 限制内容
contentExceed(str) { contentExceed (str) {
if (str.length >= 2000) { if (str.length >= 2000) {
this.$message.error("内容文字不能超过2000字"); this.$message.error('内容文字不能超过2000字')
} }
}, },
//限制摘要 // 限制摘要
noteExceed(str) { noteExceed (str) {
if (str.length >= 1000) { if (str.length >= 1000) {
this.$message.error("摘要文字不能超过1000字"); this.$message.error('摘要文字不能超过1000字')
} }
}, },
// 删除数据 // 删除数据
deleteData(row) { deleteData (row) {
console.log(row); console.log(row)
this.$confirm("此操作将删除当前数据, 是否继续?", "提示", { this.$confirm('此操作将删除当前数据, 是否继续?', '提示', {
confirmButtonText: "确定", confirmButtonText: '确定',
cancelButtonText: "取消", cancelButtonText: '取消',
type: "warning", type: 'warning'
}) })
.then(async () => { .then(async () => {
let ids = []; let ids = []
if (this.deleteDataArr.length > 1) { if (this.deleteDataArr.length > 1) {
ids = this.deleteDataArr; ids = this.deleteDataArr
} else { } else {
ids = [row.id]; ids = [row.id]
} }
console.log(ids); console.log(ids)
this.$http this.$http
.delete("/workdynamics/delete", { .delete('/workdynamics/delete', {
data: ids, data: ids
}) })
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.$message({ this.$message({
type: "success", type: 'success',
message: "删除成功!", message: '删除成功!'
}); })
this.getTableData(); this.getTableData()
}); })
}) })
.catch(() => { .catch(() => {
this.$message({ this.$message({
type: "info", type: 'info',
message: "已取消删除", message: '已取消删除'
}); })
}); })
}, },
//预览工作动态信息 // 预览工作动态信息
async openPreviewData(row) { async openPreviewData (row) {
console.log("预览预览", row); console.log('预览预览', row)
const { data: res } = await this.$http.get( const { data: res } = await this.$http.get(
`workdynamics/select/${row.id}` `workdynamics/select/${row.id}`
); )
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.previewData = res.data; this.previewData = res.data
this.perviewDataDialogVisabled = true; this.perviewDataDialogVisabled = true
}, },
perviewDataDialogClose() { perviewDataDialogClose () {
this.perviewDataDialogVisabled = false; this.perviewDataDialogVisabled = false
}, },
handleAvatarSuccess(res, file) { handleAvatarSuccess (res, file) {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.addDataFrom.imageUrl = res.data; this.addDataFrom.imageUrl = res.data
// this.imageUrl = URL.createObjectURL(file.raw); // this.imageUrl = URL.createObjectURL(file.raw);
}, },
beforeAvatarUpload(file) { beforeAvatarUpload (file) {
const isImage = const isImage =
file.type === "image/jpeg" || file.type === 'image/jpeg' ||
file.type === "image/jpg" || file.type === 'image/jpg' ||
file.type === "image/png"; file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2; const isLt2M = file.size / 1024 / 1024 < 2
if (!isImage) { if (!isImage) {
this.$message.error("上传头像图片只能是 JPG 格式!"); this.$message.error('上传头像图片只能是 jpg/png 格式!')
} }
if (!isLt2M) { if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!"); this.$message.error('上传头像图片大小不能超过 2MB!')
} }
return isImage && isLt2M; return isImage && isLt2M
}, },
eidtHandleAvatarSuccess(res, file) { eidtHandleAvatarSuccess (res, file) {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.eidtDataForm.imageUrl = res.data; this.eidtDataForm.imageUrl = res.data
// this.imageUrl = URL.createObjectURL(file.raw); // this.imageUrl = URL.createObjectURL(file.raw);
}, },
editBeforeAvatarUpload(file) { editBeforeAvatarUpload (file) {
const isImage = const isImage =
file.type === "image/jpeg" || file.type === 'image/jpeg' ||
file.type === "image/jpg" || file.type === 'image/jpg' ||
file.type === "image/png"; file.type === 'image/png'
const isLt2M = file.size / 1024 / 1024 < 2; const isLt2M = file.size / 1024 / 1024 < 2
if (!isImage) { if (!isImage) {
this.$message.error("上传头像图片只能是 JPG 格式!"); this.$message.error('上传头像图片只能是 jpg/png 格式!')
} }
if (!isLt2M) { if (!isLt2M) {
this.$message.error("上传头像图片大小不能超过 2MB!"); this.$message.error('上传头像图片大小不能超过 2MB!')
} }
return isImage && isLt2M; return isImage && isLt2M
}, },
async openEditDialog(row) { async openEditDialog (row) {
const { data: res } = await this.$http.get( const { data: res } = await this.$http.get(
`workdynamics/select/${row.id}` `workdynamics/select/${row.id}`
); )
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.eidtDataForm = res.data; this.eidtDataForm = res.data
this.editDataDialogVisabled = true; this.editDataDialogVisabled = true
}, },
eidtDataDialogConfirm() { eidtDataDialogConfirm () {
this.$refs.editDataFormRef.validate(async (valid) => { this.$refs.editDataFormRef.validate(async (valid) => {
if (valid) { if (valid) {
console.log(this.eidtDataForm); console.log(this.eidtDataForm)
this.$http this.$http
.put("/workdynamics/update", this.eidtDataForm) .put('/workdynamics/update', this.eidtDataForm)
.then(({ data: res }) => { .then(({ data: res }) => {
if (res.code !== 0) { if (res.code !== 0) {
return this.$message.error(res.msg); return this.$message.error(res.msg)
} }
this.$message.success("编辑成功"); this.$message.success('编辑成功')
this.editDataDialogVisabled = false; this.editDataDialogVisabled = false
this.getTableData(); this.getTableData()
}) })
.catch(() => {}); .catch(() => {})
} else { } else {
this.$message.success("表单数据填写不完整"); this.$message.success('表单数据填写不完整')
} }
}); })
}, },
addUploadRemoveFile(file, fileList) { addUploadRemoveFile (file, fileList) {
this.$refs.addUpload.clearFiles(); this.$refs.addUpload.clearFiles()
this.addDataFrom.imageUrl = ""; this.addDataFrom.imageUrl = ''
},
editUploadRemoveFile(file, fileList) {
this.$refs.editUpload.clearFiles();
this.eidtDataForm.imageUrl = "";
}, },
editUploadRemoveFile (file, fileList) {
this.$refs.editUpload.clearFiles()
this.eidtDataForm.imageUrl = ''
}
}, },
computed: { computed: {
editDialogShowFileList() { editDialogShowFileList () {
if (this.eidtDataForm.imageUrl) { if (this.eidtDataForm.imageUrl) {
return [ return [
{ name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }, { name: this.eidtDataForm.imageUrl, url: this.eidtDataForm.imageUrl }
]; ]
} }
}, }
}, }
}; }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner, ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
@ -728,7 +728,7 @@ export default {
.preview-title { .preview-title {
width: 100%; width: 100%;
height: 90px; min-height: 90px;
//margin-top: -40px; //margin-top: -40px;
border-bottom: solid #c6c6c6 1px; border-bottom: solid #c6c6c6 1px;
.title-text { .title-text {
@ -752,7 +752,7 @@ export default {
} }
.preview-note { .preview-note {
width: 100%; width: 100%;
height: 100px; min-height: 100px;
text-align: left; text-align: left;
margin-top: 24px; margin-top: 24px;
text-indent: 2em; text-indent: 2em;

160
back/src/views/modules/myAgent/CompetencyApplication.vue Normal file
View File

@ -0,0 +1,160 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-27 11:27:22
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-29 16:31:26
* @Description: 能力申请
-->
<template>
<el-card shadow="never" class="aui-card--fill">
<div class="mod-activiti__process">
<el-form
:inline="true"
:model="dataForm"
@keyup.enter.native="getDataList()"
>
<el-form-item>
<el-input
v-model="dataForm.taskName"
:placeholder="$t('process.name')"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDataList()">{{
$t("query")
}}</el-button>
</el-form-item>
</el-form>
<el-table
v-loading="dataListLoading"
:data="dataList"
border
@selection-change="dataListSelectionChangeHandle"
@sort-change="dataListSortChangeHandle"
style="width: 100%"
>
<el-table-column
type="selection"
header-align="center"
align="center"
width="50"
></el-table-column>
<el-table-column label="申请人" header-align="center" align="center">
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.tAbilityApplicationDTOList[0].user)
}}</span>
</template>
</el-table-column>
<el-table-column
:label="$t('process.system')"
header-align="center"
align="center"
>
<template slot-scope="scope">
<span>{{
(scope.row.params && scope.row.params.tAbilityApplicationDTOList[0].title)
}}</span>
</template>
</el-table-column>
<!-- <el-table-column prop="businessKey" :label="$t('process.businessKey')" header-align="center" align="center"></el-table-column>
<el-table-column prop="processInstanceId" :label="$t('running.id')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="processDefinitionName"
:label="$t('process.processDefinitionName')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
prop="taskName"
:label="$t('process.taskName')"
header-align="center"
align="center"
></el-table-column>
<!-- <el-table-column prop="startTime" :label="$t('process.startTime')" header-align="center" align="center"></el-table-column> -->
<el-table-column
prop="createTime"
:label="$t('process.createTime')"
header-align="center"
align="center"
></el-table-column>
<el-table-column
:label="$t('handle')"
fixed="right"
header-align="center"
align="center"
width="150"
>
<template slot-scope="scope">
<el-button
type="text"
size="small"
:processInstanceId="processInstanceId"
@click="taskHandle(scope.row)"
>{{ $t("manage") }}</el-button
>
<!-- <el-button
type="text"
size="small"
@click="taskDetail(scope.row)"
>{{ $t("process.viewFlowImage") }}</el-button
> -->
</template>
</el-table-column>
</el-table>
<el-pagination
:current-page="page"
:page-sizes="[10, 20, 50, 100]"
:page-size="limit"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="pageSizeChangeHandle"
@current-change="pageCurrentChangeHandle"
>
</el-pagination>
</div>
</el-card>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import processModule from '@/mixins/process-module'
export default {
mixins: [mixinViewModule, processModule],
data () {
return {
mixinViewModuleOptions: {
getDataListURL: '/act/task/myToDoTaskPage',
getDataListIsPage: true,
activatedIsNeed: true,
deleteIsBatch: true,
deleteIsBatchKey: 'deploymentId'
},
dataForm: {
taskName: '',
taskId: '',
processDefinitionKey: 'abilityprocess_v2'
},
processInstanceId: ''
}
},
components: {},
methods: {
// 处理
taskHandle (row) {
console.log('row======================>', row, this.forwardHandleUrl)
if (!row.businessKey) {
return this.$message.error(this.$t('task.businessKeyError'))
}
this.getProcDefRouteSet(row, this.forwardHandleUrl)
},
taskDetail (row) {
if (!row.businessKey) {
return this.$message.error(this.$t('task.detailError'))
}
this.getProcDefRouteSet(row, this.forwardTaskDetail)
}
}
}
</script>

473
back/src/views/modules/myAgent/demo/competency-application.vue Normal file
View File

@ -0,0 +1,473 @@
<!--
* @Author: hisense.liangjunhua
* @Date: 2022-06-29 15:59:51
* @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-07-01 09:29:57
* @Description: 告诉大家这是什么
-->
<!-- 流程业务表单 -->
<template>
<el-card shadow="never" class="aui-card--fill" :key='showKey'>
<!-- 申请人详情 -->
<div>
<h3>申请人信息</h3>
<div class="big-BOX">
<p>
<span class="text">申请人：<span> {{dataForm.content.user || '--'}}</span></span>
<span class="text">电话：<span>{{dataForm.content.phone || '--'}}</span></span>
<span class="text">单位：<span>{{dataForm.content.unit || '--'}}</span></span>
</p>
<p>
<span class="text"> 能力申请标题：<span> {{dataForm.content.title|| '--'}}</span></span>
<span class="text">应用系统：<span>{{dataForm.content.applicationSystem || '--'}}</span></span>
<span class="text">应用场景：<span> {{dataForm.content.applicationSceneStr || '--'}}</span></span>
</p>
<p>
<span> 能力应用期望效果：<span> {{dataForm.content.effectWish|| '--'}}</span></span>
</p>
<p v-if="dataForm.content.enclosure">
<span> 申请附件：<span> {{dataForm.content.enclosure|| '--'}}<button @click="downloadFile2(dataForm.content.enclosure)">预览</button></span></span>
</p>
</div>
</div>
<!-- 申请能力 -->
<div class="AbilityApply">
<h3>申请能力</h3>
<ul v-for="item in dataList" :key="item.id">
<!-- <li class="title">{{item.address}}</li> -->
<li class="clearfix">
<img
src="~@/assets/img/imgLeft.png"
/>
<div>
<h2>{{item.name}}<span>{{item.type}}</span></h2>
<p>{{item.describe}}</p>
</div>
</li>
</ul>
</div>
<!-- 流程综合组件 -->
<!-- <ren-process-multiple
v-if="processVisible"
updateInstanceIdUrl="/processForm/tabilityapplication/updateInstanceId"
saveFormUrl="/processForm/tabilityapplication"
dataFormName="dataForm"
ref="renProcessMultiple"
></ren-process-multiple> -->
<!-- 审批 -->
<div class="agreeOr">
<h3>审批</h3>
<div>
<el-radio-group v-model="agreeOrList" style="width:230px;">
<el-radio-button label="同意" class="blueAll">同意</el-radio-button>
<el-radio-button label="退回" class="redAll">退回</el-radio-button>
</el-radio-group>
<el-input v-if="agreeOrList ==='同意' " v-model="inputAgree" placeholder="请输入同意意见"></el-input>
<el-input v-if="agreeOrList ==='退回'" v-model="inputNo" placeholder="请输入退回意见"></el-input>
<el-button class="inputBule" @click="agreeOrNot">提交</el-button>
</div>
</div>
<!-- 流程详情 -->
<ren-process-detail></ren-process-detail>
</el-card>
</template>
<script>
// 引入工作流公共方法
import processModule from '@/mixins/process-module'
import debounce from 'lodash/debounce'
import qs from 'qs'
import RenProcessDetail from '@/components/ren-process-detail/src/ren-process-detail'
export default {
// 注入公共方法
mixins: [processModule],
data () {
return {
visible: true,
showKey: 0,
// 表单属性是否可编辑
// fieldDisabled: false,
// dataForm: {
// id: '',
// user: '',
// phone: '',
// unit: '',
// area: '',
// system: '',
// scene: '',
// basis: ''
// }
dataForm: {
id: '',
content: {}
},
dataList: [],
inputAgree: '',
inputNo: '',
agreeOrList: '同意'
}
},
created () {
// 将业务KEY赋值给表单
console.log('params=================>', this.$route, this.$route.params)
this.dataForm.taskId = this.$route.params.taskId
this.init()
// // 流程回调
var callbacks = {
startProcessSuccessCallback: this.closeCurrentTab,
startProcessErrorCallback: this.startProcessErrorCallback,
taskHandleSuccessCallback: this.closeCurrentTab,
taskHandleErrorCallback: this.taskHandleErrorCallback,
formSaveSuccessCallback: null,
formSaveErrorCallback: null
}
// 初始化综合组件
this.initProcessMultiple(callbacks)
},
computed: {
// dataRule () {
// return {
// inputAgree: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ],
// inputNo: [
// { required: true, message: this.$t('validate.required'), trigger: 'blur' }
// ]
// }
// }
},
components: {
RenProcessDetail
},
methods: {
init () {
// this.visible = true
this.$nextTick(() => {
// this.$refs.dataForm.resetFields()
if (this.dataForm.taskId) {
// 如业务KEY已存在，不允许编辑
// this.fieldDisabled = true
this.getInfo()
console.log(this.dataForm, 'init')
}
})
},
downloadFile2 (url) {
window.open(
window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' +
btoa(encodeURI(url))
)
},
// 获取信息
getInfo () {
this.$http
.get(`/act/task/getTaskVariables?taskId=${this.dataForm.taskId}&variableName=tAbilityApplicationDTOList`)
.then(({ data: res }) => {
if (res.code !== 0) {
console.log(res.data)
return this.$message.error(res.msg)
}
console.log(res.data, this.dataForm, 'elas============================')
if (res.data.tAbilityApplicationDTOList[0].applicationScene) {
res.data.tAbilityApplicationDTOList[0].applicationSceneStr = ''
res.data.tAbilityApplicationDTOList[0].applicationScene.map((val, index) => {
res.data.tAbilityApplicationDTOList[0].applicationSceneStr += val
if (index < res.data.tAbilityApplicationDTOList[0].applicationScene.length - 1) {
res.data.tAbilityApplicationDTOList[0].applicationSceneStr += '、'
}
})
}
this.dataForm.content = res.data.tAbilityApplicationDTOList[0]
const obj = {
name: '申请摄像头列表',
type: '基础设施',
describe: ''
}
let flag = false
res.data.tAbilityApplicationDTOList.map(val => {
if (val.cameraList) {
flag = true
obj.describe += val.system
} else {
this.$http.get('/resource/' + val.resourceId).then(res1 => {
// console.log(res1.data.data, '1111111111111111111111111111111111')
this.dataList.push({
name: res1.data.data.name,
type: res1.data.data.type,
describe: res1.data.data.description
})
})
}
})
if (flag) {
this.dataList.push(obj)
}
})
.catch(() => {})
},
// 申请能力
applyData () {
this.$http
.get(`/resource/select/${this.dataForm.instanceId}`)
.then(({ data: res }) => {
if (res.code !== 0) {
console.log(res.data, 'hhhhh')
// return this.$message.error(res.msg)
}
// console.log(res.data, 'elas')
// this.dataForm.content = res.data
// console.log(this.dataForm, 'ela')
})
.catch(() => {})
},
// 同意与退回
agreeOrNot: debounce(function () {
if (this.agreeOrList === '同意') {
console.log('this.dataForm', this.dataForm)
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.inputAgree
})
console.log(params)
this.$http.post('/act/task/complete?' + params).then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
}).catch(() => {})
} else if (this.agreeOrList === '退回') {
const params = qs.stringify({
taskId: this.dataForm.taskId,
comment: this.inputNo
})
this.$http.post('/act/task/backToFirst?', params).then(({ data: res }) => {
if (res.code !== 0) {
this.$message.error(res.msg)
if (this.callbacks.taskHandleErrorCallback) {
this.callbacks.taskHandleErrorCallback(res)
}
return
}
this.$message({
message: this.$t('prompt.success'),
type: 'success',
duration: 500,
onClose: () => {
this.visible = false
if (this.callbacks.taskHandleSuccessCallback) {
this.callbacks.taskHandleSuccessCallback(res)
}
}
})
})
}
}, 1000, { leading: true, trailing: false }),
// 启动流程出错回调
startProcessErrorCallback (data) {
console.log(data)
},
// 任务处理出错回调
taskHandleErrorCallback (data) {}
},
mounted () {
// this.applyData()
}
}
</script>
<style scoped lang="scss">
::v-deep .big-BOX {
background: rgba(244, 245, 248, 0.8);
padding: 24px;
h3 {
font-size: 16px;
color: #212121;
}
p {
width: 100%;
display: flex;
justify-content: space-between;
color: #212121;
font-size: 14px;
span {
display: inline-block;
margin-left: 8px;
line-height: 32px;
span {
font-weight: bold;
}
}
.text {
width: 500px;
}
}
p:last-of-type {
margin-top: 16px;
width: 100%;
span {
display: flex;
span {
padding: 0 12px;
height: 32px;
background: rgba(232, 234, 239, 1);
border-radius: 2px;
button {
background: unset;
border: 0;
color: #0558e1;
font-size: 14px;
}
}
}
}
}
::v-deep .AbilityApply {
margin-top: 32px;
h3 {
font-size: 16px;
color: #212121;
border-bottom: 1px solid #dddee1;
padding-bottom: 10px;
}
ul {
padding-left: 0px;
li {
list-style: none;
padding: 30px 0;
border-bottom: 1px solid #dddee1;
display: flex;
img {
width: 100px;
height: 100px;
}
div {
margin-left: 16px;
display: flex;
flex-direction: column;
justify-content: center;
h2 {
margin-bottom: 20px;
font-size: 20px;
color: #000;
display: flex;
span {
display: block;
font-size: 14px;
color: #ffffff;
margin-left: 8px;
background: rgba(0, 184, 230, 0.8);
display: flex;
align-items: center;
padding: 0 5px;
border-radius: 4px;
}
}
p {
margin-bottom: 0;
}
}
}
.clearfix:after {
display: block;
content: "";
clear: both;
}
.title {
color: #0558e1;
font-size: 18px;
padding-bottom: 0;
border-bottom: 0;
}
.title:before {
content: "";
width: 6px;
height: 6px;
display: inline-block;
border-radius: 50%;
background: #0558e1;
vertical-align: middle;
margin-right: 10px;
margin-top: 6px;
}
}
}
::v-deep .agreeOr > div {
display: flex;
align-items: center;
.el-input {
margin-right: 10px;
margin-left: 32px;
}
}
::v-deep .agreeOr > div:last-of-type {
margin-top: 15px;
}
.blueAll {
::v-deep .el-radio-button__inner {
width: 80px;
height: 32px;
line-height: 32px;
padding: 0;
border-radius: 2px;
background: #ffffff;
color: #0558e1;
border: 1px solid #0558e1;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
box-shadow: unset !important;
background: #0558e1;
color: #ffffff;
}
}
.inputBule {
width: 55px;
height: 32px;
line-height: 32px;
padding: 0;
border-radius: 2px;
background: #0558e1;
color: #ffffff;
border: 1px solid #0558e1;
}
.redAll {
margin-left: 10px;
::v-deep .el-radio-button__inner {
width: 80px;
height: 32px;
line-height: 32px;
padding: 0;
border-radius: 2px;
border: 1px solid #e83a48;
background: #ffffff;
color: #e83a48;
margin-left: 10px;
}
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
box-shadow: unset !important;
color: #ffffff;
background: #e83a48;
}
}
.blueInput {
width: 55px;
}
</style>

533
back/src/views/modules/sys/CapabilityOperationMonitoring/components/AbnormalSituation.vue Normal file
View File

@ -0,0 +1,533 @@
<template>
<div class="contentBox">
<div class="generalizeBox">
<h3>API概括</h3>
<div class="ApiBox">
<img src="~@/assets/img/CapabilityOperationMonitoring/API-allNum.png" />
<div>
<h4>API总数</h4>
<p>99999</p>
</div>
</div>
<div class="ApiBox">
<img src="~@/assets/img/CapabilityOperationMonitoring/API-badNum.png" />
<div>
<h4>异常API总数</h4>
<p>99999</p>
</div>
</div>
</div>
<div class="abnormalBox">
<h3>API异常分析</h3>
<div class="abnormalBoxBottom">
<!-- API异常次数排行TOP10 -->
<div class="RankingList">
<h4 class="title">API异常次数排行TOP10</h4>
<ul>
<li class="RankingListData" v-for="(item, index) in RankingData" :key="index">
<i><b>{{ index + 1 }}</b></i>
<el-tooltip class="item" effect="dark" :content="item.name" placement="top">
<h6>{{ item.name }}</h6>
</el-tooltip>
<span>{{ item.num }}</span>
</li>
</ul>
</div>
<!-- API异常分布 -->
<div class="AbnormalDistribution">
<h4 class="title">API异常分布</h4>
<div class="container-body1">
<div id="main" style="width: 120px; height: 260px"></div>
</div>
</div>
<!-- API异常次数统计 -->
<div class="AnomalyStatistics">
<h4 class="title">API异常次数统计</h4>
<div class="AnomalyStatisticsTable">
<el-table :data="AnomalyStatisticsTable" border style="width: 100%">
<el-table-column prop="name" label="接口名称" width="80" :resizable="false" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="address" label="接口地址" width="200" :resizable="false" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="method" label="调用方法" :resizable="false" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="type" label="组件类型" :resizable="false" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="provider" label="提供商" :resizable="false" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="state" label="监控状态" :resizable="false" :show-overflow-tooltip="true">
</el-table-column>
</el-table>
</div>
<!-- 分页 -->
<div class="tablePagination">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page="currentPage4" :page-size="5" layout="total, prev, pager, next, jumper" :total="total">
</el-pagination>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
// components: {},
// props: {},
data() {
return {
// 排行榜
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: [
{
name: '接口名称',
address: 'http://hhhhhhhhhhhhhhhhhhhh',
method: '调用方法',
type: '组件类型',
provider: '提供商名称',
state: '监控状态'
},
{
name: '接口名称',
address: 'http://hhhhhhhhhhhhhhhhhhhh',
method: '调用方法',
type: '组件类型',
provider: '提供商名称',
state: '监控状态'
},
{
name: '接口名称',
address: 'http://hhhhhhhhhhhhhhhhhhhh',
method: '调用方法',
type: '组件类型',
provider: '提供商名称',
state: '监控状态'
},
{
name: '接口名称',
address: 'http://hhhhhhhhhhhhhhhhhhhh',
method: '调用方法',
type: '组件类型',
provider: '提供商名称',
state: '监控状态'
},
{
name: '接口名称',
address: 'http://hhhhhhhhhhhhhhhhhhhh',
method: '调用方法',
type: '组件类型',
provider: '提供商名称',
state: '监控状态'
}
],
// 分页
currentPage4: 1,
total: 0
}
},
mounted() {
this.myEchars()
// 分页
this.total = this.AnomalyStatisticsTable.length
},
methods: {
// 分页
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`)
},
myEchars() {
var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom)
var option
option = {
tooltip: {
trigger: 'item'
},
legend: {
itemHeight: 10,
itemWidth: 10,
itemGap: 15,
textStyle: {
fontSize: 12, // 图例文字字体大小
color: '#666666' // 图例文字颜色
},
bottom: '13%',
formatter: function (name) {
var index = 0
var clientlabels = ['智能算法', '图层服务', '开发组件', '业务组件']
var clientcounts = ['25%', '25%', '25%', '25%']
clientlabels.forEach(function (value, i) {
if (value == name) {
index = i
}
})
return name + ' ' + clientcounts[index]
}
},
color: ['#0087ff', '#ff8a00', '#fcc549', '#49c988'],
series: [
{
center: ['50%', '23%'],
name: 'api异常分布',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
// emphasis: {
// label: {
// show: true,
// fontSize: '40',
// fontWeight: 'bold'
// }
// },
labelLine: {
show: false
},
data: [
{ value: 100, name: '智能算法' },
{ value: 100, name: '图层服务' },
{ value: 100, name: '开发组件' },
{ value: 100, name: '业务组件' }
]
}
]
}
option && myChart.setOption(option)
}
}
}
</script>
<style lang="scss" scoped>
.contentBox {
display: flex;
margin: 1.25rem 0;
.generalizeBox {
height: 21.875rem;
margin-right: 1.25rem;
padding: 1.25rem;
border-radius: 0.375rem;
box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
background: #ffffff;
h3 {
font-size: 1.125rem;
color: #333333;
padding: 0;
margin: 0;
margin-bottom: 1.875rem;
}
.ApiBox {
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-blue.png') no-repeat;
background-size: 100%;
width: 22.5rem;
height: 6.875rem;
display: flex;
margin-bottom: 1.25rem;
img {
width: 1.25rem;
height: 1.375rem;
margin: 1.5rem 1.25rem 0;
}
div {
display: flex;
flex-direction: column;
justify-content: center;
h4 {
padding: 0;
margin: 0;
margin-bottom: 1.25rem;
font-size: 1rem;
color: #5f6770;
}
p {
padding: 0;
margin: 0;
font-size: 1.5rem;
color: #1182fb;
font-weight: bold;
}
}
}
.ApiBox:last-of-type {
background: url('~@/assets/img/CapabilityOperationMonitoring/bg-yellow.png') no-repeat;
background-size: 100%;
div {
h4 {
color: #726b5b;
}
p {
color: #fcc549;
}
}
}
}
.abnormalBox {
height: 21.875rem;
padding: 1.25rem;
border-radius: 0.375rem;
box-shadow: 0.3125rem 0.3125rem 0.9375rem 0 #eef4fa;
background: #ffffff;
h3 {
font-size: 1.125rem;
color: #333333;
padding: 0;
margin: 0;
}
.title {
padding: 1.25rem 0 0.625rem;
font-size: 0.875rem;
color: #5a83ae;
font-weight: bold;
margin: 0;
}
.abnormalBoxBottom {
display: flex;
.RankingList {
margin-right: 5.625rem;
ul {
padding: 0;
margin: 0;
}
.RankingListData {
list-style: none;
display: flex;
margin: 0;
padding: 0;
margin-bottom: 0.25rem;
align-items: center;
i {
font-style: normal;
display: block;
width: 3.75rem;
line-height: 1.25rem;
font-size: 0.8125rem;
color: #999999;
font-weight: bold;
b {
padding-left: 0.75rem;
display: block;
height: 1.25rem;
width: 2.25rem;
background: linear-gradient(to right,
rgba(204, 204, 204, 0.6),
rgba(0, 0, 0, 0));
}
}
h6 {
width: 11.25rem;
height: 1.25rem;
line-height: 1.25rem;
font-size: 0.8125rem;
color: #333333;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
font-weight: bold;
}
span {
font-size: 0.9375rem;
color: #000000;
font-weight: bold;
}
}
.RankingListData:nth-of-type(1) i b {
width: 3.75rem;
background: linear-gradient(to right,
rgba(251, 59, 5, 0.6),
rgba(0, 0, 0, 0));
}
.RankingListData:nth-of-type(1) span {
color: #fc5656;
}
.RankingListData:nth-of-type(2) i b {
width: 3.125rem;
background: linear-gradient(to right,
rgba(251, 123, 5, 0.6),
rgba(0, 0, 0, 0));
}
.RankingListData:nth-of-type(2) span {
color: #ff8a00;
}
.RankingListData:nth-of-type(3) i b {
width: 2.75rem;
background: linear-gradient(to right,
rgba(250, 179, 2, 0.6),
rgba(0, 0, 0, 0));
}
.RankingListData:nth-of-type(3) span {
color: #f9af0a;
}
}
.AbnormalDistribution {
margin-right: 3.75rem;
.container-body1 {}
}
.AnomalyStatistics {
h4 {
padding-bottom: 12px;
}
.AnomalyStatisticsTable {
width: 38.2rem;
::v-deep .el-table th {
padding: 0;
height: 34px;
}
::v-deep .el-table td {
padding: 0;
height: 34px;
}
::v-deep .el-table .cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
::v-deep .el-table tbody tr:hover>td {
background-color: transparent;
}
}
.tablePagination {
display: flex;
align-items: center;
justify-content: center;
::v-deep .el-pager li {
min-width: 1.75rem;
padding: 0;
border: 0.0625rem solid #b2b2b2;
border-radius: 0.25rem;
font-size: 0.75rem;
color: #b2b2b2;
margin-right: 0.375rem;
}
::v-deep .el-pager li:last-of-type {
margin-right: 0;
}
::v-deep .el-pagination .btn-prev {
padding: 0;
min-width: 1.75rem;
margin-right: 0.375rem;
border: 0.0625rem solid #1182fb;
border-radius: 0.25rem;
font-size: 12px;
color: #1182fb;
}
::v-deep .el-pagination .btn-next {
padding: 0;
min-width: 1.75rem;
margin-left: 0.375rem;
border: 0.0625rem solid #1182fb;
border-radius: 0.25rem;
font-size: 0.75rem;
color: #1182fb;
}
::v-deep .el-pager li.active {
border: 0.0625rem solid #1182fb;
background: #1182fb;
color: #ffffff;
font-size: 0.75rem;
}
}
}
}
}
}
</style>

1358
back/src/views/modules/sys/CapabilityOperationMonitoring/components/AnalysisOfTheRequest.vue Normal file
View File

File diff suppressed because it is too large Load Diff

197
back/src/views/modules/sys/CapabilityOperationMonitoring/index.vue Normal file
View File

@ -0,0 +1,197 @@
<!-- 权限管理-能力运行监控 -->
<template>
<div class="wrapper">
<div class="topBox">
<h1 class="topTitle">能力运行平台</h1>
<div class="topNav">
<div class="topTab">
<div
@click="timeSwitch('日')"
:class="timeSwitchindex == '日' ? 'timeDown' : ''"
>
当天
</div>
<div
@click="timeSwitch('周')"
:class="timeSwitchindex == '周' ? 'timeDown' : ''"
>
最近一周
</div>
<div
@click="timeSwitch('月')"
:class="timeSwitchindex == '月' ? 'timeDown' : ''"
>
最近一月
</div>
</div>
<div class="topTimme">
<span>选择时间段</span>
<el-date-picker
v-model="timeStart"
type="date"
placeholder="请选择起始时间"
:picker-options="pickerOptions0"
>
</el-date-picker>
<el-date-picker
v-model="timeEnd"
type="date"
placeholder="请选择结束时间"
:picker-options="pickerOptions1"
>
</el-date-picker>
<el-button type="primary" round>确定</el-button>
</div>
</div>
</div>
<div class="capability-operation-monitoring-center">
<abnormal-situation></abnormal-situation>
</div>
<div class="capability-operation-monitoring-bottom">
<analysis-of-the-request
:callTheTrendData="callTheTrendData"
></analysis-of-the-request>
</div>
</div>
</template>
<script>
import AbnormalSituation from './components/AbnormalSituation.vue'
import AnalysisOfTheRequest from './components/AnalysisOfTheRequest.vue'
export default {
components: {
AbnormalSituation,
AnalysisOfTheRequest
},
props: {},
data () {
return {
timeSwitchindex: '日',
timeStart: '',
timeEnd: '',
pickerOptions0: {
disabledDate: (time) => {
if (this.timeEnd != '') {
return time.getTime() > this.timeEnd
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.timeStart
}
},
callTheTrendData: {
start: '',
end: ''
}
}
},
watch: {},
computed: {},
methods: {
timeSwitch (name) {
this.timeSwitchindex = name
if (name == '周') {
const start = parseInt(
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
)
this.callTheTrendData.start = start
console.log(
'this.callTheTrendData',
parseInt((Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000)
)
} else if (name == '月') {
const start = parseInt(
(Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
)
this.callTheTrendData.start = start
console.log(
'this.callTheTrendData',
parseInt((Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000)
)
} else {
this.callTheTrendData.start = Date.parse(new Date()) / 1000
this.callTheTrendData.end = Date.parse(new Date()) / 1000
}
}
},
created () {},
mounted () {
this.timeSwitch('日')
}
}
</script>
<style lang="scss" scoped>
.wrapper {
.topBox {
.topTitle {
font-size: 1.5rem;
color: #000000;
font-weight: bold;
padding: 0.3125rem 0 1.25rem;
margin: 0;
}
.topNav {
display: flex;
justify-content: space-between;
align-items: center;
.topTab {
display: flex;
div {
width: 6.875rem;
height: 1.75rem;
line-height: 1.75rem;
text-align: center;
border-radius: 0.875rem;
font-size: 1rem;
color: #666666;
margin-right: 0.9375rem;
border: 0.0625rem solid #cccccc;
cursor: pointer;
}
.timeDown {
color: #1182fb;
border: 0.0625rem solid #1182fb;
}
}
.topTimme {
display: flex;
align-items: center;
span {
color: #666666;
font-size: 1rem;
display: block;
margin-right: 1.25rem;
}
::v-deep .el-date-editor.el-input {
margin-right: 0.625rem;
width: 9.375rem;
.el-input__inner {
border-radius: 17px;
padding: 0;
padding-left: 10px;
padding-right: 0;
background-image: url(~@/assets/img/CapabilityOperationMonitoring/calendar.png);
background-repeat: no-repeat;
background-size: 18px 18px;
background-position: 118px center;
}
.el-input__prefix {
display: none;
}
}
}
}
}
}
</style>

152
back/src/views/modules/workBench/api.js Normal file
View File

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

223
back/src/views/modules/workBench/components/bottom-view.vue Normal file
View File

@ -0,0 +1,223 @@
<template>
<div class="bottom-view">
<!-- 部门发布动态 -->
<div class="left container">
<content-title :title="title.dynamic"></content-title>
<div class="dynamic-box" v-loading="loadingDynamic">
<div class="dynamicView" v-for="(item, index) in list" :key="index" :number="index + 1" :item="item">
<div class="wrapper">
<div class="content">
<div class="left">{{ item.createDate }}</div>
<el-tooltip effect="dark" :content="item.title" placement="top">
<div class="right ellipsis">{{ item.title || '--' }}</div>
</el-tooltip>
</div>
</div>
</div>
</div>
</div>
<!-- 部门推荐能力 -->
<div class="right container">
<content-title :title="title.recommend"></content-title>
<div class="recommendView">
<a-table :dataSource="tableData" :columns="columns" bordered :pagination="false" :scroll="maxSize"
:loading="loadingTable" size="small" />
</div>
</div>
</div>
</template>
<script>
import contentTitle from "./content-title";
import * as Apis from '../api';
export default {
components: {
contentTitle
},
data() {
return {
title: { dynamic: "部门发布动态", recommend: "部门推荐能力" },
list: [],
columns: [
{
title: "名称",
key: "name",
dataIndex: "name",
width: 250
},
{
title: "类型",
key: "type",
dataIndex: "type",
width: 76
},
{
title: "单位",
key: "deptContacts",
dataIndex: "deptContacts",
width: 144
},
{
title: "时间",
key: "createDate",
dataIndex: "createDate",
width: 153
},
{
title: "当前申请数",
key: "applyCount",
dataIndex: "applyCount",
width: 145
},
],
tableData: [],
maxSize: { y: 195 },
loadingDynamic: false,
loadingTable: false,
};
},
mounted() {
this.getResourceByDept();
this.getApplyByDept()
},
methods: {
// 发布动态
getResourceByDept() {
let data = {
limit: 5,
page: 1
};
this.loadingDynamic = true;
Apis.getResourceByDept(
data,
res => {
this.loadingDynamic = false;
if (res.data.code !== 0) {
return this.$message.error(res.data.msg)
}
console.log('res.data----发布动态-------->', res.data);
this.list = res.data.data.list || []
this.list.push(this.list[0])
this.list.push(this.list[0])
},
err => {
this.loadingDynamic = false;
this.$message.error(err)
console.log('err-----发布动态------->', err);
}
);
},
// 部门推荐能力
getApplyByDept() {
let data = {
limit: 5,
page: 1
};
this.loadingTable = true;
Apis.getApplyByDept(
data,
res => {
this.loadingTable = false;
if (res.data.code !== 0) {
return this.$message.error(res.data.msg)
}
console.log('res.data------部门推荐能力------>', res.data);
this.tableData = res.data.data.list || [];
},
err => {
this.loadingTable = false;
this.$message.error(err)
console.log("err", err);
}
);
}
}
}
</script>
<style lang="scss" scoped>
.ellipsis {
//超出一行省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.bottom-view {
width: 100%;
height: 335px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.container {
background: #fff;
width: 800px;
height: 335px;
padding: 0px 0 20px 10px;
}
}
.dynamic-box {
width: 770px;
height: 335px;
}
.dynamicView {
cursor: pointer;
width: 770px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
.wrapper {
height: 50px;
width: 770px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-image: url("../images/bgIndex.png");
background-repeat: no-repeat;
background-color: #f4f5f8;
border-radius: 1px;
.content {
width: 760px;
padding-right: 20px;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
margin-left: 12px;
font-size: 16px;
.left {
width: 159px;
color: #2b2b2b;
font-size: 14px;
}
.right {
font-size: 18px;
color: #464645;
width: 600px;
}
}
}
}
.recommendView {
cursor: pointer;
width: 770px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 7px;
}
::v-deep .ant-table-thead {
background-color: #f4f5f8;
}
</style>

32
back/src/views/modules/workBench/components/center-view.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="center-view">
<!-- 频率 -->
<frequency-top-5-view></frequency-top-5-view>
<!-- 趋势 -->
<trend-view></trend-view>
<!-- 风险 -->
<risk-view></risk-view>
</div>
</template>
<script>
import frequencyTop5View from './frequency-top5-view.vue'
import RiskView from './risk-view.vue'
import TrendView from './trend-view.vue'
export default {
components: { frequencyTop5View, TrendView, RiskView },
}
</script>
<style lang="scss" scoped>
.center-view {
width: 100%;
height: 335px;
margin-bottom: 16px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
</style>

28
back/src/views/modules/workBench/components/content-title.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div class="content-title">
<div>{{ title }}</div>
<slot></slot>
</div>
</template>
<script>
import contentTitle from "./content-title";
export default {
name: "contentTitle",
props: {
title: String
},
};
</script>
<style lang="scss" scoped>
.content-title {
height: 48px;
line-height: 48px;
font-size: 18px;
display: flex;
align-items: center;
justify-content: space-between;;
// color: #fff;
}
</style>

230
back/src/views/modules/workBench/components/dept-chart-view.vue Normal file
View File

@ -0,0 +1,230 @@
<template>
<div class="chart-box">
<div class="title">{{ title }}</div>
<div v-if="dataListCopy.length > 0" style="width:260px; height:232px" class="dept-chart-view" :id="id">
</div>
<div class="no-data" v-else>暂无数据</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
dataListCopy: [],
myChart: null,
}
},
props: {
id: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
dataList: {
type: Array,
default: () => []
},
colorArray: {
type: Array,
default: () => [
'#fe845e', '#ff3e55', '#d5c438', '#ff9999', '#9c78ed', '#48c760', '#48c6c7', '#0058e1',
]
},
},
watch: {
dataList: {
handler(newVal, oldVal) {
if (newVal) {
this.dataListCopy = newVal;
if (document.getElementById(this.id)) {
// 解决数据初始渲染不出来的问题
setTimeout(() => {
this.initChart()
}, 2000)
}
}
},
deep: true,
immediate: true
},
},
mounted() {
setTimeout(() => {
this.initChart()
}, 2000)
},
methods: {
initChart() {
var chartDom = document.getElementById(this.id);
if (this.myChart) {
this.myChart.dispose()
}
this.myChart = chartDom && echarts.init(chartDom);
let lengendArr = this.dataListCopy.filter(v => v.name);
let total = 0;
this.dataListCopy.map(v => {
if (v.value || v.value === 0) {
total = total + Number(v.value || 0)
}
})
let option = {
"animation": true,
title: [
{
text: '{val|' + total + '} {unit|' + '个' + '}',
top: 'top',
left: 'center',
textStyle: {
rich: {
val: {
fontSize: 20,
fontWeight: 'bold',
color: '#212121',
padding: [80, 0]
},
unit: {
fontSize: 16,
fontWeight: 'normal',
color: '#212121',
padding: [80, 0],
}
},
},
},
],
tooltip: {
triagger: 'item',
formatter: (params) => {
let str = ''
if (params.name == '线') {
str = ''
} else {
str = `<span style="display:inline-block;margin-right:5px;
border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${params.name}: ${params.value}`
}
return str;
}
},
"legend": {
type: 'scroll',
"width": "90%",
"left": "center",
"textStyle": {
"color": "#212121",
"fontSize": 12
},
"icon": "circle",
"right": "0",
"bottom": "30",
// "padding": [10, 60],
"itemGap": 10,
"data": lengendArr
},
"series": [{
"type": "pie",
"center": ["50%", "40%"],
"radius": ["50%", "63%"],
"color": this.colorArray,
"startAngle": 135,
label: {
show: false
},
"emphasis": {
"label": {
"show": false,
"formatter": "{b|{b}:} {per|{d}%} ",
"backgroundColor": "rgba(255, 147, 38, 0)",
"borderColor": "transparent",
"borderRadius": 4,
"rich": {
"a": {
"color": "#999",
"lineHeight": 22,
"align": "center"
},
"hr": {
"borderColor": "#aaa",
"width": "100%",
"borderWidth": 1,
"height": 0
},
"b": {
"color": "#fff",
"fontSize": 18,
"lineHeight": 33
},
"c": {
"fontSize": 14,
"color": "#eee"
},
"per": {
"color": "#FDF44E",
"fontSize": 25,
"padding": [5, 6],
"borderRadius": 2
}
}
}
},
data: this.dataListCopy,
},
{
"type": "pie",
"center": ["50%", "40%"],
"radius": ["38%", "39%"],
"label": {
"show": false
},
hoverAnimation: false,
showTooltip: false,
color: ['#d8dde8'],
"data": [{
"value": 0,
"name": "线",
}]
}
]
}
this.myChart && option && this.myChart.setOption(option, true);
}
}
}
</script>
<style lang="scss" scoped>
.chart-box {
width: 250px;
height: 232px;
margin: 1px;
}
.dept-chart-view {
width: 250px;
height: 232px;
margin: 1px;
}
.title {
width: 250px;
font-size: 18px;
color: #212121;
text-align: center;
line-height: 30px;
}
.no-data {
width: 250px;
height: 232px;
line-height: 232px;
font-size: 16px;
color: #212121;
text-align: center;
}
</style>

163
back/src/views/modules/workBench/components/dept-todo-view.vue Normal file
View File

@ -0,0 +1,163 @@
<template>
<div class="dept-box" :class="dataInfo.noMarginleft ? 'no-margin-left' : ''">
<div class="left-box"
:style="{ 'background': dataInfo.bgColor, 'border-right': `1px solid ${dataInfo.borderColor}` }">
<div class="content">
<img class="img" :src="dataInfo.imgSrc" />
<div class="title">{{ title }}</div>
<div class="flex-row-bottom">
<span class="num" :style="{ 'color': dataInfo.textColor }">{{ formatNum(dataInfo.num) }}</span>
<span class="unit" :style="{ 'color': dataInfo.textColor }">{{ dataInfo.unit || '个' }}</span>
</div>
</div>
</div>
<div class="list-box" v-if="dataInfo.list.length > 0">
<div v-for="(item, i) in dataInfo.list" :key="i">
<el-tooltip effect="dark" :content="item[dataInfo.nameStr]" placement="top">
<div class="list-item ellipsis">
{{ item[dataInfo.nameStr] || '--' }}
</div>
</el-tooltip>
</div>
<div class="more" @click="goPage(dataInfo.url)">
查看更多 >
</div>
</div>
<div class="list-box flex-row-center no-data" v-else>
暂无数据
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
props: {
dataInfo: {
type: Object,
default: () => { }
},
title: {
type: String,
default: ''
},
},
methods: {
formatNum(num) {
return num || num === 0 ? num : '--'
},
goPage(url) {
this.$router.push({
path: url
});
},
}
}
</script>
<style lang="scss" scoped>
.ellipsis {
//超出一行省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.no-margin-left {
margin-left: 0;
}
.flex-row-bottom {
display: flex;
justify-content: center;
align-items: baseline;
}
.flex-row-center {
display: flex;
justify-content: center;
align-items: center;
}
.dept-box {
display: flex;
align-items: center;
width: 394px;
height: 252px;
margin: 16px;
background: rgba($color: #f1f3f6, $alpha: 0.8);
}
.left-box {
display: flex;
justify-content: center;
// width: 80px;
width: 100px;
border-radius: 2px;
height: 100%;
}
.img {
height: 50px;
width: 50px;
margin: 0 auto;
}
.content {
// margin-top: 57px;
display: flex;
flex-direction: column;
justify-content: center;
}
.title {
font-size: 18px;
color: #000;
margin-top: 25px;
margin-bottom: 18px;
text-align: center;
}
.num {
font-size: 30px;
}
.unit {
font-size: 16px;
margin-left: 2px;
}
.list-box {
width: 314px;
height: 252px;
padding: 0 16px;
}
.list-item {
height: 44px;
line-height: 44px;
box-sizing: border-box;
border-bottom: 1px dashed #c6c6c6;
font-size: 16px;
color: #212121;
}
.more {
color: #212121;
font-size: 14px;
height: 32px;
line-height: 32px;
text-align: right;
cursor: pointer;
}
.no-data {
font-size: 16px;
color: #212121;
}
</style>

225
back/src/views/modules/workBench/components/frequency-top5-view.vue Normal file
View File

@ -0,0 +1,225 @@
<template>
<div class="frequency">
<contentTitle title="部门能力使用频率TOP5"></contentTitle>
<div v-if="!noData" v-loading="loading">
<div class="no-box">
<div class="no no2">
<el-tooltip effect="dark" :content="no2Obj.name" placement="top">
<div class="name ellipsis" :style="{ color: colorObj[2] }">{{ no2Obj.name || '--' }}</div>
</el-tooltip>
<div class="count">{{ formatCount(no2Obj.count) }}</div>
</div>
<div class="no no1">
<el-tooltip effect="dark" :content="no1Obj.name" placement="top">
<div class="name ellipsis" :style="{ color: colorObj[1] }">{{ no1Obj.name || '--' }}</div>
</el-tooltip>
<div class="count">{{ formatCount(no1Obj.count) }}</div>
</div>
<div class="no no3">
<el-tooltip effect="dark" :content="no3Obj.name" placement="top">
<div class="name ellipsis" :style="{ color: colorObj[3] }">{{ no3Obj.name || '--' }}</div>
</el-tooltip>
<div class="count">{{ formatCount(no3Obj.count) }}</div>
</div>
</div>
<div class="flex-row-between row-name" v-for="(data, i) in listInfo" :key="i">
<div class="left">
<div class="row-index">{{ i + 3 }}</div>
<el-tooltip effect="dark" :content="data.name" placement="top">
<div class="name-text ellipsis">{{ data.name || '--' }}</div>
</el-tooltip>
</div>
<div class="count-text">{{ formatCount(data.count) }}</div>
</div>
</div>
<div class="no-data" v-else>暂无数据</div>
</div>
</template>
<script>
import * as Apis from '../api.js'
import contentTitle from './content-title.vue'
export default {
data() {
return {
listInfo: [],
colorObj: {
1: '#4658710',
2: '#734204',
3: '#805932',
},
no1Obj: {
name: '',
count: '',
},
no2Obj: {
name: '',
count: '',
},
no3Obj: {
name: '',
count: '',
},
noData: false,
loading: true,
};
},
mounted() {
this.getData();
},
methods: {
// 频率
getData() {
let data = {
limit: 5,
page: 1,
};
this.loading = true
Apis.getFrequence(data, res => {
this.loading = false;
if (res.data.code !== 0) {
return this.$message.error(res.data.msg);
}
console.log("res----频率-------->", res.data);
let _arr = res.data.data.records || [];
if (_arr.length == 0) {
this.noData = true
return;
}
for (let i = 0; i < 3; i++) {
let k = i + 1;
this[`no${k}Obj`].name = _arr[i].name
this[`no${k}Obj`].count = _arr[i].count
}
this.listInfo = []
this.listInfo.push(_arr[3] || {})
this.listInfo.push(_arr[4] || {})
}, err => {
this.loading = false;
this.$message.error(err);
});
},
formatCount(count) {
return count || count === 0 ? count : '--'
}
},
components: { contentTitle }
}
</script>
<style lang="scss" scoped>
.ellipsis {
//超出一行省略号
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.flex-row-between {
display: flex;
width: 100%;
margin-bottom: 8px;
height: 52px;
align-items: center;
justify-content: space-between;
padding-left: 10px;
padding-right: 16px;
box-sizing: border-box;
}
.left {
display: flex;
}
.frequency {
width: 540px;
height: 335px;
background: #fff;
padding: 0 16px;
box-sizing: border-box;
}
.no-box {
display: flex;
align-items: center;
justify-content: flex-start;
margin-bottom: 24px;
}
.no1 {
width: 170px;
height: 120px;
margin-top: -20px;
background-image: url("~@/assets/img/workBench/NO1.png");
}
.no {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.no2 {
width: 170px;
height: 120px;
margin-top: 10px;
background-image: url("~@/assets/img/workBench/NO2.png");
}
.no3 {
width: 170px;
height: 120px;
margin-top: 10px;
background-image: url("~@/assets/img/workBench/NO3.png");
}
.name {
font-size: 16px;
margin-bottom: 10px;
margin-top: 70px;
width: 150px;
text-align: center;
}
.count {
font-size: 18px;
color: #2b2b2b;
}
.row-name {
background: #f4f5f8;
border-radius: 1px;
}
.row-index {
font-size: 16px;
color: #414d60;
}
.name-text {
font-size: 16px;
color: #464545;
margin-left: 10px;
width: 430px;
}
.num-text {
font-size: 14px;
color: #2b2b2b;
}
.no-data {
width: 540px;
height: 300px;
background: #fff;
line-height: 232px;
font-size: 16px;
color: #212121;
text-align: center;
}
</style>

129
back/src/views/modules/workBench/components/lineOption.js Normal file
View File

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

32
back/src/views/modules/workBench/components/risk-view.vue Normal file
View File

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

144
back/src/views/modules/workBench/components/trend-view.vue Normal file
View File

@ -0,0 +1,144 @@
<template>
<div class="trend">
<content-title title="部门发布能力被调用趋势">
<div class="button">
<div
v-for="(item, idx) in titles"
:key="item"
@click="handleTitleSwitch(idx)"
class="top-title"
:class="{ active: idx == selectedTitle }"
>{{ item }}</div>
</div>
</content-title>
<div id="trendId" class="trend-echart"></div>
</div>
</template>
<script>
import { trendLineChart } from "./lineOption";
import contentTitle from "./content-title";
import * as Apis from "../api";
export default {
data() {
return {
titles: ["近七日", "月度"],
selectedTitle: 0,
trendChartData: {},
startDate: "",
endDate:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate()
};
},
components: {
contentTitle
},
mounted() {
this.initChart();
},
watch: {
selectedTitle: {
handler: function(newVal, oldVal) {
this.startDate = this.getData(newVal == 0 ? 7 : 30);
},
deep: true,
immediate: true
}
},
methods: {
//发布动态
initChart() {
Apis.getByDept(
{
startDate: this.startDate,
endDate: this.endDate
},
res => {
if (res.data.code !== 0) {
return;
}
this.data = res.data.data.browseDayList || [];
let xaxis = [],
ydata = [];
this.data.forEach(v => {
Object.keys(v).map((key, value) => {
xaxis.push(key);
ydata.push(value);
});
});
console.log(xaxis)
console.log(ydata)
this.trendChartData = {
xaxis: xaxis,
ydata: ydata
};
this.$nextTick(() => {
trendLineChart("trendId", this.trendChartData);
});
},
err => {
console.log("err", err);
}
);
},
handleTitleSwitch(idx) {
this.selectedTitle = idx;
this.startDate = this.getData(this.selectedTitle == 0 ? 7 : 30);
console.log(this.startDate);
this.initChart();
},
getData(aa) {
let date1 = new Date(),
time1 =
date1.getFullYear() +
"-" +
(date1.getMonth() + 1) +
"-" +
date1.getDate(); //time1表示当前时间
let date2 = new Date(date1);
date2.setDate(date1.getDate() - aa);
let time2 =
date2.getFullYear() +
"-" +
(date2.getMonth() + 1) +
"-" +
date2.getDate();
return time2;
}
}
};
</script>
<style lang="scss" scoped>
.trend {
width: 516px;
height: 335px;
background: #fff;
margin-right: 4px;
padding: 0 20px 0 20px;
.trend-echart {
height: 280px;
width: 500px;
margin: 0 auto;
}
.button {
display: flex;
align-items: center;
justify-content: space-between;
width: 110px;
.top-title {
font-size: 16px;
height: 30px;
line-height: 30px;
&.active {
color: #0058e1;
font-weight: bold;
border-bottom: 2px solid #0058e1;
}
}
}
}
</style>

BIN
back/src/views/modules/workBench/images/bgIndex.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

236
back/src/views/modules/workBench/workBench.vue Normal file
View File

@ -0,0 +1,236 @@
<template>
<div class="work-brnch-box">
<!-- 上 -->
<div class="flex-row-start top">
<div class="flex-row-start dept-left">
<dept-todo-view title="部门待办" v-loading="loadingToDo" :dataInfo="toToData"></dept-todo-view>
<dept-todo-view title="部门已办" v-loading="loadingHasToDo" :dataInfo="hasToDodoData"
style="margin-left: 0"></dept-todo-view>
</div>
<div class="flex-row-start dept-chart-box">
<dept-chart-view id="shelves" title="部门上架" v-loading="loadingResource" :dataList="resourceData"
:colorArray="resourceColor">
</dept-chart-view>
<dept-chart-view id="apply" title="部门申请" v-loading="loadingApply" :dataList="applyData"
:colorArray="applyColor">
</dept-chart-view>
<dept-chart-view id="demand" title="部门需求" v-loading="loadingRequire" :dataList="requireData"
:colorArray="requireColor">
</dept-chart-view>
</div>
</div>
<!-- 中 -->
<div class="center">
<center-view></center-view>
</div>
<!-- 下 -->
<div class="bottom">
<bottom-view></bottom-view>
</div>
</div>
</template>
<script>
import BottomView from '../workBench/components/bottom-view.vue'
import CenterView from '../workBench/components/center-view.vue'
import DeptChartView from '../workBench/components/dept-chart-view.vue'
import deptTodoView from '../workBench/components/dept-todo-view.vue'
import * as Apis from './api.js'
export default {
components: {
deptTodoView,
BottomView,
CenterView,
DeptChartView,
},
data() {
return {
// 部门待办
toToData: {
color: '#f86f01',
imgSrc: require('@/assets/img/workBench/todo.png'),
bgColor: 'rgba(228,138,1,0.12)',
borderColor: 'rgba(250,123,12,0.54)',
textColor: '#f86f01',
num: 0,
list: [],
nameStr: 'taskName',
url: 'activiti-my-todo-task'
},
// 部门已办
hasToDodoData: {
noMarginleft: true,
color: '#21b107',
imgSrc: require('@/assets/img/workBench/hasToDo.png'),
bgColor: 'rgba(37,165,13,0.12)',
borderColor: 'rgba(49,194,20,0.54)',
textColor: '#21b107',
num: 0,
list: [],
nameStr: 'processDefinitionName',
url: 'activiti-my-join-task'
},
// 部门申请
resourceData: [],
resourceColor: ['#7b2cff', '#fd5151', , '#2ca1ff', '#0adbfa', '#febe13', '#65e5dd', '#f071ff', '#85f67a'],
// 部门申请
applyData: [],
applyColor: ["#5085f2", "#e75fc3", "#f87be2", "#f2719a", "#fca4bb", "#f59a8f", "#fdb301", "#57e7ec", "#cf9ef1"],
// 部门需求
requireData: [],
requireColor: ['#FD866A', '#9E87FF', '#58D5FF', '#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A',],
loadingToDo: false,
loadingHasToDo: false,
loadingResource: false,
loadingApply: false,
loadingRequire: false,
}
},
mounted() {
// 部门待办
this.getToDo()
// 部门已办
this.getHasToDo()
// 上架
this.getShelvesTotal()
// 申请
this.getApplyTotal()
// 需求
this.getRequireTotal()
},
methods: {
// 待办
getToDo() {
this.loadingToDo = true;
let data = {
limit: 5,
page: 1,
}
Apis.getToDoTask(data, res => {
this.loadingToDo = false;
if (res.data.code !== 0) {
return this.$message.error(res.data.msg)
}
console.log('res----待办-------->', res.data);
this.toToData.list = res.data.data.records || []
this.toToData.num = res.data.data.total || 0
}, err => {
this.$message.error(err);
this.loadingToDo = false;
})
},
// 已办
getHasToDo() {
let data = {
limit: 5,
page: 1,
}
this.loadingHasToDo = true;
Apis.getHasToDoTask(data, res => {
this.loadingHasToDo = false;
if (res.data.code !== 0) {
return this.$message.error(res.data.msg)
}
console.log('res----已办-------->', res.data);
this.hasToDodoData.list = res.data.data.records || []
this.hasToDodoData.num = res.data.data.total || 0
}, err => {
this.$message.error(err)
this.loadingHasToDo = false;
console.log('err-----已办------->', err);
})
},
// 部门上架
getShelvesTotal() {
this.loadingResource = true;
Apis.getTotalByDept({}, res => {
this.loadingResource = false;
if (res.data.code !== 0) {
return this.$message.error(res.data.msg)
}
console.log('res----部门上架-------->', res.data);
this.resourceData = this.formatList(res.data.data.total || [])
}, err => {
this.$message.error(err)
this.loadingResource = false;
})
},
// 部门申请
getApplyTotal() {
this.loadingApply = true;
Apis.getApply({}, res => {
this.loadingApply = false;
if (res.data.code !== 0) {
return this.$message.error(res.data.msg)
}
console.log('res----部门申请-------->', res.data);
this.applyData = this.formatList(res.data.data.total || [])
}, err => {
this.$message.error(err)
this.loadingApply = false;
})
},
formatList(list = [], nameStr = 'type') {
let arr = []
list.map(v => {
let obj = {}
obj.name = v[nameStr];
obj.value = v.count;
arr.push(obj)
})
return arr;
},
// 部门需求
getRequireTotal() {
this.loadingRequire = true;
Apis.getRequire({}, res => {
this.loadingRequire = false;
if (res.data.code !== 0) {
return this.$message.error(res.data.msg)
}
console.log('res----部门需求-------->', res.data);
this.requireData = this.formatList(res.data.data.total || [], 'flag')
}, err => {
this.$message.error(err)
this.loadingRequire = false;
})
},
},
}
</script>
<style lang="scss" scoped>
.margin-h-16 {
margin: 0 16px;
}
.flex-row-start {
display: flex;
align-items: center;
justify-content: flex-start;
}
.work-brnch-box {
.top {
height: 284px;
margin-bottom: 16px;
}
.dept-left {
width: 836px;
background: #fff;
margin-right: 16px;
}
.dept-chart-box {
width: 780px;
height: 100%;
background: #fff;
}
}
</style>

5
front/public/index.html
View File

@ -2,7 +2,7 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-03-29 16:45:25 * @Date: 2022-03-29 16:45:25
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-25 15:55:02 * @LastEditTime: 2022-07-04 11:57:44
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<!DOCTYPE html> <!DOCTYPE html>
@ -45,9 +45,10 @@
// window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://10.134.135.9:8888/renren-admin';
// 开发 // 开发
// window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797'; // window.SITE_CONFIG['backUrl'] = 'http://15.2.21.238:9797';
// window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796'; // window.SITE_CONFIG['previewUrl'] = 'http://15.2.21.238:9796/';
// window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/'; // window.SITE_CONFIG['frontUrl'] = 'http://15.2.21.238:9796/document/#/devModelFile/';
// window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin'; // window.SITE_CONFIG['apiURL'] = 'http://15.2.21.238:8888/renren-admin';
window.SITE_CONFIG['POI_URL'] = 'http://15.72.178.129:8090/iserver/services/addressmatch-qingdaoPOI181015/restjsr/v1/address';
// 穿透版本 // 穿透版本
// window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797'; // window.SITE_CONFIG['backUrl'] = 'http://124.222.94.39:9797';
// window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/'; // window.SITE_CONFIG['previewUrl'] = 'http://124.222.94.39:9796/';

16
front/public/static/config/location.js
View File

@ -2,18 +2,20 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2020-07-07 16:03:23 * @Date: 2020-07-07 16:03:23
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-25 16:47:35 * @LastEditTime: 2022-07-04 11:56:58
* @Description: 数据资源参数配置 * @Description: 数据资源参数配置
*/ */
// const newLocation = 'qingdao'
// const newLocation = 'baotou'
const newLocation = 'qingdao' const newLocation = 'qingdao'
// const newLocation = 'baotou'
// const newLocation = 'xihaian'
// 数据资源数据 // 数据资源数据
const whoShow = {} const whoShow = {}
const launchedDataNumObject = {} const launchedDataNumObject = {}
// 导航数据 // 导航数据
const navListManagement = {} const navListManagement = {}
// 基础设施
const infrastructure = {}
// 区市站点数据 // 区市站点数据
const mapTestNum = {} const mapTestNum = {}
// 底部数据 // 底部数据
@ -21,12 +23,14 @@ const footerDataList = {}
// qingdao // qingdao
if (newLocation === 'qingdao') { if (newLocation === 'qingdao') {
whoShow.itShowQingDao = true whoShow.itShowQingDao = true
infrastructure.deptName = '青岛市大数据发展管理局'
infrastructure.deptId = '1067246875800000066'
navListManagement.navList = [ navListManagement.navList = [
{ name: '共享门户', key: 'home' }, { name: '共享门户', key: 'home' },
{ name: '能力集市', key: 'DetailsPageconetent' }, { name: '能力集市', key: 'DetailsPageconetent' },
{ name: '能力云图', key: 'capabilityCloud' }, { name: '能力云图', key: 'capabilityCloud' },
{ name: '能力统计', key: 'abilityStatistics' }, { name: '能力统计', key: 'abilityStatistics' },
{ name: '开发指南', key: 'developmentGuide' }, // { name: '开发指南', key: 'developmentGuide' },
{ name: '需求中心', key: 'demandCenter' }, { name: '需求中心', key: 'demandCenter' },
// { name: '个人中心', key: 'personalCenter' }, // { name: '个人中心', key: 'personalCenter' },
{ name: '区市站点', key: 'mapTest' }, { name: '区市站点', key: 'mapTest' },
@ -112,7 +116,7 @@ else if (newLocation === 'baotou') {
{ name: '能力集市', key: 'DetailsPageconetent' }, { name: '能力集市', key: 'DetailsPageconetent' },
{ name: '能力云图', key: 'capabilityCloud' }, { name: '能力云图', key: 'capabilityCloud' },
{ name: '能力统计', key: 'abilityStatistics' }, { name: '能力统计', key: 'abilityStatistics' },
{ name: '开发指南', key: 'developmentGuide' }, // { name: '开发指南', key: 'developmentGuide' },
{ name: '需求中心', key: 'demandCenter' }, { name: '需求中心', key: 'demandCenter' },
// { name: '个人中心', key: 'personalCenter' }, // { name: '个人中心', key: 'personalCenter' },
// { name: '区市站点', key: 'mapTest' }, // { name: '区市站点', key: 'mapTest' },
@ -148,7 +152,7 @@ else if (newLocation === 'xihaian') {
{ name: '能力集市', key: 'DetailsPageconetent' }, { name: '能力集市', key: 'DetailsPageconetent' },
{ name: '能力云图', key: 'capabilityCloud' }, { name: '能力云图', key: 'capabilityCloud' },
{ name: '能力统计', key: 'abilityStatistics' }, { name: '能力统计', key: 'abilityStatistics' },
{ name: '开发指南', key: 'developmentGuide' }, // { name: '开发指南', key: 'developmentGuide' },
{ name: '需求中心', key: 'demandCenter' }, { name: '需求中心', key: 'demandCenter' },
// { name: '个人中心', key: 'personalCenter' }, // { name: '个人中心', key: 'personalCenter' },
// { name: '区市站点', key: 'mapTest' }, // { name: '区市站点', key: 'mapTest' },

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

@ -80,3 +80,17 @@ export function dataResourceInfo(params) {
params, params,
}) })
} }
//能力云图-调用趋势
export function callTheTrendPort(start, end, params) {
return request({
url: '/metrics/api/v1/query_range?query=sum(increase(apigateway_http_status%5B1d%5D))&start=' + start + '&end=' + end + '&step=' + params,
method: 'get',
})
}
//能力云图-调用次数
export function totalCallsSnum(params) {
return request({
url: '/metrics/api/v1/query?query=sum(apigateway_http_status)&time=1655793262.495' + params,
method: 'get',
})
}

36
front/src/api/home.js
View File

@ -2,7 +2,7 @@
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-04-01 19:19:40 * @Date: 2022-04-01 19:19:40
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-22 18:59:03 * @LastEditTime: 2022-06-30 19:36:48
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
*/ */
import request from '@/utils/request' import request from '@/utils/request'
@ -114,7 +114,7 @@ export function lastestPage(params) {
// 提交申请 // 提交申请
export function submitApply(data) { export function submitApply(data) {
return request({ return request({
url: '/ability/center/apply', url: '/ability/center/v2/apply',
method: 'post', method: 'post',
data, data,
}) })
@ -297,3 +297,35 @@ export function getDataResource(data) {
data, data,
}) })
} }
//应用详情列表
export function queryPartAppByKeyId(params) {
return request({
url: 'dataResourceRel/queryPart4AppByKeyId',
method: 'get',
params,
})
}
//组件详情列表
export function queryPartAppByKeyId2(params) {
return request({
url: 'dataResourceRel/queryApp4PartByKeyId',
method: 'get',
params,
})
}
//首页 基础设施
export function selectInfrastructureList(params) {
return request({
url: 'resource/selectInfrastructureList',
method: 'get',
params,
})
}
// 根据instanceId获取摄像头列表
export function getApplyCameraList(id) {
return request({
url: '/resource/getApplyCameraList/' + id,
method: 'get',
})
}

26
front/src/api/personalCenter.js
View File

@ -150,6 +150,16 @@ export function nengliziyuanshangjiaapply(params) {
params, params,
}) })
} }
export function getTaskVariables(params) {
return request({
url:
'/act/task/getTaskVariables?taskId=' +
params.taskId +
'&variableName=tAbilityApplicationDTOList',
method: 'get',
params,
})
}
// 能力下架申请 // 能力下架申请
export function undercarriage(data) { export function undercarriage(data) {
return request({ return request({
@ -189,3 +199,19 @@ export function getCategoryTreePage(params) {
params, params,
}) })
} }
// 申购车根据部门分类
export function selectResourceCarGroupByDept(params) {
return request({
url: '/resourcecar/selectResourceCarGroupByDept',
method: 'get',
params,
})
}
// 申购车根据部门查询
export function selectResourceListByDept(params) {
return request({
url: '/resourcecar/selectResourceListByDept',
method: 'get',
params,
})
}

BIN
front/src/assets/home/kfzj_square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
front/src/assets/home/sjzy_square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
front/src/assets/home/sxt_square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
front/src/assets/home/tcfw_square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
front/src/assets/home/ywzj_square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
front/src/assets/home/yyzy_square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
front/src/assets/home/znsf_square.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
front/src/assets/newHome/add-on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
front/src/assets/newHome/add.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
front/src/assets/newHome/delete-on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
front/src/assets/newHome/pk-down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
front/src/assets/newHome/pk-on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

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

@ -118,6 +118,16 @@ export const constantRoutes = [
icon: 'error-warning-line', icon: 'error-warning-line',
}, },
}, },
{
path: '/algorithmCompare',
name: 'algorithmCompare',
hidden: true,
component: () => import('@/views/home/algorithmCompare'),
meta: {
title: '算法对比',
icon: 'error-warning-line',
},
},
{ {
path: '/addApplication', path: '/addApplication',
name: 'addApplication', name: 'addApplication',

43
front/src/supermap/advance-init.js
View File

@ -1681,6 +1681,7 @@ export function MapFun(mapObj) {
// }) // })
// } // }
_removeLayerByLayerName(layerName)
let layers = null let layers = null
// 判断是否是聚合图层 // 判断是否是聚合图层
layers = createMarkerClusterLayer() layers = createMarkerClusterLayer()
@ -1691,12 +1692,7 @@ export function MapFun(mapObj) {
features.map((feature) => { features.map((feature) => {
var bounds = map.getBounds() var bounds = map.getBounds()
// console.log("看看有没有坐标",feature.latLng); // console.log("看看有没有坐标",feature.latLng);
if ( if ( feature.hasOwnProperty('latLng')) {
layerName == '全部'
? feature.hasOwnProperty('latLng') &&
bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))
: feature.hasOwnProperty('latLng')
) {
const marker = L.marker(feature.latLng, { icon }) const marker = L.marker(feature.latLng, { icon })
if (createPopupFun !== null) { if (createPopupFun !== null) {
marker.uuid = feature.uuid || '' marker.uuid = feature.uuid || ''
@ -1730,43 +1726,14 @@ export function MapFun(mapObj) {
} }
}) })
} }
marker.on('click', e=>{
console.log('点位数据', e)
})
layers.addLayer(marker) layers.addLayer(marker)
} }
}) })
featureGroup.addLayer(layers) featureGroup.addLayer(layers)
layerGroup.set(layerName, layers) layerGroup.set(layerName, layers)
// map.on('zoom', () => {
// _removeLayerByLayerName(layerName)
// let layers = null
// // 判断是否是聚合图层
// layers = createMarkerClusterLayer()
// features.map(feature => {
// var bounds = map.getBounds()
// // console.log("看看有没有坐标",feature.latLng);
// if (feature.hasOwnProperty('latLng') && bounds.contains(L.latLng(feature.latLng.lat, feature.latLng.lng))) {
// const marker = L.marker(feature.latLng, { icon })
// if (createPopupFun !== null) {
// marker.uuid = feature.uuid || ''
// marker.resId = feature.resId || ''
// marker.on('click', async e => {
// if (feature.resourceName === 'video') {
// const params = [feature.indexCode]
// DS.openVideo(params)
// } else {
// const elementHtml = createPopupFun(feature)
// if (elementHtml) {
// console.log('L._addReMapWithter===============>', feature.latLng, elementHtml, map)
// L.popup({ className: 'detail-dialog' }).setLatLng(feature.latLng).setContent(elementHtml).openOn(map)
// }
// }
// })
// }
// layers.addLayer(marker)
// }
// })
// featureGroup.addLayer(layers)
// layerGroup.set(layerName, layers)
// })
} }
/** /**
* 点击展示弹窗 * 点击展示弹窗

18
front/src/utils/request.js
View File

@ -87,9 +87,9 @@ instance.interceptors.request.use(
*/ */
instance.interceptors.response.use( instance.interceptors.response.use(
(response) => { (response) => {
console.log('接口返回', response) // console.log('接口返回', response)
console.log('接口返回headers', response.headers) // console.log('接口返回headers', response.headers)
console.log('接口返回REDIRECT', response.headers.redirect) // console.log('接口返回REDIRECT', response.headers.redirect)
if (response.headers.redirect === '/#/login') { if (response.headers.redirect === '/#/login') {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g) var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
@ -109,7 +109,7 @@ instance.interceptors.response.use(
new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com
} }
} }
console.log('已清除') // console.log('已清除')
setTimeout(() => { setTimeout(() => {
location.reload() location.reload()
}, 1000) }, 1000)
@ -147,13 +147,13 @@ instance.interceptors.response.use(
// } // }
}, },
(error) => { (error) => {
console.log('接口error', error) // console.log('接口error', error)
if (loadingInstance) loadingInstance.close() if (loadingInstance) loadingInstance.close()
const { response, message } = error const { response, message } = error
if (error.response && error.response.data) { if (error.response && error.response.data) {
console.log('接口返回', response) // console.log('接口返回', response)
console.log('接口返回headers', response.headers) // console.log('接口返回headers', response.headers)
console.log('接口返回REDIRECT1111', response.headers.redirect) // console.log('接口返回REDIRECT1111', response.headers.redirect)
if (response.headers.redirect === '/#/login') { if (response.headers.redirect === '/#/login') {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g) var keys = document.cookie.match(/[^ =;]+(?=\=)/g)
if (keys) { if (keys) {
@ -172,7 +172,7 @@ instance.interceptors.response.use(
new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com new Date(0).toUTCString() //清除一级域名下的或指定的，例如 .kevis.com
} }
} }
console.log('已清除') // console.log('已清除')
setTimeout(() => { setTimeout(() => {
location.reload() location.reload()
}, 1000) }, 1000)

8
front/src/vab/plugins/permissions.js
View File

@ -1,8 +1,8 @@
/* /*
* @Author: hisense.wuhongjian * @Author: hisense.wuhongjian
* @Date: 2022-04-01 17:23:11 * @Date: 2022-04-01 17:23:11
* @LastEditors: hisense.wuhongjian * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-04 16:32:38 * @LastEditTime: 2022-06-29 09:54:19
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
*/ */
/** /**
@ -26,11 +26,11 @@ router.beforeEach(async (to, from, next) => {
// setAccessToken(SSOTOKEN) // setAccessToken(SSOTOKEN)
// } // }
const token = getAccessToken() const token = getAccessToken()
console.log('token', token) // console.log('token', token)
let hasToken = token || store.getters['user/accessToken'] let hasToken = token || store.getters['user/accessToken']
// debugger // debugger
if (!loginInterception) hasToken = true if (!loginInterception) hasToken = true
console.log('hasToken存在巨大问题', hasToken) // console.log('hasToken存在巨大问题', hasToken)
if (hasToken) { if (hasToken) {
setAccessToken(hasToken) setAccessToken(hasToken)
await store.dispatch('user/getUserInfo') await store.dispatch('user/getUserInfo')

32
front/src/views/abilityStatistics/components/AtlasResources.vue
View File

@ -121,6 +121,7 @@
<script setup> <script setup>
import { nextTick, ref } from 'vue' import { nextTick, ref } from 'vue'
import { UpOutlined, DownOutlined } from '@ant-design/icons-vue' import { UpOutlined, DownOutlined } from '@ant-design/icons-vue'
import { getCategoryTreePage } from '@/api/personalCenter'
import { import {
capabilityShareCapabilitySet, capabilityShareCapabilitySet,
selectResourceListByDept, selectResourceListByDept,
@ -317,23 +318,20 @@
// 右侧列表 // 右侧列表
const dataList = ref([]) const dataList = ref([])
// 所有领域类型 // 所有领域类型
const allType = ref([ const allType = ref([])
'社会治安', getCategoryTreePage({
'城市管理', page: 1,
'疫情防控', limit: 99,
'危化品管理', dictTypeId: '1513712507692818433',
'交通运输', }).then((res) => {
'森林防火', // console.log('kasdjflkajsdlkf ', res.data.data)
'防汛抗旱', allType.value = []
'文化旅游', res.data.data.list.map((val) => {
'非煤矿山', if (val.dictLabel !== '其他') {
'医疗卫生', allType.value.push(val.dictLabel)
'安全生产', }
'生态环境', })
'农业农村', })
'市场监管',
'政务服务',
])
const flag = ref('') const flag = ref('')
const nowShow = ref(false) const nowShow = ref(false)
const showDetails = (item) => { const showDetails = (item) => {

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

@ -46,7 +46,7 @@
<div class="left" id="left"></div> <div class="left" id="left"></div>
<div class="center"></div> <div class="center"></div>
<div class="right" id="right"></div> <div class="right" id="right"></div>
<div class="right-son1">汇聚量</div> <!-- <div class="right-son1">汇聚量</div> -->
<div class="right-son2">部门数</div> <div class="right-son2">部门数</div>
</div> </div>
</div> </div>
@ -287,6 +287,12 @@
} }
//来源部门漏斗图 //来源部门漏斗图
const funnelPlot = (dataList) => { const funnelPlot = (dataList) => {
// let arr = ['0-5', '5-10', '10-15', '15-20', '20以上']
// dataList.sort((a, b) => {
// console.log(arr.indexOf(a.fanwei), arr.indexOf(b.fanwei))
// return arr.indexOf(b.fanwei) - arr.indexOf(a.fanwei)
// })
console.log('============》', dataList)
echarts.init(document.getElementById('right')).dispose() echarts.init(document.getElementById('right')).dispose()
let chartDom = document.getElementById('right') let chartDom = document.getElementById('right')
let myChart = echarts.init(chartDom) let myChart = echarts.init(chartDom)
@ -318,6 +324,7 @@
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}, },
yAxis: { yAxis: {
show: false,
type: 'value', type: 'value',
min: 0, min: 0,
max: 20, max: 20,

5
front/src/views/abilityStatistics/components/SharingSituation.vue
View File

@ -104,6 +104,11 @@
yAxis: { yAxis: {
type: 'value', type: 'value',
}, },
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}的浏览量：</br> {c} 次',
},
series: [ series: [
{ {
data: datas.value, data: datas.value,

19
front/src/views/assignCase/components/queryPage.vue
View File

@ -30,10 +30,10 @@
<span <span
v-for="(item, index) in tabClickData" v-for="(item, index) in tabClickData"
:key="index" :key="index"
:class="listBg == item.name ? 'down' : ''" :class="listBg == item.dictLabel ? 'down' : ''"
@click="switchList(item.name)" @click="switchList(item.dictLabel)"
> >
{{ item.name }} {{ item.dictLabel }}
</span> </span>
</div> </div>
<a class="more" @click="lookmore(hidetext)"> <a class="more" @click="lookmore(hidetext)">
@ -82,6 +82,7 @@
import { ref, onMounted } from 'vue' import { ref, onMounted } from 'vue'
// import { useStore } from 'vuex' // import { useStore } from 'vuex'
import { pageWithAttrs } from '@/api/home.js' import { pageWithAttrs } from '@/api/home.js'
import { getCategoryTreePage } from '@/api/personalCenter.js'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
// import { pinyin } from 'pinyin-pro' // import { pinyin } from 'pinyin-pro'
// import { Empty } from 'ant-design-vue' // import { Empty } from 'ant-design-vue'
@ -159,6 +160,17 @@
name: '其他', name: '其他',
}, },
]) ])
//赋能案例tab页接口
const tabChaXun = () => {
const params = {
page: 1,
limit: 99,
dictTypeId: '1513712507692818433',
}
getCategoryTreePage(params).then(({ data: res }) => {
tabClickData.value = res.data.list
})
}
const tabClickShow = ref(false) const tabClickShow = ref(false)
const number = ref(0) const number = ref(0)
const changeCards = (val) => { const changeCards = (val) => {
@ -195,6 +207,7 @@
} }
//查询分页接口 //查询分页接口
const init = (list) => { const init = (list) => {
tabChaXun()
let params = { let params = {
deptIds: [], deptIds: [],
districtId: '', districtId: '',

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

@ -93,7 +93,8 @@
<div> <div>
<span>TOP</span> <span>TOP</span>
<span>名称</span> <span>名称</span>
<span>应用数</span> <span v-if="dataclick != 'score'">应用数</span>
<span v-else>分数</span>
</div> </div>
<div v-for="(item, index) in dataList" :key="index"> <div v-for="(item, index) in dataList" :key="index">
<span>{{ index + 1 }}</span> <span>{{ index + 1 }}</span>
@ -116,8 +117,11 @@
import { import {
assemblerBaseStatic, assemblerBaseStatic,
componentServiceRank, componentServiceRank,
callTheTrendPort,
totalCallsSnum,
} from '@/api/capabilityCloud' } from '@/api/capabilityCloud'
import * as moment from 'moment' import * as moment from 'moment'
let xinhaianIsShow = whoShow.itShowXiHaiAn //判断是否是西海岸版本
let snum = ref([ let snum = ref([
{ title: '上架总量', num: '0000' }, { title: '上架总量', num: '0000' },
{ title: '总调用次数(API)', num: '0' }, { title: '总调用次数(API)', num: '0' },
@ -126,7 +130,12 @@
let dataclick = ref('total') let dataclick = ref('total')
let dataList = ref([]) let dataList = ref([])
let timeSwitchindex = ref('周') let timeSwitchindex = ref('周')
let servicesSnum = ref([]) let servicesSnum = ref([
{ amount: '', type: '智能算法' },
{ amount: '', type: '图层服务' },
{ amount: '', type: '开发组件' },
{ amount: '', type: '业务组件' },
])
let callTheTrendData = ref({ time: [], snum: [] }) let callTheTrendData = ref({ time: [], snum: [] })
//年月切换 //年月切换
const timeSwitch = (name) => { const timeSwitch = (name) => {
@ -139,20 +148,62 @@
.subtract('days', 6 - i) .subtract('days', 6 - i)
.format('MM-DD') .format('MM-DD')
callTheTrendData.value.time.push(time) callTheTrendData.value.time.push(time)
callTheTrendData.value.snum.push('0')
console.log('time', callTheTrendData.value, name) console.log('time', callTheTrendData.value, name)
} }
callTheTrend(callTheTrendData.value) const start = parseInt(
(Date.parse(new Date()) - 168 * 60 * 60 * 1000) / 1000
)
const end = Date.parse(new Date()) / 1000
if (!xinhaianIsShow) {
callTheTrendPort(start, end, 86400).then((res) => {
if (res.data.data.result) {
res.data.data.result[0].values.splice(0, 1)
res.data.data.result[0].values.map((item) => {
callTheTrendData.value.snum.push(parseInt(item[1]))
})
callTheTrend(callTheTrendData.value)
} else {
callTheTrendData.value.snum = ['0', '0', '0', '0', '0', '0', '0']
callTheTrend(callTheTrendData.value)
}
})
} else {
callTheTrend(callTheTrendData.value)
}
} else { } else {
for (let i = 0; i < 31; i++) { for (let i = 0; i < 31; i++) {
let time = moment() let time = moment()
.subtract('days', 30 - i) .subtract('days', 30 - i)
.format('MM-DD') .format('MM-DD')
callTheTrendData.value.time.push(time) callTheTrendData.value.time.push(time)
callTheTrendData.value.snum.push('0')
console.log('time', callTheTrendData.value, name) console.log('time', callTheTrendData.value, name)
} }
callTheTrend(callTheTrendData.value) const start = parseInt(
(Date.parse(new Date()) - 720 * 60 * 60 * 1000) / 1000
)
const end = Date.parse(new Date()) / 1000
if (!xinhaianIsShow) {
callTheTrendPort(start, end, 86400).then((res) => {
if (res.data.data.result) {
// res.data.data.result.splice(0, 1)
callTheTrendData.value.snum = []
res.data.data.result[0].values.map((item) => {
callTheTrendData.value.snum.push(
moment(item[0] * 1000).format('MM-DD')
)
callTheTrendData.value.snum.push(parseInt(item[1]))
})
callTheTrend(callTheTrendData.value)
} else {
for (let i = 0; i < 30; i++) {
callTheTrendData.value.snum.push('0')
}
callTheTrend(callTheTrendData.value)
}
})
} else {
callTheTrend(callTheTrendData.value)
}
} }
} }
//调用趋势echarts图 //调用趋势echarts图
@ -162,6 +213,19 @@
let myChart = echarts.init(chartDom) let myChart = echarts.init(chartDom)
let option let option
option = { option = {
tooltip: {
backgroundColor: 'rgba(17,61,116,0.8)',
borderWidth: 0,
trigger: 'axis',
formatter: function (val) {
console.log(val)
let res = `<div style="background:rgba(17,61,116,0.8);border:1px soild rgba(28,119,205,0.8);color:#fff;padding:0">
<span>日期 : ${val[0].name}</span>
<div style="margin-left: 18px">调用次数 : ${val[0].value}</div>
</div>`
return res
},
},
grid: { grid: {
top: '10%', top: '10%',
left: '0%', left: '0%',
@ -288,15 +352,29 @@
snum.value[0].num = res.data.data[0].amount snum.value[0].num = res.data.data[0].amount
res.data.data.map((item, index) => { res.data.data.map((item, index) => {
if (index != 0) { if (index != 0) {
servicesSnum.value.push(item) servicesSnum.value.map((servicesSnumitem, servicesSnumindex) => {
if (servicesSnumitem.type == item.type) {
servicesSnum.value[servicesSnumindex].amount = item.amount
}
})
} }
}) })
}) })
} }
//总调用次数接口
const TotalCallsAPI = () => {
const end = Date.parse(new Date()) / 1000
if (!xinhaianIsShow) {
totalCallsSnum(end).then((res) => {
snum.value[1].num = res.data.data.result[0].value[1]
})
}
}
const init = () => { const init = () => {
timeSwitch(timeSwitchindex.value) timeSwitch(timeSwitchindex.value)
NumberOfComponentServices() NumberOfComponentServices()
ranking(dataclick.value) ranking(dataclick.value)
TotalCallsAPI()
} }
onMounted(() => { onMounted(() => {
init() init()

11
front/src/views/capabilityCloud/components/DataResources.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-19 10:15:33 * @Date: 2022-06-19 10:15:33
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-24 15:04:52 * @LastEditTime: 2022-06-27 12:52:18
* @Description: 告诉大家这是什么 * @Description: 告诉大家这是什么
--> -->
<template> <template>
@ -144,7 +144,11 @@
const object = res.data.data.filter((item) => item.type === val.name)[0] const object = res.data.data.filter((item) => item.type === val.name)[0]
console.log('object', object) console.log('object', object)
if (object) { if (object) {
val.num = object.amount if (object.type == '满足率') {
val.num = object.amount * 100 + '%'
} else {
val.num = object.amount
}
} }
}) })
const arr = res.data.data.filter((item) => item.resourceTop5)[0] const arr = res.data.data.filter((item) => item.resourceTop5)[0]
@ -156,7 +160,8 @@
}) })
arr.resourceTop5.forEach((val, index) => { arr.resourceTop5.forEach((val, index) => {
assignRankings.value[index].name = val['服务名称'] || '' assignRankings.value[index].name = val['服务名称'] || ''
assignRankings.value[index].operation = val['申请次数'] || '' assignRankings.value[index].operation =
val['申请次数'] >= 0 ? val['申请次数'] : ''
}) })
} }
}) })

57
front/src/views/capacityOnTheShelf/components/PutOnTheShelf.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-17 14:11:08 * @Date: 2022-06-17 14:11:08
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-20 16:40:33 * @LastEditTime: 2022-07-01 20:34:36
* @Description: 上架 * @Description: 上架
--> -->
<template> <template>
@ -109,6 +109,18 @@
v-model:value="item.note1" v-model:value="item.note1"
:options="item.options" :options="item.options"
/> />
<a-input
v-else-if="item.type == 'text'"
v-model:value="item.note1"
:placeholder="'请输入' + item.name"
:disabled="true"
/>
<a-input
v-else-if="item.type == 'text2'"
v-model:value="item.note1"
:placeholder="'请输入' + item.name"
:disabled="true"
/>
<a-textarea <a-textarea
v-else-if="item.type == 'textArea'" v-else-if="item.type == 'textArea'"
v-model:value="item.note1" v-model:value="item.note1"
@ -153,6 +165,9 @@
:list="props.videoList" :list="props.videoList"
tip="支持视频类型，大小不超过100M" tip="支持视频类型，大小不超过100M"
></upload> ></upload>
<a-button v-else-if="item.type == 'dialog'" @click="sourceClick">
请选择来源应用
</a-button>
<a-select <a-select
v-else-if="item.type == 'select'" v-else-if="item.type == 'select'"
style="width: 240px" style="width: 240px"
@ -194,11 +209,15 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, onMounted } from 'vue'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import upload from '@/views/components/upload' import upload from '@/views/components/upload'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
import { getCategoryTreePage } from '@/api/personalCenter' import { getCategoryTreePage } from '@/api/personalCenter'
import { useRouter } from 'vue-router'
const router = useRouter()
const abilityToType = router.currentRoute.value.query.abilityToType
const componentTypeValue = router.currentRoute.value.query.componentTypeValue
const props = defineProps({ const props = defineProps({
// 展示数据 // 展示数据
refData: { type: Object, default: null }, refData: { type: Object, default: null },
@ -258,19 +277,28 @@
// ] // ]
// }] // }]
}) })
console.log('props==========>', props) // console.log('props==========>', props)
const data = ref({ const data = ref({
list: [], list: [],
}) })
const showKey = ref(0) const showKey = ref(0)
props.refData.children.map((item) => { props.refData.children.map((item) => {
if (item.name == '基本信息') {
item.children.map((val) => {
if (val.name == '能力类型') {
val.note1 = abilityToType
}
if (val.name == '组件类型') {
val.note1 = componentTypeValue
}
})
}
if ( if (
props.configure && props.configure &&
props.configure.filter((val) => val.name === item.name).length > 0 props.configure.filter((val) => val.name === item.name).length > 0
) { ) {
item.isConfigure = true item.isConfigure = true
data.value[item.name] = [] data.value[item.name] = []
console.log('item==========>', item, data.value)
} else { } else {
item.isConfigure = false item.isConfigure = false
} }
@ -313,7 +341,7 @@
}) })
}) })
if (props.dataFrom) { if (props.dataFrom) {
console.log(props.dataFrom, data.value.list) // console.log(props.dataFrom, data.value.list)
props.dataFrom.infoList.forEach((item) => { props.dataFrom.infoList.forEach((item) => {
if ( if (
props.configure && props.configure &&
@ -327,7 +355,7 @@
// 通过;分割成数组 // 通过;分割成数组
child.note2 = item.attrValue.split(';') child.note2 = item.attrValue.split(';')
showKey.value++ showKey.value++
console.log('应用领域', item, item.attrValue.split(';'), child) // console.log('应用领域', item, item.attrValue.split(';'), child)
} }
}) })
}) })
@ -339,7 +367,7 @@
let list = props.configure.filter((item) => item.name === title)[0].list let list = props.configure.filter((item) => item.name === title)[0].list
let flag = true let flag = true
list.forEach((item) => { list.forEach((item) => {
console.log(item) // console.log(item)
if (item.type !== 'number' && !item.note1.length > 0) { if (item.type !== 'number' && !item.note1.length > 0) {
flag = false flag = false
} else if (item.type === 'number' && !item.note1 > 0) { } else if (item.type === 'number' && !item.note1 > 0) {
@ -352,7 +380,7 @@
obj[item.field] = item.note1 obj[item.field] = item.note1
}) })
data.value[title].push(obj) data.value[title].push(obj)
console.log(data.value[title]) // console.log(data.value[title])
mybus.emit('chageDataFrom', { mybus.emit('chageDataFrom', {
attrType: title, attrType: title,
attrValue: JSON.stringify(data.value[title]), attrValue: JSON.stringify(data.value[title]),
@ -375,7 +403,7 @@
}) })
} }
const ApplicationArea = (item, itemson) => { const ApplicationArea = (item, itemson) => {
console.log(item, itemson) // console.log(item, itemson)
if (item.note2.indexOf(itemson.dictLabel) === -1) { if (item.note2.indexOf(itemson.dictLabel) === -1) {
item.note2.push(itemson.dictLabel) item.note2.push(itemson.dictLabel)
} else { } else {
@ -387,10 +415,11 @@
delFlag: 0, delFlag: 0,
}) })
} }
const sourceClick = () => {}
watch(data.value.list, (newProps, oldProps) => { watch(data.value.list, (newProps, oldProps) => {
console.log(newProps, oldProps) // console.log(newProps, oldProps)
newProps.forEach((val) => { newProps.forEach((val) => {
console.log('数据发生改变==========>', val) // console.log('数据发生改变==========>', val)
if ( if (
props.configure && props.configure &&
props.configure.filter((item) => item.name === val.name).length > 0 props.configure.filter((item) => item.name === val.name).length > 0
@ -512,12 +541,12 @@
width: 570px; width: 570px;
} }
.ant-btn { .ant-btn {
width: 100px; width: 160px;
height: 32px; height: 32px;
text-align: center; text-align: center;
background: #d9ebff; background: #edf4fc;
color: #0087ff; color: #0087ff;
border: 1px solid #0087ff; border: 1px solid #bbd3ef;
border-radius: 6px; border-radius: 6px;
} }
} }

37
front/src/views/demandCenter/demandDetails.vue
View File

@ -231,6 +231,7 @@
size="small" size="small"
pageSize="8" pageSize="8"
:total="total" :total="total"
v-model:current="page"
@change="handleCurrentChange" @change="handleCurrentChange"
/> />
</a-list> </a-list>
@ -248,7 +249,7 @@
import { import {
demandComment, demandComment,
demandCommentPage, demandCommentPage,
demandCommentDelete, // demandCommentDelete,
demandCommentApply, demandCommentApply,
} from '@/api/demandCenter' } from '@/api/demandCenter'
import { getUser, getUserInfo } from '@/api/home' import { getUser, getUserInfo } from '@/api/home'
@ -264,15 +265,15 @@
}) })
}) })
//删除提示框 //删除提示框
const confirm = (item) => { // const confirm = (item) => {
console.log(item) // console.log(item)
evaluateDelete(item) // evaluateDelete(item)
} // }
const cancel = (e) => { // const cancel = (e) => {
console.log(e) // console.log(e)
message.error('已取消删除') // message.error('已取消删除')
} // }
// const store = useStore() // const store = useStore()
const router = useRouter() const router = useRouter()
@ -322,14 +323,14 @@
// }) // })
// } // }
const evaluateDelete = (item) => { // const evaluateDelete = (item) => {
demandCommentDelete([item.id]).then((res) => { // demandCommentDelete([item.id]).then((res) => {
if (res.data.code == 0) { // if (res.data.code == 0) {
message.success('删除评论成功！') // message.success('删除评论成功！')
} // }
evaluateList() // evaluateList()
}) // })
} // }
const evaluateList = () => { const evaluateList = () => {
const params = { const params = {
page: page.value, page: page.value,
@ -339,6 +340,7 @@
demandCommentPage(params).then((res) => { demandCommentPage(params).then((res) => {
evaluateData.value = res.data.data.list evaluateData.value = res.data.data.list
total.value = res.data.data.total total.value = res.data.data.total
console.log(evaluateData, 'evaluateData')
}) })
} }
@ -382,6 +384,7 @@
// formName.value = formData.value // formName.value = formData.value
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
getDemandForm(id).then((res) => { getDemandForm(id).then((res) => {
console.log(res, 'res')
const { data } = res.data const { data } = res.data
formName.value.applyUserName = data.applyUserName formName.value.applyUserName = data.applyUserName
formName.value.applyUserPhone = data.applyUserPhone formName.value.applyUserPhone = data.applyUserPhone

26
front/src/views/detailsAll/AlgorithmDetails.vue
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:32:22 * @Date: 2022-06-08 11:32:22
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-20 18:58:46 * @LastEditTime: 2022-06-30 17:06:56
* @Description: 算法详情页 * @Description: 算法详情页
--> -->
<template> <template>
@ -21,6 +21,13 @@
id="algorithm-display" id="algorithm-display"
class="scrollBox" class="scrollBox"
></algorithm-display> ></algorithm-display>
<!-- 关联能力 -->
<algorithm-associated-ability
v-if="!loading"
:associatedComponents="associatedComponents"
id="algorithm-associated-ability"
class="scrollBox"
></algorithm-associated-ability>
<!-- 算法优势 --> <!-- 算法优势 -->
<algorithm-advantage <algorithm-advantage
:dataList="dataList.data" :dataList="dataList.data"
@ -70,6 +77,7 @@
</template> </template>
<script setup> <script setup>
import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue' import AlgorithmTopDetails from '@/views/detailsAll/components/Algorithm/AlgorithmTopDetails.vue'
import AlgorithmAssociatedAbility from '@/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue'
import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue' import AlgorithmNavigation from '@/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue'
import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue' import AlgorithmDisplay from '@/views/detailsAll/components/Algorithm/AlgorithmDisplay.vue'
import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue' import AlgorithmAdvantage from '@/views/detailsAll/components/Algorithm/AlgorithmAdvantage.vue'
@ -81,15 +89,17 @@
import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题 import AlgorithmCommonProblem from '@/views/detailsAll/components/Algorithm/AlgorithmCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home' import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
const loading = ref(true)
const selectNow = ref('') const selectNow = ref('')
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
@ -128,6 +138,7 @@
}) })
const init = (id) => { const init = (id) => {
console.log(id, '-------------------------------------------------')
if (id) { if (id) {
selectOne(id).then((res) => { selectOne(id).then((res) => {
// console.clear() // console.clear()
@ -148,6 +159,15 @@
}) })
} }
}) })
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
loading.value = false
})
})
} else if (obj) { } else if (obj) {
dataList.data = obj dataList.data = obj
console.log('预览==============', obj) console.log('预览==============', obj)

42
front/src/views/detailsAll/ApplicationDetails.vue
View File

@ -2,7 +2,7 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:32:22 * @Date: 2022-06-08 11:32:22
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-20 18:59:18 * @LastEditTime: 2022-06-30 10:22:31
* @Description: 应用详情页 * @Description: 应用详情页
--> -->
<template> <template>
@ -14,6 +14,7 @@
<!-- 导航 --> <!-- 导航 -->
<application-navigation <application-navigation
:dataList="dataList.data" :dataList="dataList.data"
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }" :class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow" :selectNow="selectNow"
></application-navigation> ></application-navigation>
@ -28,7 +29,14 @@
:dataList="dataList.data" :dataList="dataList.data"
id="application-associated-components" id="application-associated-components"
class="scrollBox" class="scrollBox"
v-if="false"
></application-associated-components> ></application-associated-components>
<!-- 关联能力 -->
<application-associated-ability
:associatedComponents="associatedComponentsFunction()"
id="application-associated-ability"
class="scrollBox"
></application-associated-ability>
<!-- 功能介绍--> <!-- 功能介绍-->
<application-function-intorduction <application-function-intorduction
:dataList="dataList.data" :dataList="dataList.data"
@ -64,6 +72,7 @@
<script setup> <script setup>
import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue' import ApplicationAbilityToise from '@/views/detailsAll/components/Application/ApplicationAbilityToise.vue'
import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue' import ApplicationAssociatedComponents from '@/views/detailsAll/components/Application/ApplicationAssociatedComponents.vue'
import ApplicationAssociatedAbility from '@/views/detailsAll/components/Application/ApplicationAssociatedAbility.vue'
import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue' import ApplicationOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Application/ApplicationOwningDepartmentAndServiceProvider.vue'
import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue' import ApplicationFunctionIntorduction from '@/views/detailsAll/components/Application/ApplicationFunctionIntorduction.vue'
import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue' import ApplicationDeploymentAndSecurity from '@/views/detailsAll/components/Application/ApplicationDeploymentAndSecurity.vue'
@ -73,8 +82,13 @@
import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题 import ApplicationCommonProblem from '@/views/detailsAll/components/Application/ApplicationCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home' import { updateVisits, selectOne, queryPartAppByKeyId } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const associatedComponents = ref([
{ type: '组件服务', dataList: [] },
{ type: '数据资源', dataList: [] },
{ type: '基础设施', dataList: [] },
])
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
const domArr = ref([]) const domArr = ref([])
@ -124,9 +138,13 @@
selectOne(id).then((res) => { selectOne(id).then((res) => {
// console.clear() // console.clear()
dataList.data = res.data.data dataList.data = res.data.data
console.log('初始化详情页=========================>', dataList.data)
const arrList = ref([]) const arrList = ref([])
arrList.value = JSON.parse(window.sessionStorage.getItem('visits')) arrList.value = JSON.parse(window.sessionStorage.getItem('visits'))
console.log(
'初始化详情页=========================>',
dataList.data,
arrList.value
)
if (arrList.value && arrList.value.indexOf(id) === -1) { if (arrList.value && arrList.value.indexOf(id) === -1) {
arrList.value.push(id) arrList.value.push(id)
updateVisits({ updateVisits({
@ -140,11 +158,29 @@
}) })
} }
}) })
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
type: item.type,
}
queryPartAppByKeyId(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) { } else if (obj) {
dataList.data = obj dataList.data = obj
console.log('预览==============', obj) console.log('预览==============', obj)
} }
} }
const associatedComponentsFunction = () => {
if (
associatedComponents.value[0].dataList.length > 0 ||
associatedComponents.value[1].dataList.length > 0 ||
associatedComponents.value[2].dataList.length > 0
) {
return associatedComponents.value
}
}
init(id) init(id)
onBeforeUnmount(() => { onBeforeUnmount(() => {
mybus.off('flyToView') mybus.off('flyToView')

19
front/src/views/detailsAll/BusinessDetails.vue
View File

@ -12,9 +12,16 @@
<!-- 导航 --> <!-- 导航 -->
<business-navigation <business-navigation
:dataList="dataList.data" :dataList="dataList.data"
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }" :class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow" :selectNow="selectNow"
></business-navigation> ></business-navigation>
<!-- 关联能力 -->
<business-associated-ability
:associatedComponents="associatedComponents"
id="business-associated-ability"
class="scrollBox"
></business-associated-ability>
<!-- 组件展示 --> <!-- 组件展示 -->
<business-presentation <business-presentation
:dataList="dataList.data" :dataList="dataList.data"
@ -55,6 +62,7 @@
</template> </template>
<script setup> <script setup>
import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例 import BusinessApplicationCase from '@/views/detailsAll/components/Business/BusinessApplicationCase.vue' // 应用案例
import BusinessAssociatedAbility from '@/views/detailsAll/components/Business/BusinessAssociatedAbility.vue'
import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景 import BusinessApplicationScenarios from '@/views/detailsAll/components/Business/BusinessApplicationScenarios.vue' // 应用场景
import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍 import BusinessFunctionIntorduction from '@/views/detailsAll/components/Business/BusinessFunctionIntorduction.vue' // 功能介绍
import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息 import BusinessTopDetails from '@/views/detailsAll/components/Business/BusinessTopDetails.vue' // 头部基本信息
@ -64,7 +72,7 @@
import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题 import BusinessCommonProblem from '@/views/detailsAll/components/Business/BusinessCommonProblem' //常见问题
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home' import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
@ -73,6 +81,7 @@
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
@ -131,6 +140,14 @@
}) })
} }
}) })
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) { } else if (obj) {
dataList.data = obj dataList.data = obj
console.log('预览==============', obj) console.log('预览==============', obj)

19
front/src/views/detailsAll/DeveloperComponents.vue
View File

@ -12,6 +12,7 @@
<!-- 导航 --> <!-- 导航 -->
<developer-navigation <developer-navigation
:dataList="dataList.data" :dataList="dataList.data"
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }" :class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow" :selectNow="selectNow"
></developer-navigation> ></developer-navigation>
@ -21,6 +22,12 @@
id="eveloper-presentation" id="eveloper-presentation"
class="scrollBox" class="scrollBox"
></Developer-presentation> ></Developer-presentation>
<!-- 关联能力 -->
<developer-associated-ability
:associatedComponents="associatedComponents"
id="developer-associated-ability"
class="scrollBox"
></developer-associated-ability>
<!-- 功能介绍--> <!-- 功能介绍-->
<developer-function-intorduction <developer-function-intorduction
:dataList="dataList.data" :dataList="dataList.data"
@ -61,6 +68,7 @@
</template> </template>
<script setup> <script setup>
import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景 import DeveloperApplicationScenarios from '@/views/detailsAll/components/Developer/DeveloperApplicationScenarios.vue' //应用场景
import DeveloperAssociatedAbility from '@/views/detailsAll/components/Developer/DeveloperAssociatedAbility.vue'
import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式 import DeveloperOwningDepartmentAndServiceProvider from '@/views/detailsAll/components/Developer/DeveloperOwningDepartmentAndServiceProvider.vue' //使用方式
import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍 import DeveloperFunctionIntorduction from '@/views/detailsAll/components/Developer/DeveloperFunctionIntorduction.vue' //功能介绍
import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例 import DeveloperApplicationCase from '@/views/detailsAll/components/Developer/DeveloperApplicationCase' //应用案例
@ -71,7 +79,7 @@
import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用 import DeveloperTrial from '@/views/detailsAll/components/Developer/DeveloperTrial' //组件试用
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home' import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
@ -80,6 +88,7 @@
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
@ -138,6 +147,14 @@
}) })
} }
}) })
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) { } else if (obj) {
dataList.data = obj dataList.data = obj
console.log('预览==============', obj) console.log('预览==============', obj)

19
front/src/views/detailsAll/LayerService.vue
View File

@ -14,9 +14,16 @@
<!-- 导航 --> <!-- 导航 -->
<layer-service-navigation <layer-service-navigation
:dataList="dataList.data" :dataList="dataList.data"
:associatedComponents="associatedComponents"
:class="{ fixed: scrollTop >= 600 }" :class="{ fixed: scrollTop >= 600 }"
:selectNow="selectNow" :selectNow="selectNow"
></layer-service-navigation> ></layer-service-navigation>
<!-- 关联能力 -->
<layer-service-associated-ability
:associatedComponents="associatedComponents"
id="layer-service-associated-ability"
class="scrollBox"
></layer-service-associated-ability>
<!-- 图层展示 视频 --> <!-- 图层展示 视频 -->
<layer-service-presentation <layer-service-presentation
:dataList="dataList.data" :dataList="dataList.data"
@ -63,6 +70,7 @@
</template> </template>
<script setup> <script setup>
import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例 import LayerServiceApplicationCase from '@/views/detailsAll/components/LayerService/LayerServiceApplicationCase' //应用案例
import LayerServiceAssociatedAbility from '@/views/detailsAll/components/LayerService/LayerServiceAssociatedAbility.vue'
import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景 import LayerServiceApplicationScenarios from '@/views/detailsAll/components/LayerService/LayerServiceApplicationScenarios.vue' //应用场景
import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题 import LayerServiceCommonProblem from '@/views/detailsAll/components/LayerService/LayerServiceCommonProblem' //常见问题
import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息 import LayerServiceInformation from '@/views/detailsAll/components/LayerService/LayerServiceInformation.vue' //图层信息
@ -73,7 +81,7 @@
import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式 import LayerServiceUsageMode from '@/views/detailsAll/components/LayerService/LayerServiceUsageMode.vue' //使用方式
import { ref, onMounted, onBeforeUnmount, reactive } from 'vue' import { ref, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { updateVisits, selectOne } from '@/api/home' import { updateVisits, selectOne, queryPartAppByKeyId2 } from '@/api/home'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
const router = useRouter() const router = useRouter()
const scrollTop = ref(0) const scrollTop = ref(0)
@ -82,6 +90,7 @@
const dataList = reactive({ data: {} }) const dataList = reactive({ data: {} })
const id = router.currentRoute.value.query.id const id = router.currentRoute.value.query.id
const obj = JSON.parse(window.sessionStorage.getItem('preview')) const obj = JSON.parse(window.sessionStorage.getItem('preview'))
const associatedComponents = ref([{ type: '应用资源', dataList: [] }])
document.documentElement.style.transition = 'all 0.3s ease' document.documentElement.style.transition = 'all 0.3s ease'
document.documentElement.scrollTop = 0 document.documentElement.scrollTop = 0
document.body.style.transition = 'all 0.3s ease' document.body.style.transition = 'all 0.3s ease'
@ -140,6 +149,14 @@
}) })
} }
}) })
associatedComponents.value.map((item, index) => {
let queryPartAppByKeyIdParams = {
keyId: id,
}
queryPartAppByKeyId2(queryPartAppByKeyIdParams).then((res) => {
associatedComponents.value[index].dataList = res.data.data
})
})
} else if (obj) { } else if (obj) {
dataList.data = obj dataList.data = obj
console.log('预览==============', obj) console.log('预览==============', obj)

124
front/src/views/detailsAll/components/Algorithm/AlgorithmAssociatedAbility.vue Normal file
View File

@ -0,0 +1,124 @@
<template>
<div class="application-associated-ability" v-if="flag">
<detals-title title="关联应用" type="ASSOCIATED"></detals-title>
<div class="application-associated-ability-main">
<div
class="associated-ability-card"
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
:key="dataListitem.id"
@click="switchFunction(dataListitem.id)"
>
<div class="associated-ability-card-title">
{{ dataListitem.name }}
</div>
<div class="associated-ability-card-content">
<div class="associated-ability-card-content-font">
{{ dataListitem.description }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, defineProps, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import DetalsTitle from '@/views/detailsAll/components/DetalsTitle.vue'
const props = defineProps({
associatedComponents: { type: Array, default: null },
})
const dataFrom = ref([])
const flag = ref(true)
const oldid = router.currentRoute.value.query.id
//点击查看详情
const switchFunction = (id) => {
// router.push({
// path: '/details',
// query: {
// id: id,
// },
// })
window.open(window.SITE_CONFIG.previewUrl+ '#/details?id=' + id)
// alert(id)
}
console.log('这个是空值', props.associatedComponents[0])
if (props.associatedComponents[0].dataList.length > 0) {
console.log('这个是空值', props.associatedComponents)
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
watch(
() => props.associatedComponents,
(val) => {
if (val) {
flag.value = true
dataFrom.value = props.associatedComponents
console.log('dataFrom.value', dataFrom.value)
} else {
flag.value = false
}
}
)
watch(
() => router.currentRoute.value.query.id,
(newValue, oldValue) => {
if (oldid != router.currentRoute.value.query.id) {
window.location.reload()
}
},
{ immediate: true }
)
</script>
<style lang="less" scoped>
.application-associated-ability {
padding-top: 0.8rem;
padding-bottom: 0.8rem;
display: flex;
flex-direction: column;
align-items: center;
.application-associated-ability-main {
margin-top: 0.4rem;
width: 13.3rem;
display: flex;
justify-content: space-around;
.associated-ability-card {
width: 3.2rem;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #e4e6f5;
border-radius: 0.1rem;
padding-bottom: 0.3rem;
cursor: pointer;
.associated-ability-card-title {
padding-top: 0.3rem;
font-size: 0.22rem;
text-align: center;
}
.associated-ability-card-content {
width: 100%;
margin-top: 0.25rem;
padding-left: 0.3rem;
.associated-ability-card-content-font {
font-size: 0.18rem;
color: #999;
margin-right: 0.15rem;
margin-top: 0.15rem;
text-align: center;
}
}
}
.associated-ability-card:hover {
border-radius: 0.02rem;
border: 0.01rem solid #0058e1;
box-shadow: 0rem 0.08rem 0.2rem rgba(0, 88, 225, 0.3);
}
}
}
</style>

52
front/src/views/detailsAll/components/Algorithm/AlgorithmChargingStandard.vue
View File

@ -7,7 +7,10 @@
<div class="content"> <div class="content">
<div v-for="(item, index) in dataFrom" :key="index" class="content-card"> <div v-for="(item, index) in dataFrom" :key="index" class="content-card">
<div class="content-title">{{ item.title }}</div> <div class="content-title">{{ item.title }}</div>
<div class="content-content">{{ item.content }}</div> <a-tooltip>
<template #title>{{ item.content }}</template>
<div class="content-content">{{ item.content }}</div>
</a-tooltip>
<div class="content-footer"> <div class="content-footer">
<span>{{ item.unit }}</span> <span>{{ item.unit }}</span>
<span>{{ item.value }}</span> <span>{{ item.value }}</span>
@ -36,12 +39,45 @@
obj.attrValue = JSON.parse(obj.attrValue) obj.attrValue = JSON.parse(obj.attrValue)
// dataFrom.value = obj // dataFrom.value = obj
obj.attrValue.map((item) => { obj.attrValue.map((item) => {
let params = { let params = {}
title: item.type, switch (item.type) {
content: item.desc, case '一次性买断':
value: item.price, params = {
time: '/年起', title: item.type,
unit: '￥', content: item.desc,
value: item.price,
time: '元',
unit: '￥',
}
break
case '按调用次数':
params = {
title: item.type,
content: item.desc,
value: item.price,
time: '/次',
unit: '￥',
}
break
case '按并发路数':
params = {
title: item.type,
content: item.desc,
value: item.price,
time: '/路',
unit: '￥',
}
break
case '按年计费':
params = {
title: item.type,
content: item.desc,
value: item.price,
time: '/年',
unit: '￥',
}
break
} }
dataFrom.value.push(params) dataFrom.value.push(params)
}) })
@ -67,7 +103,7 @@
title: item.type, title: item.type,
content: item.desc, content: item.desc,
value: item.price, value: item.price,
time: '/元', time: '元',
unit: '￥', unit: '￥',
} }
break break

61
front/src/views/detailsAll/components/Algorithm/AlgorithmNavigation.vue
View File

@ -1,8 +1,8 @@
<!-- <!--
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 14:54:01 * @Date: 2022-06-08 14:54:01
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.wuhongjian
* @LastEditTime: 2022-06-15 18:32:23 * @LastEditTime: 2022-06-30 17:09:40
* @Description: 算法详情页导航 * @Description: 算法详情页导航
--> -->
<template> <template>
@ -21,8 +21,14 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, defineProps, watch } from 'vue' import { ref, defineProps, watch, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { queryPartAppByKeyId2 } from '@/api/home'
// 获取当前路由地址
const router = useRouter()
const keyId = router.currentRoute.value.query.id
console.log('123', keyId)
const navList = ref([ const navList = ref([
{ {
name: '算法展示', name: '算法展示',
@ -57,12 +63,28 @@
key: 'common-problem', key: 'common-problem',
}, },
]) ])
const list = ref([])
// 根据能力id查询是否存在关联应用
queryPartAppByKeyId2({ keyId: keyId }).then((res) => {
console.log('ressssssss', res)
if (res.data.data.length > 0) {
// 存在关联应用时在导航栏加入关联应用
navList.value.unshift({
name: '关联应用',
key: 'algorithm-associated-ability',
show: true,
})
// list.value.push('关联应用')
console.log('navList', navList)
}
})
const props = defineProps({ const props = defineProps({
selectNow: { type: String, default: '' }, selectNow: { type: String, default: '' },
dataList: { type: Object, default: null }, dataList: { type: Object, default: null },
}) })
const select = ref('algorithm-display') const select = ref('algorithm-display')
const list = ref([])
const selectNav = (key) => { const selectNav = (key) => {
select.value = key select.value = key
mybus.emit('flyToView', select.value) mybus.emit('flyToView', select.value)
@ -83,7 +105,12 @@
list.value.push('算法试用') list.value.push('算法试用')
} else if (item.attrType === '计费标准信息') { } else if (item.attrType === '计费标准信息') {
list.value.push('计费标准') list.value.push('计费标准')
} else if (item.attrType === '技术文档') { } else if (
item.attrType === '技术文档' ||
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '服务商联系电话'
) {
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
@ -97,9 +124,11 @@
'props.dataList.infoList==============>', 'props.dataList.infoList==============>',
navList.value.filter((item) => item.name === list.value[0]) navList.value.filter((item) => item.name === list.value[0])
) )
select.value = navList.value.filter( if (navList.value.filter((item) => item.name === list.value[0])[0]) {
(item) => item.name === list.value[0] select.value = navList.value.filter(
)[0].key (item) => item.name === list.value[0]
)[0].key
}
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }
watch( watch(
@ -127,10 +156,16 @@
list.value.push('算法试用') list.value.push('算法试用')
} else if (item.attrType === '计费标准信息') { } else if (item.attrType === '计费标准信息') {
list.value.push('计费标准') list.value.push('计费标准')
} else if (item.attrType === '技术文档') { } else if (
item.attrType === '技术文档' ||
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '服务商联系电话'
) {
list.value.push('使用方式') list.value.push('使用方式')
} }
}) })
list.value.push('关联应用')
navList.value.forEach((item) => { navList.value.forEach((item) => {
console.log(item) console.log(item)
if (list.value.indexOf(item.name) > -1) { if (list.value.indexOf(item.name) > -1) {
@ -138,9 +173,11 @@
} }
}) })
if (list.value.length > 0) { if (list.value.length > 0) {
select.value = navList.value.filter( if (navList.value.filter((item) => item.name === list.value[0])[0]) {
(item) => item.name === list.value[0] select.value = navList.value.filter(
)[0].key (item) => item.name === list.value[0]
)[0].key
}
} }
console.log('11111111111111111111111111', list.value, navList.value) console.log('11111111111111111111111111', list.value, navList.value)
} }

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

@ -2,14 +2,20 @@
* @Author: hisense.liangjunhua * @Author: hisense.liangjunhua
* @Date: 2022-06-08 11:56:28 * @Date: 2022-06-08 11:56:28
* @LastEditors: hisense.liangjunhua * @LastEditors: hisense.liangjunhua
* @LastEditTime: 2022-06-13 15:29:27 * @LastEditTime: 2022-07-01 14:16:18
* @Description: 算法详情页头部 * @Description: 算法详情页头部
--> -->
<template> <template>
<div class="algorithm-top-details"> <div class="algorithm-top-details">
<div class="left"> <div class="left">
<div class="top"> <div class="top">
<span class="name">{{ props.dataList.name }}</span> <a-tooltip placement="top">
<template #title>{{ props.dataList.name }}</template>
<span class="name">
{{ props.dataList.name }}
</span>
</a-tooltip>
<!-- <span class="name">{{ props.dataList.name }}</span> -->
<div class="label-content"> <div class="label-content">
<p class="lable-father"> <p class="lable-father">
<span class="label"> <span class="label">
@ -22,10 +28,16 @@
<!-- <span class="label">免费</span> --> <!-- <span class="label">免费</span> -->
</div> </div>
<div class="main"> <div class="main">
<div>应用领域：{{ applicationArea }}</div> <a-tooltip placement="top">
<div> <template #title>应用领域：{{ applicationArea }}</template>
{{ props.dataList.description }} <div>应用领域：{{ applicationArea }}</div>
</div> </a-tooltip>
<a-tooltip placement="top">
<template #title>{{ props.dataList.description }}</template>
<div>
{{ props.dataList.description }}
</div>
</a-tooltip>
</div> </div>
<div class="bottom" v-if="props.dataList.id"> <div class="bottom" v-if="props.dataList.id">
<a-button type="primary" @click="toView()"> <a-button type="primary" @click="toView()">
@ -34,7 +46,7 @@
</a-button> </a-button>
<a-button type="primary" @click="addShoppingCart()"> <a-button type="primary" @click="addShoppingCart()">
<template #icon><shopping-cart-outlined /></template> <template #icon><shopping-cart-outlined /></template>
加入购物车 加入申购车
</a-button> </a-button>
<a-button type="primary" @click="goTOCollection()">收藏</a-button> <a-button type="primary" @click="goTOCollection()">收藏</a-button>
</div> </div>
@ -71,12 +83,28 @@
//立即申请 //立即申请
function toView() { function toView() {
// window.open(newpage.href, '_blank') // window.open(newpage.href, '_blank')
console.log('一键申请===================>', props.dataList)
localStorage.setItem(
'applyList',
JSON.stringify([
{
arr: [
{
delFlag: props.dataList.delFlag,
description: props.dataList.description,
resourceId: props.dataList.id,
resourceName: props.dataList.name,
time: props.dataList.createDate,
type: props.dataList.type,
},
],
deptId: props.dataList.deptId,
deptName: props.dataList.deptName,
},
])
)
router.push({ router.push({
path: '/apply', path: '/apply',
query: {
name: props.dataList.name,
resourceId: [props.dataList.id],
},
}) })
} }
const componentType = ref('') const componentType = ref('')
@ -137,20 +165,27 @@
} }
.name { .name {
display: inline-block; display: inline-block;
width: 10.2rem; // width: 10.2rem;
// overflow: hidden; // overflow: hidden;
// text-overflow: ellipsis; // text-overflow: ellipsis;
// white-space: nowrap; // white-space: nowrap;
font-size: 40px; font-size: 40px;
margin-right: 20px; margin-right: 20px;
max-width: 7rem;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
} }
.label-content { .label-content {
position: relative; position: relative;
} }
.lable-father { .lable-father {
position: absolute; position: absolute;
min-width: 2.5rem; min-width: 3.5rem;
right: -2.5rem; right: -3.5rem;
top: 0; top: 0;
} }
.label { .label {

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

@ -27,7 +27,7 @@
</div> </div>
<div class="right"> <div class="right">
<div @click="technical()">技术文档</div> <div @click="technical()">技术文档</div>
<div>新手指引</div> <!-- <div>新手指引</div> -->
</div> </div>
</div> </div>
<div class="content-right"> <div class="content-right">
@ -73,13 +73,13 @@
titleSon: '调用接口', titleSon: '调用接口',
link: { link: {
name: '接口地址：', name: '接口地址：',
value: 'http://localhost:9999/#/details?id=1532278256619307010', value: '',
}, },
postMethod: { postMethod: {
name: '请求方式：', name: '请求方式：',
value: 'POST', value: '',
}, },
contact: '联系厂商：', contact: '联系厂商',
facilitator: { name: '服务商：', value: '科大讯飞' }, facilitator: { name: '服务商：', value: '科大讯飞' },
people: { name: '联系人：', value: '李四' }, people: { name: '联系人：', value: '李四' },
phone: { phone: {
@ -97,7 +97,11 @@
const flag = ref(true) const flag = ref(true)
if (props.dataList.infoList) { if (props.dataList.infoList) {
let obj = props.dataList.infoList.filter( let obj = props.dataList.infoList.filter(
(item) => item.attrType === '技术文档' (item) =>
item.attrType === '技术文档' ||
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '服务商联系电话'
)[0] )[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
@ -116,8 +120,12 @@
dataFrom.value.content[0].people.value = item.attrValue || '--' dataFrom.value.content[0].people.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone.value = item.attrValue || '--' dataFrom.value.content[0].phone.value = item.attrValue || '--'
} else if (item.attrType === '技术文档') { }
dataFrom.value.link = item.attrValue || '--' // } else if (item.attrType === '技术文档') {
// dataFrom.value.link = item.attrValue || '--'
// }
else if (item.attrType === '服务接口') {
dataFrom.value.content[0].link.value = item.attrValue || '--'
} }
}) })
} }
@ -126,7 +134,13 @@
() => props.dataList, () => props.dataList,
(val) => { (val) => {
if (val) { if (val) {
let obj = val.infoList.filter((item) => item.attrType === '技术文档')[0] let obj = val.infoList.filter(
(item) =>
item.attrType === '技术文档' ||
item.attrType === '服务商' ||
item.attrType === '服务商联系人' ||
item.attrType === '服务商联系电话'
)[0]
if (!obj) { if (!obj) {
flag.value = false flag.value = false
} else { } else {
@ -143,8 +157,12 @@
dataFrom.value.content[0].people.value = item.attrValue || '--' dataFrom.value.content[0].people.value = item.attrValue || '--'
} else if (item.attrType === '服务商联系电话') { } else if (item.attrType === '服务商联系电话') {
dataFrom.value.content[0].phone.value = item.attrValue || '--' dataFrom.value.content[0].phone.value = item.attrValue || '--'
} else if (item.attrType === '技术文档') { }
dataFrom.value.link = item.attrValue || '--' // else if (item.attrType === '技术文档') {
// dataFrom.value.link = item.attrValue || '--'
// }
else if (item.attrType === '服务接口') {
dataFrom.value.content[0].link.value = item.attrValue || '--'
} }
}) })
} }
@ -152,20 +170,23 @@
} }
) )
function technical() { function technical() {
// 拼接路径 // 拼接路径
const type = pinyin(props.dataList.type, { // const type = pinyin(props.dataList.type, {
pattern: 'initial', // pattern: 'initial',
}).replace(/\s*/g, '') // }).replace(/\s*/g, '')
// 打开文档 // // 打开文档
const id = props.dataList.id // const id = props.dataList.id
window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank') // window.open(window.SITE_CONFIG.frontUrl + type + '/' + id + '.md', '_blank')
// console.log('dataFrom.value.link', dataFrom.value.link) // console.log('dataFrom.value.link', dataFrom.value.link)
// window.open( let obj = props.dataList.infoList.filter(
// window.SITE_CONFIG.previewUrl + (item) => item.attrType === '技术文档'
// 'hisense_office/onlinePreview?url=' + )[0]
// btoa(encodeURI(dataFrom.value.link)) console.log('dataFrom.value.link', obj.attrValue)
// ) window.open(
window.SITE_CONFIG.previewUrl +
'hisense_office/onlinePreview?url=' +
btoa(encodeURI(obj.attrValue))
)
} }
</script> </script>

Some files were not shown because too many files have changed in this diff Show More