fix: 首页接口对接

webs/sms-web/src/main.ts

@@ -9,6 +9,4 @@
 import { render } from '@cmp/cmp-core/render'
 import qiankunRender from '@cmp/cmp-core/qiankunRender'
 
-import echarts from '@cmp/cmp-echarts/hooks/echarts'
-console.log(echarts)
 export const { bootstrap, mount, unmount } = qiankunRender(render)

webs/sms-web/src/views/configs/notice/Dialog.vue

@@ -21,7 +21,7 @@
             <el-checkbox-group v-model="addData.sendGroups">
               <el-checkbox label="ALL">全员</el-checkbox>
               <el-checkbox label="MANAGE">管理端用户</el-checkbox>
-              <el-checkbox label="TENANT">租户端用户</el-checkbox>
+              <!-- <el-checkbox label="TENANT">租户端用户</el-checkbox> -->
               <el-checkbox label="INPUT">指定用户</el-checkbox>
             </el-checkbox-group>
           </cb-form-item>
@@ -33,8 +33,8 @@
             <el-checkbox-group v-model="addData.sendWays">
               <el-checkbox label="EMAIL">邮件</el-checkbox>
               <el-checkbox label="MESSAGE">站内信</el-checkbox>
-              <el-checkbox label="WECHAT">企业微信</el-checkbox>
+              <!-- <el-checkbox label="WECHAT">企业微信</el-checkbox>
-              <el-checkbox label="DING">钉钉</el-checkbox>
+              <el-checkbox label="DING">钉钉</el-checkbox> -->
             </el-checkbox-group>
           </cb-form-item>
         </el-col>

webs/sms-web/src/views/configs/setting_dashboard/index.vue

@@ -9,29 +9,30 @@
               <TaskList class="m-b-md" height="918px" />
               <!-- 平台容量统计 -->
               <PlatformCapacity class="m-b-md" height="242px" />
-              <!-- 告警处理 -->
+              <!-- 告警处理✅ -->
               <AlarmHandling class="m-b-md" height="412px" />
             </el-col>
             <el-col :span="8">
+              <!-- 个人信息✅ -->
               <UserInfo class="m-b-md" />
               <!-- 数据展示 -->
               <StatisticsDisplay class="m-b-md" height="314px" />
               <!-- 工单统计 -->
               <OrderStatistics class="m-b-md" height="226px" />
-              <!-- 公告 -->
+              <!-- 公告✅ -->
               <NoticeList class="m-b-md" height="378px" />
-              <!-- 单日告警统计 -->
+              <!-- 单日告警统计✅ -->
               <DailyAlarmStatistics class="m-b-md" height="412px" />
             </el-col>
           </el-row>
           <el-row :gutter="20">
             <el-col :span="12">
-              <!-- 应用 CPUTop5 -->
+              <!-- 虚拟机CPU利用率TOP5 -->
-              <CPUTop5 class="m-b-md" height="320px" />
+              <CPU_MEMORY_Top5 class="m-b-md" type="vmCpu" height="320px" />
             </el-col>
             <el-col :span="12">
-              <!-- 虚拟机 CPUTop5 -->
+              <!-- 虚拟机内存利用率TOP5 -->
-              <VMCPUTop5 class="m-b-md" height="320px" />
+              <CPU_MEMORY_Top5 class="m-b-md" type="vmMem" height="320px" />
             </el-col>
           </el-row>
           <el-row>
@@ -58,8 +59,7 @@ import PlatformCapacity from './new_dashboard_component/PlatformCapacity.vue'
 import NoticeList from './new_dashboard_component/NoticeList.vue'
 import AlarmHandling from './new_dashboard_component/AlarmHandling.vue'
 import DailyAlarmStatistics from './new_dashboard_component/DailyAlarmStatistics.vue'
