feat：project页面 上面html结构完成

nezha-fronted/src/components/common/project/projectFacade.vue

@@ -15,8 +15,67 @@
     </div>
     <div class="project-facade">
       <div class="facade-top">
-        <div>123</div>
+        <div class="facade-top-left" v-loading="projectInfo.loading">
-        <div>456</div>
+          <div class="facade-top-title">
+            {{projectInfo.title}}
+          </div>
+          <div>
+            <span><span class="label">Id :</span>{{projectInfo.id}}</span>
+            <span><span class="label special">Name :</span>{{projectInfo.name}}</span>
+          </div>
+          <div>
+            <span><span class="label">Description :</span>{{projectInfo.remark?projectInfo.remark:'--'}}</span>
+          </div>
+          <div>
+            <span>
+              <span class="label">Alert state :</span>
+              <div class="active-icon" style="background: #B7464A 100%;"></div>{{projectInfo.alertStat[0]}}
+              <div class="active-icon" style="background: #E64E4E 100%;"></div>{{projectInfo.alertStat[1]}}
+              <div class="active-icon" style="background: #F7B500 100%;"></div>{{projectInfo.alertStat[2]}}
+            </span>
+          </div>
+          <div>
+            <span><span class="label">Module Mum :</span>{{projectInfo.moduleMum}}</span>
+          </div>
+        </div>
+        <div class="facade-top-right" v-loading="alertData.loading">
+          <div class="facade-top-title">
+            <span class="label">{{alertData.title}}:</span>
+            {{alertData.sssObj.total}}
+          </div>
+          <div class="facade-top-right-content">
+            <div>
+              <el-progress
+                type="circle"
+                :percentage="(alertData.sssObj.pending/alertData.sssObj.total)*100"
+                :show-text="false"
+                :width="40"
+                color="#F5A390"
+              ></el-progress>
+              <div class="align--center">{{alertData.sssObj.pending}}</div>
+            </div>
+            <div>
+              <el-progress
+                type="circle"
+                :percentage="(alertData.sssObj.stop/alertData.sssObj.total)*100"
+                :show-text="false"
+                :width="40"
+                color="#F6B977"
+              ></el-progress>
+              <div class="align--center">{{alertData.sssObj.stop}}</div>
+            </div>
+            <div>
+              <el-progress
+                type="circle"
+                :percentage="(alertData.sssObj.other/alertData.sssObj.total)*100"
+                :show-text="false"
+                :width="40"
+                color="#EBD066"
+              ></el-progress>
+              <div class="align--center">{{alertData.sssObj.other}}</div>
+            </div>
+          </div>
+        </div>
       </div>
       <div  class="facade-content">
         <vis-network
@@ -44,6 +103,18 @@
       'pick-time':pickTime,
       'time-picker':timePicker,
     },
+    props:{
+		  obj:{}
+    },
+    watch:{
+		  obj:{
+        // immediate: true,
+        deep: true,
+        handler(n){
+          this.getProjectData(n);
+        },
+      }
+    },
     data(){
 		  return {
 		    item:{ // 拓扑图
@@ -86,9 +157,46 @@
           new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
           new Date(bus.computeTimezone(new Date().getTime()))
         ],
+        projectInfo:{
+		      title:'Project information',
+          id:'1',
+          remark:'系统内置project，展示系统基础信息',
+          alertStat:[1,2,3],
+          moduleMum:6,
+          loading:true,
+        },
+        alertData:{
+          loading:true,
+          title:'Alert : ',
+          sssObj:{
+            total:60,
+            stop:10,
+            pending:40,
+            other:10,
+          }
+        }
       }
     },
+    mounted(){
+		  console.log(this.obj);
+    },
     methods:{
+		  getProjectData(n){
+		    //获取projectInfo
+        this.projectInfo.loading=true;
+        this.$get('project/info', {id:n.id}).then(response => {
+          if (response.code === 200) {
+            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length}
+            this.projectInfo.loading=false;
+          }
+        });
+
+        //获取所有asset
+        this.alertData.loading=true;
+        setTimeout(()=>{
+          this.alertData.loading=false;
+        },300)
+      },
       focusInput() {
         let classVal=document.getElementById('queryPanel').parentElement.getAttribute("class");
         classVal=classVal.replace('query-input-inactive','query-input-active');
@@ -125,21 +233,54 @@
     height: 100%;
   }
   .facade-top{
-    min-height: 178px;
+    min-height: 138px;
     display: flex;
     margin: 12px 0;
-    height: 16%;
+    height: calc(16% - 40px);
+    font-size: 12px;
   }
   .facade-top > div{
-    height: 100%;
+    height: calc(100% - 40px);
     width: 18%;
     min-width: 280px;
     background: #FFFFFF;
     margin-right: 9px;
+    padding: 20px;
+  }
+  .facade-top-title{
+    font-size: 16px;
+    color: #333333;
+    font-weight: bold;
+    padding: 5px 0;
+  }
+  .facade-top-left{
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
   }
   .facade-content{
     flex: 1;
     min-height: 800px;
     width: 80%;
   }
