|
|
@@ -4,7 +4,18 @@
|
|
|
<div class="main-content">
|
|
|
<!-- 应用统计卡片 -->
|
|
|
<div class="stats-cards">
|
|
|
- <div class="stat-card">
|
|
|
+ <div class="stat-card" v-for="(item) in getLimitedList()" :key="item.name" >
|
|
|
+ <div class="stat-icon approved">
|
|
|
+ <el-icon><CircleCheckFilled /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div class="stat-content">
|
|
|
+ <div class="stat-label">{{ item.name }}</div>
|
|
|
+ <div class="stat-number">
|
|
|
+ {{ item.value }} 个
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="stat-card">
|
|
|
<div class="stat-icon approved">
|
|
|
<el-icon><CircleCheckFilled /></el-icon>
|
|
|
</div>
|
|
|
@@ -39,7 +50,7 @@
|
|
|
<div class="stat-label">已下架应用</div>
|
|
|
<div class="stat-number">20个</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
|
|
|
<!-- 内容模块 -->
|
|
|
@@ -74,13 +85,13 @@
|
|
|
<div class="module">
|
|
|
<div class="module-header">
|
|
|
<h3 class="module-title">应用上新</h3>
|
|
|
- <a href="#" class="module-more">更多</a>
|
|
|
+ <!-- <a href="#" class="module-more">更多</a> -->
|
|
|
</div>
|
|
|
<div class="module-content">
|
|
|
- <div class="new-app" v-for="(app, index) in newApps" :key="index">
|
|
|
+ <div class="new-app" v-for="(app, index) in applications" :key="index">
|
|
|
<div class="app-info">
|
|
|
- <span class="app-name">{{ app.name }}</span>
|
|
|
- <span class="app-date">{{ app.date }}</span>
|
|
|
+ <span class="app-name">{{ app.title }}</span>
|
|
|
+ <span class="app-date">{{ app.createTime }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -114,12 +125,26 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+
|
|
|
import * as echarts from 'echarts'
|
|
|
+import appCenter from "@/api/appCenter";
|
|
|
+import moment from 'moment';
|
|
|
+import CountUp from 'vue-countup-v3'
|
|
|
export default {
|
|
|
name: "ApplicationMonitor",
|
|
|
+ components: {
|
|
|
+ CountUp
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
statusChart: null,
|
|
|
+ itemApplications: [],
|
|
|
+ applications: [],
|
|
|
+ statusOptions: [],
|
|
|
+ buffOptions: [],
|
|
|
+ tagOptions: [],
|
|
|
+ typeArrs: [],
|
|
|
+
|
|
|
// 快捷应用数据
|
|
|
quickApps: [
|
|
|
{ name: '农产品安全管控示范应用场', type: 'green' },
|
|
|
@@ -127,15 +152,6 @@ export default {
|
|
|
{ name: '数字孪生黄浦', type: 'blue' }
|
|
|
],
|
|
|
|
|
|
- // 应用上新数据
|
|
|
- newApps: [
|
|
|
- { name: '水系综合管理系统', date: '2023-10-29' },
|
|
|
- { name: '虹口历史文脉管理系统开发', date: '2023-09-15' },
|
|
|
- { name: '虹口智慧环卫监管平台', date: '2023-09-15' },
|
|
|
- { name: '上海虹口区一网统管平台', date: '2023-09-15' },
|
|
|
- { name: '上海公共交通服务保障', date: '2023-09-15' }
|
|
|
- ],
|
|
|
-
|
|
|
// 应用热度排行数据
|
|
|
hotApps: [
|
|
|
{ name: '崇明区乡村振兴一张图', count: 128, percentage: 100 },
|
|
|
@@ -147,7 +163,7 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.initCharts()
|
|
|
+ this.initData()
|
|
|
window.addEventListener('resize', this.handleResize)
|
|
|
},
|
|
|
beforeUnmount() {
|
|
|
@@ -155,8 +171,11 @@ export default {
|
|
|
this.destroyCharts()
|
|
|
},
|
|
|
methods: {
|
|
|
- initCharts() {
|
|
|
- this.initStatusChart()
|
|
|
+ initData() {
|
|
|
+ this.getDmsCNameAType('applevel');
|
|
|
+ this.getDmsCNameAType('appstatus');
|
|
|
+ this.getDmsCNameAType('tag');
|
|
|
+ this.getDmsDataList()
|
|
|
},
|
|
|
handleResize() {
|
|
|
if (this.statusChart) this.statusChart.resize()
|
|
|
@@ -167,7 +186,71 @@ export default {
|
|
|
this.statusChart = null
|
|
|
}
|
|
|
},
|
|
|
+ getLimitedList() {
|
|
|
+ return this.typeArrs.slice(0, 4); // 获取前四个元素
|
|
|
+ },
|
|
|
+ getDmsCNameAType(param) {
|
|
|
+ let requestParams = {
|
|
|
+ cName: param,
|
|
|
+ type: 0
|
|
|
+ };
|
|
|
+ appCenter.getDmsCNameAType(requestParams).then(res => {
|
|
|
+ if (res.code === 200 && res.content) {
|
|
|
+ let option = res.content.map(item => ({
|
|
|
+ label: item.index,
|
|
|
+ value: item.name
|
|
|
+ }));
|
|
|
+ if(param === 'applevel'){
|
|
|
+ this.buffOptions = option;
|
|
|
+ }else if(param === 'appstatus'){
|
|
|
+ this.statusOptions = option;
|
|
|
+ }else if(param === 'tag'){
|
|
|
+ this.tagOptions = option;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getDmsDataList() {
|
|
|
+ let requestParams = {
|
|
|
+ columnId: 1659,
|
|
|
+ states: 0,
|
|
|
+ orderBy: JSON.stringify([{"field":"create_time","orderByType":2}]),
|
|
|
+ pageSize: 9999,
|
|
|
+ page: 0
|
|
|
+ };
|
|
|
+ appCenter.getDmsDataList(requestParams).then(res => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.itemApplications = res.content.data.map(item => ({
|
|
|
+ ...item,
|
|
|
+ status: item.status === 0 ? '待审核' : item.status === 1 ? '待发布' : item.status === 2 ? '未完成' : '已完成',
|
|
|
+ buffName: this.buffOptions.find(info => info.label == item.appbuff.trim())?.value || '',
|
|
|
+ appstautName: this.statusOptions.find(info => info.label == item.appstauts.trim())?.value || '',
|
|
|
+ tags: item.apptags.split(',').map(tag => this.tagOptions.find(info => info.label == tag.trim())?.value || ''),
|
|
|
+ createTime: moment(item.create_time).format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ }))
|
|
|
+ this.applications = this.itemApplications;
|
|
|
+ this.getTypeArrs();
|
|
|
+ }else{
|
|
|
+ this.applications = [];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTypeArrs() {
|
|
|
+ let that = this;
|
|
|
+ that.statusOptions.forEach(item => {
|
|
|
+ let arr = this.applications.filter(info => info.appstauts == item.label);
|
|
|
+ let name = item.value,length = arr.length;
|
|
|
+ let str = {name: name,value: length};
|
|
|
+ that.typeArrs.push(str);
|
|
|
+ })
|
|
|
+ this.initStatusChart()
|
|
|
+ },
|
|
|
initStatusChart() {
|
|
|
+ let colors = ['#52C41A','#FAAD14','#F5222D','#1E90FF'];
|
|
|
+ let seriesData = this.typeArrs.map((item,index) => ({
|
|
|
+ // value: item.value, name: item.name, itemStyle: { color: colors[index] } //自定义颜色
|
|
|
+ value: item.value, name: item.name // 随机颜色
|
|
|
+ }))
|
|
|
this.statusChart = echarts.init(this.$refs.statusChart)
|
|
|
const option = {
|
|
|
tooltip: {
|
|
|
@@ -211,11 +294,7 @@ export default {
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
|
- data: [
|
|
|
- { value: 400, name: '在维', itemStyle: { color: '#52C41A' } },
|
|
|
- { value: 300, name: '在筹', itemStyle: { color: '#FAAD14' } },
|
|
|
- { value: 200, name: '停用', itemStyle: { color: '#F5222D' } }
|
|
|
- ]
|
|
|
+ data: seriesData
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
@@ -362,6 +441,8 @@ export default {
|
|
|
|
|
|
.module-content {
|
|
|
padding: 20px;
|
|
|
+ height: 320px;
|
|
|
+ overflow: auto;
|
|
|
}
|
|
|
|
|
|
/* 应用状态分布图 */
|
mork