Merge branch 'mater-ztq' into 'master'

腾讯云展示租户详情页



See merge request !1222

@@ -4008,10 +4008,11 @@ layui.define(['laytpl', 'admin', 'form', 'table', 'echarts', 'sessions', 'xmSele
                             layer.alert('该资源只对接TRAP告警信息!',{icon:0});
                             layer.alert('该资源只对接TRAP告警信息!',{icon:0});
                             return;
                             return;
                         }
                         }
-                        //如果是腾讯云平台且是租户，则没有详情页
+                        //如果是腾讯云平台且是租户，则跳转租户页面
                         if (res.resType === 'TENCENT_CLOUD_PLAT' && res.platUserType !== '0'){
                         if (res.resType === 'TENCENT_CLOUD_PLAT' && res.platUserType !== '0'){
-                            layer.alert('只有运营端有详情页!',{icon:0});
-                            return;
+                            // layer.alert('只有运营端有详情页!',{icon:0});
+                            // return;
+                            url = common.detailPath(res.resType+'_TENANT',res.resId,protocol);
                         }
                         }
                         //url(/src/style/img/shutdown.png)
                         //url(/src/style/img/shutdown.png)
                         title +=`<span id="title-shutdown" data-id=${resId} style="flex:1;padding:0 5px;width:600px;display: inline-block;position: relative;top: 0px;left:20px;"></span>`
                         title +=`<span id="title-shutdown" data-id=${resId} style="flex:1;padding:0 5px;width:600px;display: inline-block;position: relative;top: 0px;left:20px;"></span>`

+<style>
+</style>
+<article class="page-container template template_redis">
+    <div class="page-panel">
+        <div class="main">
+            <div class="layui-card">
+                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
+                    <iframe src="/vue3/index.html#/vue3/tencentCloudTenant" class="layadmin-iframe"  style="height: 748px!important;border: none!important;"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</article>
+<textarea id="tencent_cloud_plat_param_id" style="display: none;">{{d}}</textarea>
+<script>
+    layui.use('tencent_cloud_plat', function (fn) {
+        var $ = layui.$;
+        var parm = $("#tencent_cloud_plat_param_id").val();
+        if(parm.indexOf('{{d') != -1){
+            fn();
+        }else{
+            fn(JSON.parse(parm));
+        }
+    });
+</script>

@@ -232,11 +232,100 @@
 .td-sql-ratio-box .res-ratio .progress{
 .td-sql-ratio-box .res-ratio .progress{
     width: 40%;
     width: 40%;
 }
 }
+.tencent-tenant-title{
+    padding: 20px 0px;
+    border-bottom: 1px solid #E3E3E3;
+}
+.tencent-tenant-items{
+    display: flex;
+    flex-wrap: wrap;
+    align-content: start;
+}
+.tencent-tenant-items .tencent-tenant-item{
+    width: calc((100% - 36px) / 3);
+    height: 154px;
+    background: linear-gradient(181deg, #EAF1FF, #FFFFFF);
+    box-shadow: -1px 4px 3px 0px rgba(71,71,71,0.05);
+    border-radius: 15px;
+    margin-right: 18px;
+    margin-top: 18px;
 
 
-
-
-
-
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+.tencent-tenant-items .tencent-tenant-item:nth-of-type(3n){
+    margin-right: 0;
+}
+.tencent-tenant-img{
+    width: 90px;
+    height: 85px;
+}
+.tencent-tenant-info{
+    width: 330px;
+    height: 100%;
+}
+.tencent-tenant-name{
+    border-bottom: 1px solid #D5E3FA;
+    height: 72px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.tencent-tenant-name .tencent-tenant-resTypeName{
+    font-weight: bold;
+    font-size: 16px;
+    margin-left: 18px;
+}
+.tencent-tenant-name .tencent-tenant-count{
+    font-size: 30px;
+    font-weight: bold;
+    color: #15162B;
+    margin-right: 50px;
+}
+.tencent-tenant-alarm{
+    width: 100%;
+    height: calc(100% - 72px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.tencent-tenant-normalCount{
+    color: #0BAC33;
+    margin-left: 18px;
+    font-weight: 500;
+    text-align: right;
+}
+.tencent-tenant-normalCount div:nth-of-type(1){
+    margin-bottom: 14px;
+}
+.tencent-tenant-normalCount div:nth-of-type(1):before{
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 12px;
+    background-color: #0BAC33;
+}
+.tencent-tenant-alarmCount{
+    color: #D81E06;
+    margin-right: 50px;
+    font-weight: 500;
+    text-align: right;
+}
+.tencent-tenant-alarmCount div:nth-of-type(1){
+    margin-bottom: 14px;
+}
+.tencent-tenant-alarmCount div:nth-of-type(1):before{
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    margin-right: 12px;
+    background-color: #D81E06;
+}
 
 
 
 
 
 

@@ -211,6 +211,10 @@ const routes = [{
 		path: '/vue3/tencentCloudTDSQL',   // 腾讯云--TDSQL-Msql资源
 		path: '/vue3/tencentCloudTDSQL',   // 腾讯云--TDSQL-Msql资源
 		name: 'tencentCloudTDSQL',
 		name: 'tencentCloudTDSQL',
 		component: ()=> myImport('views/tencentCloud/tencentCloudTDSQL')
 		component: ()=> myImport('views/tencentCloud/tencentCloudTDSQL')
+	},{
+		path: '/vue3/tencentCloudTenant',   // 腾讯云租户
+		name: 'tencentCloudTDSQL',
+		component: ()=> myImport('views/tencentCloud/tencentCloudTenant')
 	}
 	}
 ];
 ];
 
 

+<div>
+    <div class="cm-card" style="background: #f1f4fb;text-align: left;">
+        <div class="tencent-cloud-box">
+            <div class="tencent-tenant-title">
+                <span>资源统计信息</span>
+            </div>
+            <div class="tencent-tenant-items">
+                <div class="tencent-tenant-item" v-for="(item,index) in tenantList" :key="index">
+                    <img class="tencent-tenant-img" :src="'/vue3/src/assets/images/machineRoom/TENCENT_CLOUD_PLAT_'+item.type+'.png'" alt="">
+                    <div class="tencent-tenant-info">
+                        <div class="tencent-tenant-name">
+                            <div class="tencent-tenant-resTypeName">{{item.resTypeName}}</div>
+                            <div class="tencent-tenant-count">{{item.count}}</div>
+                        </div>
+                        <div class="tencent-tenant-alarm">
+                            <div class="tencent-tenant-normalCount">
+                                <div>正常量</div>
+                                <div>{{item.normalCount}}</div>
+                            </div>
+                            <div class="tencent-tenant-alarmCount">
+                                <div>异常量</div>
+                                <div>{{item.alarmCount}}</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

+export default {
+    name: "tencentCloudTenant",
+    template: '',
+    components: {},
+    props: [],
+    setup(props,{attrs,slots,emit}){
+        const {proxy} = Vue.getCurrentInstance();
+        const resId = localStorage.getItem('resId');
+        let height = Vue.ref(window.innerHeight);
+
+        let tenantList = Vue.ref([])
+        let getList = ()=>{
+            proxy.$http.get(`/api-web/bResource/tenantStatistics`,{
+                resId:resId,
+            },(res)=>{
+                console.log(res.data);
+                tenantList.value = res.data;
+                tenantList.value.forEach(item=>{
+                    item.type='tencent-cloud-host';
+                })
+            },(err)=>{
+                console.log(err);
+            })
+        }
+        getList();
+
+        return {
+            tenantList,
+        }
+    }
+}