-import CPUTop5 from './new_dashboard_component/CPUTop5.vue'
+import CPU_MEMORY_Top5 from './new_dashboard_component/CPU_MEMORY_Top5.vue'
-import VMCPUTop5 from './new_dashboard_component/VMCPUTop5.vue'
 import WarningList from './new_dashboard_component/WarningList.vue'
 export default {
   components: {
@@ -71,8 +71,7 @@ export default {
     NoticeList,
     AlarmHandling,
     DailyAlarmStatistics,
-    CPUTop5,
+    CPU_MEMORY_Top5,
-    VMCPUTop5,
     WarningList
   },
   setup(props, context) {
@@ -91,6 +90,9 @@ export default {
   }
 }
 ::v-deep {
+  .weight600 {
+    font-weight: 600;
+  }
   .el-table--group,
   .el-table--border {
     border: none;
@@ -99,7 +101,11 @@ export default {
   .el-table td {
     border: none;
   }
-
+  .el-table .cell {
+    line-height: 32px;
+    font-size: 14px;
+    color: #344767;
+  }
   .el-table::before,
   .el-table--group::after,
   .el-table--border::after {

webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/CPUTop5.vue

@@ -1,37 +0,0 @@
-<template>
-  <ItemCard title="应用CPU TOP5" v-bind="$attrs">
-    <BarReverseCharts width="100%" height="100%" :data="barData" unit="%" v-if="barData" :setting="chartSetting"></BarReverseCharts>
-  </ItemCard>
-</template>
-
-<script>
-import ItemCard from './ItemCard.vue'
-import BarReverseCharts from './echarts/BarReverseCharts.vue'
-import { getResTops } from 'services/monitor/index'
-const chartSetting = {
-  barColor: ['rgba(255, 204, 77, 1)', 'rgba(59, 228, 218, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)']
-}
-export default {
-  components: { ItemCard, BarReverseCharts },
-  data() {
-    return {
-      barData: null,
-      chartSetting
-    }
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      getResTops({
-        vendorId: 1,
-        type: 'vmMem',
-        limit: 5
-      }).then(data => {
-        this.barData = data.data
-      })
-    }
-  }
-}
-</script>

webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/CPU_MEMORY_Top5.vue

@@ -0,0 +1,69 @@
+<template>
+  <ItemCard :title="title" v-bind="$attrs">
+    <el-select v-model="vendorId" @change="getData" slot="operate">
+      <el-option v-for="item in vendorList" :key="item.id" :value="item.id" :label="item.name"></el-option>
+    </el-select>
+    <BarReverseCharts width="100%" height="100%" :data="barData" unit="%" v-if="barData" :setting="chartSetting"></BarReverseCharts>
+  </ItemCard>
+</template>
+
+<script>
+import ItemCard from './ItemCard.vue'
+import BarReverseCharts from './echarts/BarReverseCharts.vue'
+import { getResTops } from 'services/monitor/index'
+import { conditionCloudVendor } from 'services/platform/index'
+const chartSetting = {
+  barColor: ['rgba(255, 204, 77, 1)', 'rgba(59, 228, 218, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)']
+}
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'vmCpu'
+    }
+  },
+  components: { ItemCard, BarReverseCharts },
+  data() {
+    return {
+      barData: null,
+      chartSetting,
+      vendorList: [],
+      vendorId: ''
+    }
+  },
+  created() {
+    this.getVendor()
+  },
+  computed: {
+    title() {
+      return this.type == 'vmCpu' ? '虚拟机CPU利用率TOP5' : '虚拟机内存利用率TOP5'
+    }
+  },
+  methods: {
+    async getVendor() {
+      const data = await conditionCloudVendor({
+        condition: JSON.stringify({
+          condition: 'listByTypes',
+          types: ['OPENSTACK', 'VMWARE', 'MANAGEONE', 'EASYSTACK', 'HWACCESS', 'APSARASTACK', 'ALIYUN', 'HCSO', 'KVM', 'SMARTX', 'KINGCLOUD', 'CNWARE', 'ZSTACK', 'CLOUDOS', 'CTSTACK']
+        })
+      })
+      if (data.success) {
+        this.vendorList = data.data
+        if (data.data.length) {
+          this.vendorId = data.data[0].id
+          this.getData()
+        }
+      }
+    },
+    getData() {
+      getResTops({
+        vendorId: 1,
+        type: this.type,
+        limit: 5
+      }).then(data => {
+        this.barData = data.data
+      })
+    }
+  }
+}
+</script>

webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/NoticeList.vue

@@ -1,38 +1,47 @@
 <template>
   <ItemCard title="公告列表" v-bind="$attrs">
+    <el-button slot="operate" type="primary" plain @click="toMessageList()">查看更多</el-button>
     <cb-table
       :data="tableList"
       :params="params"
       :get-list="getItemList"
-      :total="total"
       :otherProps="{
         border: false
       }"
     >
-      <el-table-column show-overflow-tooltip label="标题" prop="title">
+      <el-table-column show-overflow-tooltip label="标题">
-        <template slot-scope="{ row }">
+        <template slot-scope="scope">
-          <div class="flex">
+          <!-- <div class="flex">
             <img :src="imgMap[row.type]" alt="" />
-            <span>{{ row.title }}</span>
+            <span>{{ row.name }}</span>
-          </div>
+          </div> -->
+          <span class="detail-href" @click="getDetail(scope.row.id)">
+            {{ scope.row.name }}
+          </span>
         </template>
       </el-table-column>
       <el-table-column show-overflow-tooltip label="内容" prop="content"> </el-table-column>
-      <el-table-column show-overflow-tooltip label="时间" prop="date"></el-table-column>
+      <el-table-column show-overflow-tooltip label="时间" prop="gmtCreate">
+        <template slot-scope="scope">
+          <span class="tip">{{ scope.row.gmtCreate }} </span>
+        </template>
+      </el-table-column>
       <span slot="pagination"></span>
     </cb-table>
+    <detail-dialog :dialog="detailConfig" v-if="detailConfig.visible"></detail-dialog>
   </ItemCard>
 </template>
 
 <script>
 import ItemCard from './ItemCard.vue'
-import { mockHttp } from 'services/system/dashboard'
+import DetailDialog from '@/views/message/detail.vue'
+import { getMessage } from 'services/system/message'
 import 红 from './images/通知-红.png'
 import 黄 from './images/通知-黄.png'
 import 蓝 from './images/通知-蓝.png'
 
 export default {
-  components: { ItemCard },
+  components: { ItemCard, DetailDialog },
   data() {
     return {
       imgMap: {
@@ -40,27 +49,36 @@ export default {
         黄,
         蓝
       },
-      tableList: [
+      tableList: [],
-        {
-          title: '测试标题',
-          date: '2020-01-01',
-          content: '测试内容',
-          type: '红'
-        }
-      ],
       params: {
         page: 1,
-        rows: 10
+        rows: 5,
+        params: JSON.stringify([{ param: { status: 'UNREAD' }, sign: 'EQ' }])
       },
-      total: 0
+      // 详情
+      detailConfig: {
+        visible: false,
+        id: 0
+      }
     }
   },
+  created() {
+    this.getItemList()
+  },
   methods: {
+    getDetail(id) {
+      this.detailConfig = {
+        visible: true,
+        id
+      }
+    },
+    toMessageList(id = '') {
+      this.$router.push({ path: '/message', query: { id } })
+    },
     getItemList() {
-      mockHttp(this.params).then(data => {
+      getMessage(this.params).then(data => {
         if (data.success) {
           this.tableList = data.data.rows
-          this.total = data.data.total
         }
       })
     }

webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/OrderStatistics.vue

@@ -22,9 +22,9 @@ export default {
   data() {
     return {
       numList: [
-        { label: '待办工单', value: 36, bgImg: 待办工单, background: 'rgba(252, 182, 98, 0.1)' },
+        { label: '待办工单', value: 0, bgImg: 待办工单, background: 'rgba(252, 182, 98, 0.1)' },
-        { label: '已办工单', value: 20, bgImg: 已办工单, background: 'rgba(70, 216, 171, 0.1)' },
+        { label: '已办工单', value: 0, bgImg: 已办工单, background: 'rgba(70, 216, 171, 0.1)' },
-        { label: '总数', value: 20, bgImg: 总数, background: 'rgba(93, 148, 255, 0.1)' }
+        { label: '总数', value: 0, bgImg: 总数, background: 'rgba(93, 148, 255, 0.1)' }
       ]
     }
   }

webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/StatisticsDisplay.vue

@@ -29,13 +29,13 @@ export default {
   data() {
     return {
       numList: [
-        { label: '当前用户授权应用数', value: 36, bgImg: 当前用户授权应用数 },
+        { label: '当前用户授权应用数', value: 0, bgImg: 当前用户授权应用数 },
-        { label: '数据权限申请数量', value: 20, bgImg: 数据权限申请数量 }
+        { label: '数据权限申请数量', value: 0, bgImg: 数据权限申请数量 }
       ],
       statistics: [
-        { label: '数据调度任务量', value: 36 },
+        { label: '数据调度任务量', value: 0 },
-        { label: '运维任务申请表', value: 17 },
+        { label: '运维任务申请表', value: 0 },
-        { label: '日志审计任务量', value: 20 }
+        { label: '日志审计任务量', value: 0 }
       ]
     }
   }

webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/TaskList.vue

@@ -5,7 +5,7 @@
       <el-table-column type="index" width="50" label="序号"> </el-table-column>
       <el-table-column show-overflow-tooltip label="标题" prop="name">
         <template slot-scope="scope">
-          <span class="name">{{ scope.row.name }}</span>
+          <span class="weight600">{{ scope.row.name }}</span>
         </template>
       </el-table-column>
       <el-table-column show-overflow-tooltip label="状态" prop="status"></el-table-column>
@@ -13,7 +13,7 @@
       <el-table-column show-overflow-tooltip label="时间" prop="time"></el-table-column>
       <el-table-column show-overflow-tooltip label="操作" width="60px">
         <template slot-scope="scope">
-          <cb-link @click="handleOperation(scope.row)">审批</cb-link>
+          <cb-link @click="handleOperation(scope.row)" style="font-size: 14px">审批</cb-link>
         </template>
       </el-table-column>
     </cb-table>
@@ -59,10 +59,6 @@ export default {
 }
 </script>
 <style scoped lang="scss">
-.name {
-  font-weight: 600;
-  color: #344767;
-}
 v-deep {
   .el-table--small {
     font-size: 14px !important;

webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/VMCPUTop5.vue

@@ -1,37 +0,0 @@
-<template>
-  <ItemCard title="虚拟机CPU利用率  TOP5" v-bind="$attrs">
-    <BarReverseCharts width="100%" height="100%" :data="barData" unit="%" v-if="barData" :setting="chartSetting"></BarReverseCharts>
-  </ItemCard>
-</template>
-
-<script>
-import ItemCard from './ItemCard.vue'
-import BarReverseCharts from './echarts/BarReverseCharts.vue'
-import { getResTops } from 'services/monitor/index'
-const chartSetting = {
-  barColor: ['rgba(255, 204, 77, 1)', 'rgba(59, 228, 218, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)', 'rgba(93, 148, 255, 1)']
-}
-export default {
-  components: { ItemCard, BarReverseCharts },
-  data() {
-    return {
-      barData: null,
-      chartSetting
-    }
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    getData() {
-      getResTops({
-        vendorId: 1,
-        type: 'hostCpu',
-        limit: 5
-      }).then(data => {
-        this.barData = data.data
-      })
-    }
-  }
-}
-</script>

webs/sms-web/src/views/configs/setting_dashboard/new_dashboard_component/echarts/BarReverseCharts.vue

@@ -160,7 +160,7 @@ export default {
               rich: {
                 rang1: {
                   width: 24,
-                  height: 28,
+                  height: 26,
                   backgroundColor: {
                     image: 排名1
                   }

webs/sms-web/src/views/message/detail.vue

@@ -1,5 +1,5 @@
 <template>
-  <cb-detail-right v-if="dialog.visible" @goBack="goBack">
+  <cb-detail-right v-if="dialog.visible" :title="detailData.name" @goBack="goBack">
     <div slot="custom_content">
       <div class="message-card">
         <pre class="site-message-detail">{{ detailData.content }}</pre>