+  .label{
+    padding: 0 15px;
+  }
+  .special.label{
+    margin-left: 30px;
+  }
+  .facade-top .facade-top-right{
+    width: 12%;
+    min-width: 280px;
+  }
+  .facade-top-right-content{
+    display: flex;
+    justify-content: space-around;
+    justify-items: center;
+    height: calc(100% - 30px);
+    align-items:center;
+  }
+  .align--center{
+    text-align: center;
+  }
 </style>

nezha-fronted/src/components/common/project/visNetwork.vue

@@ -71,68 +71,7 @@
     data () {
       return {
         //其他
-        tableHeight: 0,
-        data: {}, // 该图表信息,chartItem
-        unit:{},
         isError:false,
-        errorContent:'',
-        pageSizes:[50,100,200],
-        pageObj: {
-          pageNo: 1,
-          pageSize: 50,
-          total: 0
-        },
-        screenPageObj:{
-          pageNo: 1,
-          pageSize: 50,
-          total: 0
-        },
-        storedTableData:[],
-        storedScreanTableData:[],
-        seriesItem: [], // 保存信息
-        seriesItemScreen:[],//全屏数据
-        images: '',
-        loading:Object,
-        items: {
-          metric_name: [], // 每条数据列名称
-          xAxis: [],
-          theData: [], // series数据组
-        },
-        panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
-        firstLoad: true, // 是否第一次加载
-        chartType: 'table', // 图表类型
-        screenModal: false,
-        // 查询数据使用
-        filter: {
-          start_time: '',
-          end_time: '',
-        },
-        stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
-        firstShow: false, // 默认不显示操作按钮,
-        caretShow:false,
-        dragTitleShow:false,
-        dropdownMenuShow:false,
-        divFirstShow:false,
-        columns: [
-          {
-            title:'Element',
-            key:'element',
-            sortable: true
-          }
-          , {
-            title: '采集时间',
-            key: 'time',
-            width: 160,
-            render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
-          }, {
-            title: '数值',
-            key: 'value',
-            width: 160,
-            sortable: true,
-            render: (h, params) => h('span', this.getNumStr(params.row.value)),
-          }],
-        searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
-        oldSearchTime: [],
         nodesArray:[
           { id: 1, label: "model",
             image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
@@ -156,236 +95,17 @@
           {id: 4,from: 4, to: 6, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
           {id: 5,from: 1, to: 7, dashes:[15,15],label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
         ],
+        dragTitleShow:false,
       }
 
     },
 
     methods:{
-      // 其他
-      filterShowData(source,pageObj){
-        return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
-      },
-      startResize(e) {
-        let vm = this;
-        this.$chartResizeTool.start(vm, this.data, e);
-      },
-      screenPageNo(val) {
-        this.screenPageObj.pageNo = val;
-        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
-      },
-      screenPageSize(val) {
-        this.screenPageObj.pageSize = val;
-        this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
-      },
-      startLoading(area){
-        if(area==='screen'){
-          this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
-        }else {
-          this.$refs['localLoading'+this.chartIndex].startLoading();
-        }
-      },
-      endLoading(area){
-        if(area==='screen'){
-          this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
-        }else {
-          this.$refs['localLoading'+this.chartIndex].endLoading();
-        }
-      },
-      resize(chartItem) {
-        let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
-        let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
-        container.style.height = `calc(100% - ${deHeight*2}px)`;
-        this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
-        this.$nextTick(() => {
-          container.querySelector(".el-table__body-wrapper")._ps_.update();
-        });
-      },
-      showLoad(chartItem) {
-        //设置高度 chart-table
-        this.$nextTick(() => {
-          this.resize(chartItem);
-        });
-        this.startLoading();
-        this.divFirstShow = true;
-      },
-      // 重新请求数据 刷新操作-local
-      refreshChart() {
-        this.dropdownMenuShow=false;
-        this.startLoading();
-        this.firstShow = false;
-        this.$emit('on-refresh-data', this.data.id);
-      },
-      // 编辑图表
-      editChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-edit-chart-block', this.data.id);
-      },
-      // 删除该图表
-      removeChart() {
-        this.dropdownMenuShow=false;
-        this.$emit('on-remove-chart-block', this.data.id);
-      },
-      //全屏时间条件查询
-      dateChange(time) {
-        this.searchTime = [...time];
-        this.seriesItemScreen = [];
-        for(let i=0;i<8;i++){
-          this.seriesItemScreen.push({//表格数据
-            element:'',
-            time: '',//采集时间
-            value: '',//数值
-          });
-        }
-        this.startLoading('screen');
-        this.$emit('on-search-data', this.data.id, this.searchTime);
-      },
-      clickos() {
-        this.dropdownMenuShow=false;
-      },
-      clearChart(){
-        this.data = {};
-      },
-      duplicate(){
-        this.dropdownMenuShow=false;
-        const param = {id:this.data.id};
-        this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
-          if (response.code === 200) {
-            this.$message({
-              duration: 2000,
-              type: 'success',
-              message: this.$t("tip.duplicateSuccess")
-            });
-            this.$emit('on-duplicate-chart-block', this.data.id,response.data);
-          }else {
-            if(response.msg){
-              this.$message.error(response.msg);
-            }else if(response.error){
-              this.$message.error(response.error);
-            }else {
-              this.$message.error(response);
-            }
-          }
-        });
-      },
-      // 全屏查看
-      showAllScreen() {
-        this.dropdownMenuShow=false;
-        // 初始化同步时间
-        this.searchTime = [];
-        this.$set(this.searchTime, 0, this.oldSearchTime[0]);
-        this.$set(this.searchTime, 1, this.oldSearchTime[1]);
-        this.$refs.calendarPanel.setCustomTime(this.searchTime);
-
-        this.seriesItemScreen = this.seriesItem;
-        this.screenModal = true;
-        if(this.$refs.topologyFull){
-          setTimeout(()=>{
-            this.$refs.topologyFull.resetAllNodes();
-          })
-        }
-      },
-      // 设置数据, filter区分
-      setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
-        if(errorMsg && errorMsg!==''){
-          this.isError = true;
-          this.errorContent = errorMsg;
-        }else {
-          this.isError = false;
-          this.errorContent = '';
-        }
-        if(area==='showFullScreen'){//全屏按时间查询
-          this.data = chartItem;
-          this.unit = chartDataFormat.getUnit(this.data.unit);
-          this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-          this.searchTime[1] = filter.end_time;
-          // this.seriesItemScreen = seriesItem;
-          this.storedScreanTableData=seriesItem;
-          this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-          this.screenPageObj.total=this.storedScreanTableData.length;
-          this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
-          this.endLoading('screen');
-        } else{
-          //设置高度 chart-table
-          this.divFirstShow = true;
-          this.$nextTick(() => {
-            this.resize(chartItem);
-          });
-          this.firstShow = true; // 展示操作按键
-
-          this.panelIdInner = panelId;
-          this.data = chartItem;
-          this.unit = chartDataFormat.getUnit(this.data.unit);
-          this.storedTableData =seriesItem;
-          this.storedScreanTableData=seriesItem;
-          this.storedTableData=Object.assign([],this.storedTableData.reverse());
-          this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
-          this.pageObj.total=this.storedTableData.length;
-          this.screenPageObj.total=this.storedScreanTableData.length;
-          this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
-          this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
-          if (filter) { // 保存数据,用于同步时间
-            this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
-            this.searchTime[1] = filter.end_time;
-            this.oldSearchTime[0] = this.searchTime[0];
-            this.oldSearchTime[1] = this.searchTime[1];
-          }
-          this.endLoading();
-        }
-      },
-      dealLegendAlias:function(legend,expression){
-        if(/\{\{.+\}\}/.test(expression)){
-          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
-            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
-            let reg=new RegExp(label+'=".+?"')
-            let value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
-            }
-            return value?value:label;
-          })
-          return labelValue
-        }else{
-          return expression;
-        }
-      },
-      // 获取格式
-      getNumStr(num) {
-        if (num) {
-          if (num >= 1000) {
-            const kbNum = num / 1000;
-            if (kbNum >= 1000) {
-              const mbNum = kbNum / 1000;
-              if (mbNum >= 1000) {
-                const gbNum = mbNum / 1000;
-                if (gbNum >= 1000) {
-                  const tbNum = gbNum / 1000;
-                  if (tbNum >= 1000) {
-                    const pbNum = tbNum / 1000;
-                    return `${pbNum.toFixed(2)}PB`;
-                  }
-                  return `${tbNum.toFixed(2)}TB`;
-                }
-                return `${gbNum.toFixed(2)}GB`;
-              }
-              return `${mbNum.toFixed(2)}MB`;
-            }
-            return `${kbNum.toFixed(2)}KB`;
-          }
-          return num.toFixed(2);
-        }
-        return num;
-      },
       // 设置拓扑图数据
       setTopologyData(nodesArr,edgesArr){
         this.nodesArray=nodesArr;
         this.edgesArray=edgesArr;
       },
-      //退出全屏
-      exitFull(){
-        this.screenModal = false;
-        this.$refs.topology.resetAllNodes()
-      }
     },
 
     mounted(){

nezha-fronted/src/components/page/project/project.vue

@@ -126,7 +126,7 @@
     </template>
     <template v-else-if="pageType == 'project'">
       <!--<panel-tab from="project" :obj="currentProject" targetTab.sync="panel"></panel-tab>-->
-      <facade />
+      <facade :obj="currentProject" targetTab.sync="panel"/>
     </template>
 
     <transition name="el-zoom-in-bottom">