diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/PageChart/line/index.vue b/src/components/common/PageChart/line/index.vue
new file mode 100644
index 0000000..e750aee
--- /dev/null
+++ b/src/components/common/PageChart/line/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :style="'height:' + height + '; width: ' + width" />
+</template>
+
+<script>
+let echarts = require('echarts/lib/echarts')
+// 引入折线图等组件
+require('echarts/lib/chart/line')
+// // 引入提示框和title组件，图例
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/title')
+require('echarts/lib/component/legend')
+require('echarts/lib/component/grid')
+require('echarts/lib/component/dataZoom')
+require('echarts/lib/component/tooltip')
+export default{
+  name:'ChartLine',
+  props:{
+    width:{
+      type:String,
+      default:'100%'
+    },
+    height:{
+      type:String,
+      default:'400px'
+    },
+    chartData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    },
+    //标题
+    title:{
+      type:String,
+      default:''
+    },
+    titleSize:{
+      type:Number,
+      default:16
+    },
+    titleX:{
+      type:String,
+      default:'center'
+    },
+    titleY:{
+      type:String,
+      default:'3%'
+    },
+    titleShow:{
+      type:Boolean,
+      default:true
+    },
+    //图例相关
+    legendShow:{
+      type:Boolean,
+      default:true
+    },
+    legendOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    legendX:{
+      type:String,
+      default:'center'
+    },
+    legendY:{
+      type:String,
+      default:'bottom'
+    },
+    //工具栏相关
+    toolboxShow:{
+      type:Boolean,
+      default:false
+    },
+    toolboxOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    //提示框相关
+    tooltipShow:{
+      type:Boolean,
+      default:true
+    },
+    tooltipTrigger:{
+      type:String,
+      default:"axis"
+    },
+    //区域缩放相关
+    dataZoomType:{
+      type:String,
+      default:"inside"
+    },
+    //坐标轴相关
+    xAxisShow:{
+      type:Boolean,
+      default:true
+    },
+    xAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisLineShow:{
+      type:Boolean,
+      default:false
+    },
+    //坐标系相关
+    gridTop:{
+      type:Number,
+      default:10
+    },
+    gridLeft:{
+      type:String,
+      default:'5%'
+    },
+    gridRight:{
+      type:String,
+      default:'10%'
+    },
+    gridBottom:{
+      type:Number,
+      default:0
+    },
+    //单位相关
+    xUnit:{
+      type:String,
+      default:''
+    },
+    yUnit:{
+      type:String,
+      default:''
+    },
+    //最值显示
+    markPoint:{
+      type:Boolean,
+      default:false
+    },
+    xList:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      chart:null, //Echarts实例
+    }
+  },
+  watch:{
+    //监听到数据改变，重新加载echart数据
+    chartData(val){
+      this.removeChart('reset')
+      this.initData()
+    }
+  },
+  mounted(){
+    this.init()
+    this.initData()
+  },
+  methods:{
+    //初始化
+    init(){
+      this.chart = echarts.init(this.$el)
+      //监听页面大小改变
+      window.addEventListener('resize', ()=>{
+        if(this.chart){
+          this.chart.resize()
+        }
+      })
+    },
+    //初始化数据
+    initData(){
+      if(!this.chart) return
+      const obj = JSON.parse(JSON.stringify(this.chartData))
+      const arr = []
+      if(obj.dataList && obj.dataList.length) {
+        obj.dataList.forEach((item, index) => {
+          // 对echarts数据做处理
+          item = {
+            name: obj.nameList[index],
+            data: item,
+            type: 'line'
+          }
+          // 根据参数判断是否显示最值
+          if (this.markPoint) {
+            item.markPoint = {
+              label: { show: true },
+              data: [
+                { type: 'max', name: '最大值', label: '最大值' },
+                { type: 'min', name: '最小值', label: '最小值' }
+              ]
+            }
+            item.markLine = {
+              data: [
+                { type: 'average', name: '平均值' }
+              ]
+            }
+          }
+          arr.push(item)
+        })
+        obj.dataList = arr
+        this.initChart(obj)
+      }
+    },
+    //初始化echarts
+    initChart(data){
+      this.chart.setOption({
+        color: ["#3398DB", "red"],
+        title:{
+          show:this.titleShow,
+          text:this.title,
+          left:this.titleX,
+          top:this.titleY,
+          textStyle:{
+            fontSize:this.titleSize
+          }
+        },
+        //图例设置
+        legend:{
+          show:this.legendShow,
+          orient:this.legendOrient,
+          left:this.legendX,
+          top:this.legendY,
+          data:data.nameList
+        },
+        //工具栏
+        toolbox:{
+          show:this.toolboxShow,
+          orient:this.toolboxOrient,
+          feature:{
+            saveAsImage:{show:true},
+            dataView:{show:true,readOnly:true}
+          }
+        },
+        //提示框
+        tooltip: {
+          show:this.tooltipShow,
+          trigger: this.tooltipTrigger,
+          axisPointer: {
+            type: "line",
+            crossStyle: {
+              color: "#333"
+            },
+            snap:true,
+            axis:'x'
+          },
+        },
+        //区域缩放
+        dataZoom:[
+          {
+            type: this.dataZoomType
+          }
+        ],
+        grid:{
+          top:this.gridTop,
+          left:this.gridLeft,
+          right:this.gridRight,
+          bottom:this.gridBottom,
+          containLabel:true
+        },
+        xAxis:{
+          show:this.xAxisShow,
+          type:'category',
+          name:this.xUnit,
+          nameTextStyle:{
+            fontSize:12
+          },
+          splitLine:{
+            show:this.xAxisSplitLineShow,
+          },
+          boundaryGap:false,
+          axisTick:{show:false}, //坐标轴刻度是否显示
+          data:this.xList
+        },
+        yAxis:{
+          type:'value',
+          name:this.yUnit,
+          splitNumber: 2,
+          axisLine:{
+            show:this.yAxisLineShow
+          },
+          splitLine:{
+            show:this.yAxisSplitLineShow
+          }
+        },
+        series:data.dataList
+      })
+    },
+    //注销echarts
+    removeChart(type){
+      if(!this.chart) return
+      this.chart.dispose() // 销毁echarts
+      this.chart = null
+      if(type === 'reset'){
+        this.init()
+      }
+    }
+  },
+  beforeDestroy(){
+    this.removeChart()
+  }
+}
+</script>
\ No newline at end of file

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/PageChart/line/index.vue b/src/components/common/PageChart/line/index.vue
new file mode 100644
index 0000000..e750aee
--- /dev/null
+++ b/src/components/common/PageChart/line/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :style="'height:' + height + '; width: ' + width" />
+</template>
+
+<script>
+let echarts = require('echarts/lib/echarts')
+// 引入折线图等组件
+require('echarts/lib/chart/line')
+// // 引入提示框和title组件，图例
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/title')
+require('echarts/lib/component/legend')
+require('echarts/lib/component/grid')
+require('echarts/lib/component/dataZoom')
+require('echarts/lib/component/tooltip')
+export default{
+  name:'ChartLine',
+  props:{
+    width:{
+      type:String,
+      default:'100%'
+    },
+    height:{
+      type:String,
+      default:'400px'
+    },
+    chartData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    },
+    //标题
+    title:{
+      type:String,
+      default:''
+    },
+    titleSize:{
+      type:Number,
+      default:16
+    },
+    titleX:{
+      type:String,
+      default:'center'
+    },
+    titleY:{
+      type:String,
+      default:'3%'
+    },
+    titleShow:{
+      type:Boolean,
+      default:true
+    },
+    //图例相关
+    legendShow:{
+      type:Boolean,
+      default:true
+    },
+    legendOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    legendX:{
+      type:String,
+      default:'center'
+    },
+    legendY:{
+      type:String,
+      default:'bottom'
+    },
+    //工具栏相关
+    toolboxShow:{
+      type:Boolean,
+      default:false
+    },
+    toolboxOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    //提示框相关
+    tooltipShow:{
+      type:Boolean,
+      default:true
+    },
+    tooltipTrigger:{
+      type:String,
+      default:"axis"
+    },
+    //区域缩放相关
+    dataZoomType:{
+      type:String,
+      default:"inside"
+    },
+    //坐标轴相关
+    xAxisShow:{
+      type:Boolean,
+      default:true
+    },
+    xAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisLineShow:{
+      type:Boolean,
+      default:false
+    },
+    //坐标系相关
+    gridTop:{
+      type:Number,
+      default:10
+    },
+    gridLeft:{
+      type:String,
+      default:'5%'
+    },
+    gridRight:{
+      type:String,
+      default:'10%'
+    },
+    gridBottom:{
+      type:Number,
+      default:0
+    },
+    //单位相关
+    xUnit:{
+      type:String,
+      default:''
+    },
+    yUnit:{
+      type:String,
+      default:''
+    },
+    //最值显示
+    markPoint:{
+      type:Boolean,
+      default:false
+    },
+    xList:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      chart:null, //Echarts实例
+    }
+  },
+  watch:{
+    //监听到数据改变，重新加载echart数据
+    chartData(val){
+      this.removeChart('reset')
+      this.initData()
+    }
+  },
+  mounted(){
+    this.init()
+    this.initData()
+  },
+  methods:{
+    //初始化
+    init(){
+      this.chart = echarts.init(this.$el)
+      //监听页面大小改变
+      window.addEventListener('resize', ()=>{
+        if(this.chart){
+          this.chart.resize()
+        }
+      })
+    },
+    //初始化数据
+    initData(){
+      if(!this.chart) return
+      const obj = JSON.parse(JSON.stringify(this.chartData))
+      const arr = []
+      if(obj.dataList && obj.dataList.length) {
+        obj.dataList.forEach((item, index) => {
+          // 对echarts数据做处理
+          item = {
+            name: obj.nameList[index],
+            data: item,
+            type: 'line'
+          }
+          // 根据参数判断是否显示最值
+          if (this.markPoint) {
+            item.markPoint = {
+              label: { show: true },
+              data: [
+                { type: 'max', name: '最大值', label: '最大值' },
+                { type: 'min', name: '最小值', label: '最小值' }
+              ]
+            }
+            item.markLine = {
+              data: [
+                { type: 'average', name: '平均值' }
+              ]
+            }
+          }
+          arr.push(item)
+        })
+        obj.dataList = arr
+        this.initChart(obj)
+      }
+    },
+    //初始化echarts
+    initChart(data){
+      this.chart.setOption({
+        color: ["#3398DB", "red"],
+        title:{
+          show:this.titleShow,
+          text:this.title,
+          left:this.titleX,
+          top:this.titleY,
+          textStyle:{
+            fontSize:this.titleSize
+          }
+        },
+        //图例设置
+        legend:{
+          show:this.legendShow,
+          orient:this.legendOrient,
+          left:this.legendX,
+          top:this.legendY,
+          data:data.nameList
+        },
+        //工具栏
+        toolbox:{
+          show:this.toolboxShow,
+          orient:this.toolboxOrient,
+          feature:{
+            saveAsImage:{show:true},
+            dataView:{show:true,readOnly:true}
+          }
+        },
+        //提示框
+        tooltip: {
+          show:this.tooltipShow,
+          trigger: this.tooltipTrigger,
+          axisPointer: {
+            type: "line",
+            crossStyle: {
+              color: "#333"
+            },
+            snap:true,
+            axis:'x'
+          },
+        },
+        //区域缩放
+        dataZoom:[
+          {
+            type: this.dataZoomType
+          }
+        ],
+        grid:{
+          top:this.gridTop,
+          left:this.gridLeft,
+          right:this.gridRight,
+          bottom:this.gridBottom,
+          containLabel:true
+        },
+        xAxis:{
+          show:this.xAxisShow,
+          type:'category',
+          name:this.xUnit,
+          nameTextStyle:{
+            fontSize:12
+          },
+          splitLine:{
+            show:this.xAxisSplitLineShow,
+          },
+          boundaryGap:false,
+          axisTick:{show:false}, //坐标轴刻度是否显示
+          data:this.xList
+        },
+        yAxis:{
+          type:'value',
+          name:this.yUnit,
+          splitNumber: 2,
+          axisLine:{
+            show:this.yAxisLineShow
+          },
+          splitLine:{
+            show:this.yAxisSplitLineShow
+          }
+        },
+        series:data.dataList
+      })
+    },
+    //注销echarts
+    removeChart(type){
+      if(!this.chart) return
+      this.chart.dispose() // 销毁echarts
+      this.chart = null
+      if(type === 'reset'){
+        this.init()
+      }
+    }
+  },
+  beforeDestroy(){
+    this.removeChart()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/common/PageTable/index.vue b/src/components/common/PageTable/index.vue
index 1b82a2b..01ba393 100644
--- a/src/components/common/PageTable/index.vue
+++ b/src/components/common/PageTable/index.vue
@@ -227,6 +227,11 @@
     type: {
       type: String,
       default: "all"
+    },
+    //表格传递的参数是否同级
+    isLevel: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -274,8 +279,14 @@
         // }
       }
       // 如果不需要分页，则无分页相关参数
-      const dataObj = this.pagination ? { data: obj } : { data: {} };
-      return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      // const dataObj = this.pagination ? { data: obj } : { data: {} };
+      // return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      if(!this.isLevel) {
+        const dataObj = this.pagination ? { data: obj } : { data: {} };
+        return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      }else{
+        return this.pagination ? { ...this.listInfo.query, ...obj } : obj
+      }
     },
     //选中数据
     handleSelectionChange(rows) {

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/PageChart/line/index.vue b/src/components/common/PageChart/line/index.vue
new file mode 100644
index 0000000..e750aee
--- /dev/null
+++ b/src/components/common/PageChart/line/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :style="'height:' + height + '; width: ' + width" />
+</template>
+
+<script>
+let echarts = require('echarts/lib/echarts')
+// 引入折线图等组件
+require('echarts/lib/chart/line')
+// // 引入提示框和title组件，图例
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/title')
+require('echarts/lib/component/legend')
+require('echarts/lib/component/grid')
+require('echarts/lib/component/dataZoom')
+require('echarts/lib/component/tooltip')
+export default{
+  name:'ChartLine',
+  props:{
+    width:{
+      type:String,
+      default:'100%'
+    },
+    height:{
+      type:String,
+      default:'400px'
+    },
+    chartData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    },
+    //标题
+    title:{
+      type:String,
+      default:''
+    },
+    titleSize:{
+      type:Number,
+      default:16
+    },
+    titleX:{
+      type:String,
+      default:'center'
+    },
+    titleY:{
+      type:String,
+      default:'3%'
+    },
+    titleShow:{
+      type:Boolean,
+      default:true
+    },
+    //图例相关
+    legendShow:{
+      type:Boolean,
+      default:true
+    },
+    legendOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    legendX:{
+      type:String,
+      default:'center'
+    },
+    legendY:{
+      type:String,
+      default:'bottom'
+    },
+    //工具栏相关
+    toolboxShow:{
+      type:Boolean,
+      default:false
+    },
+    toolboxOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    //提示框相关
+    tooltipShow:{
+      type:Boolean,
+      default:true
+    },
+    tooltipTrigger:{
+      type:String,
+      default:"axis"
+    },
+    //区域缩放相关
+    dataZoomType:{
+      type:String,
+      default:"inside"
+    },
+    //坐标轴相关
+    xAxisShow:{
+      type:Boolean,
+      default:true
+    },
+    xAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisLineShow:{
+      type:Boolean,
+      default:false
+    },
+    //坐标系相关
+    gridTop:{
+      type:Number,
+      default:10
+    },
+    gridLeft:{
+      type:String,
+      default:'5%'
+    },
+    gridRight:{
+      type:String,
+      default:'10%'
+    },
+    gridBottom:{
+      type:Number,
+      default:0
+    },
+    //单位相关
+    xUnit:{
+      type:String,
+      default:''
+    },
+    yUnit:{
+      type:String,
+      default:''
+    },
+    //最值显示
+    markPoint:{
+      type:Boolean,
+      default:false
+    },
+    xList:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      chart:null, //Echarts实例
+    }
+  },
+  watch:{
+    //监听到数据改变，重新加载echart数据
+    chartData(val){
+      this.removeChart('reset')
+      this.initData()
+    }
+  },
+  mounted(){
+    this.init()
+    this.initData()
+  },
+  methods:{
+    //初始化
+    init(){
+      this.chart = echarts.init(this.$el)
+      //监听页面大小改变
+      window.addEventListener('resize', ()=>{
+        if(this.chart){
+          this.chart.resize()
+        }
+      })
+    },
+    //初始化数据
+    initData(){
+      if(!this.chart) return
+      const obj = JSON.parse(JSON.stringify(this.chartData))
+      const arr = []
+      if(obj.dataList && obj.dataList.length) {
+        obj.dataList.forEach((item, index) => {
+          // 对echarts数据做处理
+          item = {
+            name: obj.nameList[index],
+            data: item,
+            type: 'line'
+          }
+          // 根据参数判断是否显示最值
+          if (this.markPoint) {
+            item.markPoint = {
+              label: { show: true },
+              data: [
+                { type: 'max', name: '最大值', label: '最大值' },
+                { type: 'min', name: '最小值', label: '最小值' }
+              ]
+            }
+            item.markLine = {
+              data: [
+                { type: 'average', name: '平均值' }
+              ]
+            }
+          }
+          arr.push(item)
+        })
+        obj.dataList = arr
+        this.initChart(obj)
+      }
+    },
+    //初始化echarts
+    initChart(data){
+      this.chart.setOption({
+        color: ["#3398DB", "red"],
+        title:{
+          show:this.titleShow,
+          text:this.title,
+          left:this.titleX,
+          top:this.titleY,
+          textStyle:{
+            fontSize:this.titleSize
+          }
+        },
+        //图例设置
+        legend:{
+          show:this.legendShow,
+          orient:this.legendOrient,
+          left:this.legendX,
+          top:this.legendY,
+          data:data.nameList
+        },
+        //工具栏
+        toolbox:{
+          show:this.toolboxShow,
+          orient:this.toolboxOrient,
+          feature:{
+            saveAsImage:{show:true},
+            dataView:{show:true,readOnly:true}
+          }
+        },
+        //提示框
+        tooltip: {
+          show:this.tooltipShow,
+          trigger: this.tooltipTrigger,
+          axisPointer: {
+            type: "line",
+            crossStyle: {
+              color: "#333"
+            },
+            snap:true,
+            axis:'x'
+          },
+        },
+        //区域缩放
+        dataZoom:[
+          {
+            type: this.dataZoomType
+          }
+        ],
+        grid:{
+          top:this.gridTop,
+          left:this.gridLeft,
+          right:this.gridRight,
+          bottom:this.gridBottom,
+          containLabel:true
+        },
+        xAxis:{
+          show:this.xAxisShow,
+          type:'category',
+          name:this.xUnit,
+          nameTextStyle:{
+            fontSize:12
+          },
+          splitLine:{
+            show:this.xAxisSplitLineShow,
+          },
+          boundaryGap:false,
+          axisTick:{show:false}, //坐标轴刻度是否显示
+          data:this.xList
+        },
+        yAxis:{
+          type:'value',
+          name:this.yUnit,
+          splitNumber: 2,
+          axisLine:{
+            show:this.yAxisLineShow
+          },
+          splitLine:{
+            show:this.yAxisSplitLineShow
+          }
+        },
+        series:data.dataList
+      })
+    },
+    //注销echarts
+    removeChart(type){
+      if(!this.chart) return
+      this.chart.dispose() // 销毁echarts
+      this.chart = null
+      if(type === 'reset'){
+        this.init()
+      }
+    }
+  },
+  beforeDestroy(){
+    this.removeChart()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/common/PageTable/index.vue b/src/components/common/PageTable/index.vue
index 1b82a2b..01ba393 100644
--- a/src/components/common/PageTable/index.vue
+++ b/src/components/common/PageTable/index.vue
@@ -227,6 +227,11 @@
     type: {
       type: String,
       default: "all"
+    },
+    //表格传递的参数是否同级
+    isLevel: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -274,8 +279,14 @@
         // }
       }
       // 如果不需要分页，则无分页相关参数
-      const dataObj = this.pagination ? { data: obj } : { data: {} };
-      return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      // const dataObj = this.pagination ? { data: obj } : { data: {} };
+      // return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      if(!this.isLevel) {
+        const dataObj = this.pagination ? { data: obj } : { data: {} };
+        return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      }else{
+        return this.pagination ? { ...this.listInfo.query, ...obj } : obj
+      }
     },
     //选中数据
     handleSelectionChange(rows) {
diff --git a/src/components/index.js b/src/components/index.js
index 2b2ed2a..faf7b38 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,10 +2,12 @@
 import PageFilter from "@/components/common/PageFilter";
 import PageForm from "@/components/common/PageForm";
 import PageTable from "@/components/common/PageTable";
+import ChartLine from "@/components/common/PageChart/line";
 
 export default Vue => {
   Vue.component("page-dialog", PageDialog);
   Vue.component("page-filter", PageFilter);
   Vue.component("page-form", PageForm);
   Vue.component("page-table", PageTable);
+  Vue.component("chart-line", ChartLine);
 };

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/PageChart/line/index.vue b/src/components/common/PageChart/line/index.vue
new file mode 100644
index 0000000..e750aee
--- /dev/null
+++ b/src/components/common/PageChart/line/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :style="'height:' + height + '; width: ' + width" />
+</template>
+
+<script>
+let echarts = require('echarts/lib/echarts')
+// 引入折线图等组件
+require('echarts/lib/chart/line')
+// // 引入提示框和title组件，图例
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/title')
+require('echarts/lib/component/legend')
+require('echarts/lib/component/grid')
+require('echarts/lib/component/dataZoom')
+require('echarts/lib/component/tooltip')
+export default{
+  name:'ChartLine',
+  props:{
+    width:{
+      type:String,
+      default:'100%'
+    },
+    height:{
+      type:String,
+      default:'400px'
+    },
+    chartData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    },
+    //标题
+    title:{
+      type:String,
+      default:''
+    },
+    titleSize:{
+      type:Number,
+      default:16
+    },
+    titleX:{
+      type:String,
+      default:'center'
+    },
+    titleY:{
+      type:String,
+      default:'3%'
+    },
+    titleShow:{
+      type:Boolean,
+      default:true
+    },
+    //图例相关
+    legendShow:{
+      type:Boolean,
+      default:true
+    },
+    legendOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    legendX:{
+      type:String,
+      default:'center'
+    },
+    legendY:{
+      type:String,
+      default:'bottom'
+    },
+    //工具栏相关
+    toolboxShow:{
+      type:Boolean,
+      default:false
+    },
+    toolboxOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    //提示框相关
+    tooltipShow:{
+      type:Boolean,
+      default:true
+    },
+    tooltipTrigger:{
+      type:String,
+      default:"axis"
+    },
+    //区域缩放相关
+    dataZoomType:{
+      type:String,
+      default:"inside"
+    },
+    //坐标轴相关
+    xAxisShow:{
+      type:Boolean,
+      default:true
+    },
+    xAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisLineShow:{
+      type:Boolean,
+      default:false
+    },
+    //坐标系相关
+    gridTop:{
+      type:Number,
+      default:10
+    },
+    gridLeft:{
+      type:String,
+      default:'5%'
+    },
+    gridRight:{
+      type:String,
+      default:'10%'
+    },
+    gridBottom:{
+      type:Number,
+      default:0
+    },
+    //单位相关
+    xUnit:{
+      type:String,
+      default:''
+    },
+    yUnit:{
+      type:String,
+      default:''
+    },
+    //最值显示
+    markPoint:{
+      type:Boolean,
+      default:false
+    },
+    xList:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      chart:null, //Echarts实例
+    }
+  },
+  watch:{
+    //监听到数据改变，重新加载echart数据
+    chartData(val){
+      this.removeChart('reset')
+      this.initData()
+    }
+  },
+  mounted(){
+    this.init()
+    this.initData()
+  },
+  methods:{
+    //初始化
+    init(){
+      this.chart = echarts.init(this.$el)
+      //监听页面大小改变
+      window.addEventListener('resize', ()=>{
+        if(this.chart){
+          this.chart.resize()
+        }
+      })
+    },
+    //初始化数据
+    initData(){
+      if(!this.chart) return
+      const obj = JSON.parse(JSON.stringify(this.chartData))
+      const arr = []
+      if(obj.dataList && obj.dataList.length) {
+        obj.dataList.forEach((item, index) => {
+          // 对echarts数据做处理
+          item = {
+            name: obj.nameList[index],
+            data: item,
+            type: 'line'
+          }
+          // 根据参数判断是否显示最值
+          if (this.markPoint) {
+            item.markPoint = {
+              label: { show: true },
+              data: [
+                { type: 'max', name: '最大值', label: '最大值' },
+                { type: 'min', name: '最小值', label: '最小值' }
+              ]
+            }
+            item.markLine = {
+              data: [
+                { type: 'average', name: '平均值' }
+              ]
+            }
+          }
+          arr.push(item)
+        })
+        obj.dataList = arr
+        this.initChart(obj)
+      }
+    },
+    //初始化echarts
+    initChart(data){
+      this.chart.setOption({
+        color: ["#3398DB", "red"],
+        title:{
+          show:this.titleShow,
+          text:this.title,
+          left:this.titleX,
+          top:this.titleY,
+          textStyle:{
+            fontSize:this.titleSize
+          }
+        },
+        //图例设置
+        legend:{
+          show:this.legendShow,
+          orient:this.legendOrient,
+          left:this.legendX,
+          top:this.legendY,
+          data:data.nameList
+        },
+        //工具栏
+        toolbox:{
+          show:this.toolboxShow,
+          orient:this.toolboxOrient,
+          feature:{
+            saveAsImage:{show:true},
+            dataView:{show:true,readOnly:true}
+          }
+        },
+        //提示框
+        tooltip: {
+          show:this.tooltipShow,
+          trigger: this.tooltipTrigger,
+          axisPointer: {
+            type: "line",
+            crossStyle: {
+              color: "#333"
+            },
+            snap:true,
+            axis:'x'
+          },
+        },
+        //区域缩放
+        dataZoom:[
+          {
+            type: this.dataZoomType
+          }
+        ],
+        grid:{
+          top:this.gridTop,
+          left:this.gridLeft,
+          right:this.gridRight,
+          bottom:this.gridBottom,
+          containLabel:true
+        },
+        xAxis:{
+          show:this.xAxisShow,
+          type:'category',
+          name:this.xUnit,
+          nameTextStyle:{
+            fontSize:12
+          },
+          splitLine:{
+            show:this.xAxisSplitLineShow,
+          },
+          boundaryGap:false,
+          axisTick:{show:false}, //坐标轴刻度是否显示
+          data:this.xList
+        },
+        yAxis:{
+          type:'value',
+          name:this.yUnit,
+          splitNumber: 2,
+          axisLine:{
+            show:this.yAxisLineShow
+          },
+          splitLine:{
+            show:this.yAxisSplitLineShow
+          }
+        },
+        series:data.dataList
+      })
+    },
+    //注销echarts
+    removeChart(type){
+      if(!this.chart) return
+      this.chart.dispose() // 销毁echarts
+      this.chart = null
+      if(type === 'reset'){
+        this.init()
+      }
+    }
+  },
+  beforeDestroy(){
+    this.removeChart()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/common/PageTable/index.vue b/src/components/common/PageTable/index.vue
index 1b82a2b..01ba393 100644
--- a/src/components/common/PageTable/index.vue
+++ b/src/components/common/PageTable/index.vue
@@ -227,6 +227,11 @@
     type: {
       type: String,
       default: "all"
+    },
+    //表格传递的参数是否同级
+    isLevel: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -274,8 +279,14 @@
         // }
       }
       // 如果不需要分页，则无分页相关参数
-      const dataObj = this.pagination ? { data: obj } : { data: {} };
-      return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      // const dataObj = this.pagination ? { data: obj } : { data: {} };
+      // return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      if(!this.isLevel) {
+        const dataObj = this.pagination ? { data: obj } : { data: {} };
+        return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      }else{
+        return this.pagination ? { ...this.listInfo.query, ...obj } : obj
+      }
     },
     //选中数据
     handleSelectionChange(rows) {
diff --git a/src/components/index.js b/src/components/index.js
index 2b2ed2a..faf7b38 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,10 +2,12 @@
 import PageFilter from "@/components/common/PageFilter";
 import PageForm from "@/components/common/PageForm";
 import PageTable from "@/components/common/PageTable";
+import ChartLine from "@/components/common/PageChart/line";
 
 export default Vue => {
   Vue.component("page-dialog", PageDialog);
   Vue.component("page-filter", PageFilter);
   Vue.component("page-form", PageForm);
   Vue.component("page-table", PageTable);
+  Vue.component("chart-line", ChartLine);
 };
diff --git a/src/components/index.vue b/src/components/index.vue
index 2610bb0..68f095b 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -135,7 +135,13 @@
                 >统计报表</el-menu-item
               >
             </el-submenu>
-
+            <el-submenu index="12" v-has="'m12'">
+              <template slot="title">
+                <i class="el-icon-location"></i>
+                <span>服务监控</span>
+              </template>
+              <el-menu-item index="/ServiceWatch/serverManage" v-has="'m12-1'">服务器管理</el-menu-item>
+            </el-submenu>
             <el-submenu index="8" v-has="'m7'">
               <template slot="title">
                 <i class="el-icon-location"></i>

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/PageChart/line/index.vue b/src/components/common/PageChart/line/index.vue
new file mode 100644
index 0000000..e750aee
--- /dev/null
+++ b/src/components/common/PageChart/line/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :style="'height:' + height + '; width: ' + width" />
+</template>
+
+<script>
+let echarts = require('echarts/lib/echarts')
+// 引入折线图等组件
+require('echarts/lib/chart/line')
+// // 引入提示框和title组件，图例
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/title')
+require('echarts/lib/component/legend')
+require('echarts/lib/component/grid')
+require('echarts/lib/component/dataZoom')
+require('echarts/lib/component/tooltip')
+export default{
+  name:'ChartLine',
+  props:{
+    width:{
+      type:String,
+      default:'100%'
+    },
+    height:{
+      type:String,
+      default:'400px'
+    },
+    chartData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    },
+    //标题
+    title:{
+      type:String,
+      default:''
+    },
+    titleSize:{
+      type:Number,
+      default:16
+    },
+    titleX:{
+      type:String,
+      default:'center'
+    },
+    titleY:{
+      type:String,
+      default:'3%'
+    },
+    titleShow:{
+      type:Boolean,
+      default:true
+    },
+    //图例相关
+    legendShow:{
+      type:Boolean,
+      default:true
+    },
+    legendOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    legendX:{
+      type:String,
+      default:'center'
+    },
+    legendY:{
+      type:String,
+      default:'bottom'
+    },
+    //工具栏相关
+    toolboxShow:{
+      type:Boolean,
+      default:false
+    },
+    toolboxOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    //提示框相关
+    tooltipShow:{
+      type:Boolean,
+      default:true
+    },
+    tooltipTrigger:{
+      type:String,
+      default:"axis"
+    },
+    //区域缩放相关
+    dataZoomType:{
+      type:String,
+      default:"inside"
+    },
+    //坐标轴相关
+    xAxisShow:{
+      type:Boolean,
+      default:true
+    },
+    xAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisLineShow:{
+      type:Boolean,
+      default:false
+    },
+    //坐标系相关
+    gridTop:{
+      type:Number,
+      default:10
+    },
+    gridLeft:{
+      type:String,
+      default:'5%'
+    },
+    gridRight:{
+      type:String,
+      default:'10%'
+    },
+    gridBottom:{
+      type:Number,
+      default:0
+    },
+    //单位相关
+    xUnit:{
+      type:String,
+      default:''
+    },
+    yUnit:{
+      type:String,
+      default:''
+    },
+    //最值显示
+    markPoint:{
+      type:Boolean,
+      default:false
+    },
+    xList:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      chart:null, //Echarts实例
+    }
+  },
+  watch:{
+    //监听到数据改变，重新加载echart数据
+    chartData(val){
+      this.removeChart('reset')
+      this.initData()
+    }
+  },
+  mounted(){
+    this.init()
+    this.initData()
+  },
+  methods:{
+    //初始化
+    init(){
+      this.chart = echarts.init(this.$el)
+      //监听页面大小改变
+      window.addEventListener('resize', ()=>{
+        if(this.chart){
+          this.chart.resize()
+        }
+      })
+    },
+    //初始化数据
+    initData(){
+      if(!this.chart) return
+      const obj = JSON.parse(JSON.stringify(this.chartData))
+      const arr = []
+      if(obj.dataList && obj.dataList.length) {
+        obj.dataList.forEach((item, index) => {
+          // 对echarts数据做处理
+          item = {
+            name: obj.nameList[index],
+            data: item,
+            type: 'line'
+          }
+          // 根据参数判断是否显示最值
+          if (this.markPoint) {
+            item.markPoint = {
+              label: { show: true },
+              data: [
+                { type: 'max', name: '最大值', label: '最大值' },
+                { type: 'min', name: '最小值', label: '最小值' }
+              ]
+            }
+            item.markLine = {
+              data: [
+                { type: 'average', name: '平均值' }
+              ]
+            }
+          }
+          arr.push(item)
+        })
+        obj.dataList = arr
+        this.initChart(obj)
+      }
+    },
+    //初始化echarts
+    initChart(data){
+      this.chart.setOption({
+        color: ["#3398DB", "red"],
+        title:{
+          show:this.titleShow,
+          text:this.title,
+          left:this.titleX,
+          top:this.titleY,
+          textStyle:{
+            fontSize:this.titleSize
+          }
+        },
+        //图例设置
+        legend:{
+          show:this.legendShow,
+          orient:this.legendOrient,
+          left:this.legendX,
+          top:this.legendY,
+          data:data.nameList
+        },
+        //工具栏
+        toolbox:{
+          show:this.toolboxShow,
+          orient:this.toolboxOrient,
+          feature:{
+            saveAsImage:{show:true},
+            dataView:{show:true,readOnly:true}
+          }
+        },
+        //提示框
+        tooltip: {
+          show:this.tooltipShow,
+          trigger: this.tooltipTrigger,
+          axisPointer: {
+            type: "line",
+            crossStyle: {
+              color: "#333"
+            },
+            snap:true,
+            axis:'x'
+          },
+        },
+        //区域缩放
+        dataZoom:[
+          {
+            type: this.dataZoomType
+          }
+        ],
+        grid:{
+          top:this.gridTop,
+          left:this.gridLeft,
+          right:this.gridRight,
+          bottom:this.gridBottom,
+          containLabel:true
+        },
+        xAxis:{
+          show:this.xAxisShow,
+          type:'category',
+          name:this.xUnit,
+          nameTextStyle:{
+            fontSize:12
+          },
+          splitLine:{
+            show:this.xAxisSplitLineShow,
+          },
+          boundaryGap:false,
+          axisTick:{show:false}, //坐标轴刻度是否显示
+          data:this.xList
+        },
+        yAxis:{
+          type:'value',
+          name:this.yUnit,
+          splitNumber: 2,
+          axisLine:{
+            show:this.yAxisLineShow
+          },
+          splitLine:{
+            show:this.yAxisSplitLineShow
+          }
+        },
+        series:data.dataList
+      })
+    },
+    //注销echarts
+    removeChart(type){
+      if(!this.chart) return
+      this.chart.dispose() // 销毁echarts
+      this.chart = null
+      if(type === 'reset'){
+        this.init()
+      }
+    }
+  },
+  beforeDestroy(){
+    this.removeChart()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/common/PageTable/index.vue b/src/components/common/PageTable/index.vue
index 1b82a2b..01ba393 100644
--- a/src/components/common/PageTable/index.vue
+++ b/src/components/common/PageTable/index.vue
@@ -227,6 +227,11 @@
     type: {
       type: String,
       default: "all"
+    },
+    //表格传递的参数是否同级
+    isLevel: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -274,8 +279,14 @@
         // }
       }
       // 如果不需要分页，则无分页相关参数
-      const dataObj = this.pagination ? { data: obj } : { data: {} };
-      return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      // const dataObj = this.pagination ? { data: obj } : { data: {} };
+      // return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      if(!this.isLevel) {
+        const dataObj = this.pagination ? { data: obj } : { data: {} };
+        return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      }else{
+        return this.pagination ? { ...this.listInfo.query, ...obj } : obj
+      }
     },
     //选中数据
     handleSelectionChange(rows) {
diff --git a/src/components/index.js b/src/components/index.js
index 2b2ed2a..faf7b38 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,10 +2,12 @@
 import PageFilter from "@/components/common/PageFilter";
 import PageForm from "@/components/common/PageForm";
 import PageTable from "@/components/common/PageTable";
+import ChartLine from "@/components/common/PageChart/line";
 
 export default Vue => {
   Vue.component("page-dialog", PageDialog);
   Vue.component("page-filter", PageFilter);
   Vue.component("page-form", PageForm);
   Vue.component("page-table", PageTable);
+  Vue.component("chart-line", ChartLine);
 };
diff --git a/src/components/index.vue b/src/components/index.vue
index 2610bb0..68f095b 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -135,7 +135,13 @@
                 >统计报表</el-menu-item
               >
             </el-submenu>
-
+            <el-submenu index="12" v-has="'m12'">
+              <template slot="title">
+                <i class="el-icon-location"></i>
+                <span>服务监控</span>
+              </template>
+              <el-menu-item index="/ServiceWatch/serverManage" v-has="'m12-1'">服务器管理</el-menu-item>
+            </el-submenu>
             <el-submenu index="8" v-has="'m7'">
               <template slot="title">
                 <i class="el-icon-location"></i>
diff --git a/src/components/newFiber/NewFiberSearch.vue b/src/components/newFiber/NewFiberSearch.vue
index 66dad73..4226c58 100644
--- a/src/components/newFiber/NewFiberSearch.vue
+++ b/src/components/newFiber/NewFiberSearch.vue
@@ -126,7 +126,7 @@
         <!--搜索-->
         <div class="site-sidebar_form">
           <el-input
-            placeholder="请输入站点名称"
+            placeholder="请输入站点名称/站点编号"
             v-model="currentSiteName"
             @keyup.native.enter="handleChange"
             clearable

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/PageChart/line/index.vue b/src/components/common/PageChart/line/index.vue
new file mode 100644
index 0000000..e750aee
--- /dev/null
+++ b/src/components/common/PageChart/line/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :style="'height:' + height + '; width: ' + width" />
+</template>
+
+<script>
+let echarts = require('echarts/lib/echarts')
+// 引入折线图等组件
+require('echarts/lib/chart/line')
+// // 引入提示框和title组件，图例
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/title')
+require('echarts/lib/component/legend')
+require('echarts/lib/component/grid')
+require('echarts/lib/component/dataZoom')
+require('echarts/lib/component/tooltip')
+export default{
+  name:'ChartLine',
+  props:{
+    width:{
+      type:String,
+      default:'100%'
+    },
+    height:{
+      type:String,
+      default:'400px'
+    },
+    chartData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    },
+    //标题
+    title:{
+      type:String,
+      default:''
+    },
+    titleSize:{
+      type:Number,
+      default:16
+    },
+    titleX:{
+      type:String,
+      default:'center'
+    },
+    titleY:{
+      type:String,
+      default:'3%'
+    },
+    titleShow:{
+      type:Boolean,
+      default:true
+    },
+    //图例相关
+    legendShow:{
+      type:Boolean,
+      default:true
+    },
+    legendOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    legendX:{
+      type:String,
+      default:'center'
+    },
+    legendY:{
+      type:String,
+      default:'bottom'
+    },
+    //工具栏相关
+    toolboxShow:{
+      type:Boolean,
+      default:false
+    },
+    toolboxOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    //提示框相关
+    tooltipShow:{
+      type:Boolean,
+      default:true
+    },
+    tooltipTrigger:{
+      type:String,
+      default:"axis"
+    },
+    //区域缩放相关
+    dataZoomType:{
+      type:String,
+      default:"inside"
+    },
+    //坐标轴相关
+    xAxisShow:{
+      type:Boolean,
+      default:true
+    },
+    xAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisLineShow:{
+      type:Boolean,
+      default:false
+    },
+    //坐标系相关
+    gridTop:{
+      type:Number,
+      default:10
+    },
+    gridLeft:{
+      type:String,
+      default:'5%'
+    },
+    gridRight:{
+      type:String,
+      default:'10%'
+    },
+    gridBottom:{
+      type:Number,
+      default:0
+    },
+    //单位相关
+    xUnit:{
+      type:String,
+      default:''
+    },
+    yUnit:{
+      type:String,
+      default:''
+    },
+    //最值显示
+    markPoint:{
+      type:Boolean,
+      default:false
+    },
+    xList:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      chart:null, //Echarts实例
+    }
+  },
+  watch:{
+    //监听到数据改变，重新加载echart数据
+    chartData(val){
+      this.removeChart('reset')
+      this.initData()
+    }
+  },
+  mounted(){
+    this.init()
+    this.initData()
+  },
+  methods:{
+    //初始化
+    init(){
+      this.chart = echarts.init(this.$el)
+      //监听页面大小改变
+      window.addEventListener('resize', ()=>{
+        if(this.chart){
+          this.chart.resize()
+        }
+      })
+    },
+    //初始化数据
+    initData(){
+      if(!this.chart) return
+      const obj = JSON.parse(JSON.stringify(this.chartData))
+      const arr = []
+      if(obj.dataList && obj.dataList.length) {
+        obj.dataList.forEach((item, index) => {
+          // 对echarts数据做处理
+          item = {
+            name: obj.nameList[index],
+            data: item,
+            type: 'line'
+          }
+          // 根据参数判断是否显示最值
+          if (this.markPoint) {
+            item.markPoint = {
+              label: { show: true },
+              data: [
+                { type: 'max', name: '最大值', label: '最大值' },
+                { type: 'min', name: '最小值', label: '最小值' }
+              ]
+            }
+            item.markLine = {
+              data: [
+                { type: 'average', name: '平均值' }
+              ]
+            }
+          }
+          arr.push(item)
+        })
+        obj.dataList = arr
+        this.initChart(obj)
+      }
+    },
+    //初始化echarts
+    initChart(data){
+      this.chart.setOption({
+        color: ["#3398DB", "red"],
+        title:{
+          show:this.titleShow,
+          text:this.title,
+          left:this.titleX,
+          top:this.titleY,
+          textStyle:{
+            fontSize:this.titleSize
+          }
+        },
+        //图例设置
+        legend:{
+          show:this.legendShow,
+          orient:this.legendOrient,
+          left:this.legendX,
+          top:this.legendY,
+          data:data.nameList
+        },
+        //工具栏
+        toolbox:{
+          show:this.toolboxShow,
+          orient:this.toolboxOrient,
+          feature:{
+            saveAsImage:{show:true},
+            dataView:{show:true,readOnly:true}
+          }
+        },
+        //提示框
+        tooltip: {
+          show:this.tooltipShow,
+          trigger: this.tooltipTrigger,
+          axisPointer: {
+            type: "line",
+            crossStyle: {
+              color: "#333"
+            },
+            snap:true,
+            axis:'x'
+          },
+        },
+        //区域缩放
+        dataZoom:[
+          {
+            type: this.dataZoomType
+          }
+        ],
+        grid:{
+          top:this.gridTop,
+          left:this.gridLeft,
+          right:this.gridRight,
+          bottom:this.gridBottom,
+          containLabel:true
+        },
+        xAxis:{
+          show:this.xAxisShow,
+          type:'category',
+          name:this.xUnit,
+          nameTextStyle:{
+            fontSize:12
+          },
+          splitLine:{
+            show:this.xAxisSplitLineShow,
+          },
+          boundaryGap:false,
+          axisTick:{show:false}, //坐标轴刻度是否显示
+          data:this.xList
+        },
+        yAxis:{
+          type:'value',
+          name:this.yUnit,
+          splitNumber: 2,
+          axisLine:{
+            show:this.yAxisLineShow
+          },
+          splitLine:{
+            show:this.yAxisSplitLineShow
+          }
+        },
+        series:data.dataList
+      })
+    },
+    //注销echarts
+    removeChart(type){
+      if(!this.chart) return
+      this.chart.dispose() // 销毁echarts
+      this.chart = null
+      if(type === 'reset'){
+        this.init()
+      }
+    }
+  },
+  beforeDestroy(){
+    this.removeChart()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/common/PageTable/index.vue b/src/components/common/PageTable/index.vue
index 1b82a2b..01ba393 100644
--- a/src/components/common/PageTable/index.vue
+++ b/src/components/common/PageTable/index.vue
@@ -227,6 +227,11 @@
     type: {
       type: String,
       default: "all"
+    },
+    //表格传递的参数是否同级
+    isLevel: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -274,8 +279,14 @@
         // }
       }
       // 如果不需要分页，则无分页相关参数
-      const dataObj = this.pagination ? { data: obj } : { data: {} };
-      return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      // const dataObj = this.pagination ? { data: obj } : { data: {} };
+      // return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      if(!this.isLevel) {
+        const dataObj = this.pagination ? { data: obj } : { data: {} };
+        return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      }else{
+        return this.pagination ? { ...this.listInfo.query, ...obj } : obj
+      }
     },
     //选中数据
     handleSelectionChange(rows) {
diff --git a/src/components/index.js b/src/components/index.js
index 2b2ed2a..faf7b38 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,10 +2,12 @@
 import PageFilter from "@/components/common/PageFilter";
 import PageForm from "@/components/common/PageForm";
 import PageTable from "@/components/common/PageTable";
+import ChartLine from "@/components/common/PageChart/line";
 
 export default Vue => {
   Vue.component("page-dialog", PageDialog);
   Vue.component("page-filter", PageFilter);
   Vue.component("page-form", PageForm);
   Vue.component("page-table", PageTable);
+  Vue.component("chart-line", ChartLine);
 };
diff --git a/src/components/index.vue b/src/components/index.vue
index 2610bb0..68f095b 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -135,7 +135,13 @@
                 >统计报表</el-menu-item
               >
             </el-submenu>
-
+            <el-submenu index="12" v-has="'m12'">
+              <template slot="title">
+                <i class="el-icon-location"></i>
+                <span>服务监控</span>
+              </template>
+              <el-menu-item index="/ServiceWatch/serverManage" v-has="'m12-1'">服务器管理</el-menu-item>
+            </el-submenu>
             <el-submenu index="8" v-has="'m7'">
               <template slot="title">
                 <i class="el-icon-location"></i>
diff --git a/src/components/newFiber/NewFiberSearch.vue b/src/components/newFiber/NewFiberSearch.vue
index 66dad73..4226c58 100644
--- a/src/components/newFiber/NewFiberSearch.vue
+++ b/src/components/newFiber/NewFiberSearch.vue
@@ -126,7 +126,7 @@
         <!--搜索-->
         <div class="site-sidebar_form">
           <el-input
-            placeholder="请输入站点名称"
+            placeholder="请输入站点名称/站点编号"
             v-model="currentSiteName"
             @keyup.native.enter="handleChange"
             clearable
diff --git a/src/router/index.js b/src/router/index.js
index 2341577..cb21321 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -122,7 +122,33 @@
           component: resolve =>
             require(["@/components/DataAnalysis/StatisticalReport"], resolve)
         },
-
+        {
+          path: "/ServiceWatch/serverManage", // 服务监控-服务器管理
+          name: "ServerManage",
+          component: resolve => require(["@/components/ServiceWatch/serverManage"], resolve)
+        },
+        {
+          path: "/ServiceWatch/detail", // 服务监控-服务器详情
+          component: resolve => require(["@/components/ServiceWatch/serverDetail"], resolve),
+          redirect: '/ServiceWatch/serverDetail',
+          children: [
+            {
+              path: "/ServiceWatch/serverDetail", // 服务监控-服务器详情
+              name: "ServerDetail",
+              component: resolve => require(["@/components/ServiceWatch/components/detail"], resolve)
+            },
+            {
+              path: "/ServiceWatch/serverMonitor", // 服务监控-服务器监控
+              name: "ServerMonitor",
+              component: resolve => require(["@/components/ServiceWatch/components/monitor"], resolve)
+            },
+            {
+              path: "/ServiceWatch/serverApplied", // 服务监控-服务应用
+              name: "ServerApplied",
+              component: resolve => require(["@/components/ServiceWatch/components/applied"], resolve)
+            }
+          ]
+        },
         {
           path: "/Engineering/Nowfault", // 查询实时故障数据
           name: "Nowfault",

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/PageChart/line/index.vue b/src/components/common/PageChart/line/index.vue
new file mode 100644
index 0000000..e750aee
--- /dev/null
+++ b/src/components/common/PageChart/line/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :style="'height:' + height + '; width: ' + width" />
+</template>
+
+<script>
+let echarts = require('echarts/lib/echarts')
+// 引入折线图等组件
+require('echarts/lib/chart/line')
+// // 引入提示框和title组件，图例
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/title')
+require('echarts/lib/component/legend')
+require('echarts/lib/component/grid')
+require('echarts/lib/component/dataZoom')
+require('echarts/lib/component/tooltip')
+export default{
+  name:'ChartLine',
+  props:{
+    width:{
+      type:String,
+      default:'100%'
+    },
+    height:{
+      type:String,
+      default:'400px'
+    },
+    chartData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    },
+    //标题
+    title:{
+      type:String,
+      default:''
+    },
+    titleSize:{
+      type:Number,
+      default:16
+    },
+    titleX:{
+      type:String,
+      default:'center'
+    },
+    titleY:{
+      type:String,
+      default:'3%'
+    },
+    titleShow:{
+      type:Boolean,
+      default:true
+    },
+    //图例相关
+    legendShow:{
+      type:Boolean,
+      default:true
+    },
+    legendOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    legendX:{
+      type:String,
+      default:'center'
+    },
+    legendY:{
+      type:String,
+      default:'bottom'
+    },
+    //工具栏相关
+    toolboxShow:{
+      type:Boolean,
+      default:false
+    },
+    toolboxOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    //提示框相关
+    tooltipShow:{
+      type:Boolean,
+      default:true
+    },
+    tooltipTrigger:{
+      type:String,
+      default:"axis"
+    },
+    //区域缩放相关
+    dataZoomType:{
+      type:String,
+      default:"inside"
+    },
+    //坐标轴相关
+    xAxisShow:{
+      type:Boolean,
+      default:true
+    },
+    xAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisLineShow:{
+      type:Boolean,
+      default:false
+    },
+    //坐标系相关
+    gridTop:{
+      type:Number,
+      default:10
+    },
+    gridLeft:{
+      type:String,
+      default:'5%'
+    },
+    gridRight:{
+      type:String,
+      default:'10%'
+    },
+    gridBottom:{
+      type:Number,
+      default:0
+    },
+    //单位相关
+    xUnit:{
+      type:String,
+      default:''
+    },
+    yUnit:{
+      type:String,
+      default:''
+    },
+    //最值显示
+    markPoint:{
+      type:Boolean,
+      default:false
+    },
+    xList:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      chart:null, //Echarts实例
+    }
+  },
+  watch:{
+    //监听到数据改变，重新加载echart数据
+    chartData(val){
+      this.removeChart('reset')
+      this.initData()
+    }
+  },
+  mounted(){
+    this.init()
+    this.initData()
+  },
+  methods:{
+    //初始化
+    init(){
+      this.chart = echarts.init(this.$el)
+      //监听页面大小改变
+      window.addEventListener('resize', ()=>{
+        if(this.chart){
+          this.chart.resize()
+        }
+      })
+    },
+    //初始化数据
+    initData(){
+      if(!this.chart) return
+      const obj = JSON.parse(JSON.stringify(this.chartData))
+      const arr = []
+      if(obj.dataList && obj.dataList.length) {
+        obj.dataList.forEach((item, index) => {
+          // 对echarts数据做处理
+          item = {
+            name: obj.nameList[index],
+            data: item,
+            type: 'line'
+          }
+          // 根据参数判断是否显示最值
+          if (this.markPoint) {
+            item.markPoint = {
+              label: { show: true },
+              data: [
+                { type: 'max', name: '最大值', label: '最大值' },
+                { type: 'min', name: '最小值', label: '最小值' }
+              ]
+            }
+            item.markLine = {
+              data: [
+                { type: 'average', name: '平均值' }
+              ]
+            }
+          }
+          arr.push(item)
+        })
+        obj.dataList = arr
+        this.initChart(obj)
+      }
+    },
+    //初始化echarts
+    initChart(data){
+      this.chart.setOption({
+        color: ["#3398DB", "red"],
+        title:{
+          show:this.titleShow,
+          text:this.title,
+          left:this.titleX,
+          top:this.titleY,
+          textStyle:{
+            fontSize:this.titleSize
+          }
+        },
+        //图例设置
+        legend:{
+          show:this.legendShow,
+          orient:this.legendOrient,
+          left:this.legendX,
+          top:this.legendY,
+          data:data.nameList
+        },
+        //工具栏
+        toolbox:{
+          show:this.toolboxShow,
+          orient:this.toolboxOrient,
+          feature:{
+            saveAsImage:{show:true},
+            dataView:{show:true,readOnly:true}
+          }
+        },
+        //提示框
+        tooltip: {
+          show:this.tooltipShow,
+          trigger: this.tooltipTrigger,
+          axisPointer: {
+            type: "line",
+            crossStyle: {
+              color: "#333"
+            },
+            snap:true,
+            axis:'x'
+          },
+        },
+        //区域缩放
+        dataZoom:[
+          {
+            type: this.dataZoomType
+          }
+        ],
+        grid:{
+          top:this.gridTop,
+          left:this.gridLeft,
+          right:this.gridRight,
+          bottom:this.gridBottom,
+          containLabel:true
+        },
+        xAxis:{
+          show:this.xAxisShow,
+          type:'category',
+          name:this.xUnit,
+          nameTextStyle:{
+            fontSize:12
+          },
+          splitLine:{
+            show:this.xAxisSplitLineShow,
+          },
+          boundaryGap:false,
+          axisTick:{show:false}, //坐标轴刻度是否显示
+          data:this.xList
+        },
+        yAxis:{
+          type:'value',
+          name:this.yUnit,
+          splitNumber: 2,
+          axisLine:{
+            show:this.yAxisLineShow
+          },
+          splitLine:{
+            show:this.yAxisSplitLineShow
+          }
+        },
+        series:data.dataList
+      })
+    },
+    //注销echarts
+    removeChart(type){
+      if(!this.chart) return
+      this.chart.dispose() // 销毁echarts
+      this.chart = null
+      if(type === 'reset'){
+        this.init()
+      }
+    }
+  },
+  beforeDestroy(){
+    this.removeChart()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/common/PageTable/index.vue b/src/components/common/PageTable/index.vue
index 1b82a2b..01ba393 100644
--- a/src/components/common/PageTable/index.vue
+++ b/src/components/common/PageTable/index.vue
@@ -227,6 +227,11 @@
     type: {
       type: String,
       default: "all"
+    },
+    //表格传递的参数是否同级
+    isLevel: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -274,8 +279,14 @@
         // }
       }
       // 如果不需要分页，则无分页相关参数
-      const dataObj = this.pagination ? { data: obj } : { data: {} };
-      return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      // const dataObj = this.pagination ? { data: obj } : { data: {} };
+      // return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      if(!this.isLevel) {
+        const dataObj = this.pagination ? { data: obj } : { data: {} };
+        return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      }else{
+        return this.pagination ? { ...this.listInfo.query, ...obj } : obj
+      }
     },
     //选中数据
     handleSelectionChange(rows) {
diff --git a/src/components/index.js b/src/components/index.js
index 2b2ed2a..faf7b38 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,10 +2,12 @@
 import PageFilter from "@/components/common/PageFilter";
 import PageForm from "@/components/common/PageForm";
 import PageTable from "@/components/common/PageTable";
+import ChartLine from "@/components/common/PageChart/line";
 
 export default Vue => {
   Vue.component("page-dialog", PageDialog);
   Vue.component("page-filter", PageFilter);
   Vue.component("page-form", PageForm);
   Vue.component("page-table", PageTable);
+  Vue.component("chart-line", ChartLine);
 };
diff --git a/src/components/index.vue b/src/components/index.vue
index 2610bb0..68f095b 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -135,7 +135,13 @@
                 >统计报表</el-menu-item
               >
             </el-submenu>
-
+            <el-submenu index="12" v-has="'m12'">
+              <template slot="title">
+                <i class="el-icon-location"></i>
+                <span>服务监控</span>
+              </template>
+              <el-menu-item index="/ServiceWatch/serverManage" v-has="'m12-1'">服务器管理</el-menu-item>
+            </el-submenu>
             <el-submenu index="8" v-has="'m7'">
               <template slot="title">
                 <i class="el-icon-location"></i>
diff --git a/src/components/newFiber/NewFiberSearch.vue b/src/components/newFiber/NewFiberSearch.vue
index 66dad73..4226c58 100644
--- a/src/components/newFiber/NewFiberSearch.vue
+++ b/src/components/newFiber/NewFiberSearch.vue
@@ -126,7 +126,7 @@
         <!--搜索-->
         <div class="site-sidebar_form">
           <el-input
-            placeholder="请输入站点名称"
+            placeholder="请输入站点名称/站点编号"
             v-model="currentSiteName"
             @keyup.native.enter="handleChange"
             clearable
diff --git a/src/router/index.js b/src/router/index.js
index 2341577..cb21321 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -122,7 +122,33 @@
           component: resolve =>
             require(["@/components/DataAnalysis/StatisticalReport"], resolve)
         },
-
+        {
+          path: "/ServiceWatch/serverManage", // 服务监控-服务器管理
+          name: "ServerManage",
+          component: resolve => require(["@/components/ServiceWatch/serverManage"], resolve)
+        },
+        {
+          path: "/ServiceWatch/detail", // 服务监控-服务器详情
+          component: resolve => require(["@/components/ServiceWatch/serverDetail"], resolve),
+          redirect: '/ServiceWatch/serverDetail',
+          children: [
+            {
+              path: "/ServiceWatch/serverDetail", // 服务监控-服务器详情
+              name: "ServerDetail",
+              component: resolve => require(["@/components/ServiceWatch/components/detail"], resolve)
+            },
+            {
+              path: "/ServiceWatch/serverMonitor", // 服务监控-服务器监控
+              name: "ServerMonitor",
+              component: resolve => require(["@/components/ServiceWatch/components/monitor"], resolve)
+            },
+            {
+              path: "/ServiceWatch/serverApplied", // 服务监控-服务应用
+              name: "ServerApplied",
+              component: resolve => require(["@/components/ServiceWatch/components/applied"], resolve)
+            }
+          ]
+        },
         {
           path: "/Engineering/Nowfault", // 查询实时故障数据
           name: "Nowfault",
diff --git a/src/util/interface.js b/src/util/interface.js
index e0b5312..041c740 100644
--- a/src/util/interface.js
+++ b/src/util/interface.js
@@ -6,6 +6,7 @@
 import IotPc from "./IotPc";
 import group from "./group";
 import projectSet from "./projectSet";
+import serverManage from "./serverManage";
 // import task from './apiField/task';
 // import dataSource from './apiField/dataSource';
 
@@ -30,5 +31,6 @@
 nozzle = Object.assign(nozzle, IotPc);
 nozzle = Object.assign(nozzle, group);
 nozzle = Object.assign(nozzle, projectSet);
+nozzle = Object.assign(nozzle, serverManage);
 // nozzle = Object.assign(nozzle, dataSource);
 export default nozzle;

diff --git a/config/index.js b/config/index.js
index 45fc349..43b70bd 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,7 +75,15 @@
         pathRewrite: {
           "^/IotPc": "" //需要rewrite重写的,
         }
-      }
+      },
+      '/serverManage': {
+        // 服务器
+        'target': 'http://192.168.16.254:8080', // 孙逢时
+        'changeOrigin': true, //是否跨域
+        'pathRewrite': {
+          '^/serverManage': '' //需要rewrite重写的,
+        }
+      },
     },
 
     // Various Dev Server settings
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1e9d67d..e1b0809 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -78,6 +78,15 @@
 .flex-d{
   flex-direction: column;
 }
+.table-p{
+  font-size: 13px;
+  text-align: center;
+  line-height: 18px;
+}
+.table-p-cursor{
+  color: #409EFF;
+  cursor: pointer;
+}
 .page-data {
   display: flex;
   flex-direction: column;
diff --git a/src/components/ServiceWatch/components/applied.vue b/src/components/ServiceWatch/components/applied.vue
new file mode 100644
index 0000000..f3f4edf
--- /dev/null
+++ b/src/components/ServiceWatch/components/applied.vue
@@ -0,0 +1,257 @@
+<template>
+  <div class="h-100" style="min-height:calc(100% - 112px)">
+    <page-table
+      tabIndex
+      pagination
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    />
+    <page-dialog
+      class="page-data-dialog"
+      :title="dialogInfo.title"
+      :visible.sync="dialogInfo.visible"
+      :width="dialogInfo.width"
+      :bt-loading="dialogInfo.btLoading"
+      :bt-list="dialogInfo.btList"
+      @handleClick="handleClick"
+    >
+      <page-filter
+        :query.sync="dialogFilterInfo.query"
+        :filter-list="dialogFilterInfo.list"
+        @handleClick="handleClick"
+      />
+      <div>
+        <div class="mian-item"
+          v-loading="loading"
+          element-loading-text="拼命加载中"
+          element-loading-spinner="el-icon-loading"
+          element-loading-background="rgba(0, 0, 0, 0.8)">
+          <div class="contentAll">
+            <div class="content" v-for="(item, index) in applyChartInfo" :key="index">
+              <div class="describe">{{item.chartName}}</div>
+              <div class="apply-chart">
+                <chart-line
+                  height="100px"
+                  :chart-data="item.chartData"
+                  :x-list="xList"
+                  :title-show="false"
+                  :legend-show="false"
+                  :x-axis-show="false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </page-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          serverIp: "192.168.32.101"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.exeQueryList, //接口地址
+        refresh: 1,
+        initCurpage: 1,
+        isLevel: true,
+        data: [
+          // {
+          //   "exeName": "ins-ctpq7oqv",
+          //   "serverIp": "127.0.0.1",
+          //   "homePath": "/src/util/ruter",
+          //   "pid": "82731",
+          //   "port": "8080",
+          //   "status": 0,
+          //   "updateTime": "2020-12-10 23:33:00",
+          // }
+        ],
+        fieldList: [
+          { label: "应用名称", value: "exeName", minWidth: 120, tooltip: true },
+          { label: "服务器IP", value: "serverIp", minWidth: 150, tooltip: true },
+          { label: "路径", value: "homePath", minWidth: 150, tooltip: true },
+          { label: "进程号", value: "pid", width: 120 },
+          { label: "端口", value: "port", width: 80 },
+          { label: "状态", value: "status", width: 80, list: "statusList" },
+          { label: "更新时间", value: "updateTime", minWidth: 120, tooltip: true },
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "80",
+          btList: [
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true }
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+        statusList: [
+          {key:"正常",value:0},
+          {key:"停止",value:1},
+        ]
+      },
+      //弹窗相关
+      dialogInfo:{
+        title: "",
+        width: "650px",
+        visible: false,
+        btLoading: false,
+        type: "",
+        btList: [
+          {label:"关闭",type:"",icon:"",event:"close",show:true}
+        ]
+      },
+      //弹窗搜索相关
+      dialogFilterInfo: {
+        query: {
+          exeName:"",
+          serverIp:"",
+          beginTime:"",
+          endTime:""
+        },
+        list:[
+          {type: "date", label: "开始时间", value: "beginTime", dateType: "datetime", datePickerOptions: "pickerOptionsStart",hideLabel: true },
+          {type: "date", label: "结束时间", value: "endTime", dateType: "datetime", datePickerOptions: "pickerOptionsEnd",hideLabel: true },
+          {type: "button", label: "查询", btType: "primary", icon: "el-icon-search", event: "search", show: true},
+        ]
+      },
+      //应用图表相关
+      applyChartInfo:[
+        // {
+        //   chartName: "cpu",
+        //   chartData: {
+        //     nameList: ["cpu"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // },
+        // {
+        //   chartName: "mem",
+        //   chartData: {
+        //     nameList: ["mem"],
+        //     xList: ["2021-01-21 14:51:01","2021-01-21 14:51:01","2021-01-21 14:51:01"],
+        //     dataList: [[33,44,55]]
+        //   }
+        // }
+      ],
+      xList: [],
+      loading: false,
+    }
+  },
+  watch: {
+    "dialogInfo.visible"(val) {
+      if(!val) {
+
+      }
+    }
+  },
+  mounted() {
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //详情
+        case "detail":
+          this.dialogInfo.type = event;
+          this.dialogInfo.visible = true;
+          this.dialogInfo.title = `${data.exeName}应用详情`;
+          let curTime = new Date().getTime();
+          this.dialogFilterInfo.query.beginTime = this.$fn.switchTime(curTime - 3600 * 1000);
+          this.dialogFilterInfo.query.endTime = this.$fn.switchTime(curTime);
+          this.dialogFilterInfo.query.exeName = data.exeName;
+          this.dialogFilterInfo.query.serverIp = data.serverIp;
+          this.handleAjax();
+          break;
+        //搜索
+        case "search":
+          this.handleAjax();
+          break;
+        //关闭
+        case "close":
+          this.dialogInfo.visible = false;
+          break;
+      }
+    },
+    //请求事件
+    handleAjax() {
+      this.applyChartInfo = [];
+      this.loading = true;
+      this.$http.post(this.nozzle.exeQueryDetail,this.dialogFilterInfo.query).then(res =>{
+        this.loading = false;
+        if(res.data.code === 200) {
+          if(res.data.data.length) {
+            res.data.data.forEach(item =>{
+              if(item.name !== "time") {
+                this.applyChartInfo.push({
+                  chartName: item.name,
+                  chartData: {
+                    nameList: [item.name],
+                    dataList: [item.data]
+                  }
+                })
+              }else{
+                this.xList = item.data;
+              }
+            });
+          }
+        }
+      }).catch(e =>{
+        this.loading = false;
+        console.log(e);
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-table{
+  color: #000;
+    /deep/ .el-table th .cell{
+      color: #000 !important;
+    }
+    /deep/ .el-table td .cell{
+      color: #000 !important;
+    }
+}
+.contentAll{
+  min-height: 250px;
+}
+.content{
+  @include fa();
+  &:not(:first-child){
+    padding-top: 10px;
+    border-top: 1px solid rgb(58, 58, 60);
+  }
+  .apply-chart{
+    flex: 1;
+    // width: 400px;
+  }
+  .describe{
+    width: 50px;
+    text-align: center;
+  }
+}
+/deep/ .el-input__inner{
+  color: #999 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/detail.vue b/src/components/ServiceWatch/components/detail.vue
new file mode 100644
index 0000000..8a350a0
--- /dev/null
+++ b/src/components/ServiceWatch/components/detail.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class="main" 
+            v-loading="loading"
+            element-loading-text="拼命加载中"
+            element-loading-spinner="el-icon-loading"
+            element-loading-background="rgba(0, 0, 0, 0.8)"
+        >
+            <div class="basic-item">
+                <h3>实例信息</h3>
+                <div class="str-item"><div class="str-name">实例名称</div><div class="str-value"> {{serverDetail.instanceName}}</div></div>
+                <div class="str-item"> <div class="str-name">实例ID</div> <div class="str-value">{{serverDetail.instanceId}}</div> </div>
+                <div class="str-item"> <div class="str-name">UUID</div> <div class="str-value">{{serverDetail.uuid}}</div> </div>
+                <div class="str-item"> <div class="str-name">实例规格</div> <div class="str-value">{{serverDetail.instanceStandard}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属项目</div> <div class="str-value">{{serverDetail.parentProject}}</div> </div>
+                <div class="str-item"> <div class="str-name">地域</div> <div class="str-value">{{serverDetail.region}}</div> </div>
+                <div class="str-item"> <div class="str-name">可用区</div> <div class="str-value">{{serverDetail.zone}}</div> </div>
+                <div class="str-item"> <div class="str-name">密钥</div> <div class="str-value">{{serverDetail.keyIds}}</div> </div>
+                <div class="str-item"> <div class="str-name">角色</div> <div class="str-value">{{serverDetail.camRoleName}}</div> </div>
+                <div class="str-item"> <div class="str-name">标签</div> <div class="str-value">{{serverDetail.tags&& serverDetail.tags.length ===0? '':1}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>网络信息</h3>
+                <div class="str-item"> <div class="str-name">所属网络</div> <div class="str-value">{{serverDetail.vpcId}}</div> </div>
+                <div class="str-item"> <div class="str-name">所属子网</div> <div class="str-value">{{serverDetail.subNetId}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4公网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.publicAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">主IPv4内网IP</div> <div class="str-value">{{serverDetail.publicAddress&&serverDetail.privateAddress[0]}}</div> </div>
+                <div class="str-item"> <div class="str-name">用作公网网关</div> <div class="str-value">{{serverDetail.asVpcGateway ? '是' : '否'}}</div> </div>
+
+            </div>
+            <div class="basic-item">
+                <h3>配置信息</h3>
+                <div class="str-item"> <div class="str-name">操作系统名称</div> <div class="str-value">{{serverDetail.osName}}</div> </div>
+                <div class="str-item"> <div class="str-name">cpu</div> <div class="str-value" v-if="serverDetail.cpu">{{serverDetail.cpu }}核</div> <div class="str-value" v-else>无</div> </div>
+                <div class="str-item"> <div class="str-name">内存</div> <div class="str-value" v-if="serverDetail.memory">{{serverDetail.memory}}MB</div> <div class="str-value" v-else>无</div></div>
+                <div class="str-item"> <div class="str-name">公网宽带</div> <div class="str-value" v-if="serverDetail.internetMaxBandwidthOut">{{serverDetail.internetMaxBandwidthOut}}Mbps</div> <div class="str-value" v-else>无</div></div>
+            </div>
+            <div class="basic-item">
+                <h3>镜像信息</h3>
+                <div class="str-item"> <div class="str-name">镜像名称</div> <div class="str-value">{{serverDetail.imageName}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像Id</div> <div class="str-value">{{serverDetail.imageId}}</div> </div>
+                <div class="str-item"> <div class="str-name">镜像来源</div> <div class="str-value">{{serverDetail.imageType}}</div> </div>
+            </div>
+            <div class="basic-item">
+                <h3>计费信息</h3>
+                <div class="str-item"> <div class="str-name">实例计费模式</div> <div class="str-value">{{serverDetail.instanceChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">网络计费模式</div> <div class="str-value">{{serverDetail.internetChargeType}}</div> </div>
+                <div class="str-item"> <div class="str-name">创建时间</div> <div class="str-value">{{serverDetail.createdTime}}</div> </div>
+                <div class="str-item"> <div class="str-name">到期时间</div> <div class="str-value">{{serverDetail.expiredTime}}</div> </div>
+            </div>
+        </div>
+        <!-- <div v-else class="main">
+            暂无数据
+        </div> -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            serverDetail:{},
+            loading: false
+        }
+    },
+    filters: {
+        dataFormat(msg) {
+            return msg+'xxxxx';
+        }
+    },
+    created(){
+        this.loading = true;
+        this.$http.post(this.nozzle.instanceInfoList,{
+            regionId:'ap-chengdu',
+            instanceId:this.$route.query.instanceId
+        }).then(res=>{
+            this.loading = false;
+            if(res.data.code === 200) {
+                if(res.data.data.length) {
+                    this.serverDetail =res.data.data[0];
+                }
+            }
+        }).catch(e =>{
+            this.loading = false;
+            console.log('接口异常:' + e);
+        })
+    }
+}
+</script>
+
+<style  scoped>
+.main{
+    display: flex;
+    flex-wrap: wrap;
+    /* justify-content: space-between; */
+    justify-content: flex-start;
+    text-align: left;
+}
+.basic-item{
+    width: 32%;
+    box-sizing: border-box;
+    padding: 10px;
+    margin-left: 2%;
+    /* margin: 10px; */
+    /*  */
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(54, 58, 80, 0.32) 0px 2px 4px 0px;
+    border-radius: 0px;
+    /* color: rgba(0, 0, 0, 0.9); */
+}
+.main > div:nth-of-type(n+4) {
+    margin-top: 20px;
+}
+.main > div:nth-of-type(4n) {
+    margin-left: initial;
+}
+.main > div:nth-of-type(1) {
+    margin-left: initial;
+}
+/* .basic-item + .basic-item{
+    margin-top: 20px;
+} */
+.basic-item h3{
+    text-align: left;
+    font-size: 14px;
+    margin-bottom: 20px;
+}
+.str-item{
+    display: flex;
+}
+.str-item > div{
+    /* vertical-align: baseline; */
+    box-sizing: border-box;
+    height: 40px;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 6px 20px 6px 0;
+    /* width: 1px; */
+    font-size: 12px;
+}
+.str-name{
+    min-width: 25%;
+}
+.str-item .str-value{
+    color: rgba(0, 0, 0, 0.9);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor.vue b/src/components/ServiceWatch/components/monitor.vue
new file mode 100644
index 0000000..69123a4
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor.vue
@@ -0,0 +1,738 @@
+<template>
+  <div>
+    <div class="main">
+      <el-card shadow="hover">
+        <div class="choice">
+          <el-select v-model="choiceRange" @change="selectChange">
+            <el-option v-for="(item,index) in timeOptions" :key="index" :label="item.label" :value="index" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-select v-model="choicePeriod" @change="periodChange">
+            <el-option v-for="(item,index) in periodOptions" :key="index" :label="item.label" :value="item.value" >
+              <span style="float: left">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+          <el-date-picker
+            v-model="TimeValue"
+            :picker-options="pickerOptions"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            id="IndexTime"
+            value-format="yyyy-MM-dd HH:mm:ss"
+          ></el-date-picker>
+          <el-button size="" type="primary"><i class="el-icon-refresh" @click="refresh"></i></el-button>
+        </div>
+        <p class="describeP"><i class="el-icon-info" style="font-size:14px"></i>注释：Max、Min和Avg数值统计为当前折线图内所有点的最大值、最小值和平均值<a href="javascript:void(0)" style="float:right" @click="downAll">导出数据</a></p>
+        <!-- <div class="mian-item">
+          <div class="title">
+            系统平衡负载
+          </div>
+          <div class="contentAll">
+            <div class="content">
+              <div class="describe">
+                cpu平衡负载
+                <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" ref="echarts0"></div>
+              <div class="smallField"><p>max:</p><p>{{ echartsData1.max === null ? '': echartsData1.max}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.min  === null ? '': echartsData1.min}}%</p></div>
+              <div class="smallField"><p>max:</p><p>{{echartsData1.avg}}%</p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download"></i></el-button>
+              </div>
+            </div>
+
+          </div>
+        </div> -->
+        <div class="mian-item" v-for="(member,indexOut) in dataAll" :key="indexOut">
+          <div class="title">
+            {{member.name}}
+          </div>
+          <div class="contentAll">
+            <div class="content" v-for="(item,indexInt) in member.data" :key="indexInt">
+              <div class="describe">
+                {{item.name}}
+                <el-tooltip class="item" effect="dark" :content="item.tip" placement="bottom-start">
+                  <i class="el-icon-info" style="font-size:14px"></i>
+                </el-tooltip>
+              </div>
+              <div class="echarts" :ref="item.target"></div>
+              <div class="smallField"><p>max:</p><p><span v-if="item.echartsData && item.echartsData.max">{{ item.echartsData && item.echartsData.max}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.max )">-</span></p></div>
+              <div class="smallField"><p>min:</p><p><span v-if="item.echartsData && item.echartsData.min">{{ item.echartsData && item.echartsData.min}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.min )">-</span></p></div>
+              <div class="smallField"><p>avg:</p><p><span v-if="item.echartsData && item.echartsData.avg">{{ item.echartsData && item.echartsData.avg}}{{item.unit}}</span><span v-if="!(item.echartsData && item.echartsData.avg)">-</span></p></div>
+              <div class="option">
+                <el-button size="mini" icon="el-icon-rank" @click="showBigEcharts(item.target)"></el-button>
+                <el-button size="mini"><i class="el-icon-picture" @click="downImg(item.target)"></i></el-button>
+                <el-button size="mini"><i class="el-icon-download" @click="downXls(item.target,item.name)"></i></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-card>
+      <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->
+
+      <el-dialog
+        title="详细图表"
+        :visible.sync="dialogVisible"
+        modal-append-to-body
+        width="70%">
+        <div id="bigEacharts" ref="bigEacharts">
+
+        </div>
+        <!-- <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span> -->
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+// import html2canvas from 'html2canvas'
+import {dataAll} from './monitor01.js'
+// import fileDownload from 'js-file-download'
+import axios from 'axios'
+// import ExportJsonExcel from "js-export-excel"
+
+export default {
+  data(){
+    return{
+      dataAll,
+      timeOptions:[
+        {
+          label:'实时',value:0,mark:0
+        },
+        {
+          label:'24小时',value:1,mark:1
+        },
+        {
+          label:'7天',value:2,mark:2
+        }
+      ],
+      choiceRange:0,
+      choicePeriod:10,
+      TimeValue: [
+        this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),
+        this.moment().format("YYYY-MM-DD HH:mm:ss")
+      ], //起止日期
+      pickerOptions: {
+        shortcuts: [
+          {
+            text: "实时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000);
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近24小时",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 );
+              picker.$emit("pick", [start, end]);
+            }
+          },
+          {
+            text: "最近7天",
+            onClick(picker) {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit("pick", [start, end]);
+            }
+          }
+        ]
+      }, //时间框的快捷选项
+      dialogVisible:false,
+      bigEachartsTest:{},
+      test:0,
+      echartsData1:{},
+      targetAll:['CPUUsage','BaseCpuUsage',"CpuLoadavg",'MemUsed','MemUsage','LanOuttraffic','LanIntraffic','LanOutpkg','LanInpkg','TcpCurrEstab',
+      'WanOuttraffic','WanIntraffic','WanOutpkg','WanInpkg','AccOuttraffic'
+      ]
+    }
+  },
+  computed:{
+    periodOptions(){
+      let arr = [
+        {
+          label:'10秒',value:10
+        },
+        {
+          label:'1分钟',value:60
+        },
+        {
+          label:'5分钟',value:300
+        },
+        {
+          label:'1小时',value:3600
+        },
+        {
+          label:'1天',value:3600 * 24
+        }
+      ]
+      if (this.choiceRange===0) return arr.slice(0,3)
+      if (this.choiceRange===1) return arr.slice(1)
+      if (this.choiceRange===2) return arr.slice(3)
+    }
+  },
+  methods:{
+    selectChange(val){
+      if(val===0) this.TimeValue =  [this.moment().subtract(1, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===1) this.TimeValue =  [this.moment().subtract(24, 'hour').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      if(val===2) this.TimeValue =  [this.moment().subtract(7, 'day').format("YYYY-MM-DD HH:mm:ss"),this.moment().format("YYYY-MM-DD HH:mm:ss")];
+      this.choicePeriod=this.periodOptions[0].value
+    },
+    periodChange(){
+
+    },
+    refresh(){
+      // console.log(this.targetAll)
+      // this.echartsData1={}
+      this.targetAll.forEach(item=>{
+        this.getInterface(item)
+      })
+      // console.log(this.dataAll,'99999')
+    },
+    showBigEcharts(target){
+      this.dialogVisible=true
+      this.getInterface(target)
+      // this.test =1
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            setTimeout(() => {
+              this.bigEachartsTest = this.$echarts.init(this.$refs.bigEacharts);
+              // 指定图表的配置项和数据
+              var option = {
+                  color: ["#3398DB", "red"],
+                  tooltip: {
+                    show:true,
+                    trigger: "axis",
+                    axisPointer: {
+                      type: "line",
+                      crossStyle: {
+                        color: "#333"
+                      },
+                      snap:true,
+                      axis:'x'
+                    },
+                    // formatter: params => {
+                    //   // console.log(params[0],'params')
+                    //   // let axisValue = this.moment(params['axisValueLabel']).format("YYYY-MM-DD HH:mm:ss")
+                    //   // return `<p style="color:#333">${axisValue}</p><p style="font-weight:bold;color:black">${params[0].value}%</p>`
+                    //   var res = params[0].name;
+                    //     for (var i = 0; i < params.length; i++) {
+                    //       res +=
+                    //         "<br>" +
+                    //         params[i].marker +
+                    //         params[i].seriesName +
+                    //         "：" +
+                    //         params[i].data;
+                    //     }
+                    //     return res;
+                    // }
+                  },
+                  dataZoom:[
+                    {
+                      type : 'inside'
+                    }
+                  ],
+                  title: {
+                      // text: `${item.instanceId}/${item.name}`
+                      text: `${item.name}`
+                  },
+                  // legend: {
+                  //     data:['销量']
+                  // },
+                  xAxis: {
+                    // show:false,
+                    data: echartsObj.timeList,
+                    splitLine:{
+                      show:false
+                    },
+                    axisTick: {
+                        // alignWithLabel: true
+                    },
+                  },
+                  yAxis: {
+                    axisLine:{
+                      show:false
+                    },
+                    // splitNumber: 1,
+                    // minInterval: 10,
+                    // maxInterval: 20,
+                    splitLine:{
+                      show:false
+                    },
+                    // boundaryGap: [0, '100%']
+                  },
+                  series: [{
+                      // name: '销量1',
+                      type: 'line',
+                      data: echartsObj.valueList,
+                      markPoint: {
+                          data: [
+                              {type: 'max', name: '最大值'},
+                              {type: 'min', name: '最小值'}
+                          ],
+                          itemStyle:{
+                            color:'pink'
+                          }
+                      },
+                      markLine: {
+                          data: [
+                              {type: 'average', name: '平均值'}
+                          ],
+                          lineStyle:{
+                            color:'red'
+                          }
+                      }
+                  },
+                  // {
+                  //     name: '销量2',
+                  //     type: 'bar',
+                  //     data: [5, 20, 36, 10, 10, 20,70,200,12,24]
+                  // },
+                  ]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              this.bigEachartsTest.setOption(option);
+            }, 0);
+          }
+        })
+      })
+      
+    },
+    // 点击导出
+    downImg (target) {
+      this.showBigEcharts(target)
+      // console.log(this.bigEachartsTest,'myChart')
+      // this.bigEachartsTest.on('finished', function () {
+      //     console.log(2222)
+      // });
+      setTimeout(() => {
+      // console.log(this.bigEachartsTest,'myChart')
+
+      //   var img = new Image();
+      //   img.src = this.bigEacharts.getDataURL({
+      //       pixelRatio: 2,
+      //       backgroundColor: '#fff'
+      //   });
+      //   // const dataImg = new Image()
+      //   // dataImg.src = canvas.toDataURL('image/png')
+      //   const alink = document.createElement('a')
+      //   alink.href = img.src
+      //   alink.download = 'Img.jpg'
+      //   alink.click()
+      //   this.dialogVisible =false
+        window.pageYoffset = 0
+        document.documentElement.scrollTop = 0
+        document.body.scrollTop = 0
+        const targetDom = this.$refs.bigEacharts
+        // console.log(11111)
+        html2canvas(targetDom, {
+          useCORS: true,
+          allowTaint: true,
+          height: targetDom.scrollHeight,
+          width: targetDom.scrollWidth
+        }).then(canvas => {
+          const dataImg = new Image()
+          dataImg.src = canvas.toDataURL('image/png')
+          const alink = document.createElement('a')
+          alink.href = dataImg.src
+          alink.download = 'Img.jpg'
+          alink.click()
+          this.dialogVisible =false
+        })
+      }, 2000);
+      // this.dialogVisible=true
+      // this.$nextTick(()=>{
+
+      // })
+    },
+    downAll(){
+      var arr = [];
+      this.dataAll.forEach(item=>{
+        item.data.forEach(element => {
+          arr.push({
+            id:element.target,
+            name:element.name
+          })
+        })
+      })
+      console.log(arr,'arr')
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify(arr)
+      }
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+    },
+    downXls(target,name){
+      var param={
+        "regionId":"ap-chengdu",
+        "instanceId":this.$route.query.instanceId,
+        // "metricName":target,
+        "period":this.choicePeriod,
+        "startTime":this.TimeValue[0],
+        "endTime":this.TimeValue[1],
+        "metricListStr":JSON.stringify([{"id":target,"name":name}])
+      }
+      // //   console.log(param,'str')
+      //   postDownloadFile(this.nozzle.downloadMonitor, param);
+      
+      // 直接导出文件
+      // const ExportJsonExcel = require("js-export-excel");
+
+      
+      axios.post(this.nozzle.downloadMonitor, param, {
+        responseType: 'blob'
+      }).then((res) => {
+        // fileDownload(res, `${this.$route.query.instanceId}-${name}.xls`)
+        var elink = document.createElement('a');
+        elink.download = `${this.$route.query.instanceId}-${name}657.xls`;
+        elink.style.display = 'none';
+        var blob = new Blob([res], {type: 'application/vnd.ms-excel'});
+        
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        document.body.removeChild(elink);
+        // console.log('res', res);
+      }).catch((err) => {
+        console.log(err.message);
+      });
+      // var str='?'
+      // for(var i in param){
+      //   str += i + '=' + param[i] + '&'
+      // }
+      // str= str.slice(0,-1)
+      // window.open(`${this.nozzle.downloadMonitor}?${JSON.stringify(param)}`, '_blank');
+      // console.log(this.nozzle.downloadMonitor,'this.nozzle.downloadMonitor')
+      // console.log('http://192.168.16.254:8080/download/monitor','this.nozzle.downloadMonitor')
+      // postDownloadFile('http://192.168.16.254:8080/download/monitor', {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // });
+      // this.$http.post(this.nozzle.downloadMonitor, {
+      //   "regionId":"ap-chengdu",
+      //   "instanceId":this.$route.query.instanceId,
+      //   "metricName":target,
+      //   "period":this.choicePeriod,
+      //   "startTime":this.TimeValue.length && this.TimeValue[0],
+      //   "endTime":this.TimeValue.length && this.TimeValue[1],
+      //   "metricList":[{"id":target,"name":name}]
+      // },
+      // { responseType: "blob" }
+      // ).then(res=>{
+
+      //   console.log(res.data);
+      //   // var option = {};
+
+      //   // option.fileName = "excel";
+
+      //   // option.datas = res
+
+      //   // var toExcel = new ExportJsonExcel(option); //new
+      //   // toExcel.saveExcel(); //保存
+      //   // const blob = res.data;
+      //   // const reader = new FileReader();
+      //   // reader.readAsDataURL(blob);
+      //   // reader.onload = (e) => {
+      //   //   const a = document.createElement('a');
+      //   //   a.download = `文件名称.xls`;
+      //   //   // 后端设置的文件名称在res.headers的 "content-disposition": "form-data; name=\"attachment\"; filename=\"20181211191944.zip\"",
+      //   //   a.href = e.target.result;
+      //   //   document.body.appendChild(a);
+      //   //   a.click();
+      //   //   document.body.removeChild(a);
+      //   // };
+      //   // fileDownload(res.data, `${name}.xls`)
+      //   // console.log(res,'resss')
+      // })
+    },
+    createSmallEcharts(target){
+      var echartsObj;
+      this.dataAll.forEach(item=>{
+        item.data.forEach(member=>{
+          if(member.target  === target){
+            echartsObj = member.echartsData
+            // console.log(this.$refs[target],'this.$refs')
+            var myChart = this.$echarts.init(this.$refs[target][0]);
+            // console.log(document.getElementsByClassName('echarts')[0],'document.getElementsByCl')
+            // var myChart = this.$echarts.init(document.getElementsByClassName('echarts')[0]);
+            // 指定图表的配置项和数据
+            var option = {
+                color: ["#3398DB", "red"],
+                tooltip: {
+                  show:true,
+                  trigger: "axis",
+                  axisPointer: {
+                    type: "line",
+                    crossStyle: {
+                      color: "#333"
+                    },
+                    snap:true,
+                    axis:'x'
+                  },
+                },
+                dataZoom:[
+                  {
+                    type : 'inside'
+                  }
+                ],
+                title: {
+                    // text: 'ECharts 入门示例'
+                },
+                // legend: {
+                //     data:['销量']
+                // },
+                xAxis: {
+                  show:false,
+                  data: echartsObj.timeList,
+                  splitLine:{
+                    show:false
+                  },
+                  axisTick: {
+                      // alignWithLabel: true
+                  },
+                },
+                yAxis: {
+                  axisLine:{
+                    show:false
+                  },
+                  splitNumber: 2,
+                  // minInterval: 10,
+                  // maxInterval: 20,
+                  splitLine:{
+                    show:false
+                  },
+                  // boundaryGap: [0, '100%']
+                },
+                series: [{
+                    // name: '销量1',
+                    type: 'line',
+                    data: echartsObj.valueList
+                }]
+              };
+              // 使用刚指定的配置项和数据显示图表。
+              myChart.setOption(option);
+          }
+        })
+      })
+    },
+    getInterface(target){
+      this.$http.post(this.nozzle.monitorInfoList, {
+            "regionId":"ap-chengdu",
+            "instanceId":this.$route.query.instanceId,
+            "metricName":target,
+            "period":this.choicePeriod,
+            "startTime":this.TimeValue && this.TimeValue[0],
+            "endTime":this.TimeValue && this.TimeValue[1]
+        }).then(res=>{
+          // console.log(res,'resss')
+          var echartsObj;
+          this.dataAll.forEach(item=>{
+            item.data.forEach(member=>{
+              if(member.target  === target){
+                echartsObj = member.echartsData
+                // console.log('target')
+              }
+            })
+          })
+          for(var i in echartsObj){
+            delete echartsObj[i]
+          }
+          for(var i in res.data.data){
+            echartsObj[i]=res.data.data[i]
+          }
+          // arr.sort(function(a,b){return a - b;})
+          
+          function maxCreate(arr){
+            arr = arr.filter(item => !_isNaN(item))
+            return arr.length ? Math.max.apply(null, arr) : undefined
+          }
+
+          // var echartsObValueList=  JSON.parse(JSON.stringify(echartsObj.valueList))
+          let echartsObValueList=  [...echartsObj.valueList]
+          // try {
+
+          // } catch(err){
+            // }arr.sort(function(a,b){return a - b;});
+          // let max = Math.max(echartsObValueList)
+          let max = (echartsObValueList.sort(function(a,b){return a - b;}))[echartsObValueList.length-1];
+          let min = (echartsObValueList.sort(function(a,b){return a - b;}))[0];
+          // let min = Math.min(echartsObValueList)
+            // console.log(echartsObValueList,max,'001')
+          const arrayAverage = arr => arr.reduce((acc, val) => acc + val, 0) / arr.length
+          let avg = arrayAverage(echartsObValueList)
+          this.$set(echartsObj,'max', max)
+          this.$set(echartsObj,'min', min)
+          this.$set(echartsObj,'avg', avg.toFixed(3))
+          // this.echartsData1['max']=max
+          // this.echartsData1['min']=min
+          // this.echartsData1['avg']=avg.toFixed(3)
+          this.createSmallEcharts(target)
+          // console.log(max,min,avg,'res')
+        })
+    },
+    downloadMonitor(){
+      console.log(123)
+    }
+  },
+  mounted(){
+    // this.createSmallEcharts()
+  },
+  beforeDestroy(){
+    if(this.bigEacharts&& Object.keys(this.bigEacharts).length !==0){
+      this.bigEacharts.dispose()
+    }
+  },
+  beforeCreate(){
+
+  },
+  created(){
+    this.$http.post(this.nozzle.monitorMetricInfo).then(res=>{
+      var arr = res.data.data.map(item=>{
+        return item.id
+      })
+      // this.targetAll = arr
+      // console.log(res.data.data,arr,'ress')
+      // this.targetAll=res.data.data
+    })
+    this.refresh()
+  }
+}
+</script>
+
+<style scoped>
+.mian{
+  margin-bottom: -10px;
+}
+.describeP{
+  text-align: left;
+  margin: 30px 0 10px 0;
+  font-size: 12px;
+  color: #bbb;
+}
+.mian-item{
+  /* height: 150px; */
+  display: flex;
+  text-align: left;
+  /* margin: 30px 0 0 0; */
+  border-bottom:1px solid  #EBEEF5;
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .title{
+  /* text-align: left; */
+  font-weight: bold;
+  font-size: 14px;
+  color: #888;
+  padding: 10px;
+  width: 10%;
+}
+.mian-item .contentAll{
+  flex: 1;
+  /* display: flex; */
+  /* position: relative; */
+}
+.mian-item .contentAll .content{
+  border-top:1px solid  #EBEEF5;
+}
+.mian-item .contentAll > :first-child{
+  border-top:initial;
+}
+.mian-item .content{
+  /* flex: 1; */
+  display: flex;
+  position: relative;
+}
+.mian-item .content .describe{
+  height: 78px;
+  width: 10%;
+  font-size: 12px;
+  font-weight: 700;
+  padding: 10px;
+}
+.tooltip{
+  display: inline;
+}
+.mian-item .content .echarts{
+  height: 78px;
+  flex: 1;
+  /* padding: 10px; */
+}
+.mian-item .content .smallField{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.mian-item .content .smallField p{
+  height: 18px;
+  line-height: 18px;
+}
+.mian-item .content .smallField p:nth-child(1){
+  font-size: 14px;
+  color: #bbb;
+}
+.mian-item .content .smallField p:nth-child(2){
+  margin: 10px 0 0  0;
+  font-size: 14px;
+}
+.mian-item .content .option{
+  height: 78px;
+  width: 10%;
+  padding: 10px;
+}
+.choice{
+  text-align: left;
+}
+#bigEacharts{
+  width: 100%;
+  height: 400px;
+}
+/deep/.el-select .el-input__inner{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-input{
+  color: black !important;
+}
+/deep/.el-date-editor .el-range-separator{
+  color: black !important;
+}
+/deep/.el-button {
+    /* margin-top: 2px; */
+}
+/deep/.el-button+.el-button {
+    margin-left: 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/components/monitor01.js b/src/components/ServiceWatch/components/monitor01.js
new file mode 100644
index 0000000..1e4797a
--- /dev/null
+++ b/src/components/ServiceWatch/components/monitor01.js
@@ -0,0 +1,132 @@
+export const dataAll = [
+    {
+      name:'cpu监控',
+      data:[
+        {
+          name:'cpu利用率%',
+          target:'CPUUsage',
+          unit:"%",
+          tip:'CPU利用率是通过CVM子机内部监控组件采集上报，数据更加精准',
+          echartsData:{}
+        },
+        {
+          name:'基础cpu使用率%',
+          target:'BaseCpuUsage',
+          unit:"%",
+          tip:'基础CPU使用率通过宿主机采集上报，无须安装监控组件即可查看数据，子机高负载情况下仍可持续采集上报数据',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'系统平均负载',
+      data:[
+        {
+          name:'CPU平均负载',
+          target:'CpuLoadavg',
+          unit:"",
+          tip:'1分钟内CPU平均负载，取 /proc/loadavg 第一列数据（windows操作系统无此指标），依赖监控组件安装采集',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内存监控',
+      data:[
+        {
+          name:'内存使用量MB',
+          target:'MemUsed',
+          unit:"MB",
+          tip:'使用的内存量，不包括系统缓存和缓存区占用内存，依赖监控组件安装采集',
+          echartsData:{}
+        },
+        {
+          name:'内存利用率%',
+          target:'MemUsage',
+          unit:"%",
+          tip:'用户实际使用的内存量与总内存量之比，不包括缓冲区与系统缓存占用的内存',
+          echartsData:{}
+        }
+      ]
+    },
+    {
+      name:'内网带宽监控',
+      data:[
+        {
+          name:'内网出带宽Mbps',
+          target:'LanOuttraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒出流量',
+          echartsData:{}
+        },
+        {
+          name:'内网入带宽Mbps',
+          target:'LanIntraffic',
+          unit:"Mbps",
+          tip:'内网网卡的平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'内网出包量个/秒',
+          target:'LanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'内网入包量个/秒',
+          target:'LanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'TCP连接数个',
+          target:'TcpCurrEstab',
+          unit:"个",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    },
+    {
+      name:'外网带宽监控',
+      data:[
+        {
+          name:'外网出带宽Mbps',
+          target:'WanOuttraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒出流量，最小粒度数据为10秒总流量/10秒 计算得出',
+          echartsData:{}
+        },
+        {
+          name:'外网入带宽Mbps',
+          target:'WanIntraffic',
+          unit:"Mbps",
+          tip:'外网平均每秒入流量',
+          echartsData:{}
+        },
+        {
+          name:'外网出包量个/秒',
+          target:'WanOutpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒出包量',
+          echartsData:{}
+        },
+        {
+          name:'外网入包量个/秒',
+          target:'WanInpkg',
+          unit:"个/秒",
+          tip:'内网网卡的平均每秒入包量',
+          echartsData:{}
+        },
+        {
+          name:'外网出流量MB',
+          target:'AccOuttraffic',
+          unit:"MB",
+          tip:'处于 ESTABLISHED 状态的 TCP 连接数量，依赖监控组件安装采集',
+          echartsData:{}
+        },
+      ]
+    }
+  ]
diff --git a/src/components/ServiceWatch/serverDetail.vue b/src/components/ServiceWatch/serverDetail.vue
new file mode 100644
index 0000000..45087b5
--- /dev/null
+++ b/src/components/ServiceWatch/serverDetail.vue
@@ -0,0 +1,107 @@
+<template>
+  <div>
+      <div class="header">
+        <!-- <a href="javascript:;" class="back-a"><i class="el-icon-back"></i></a> -->
+        <el-button size="mini" icon="el-icon-back" class="back-button" @click="back">返回</el-button>
+        <h2 class="back-h2">{{pathQuery.instanceId}}</h2>
+        <span style="font-size:12px">({{pathQuery.instanceName}})</span>
+      </div>
+      <div>
+        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" type="border-card">
+        <el-menu-item v-for="(item,index) in siteNameList" :index="`${index}`" :key="item.path">{{item.name}}</el-menu-item>
+        </el-menu>
+      </div>
+      <div style="height:calc(100% - 112px)">
+          <router-view id="ContentView1"></router-view>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            activeIndex:'0',
+            siteNameList:[
+                {path:'/ServiceWatch/serverDetail',name:'基本信息'},
+                {path:'/ServiceWatch/serverMonitor',name:'监控'},
+                {path:'/ServiceWatch/serverApplied',name:'服务应用'}
+            ],
+            pathQuery:[]
+        }
+    },
+    methods:{
+        handleSelect(key, keyPath) {
+            this.activeIndex=key
+            this.$router.push({path:this.siteNameList[key]['path'],query:this.pathQuery})
+            // console.log(key,'key')
+        },
+        back(){
+            this.$router.push('/ServiceWatch/serverManage')
+        }
+    },
+    created(){
+        this.pathQuery=this.$route.query
+
+        this.siteNameList.forEach((item,index)=>{
+            if(item.path===this.$route.path){
+                this.activeIndex = index + ''
+            }
+        })
+        // this.activeIndex
+        // console.log(this.$route,this.pathQuery)
+    }
+}
+</script>
+
+<style scoped>
+.header{
+    background-color: #fff;
+    /* display: flex; */
+    text-align: left;
+    padding: 10px 20px;
+    border-bottom:1px solid  #EBEEF5;
+}
+.back-a{
+    height: 26px;
+    line-height: 26px;
+    width: 26px;
+    box-sizing: border-box;
+    display: inline-block;
+    text-align: center;
+    /* margin-left: -6px; */
+    vertical-align: middle;
+    margin-right: 24px;
+}
+.back-button{
+    margin-right: 24px;
+}
+.el-icon-back{
+    /* width: 16px;
+    height: 16px; */
+    font-size: 20px;
+    /* display: inline-block; */
+    /* vertical-align: middle; */
+    /* background-repeat: no-repeat; */
+}
+.back-h2{
+    display: inline-block;
+    vertical-align: middle;
+    font-size: 16px;
+    font-weight: 700;
+    margin-right: 20px;
+    max-width: 70%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    height: 30px;
+    line-height: 30px;
+}
+#ContentView1{
+    /* height: 100px; */
+    background-color: #fff;
+    padding: 20px;
+    box-sizing: border-box;
+    position: relative;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/ServiceWatch/serverManage.vue b/src/components/ServiceWatch/serverManage.vue
new file mode 100644
index 0000000..a3d5fe5
--- /dev/null
+++ b/src/components/ServiceWatch/serverManage.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="page-data">
+    <page-table
+      tabIndex
+      :is-level="tableInfo.isLevel"
+      :api-url="tableInfo.url"
+      :refresh="tableInfo.refresh"
+      :data.sync="tableInfo.data"
+      :query="filterInfo.query"
+      :list-type-info="listTypeInfo"
+      :init-curpage="tableInfo.initCurpage"
+      :field-list="tableInfo.fieldList"
+      :handle="tableInfo.handle"
+      @handleClick="handleClick"
+    >
+      <!--ID/名称-->
+      <template v-slot:col-instanceName="scope">
+        <p class="table-p table-p-cursor" @click="handleClick('detail',scope.row)">{{scope.row.instanceId}}</p>
+        <p class="table-p">{{scope.row.instanceName}}</p>
+      </template>
+      <!--实例配置-->
+      <template v-slot:col-diskType="scope">
+        <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+        <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+        <p class="table-p">网络：{{scope.row.net}}</p>
+      </template>
+      <!--主IPv4地址-->
+      <template v-slot:col-publicAddress="scope">
+        <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+        <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+      </template>
+      <!--到期时间-->
+      <template v-slot:col-expiredTime="scope">
+        <p class="table-p">{{scope.row.instanceChargeType}}</p>
+        <p class="table-p">{{scope.row.expiredTime}}到期</p>
+      </template>
+    </page-table>
+    <div
+      class="ACContent"
+      v-loading="loading"
+      element-loading-text="拼命加载中"
+      element-loading-spinner="el-icon-loading"
+      element-loading-background="rgba(0, 0, 0, 0.8)"
+    >
+      <!-- <el-table :data="TableData" style="width: 100%;height:calc(100% - 45px)" stripe>
+        <el-table-column prop="stCode" label="ID/名称" width="150">
+          <template slot-scope="scope">
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">{{scope.row.instanceId}}</router-link>
+            <div style="font-size:10px">{{scope.row.instanceName}}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="instanceState" label="状态" width="80"></el-table-column>
+        <el-table-column prop="zone" label="可用区" width="120"></el-table-column>
+        <el-table-column prop="instanceType" label="实例类型" show-overflow-tooltip>
+          <template slot-scope="scope">
+            {{scope.row.instanceType}}
+            
+          </template>
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" min-width="150" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.cpu}}核 {{scope.row.memory}}MB {{scope.row.internetMaxBandwidthOut}}Mbps</p>
+            <p class="table-p">系统盘：{{scope.row.diskType}}</p>
+            <p class="table-p">网络：{{scope.row.net}}</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stName" label="主IPv4地址" width="120" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.publicAddress[0]}}(公)</p>
+            <p class="table-p">{{scope.row.privateAddress[0]}}(内)</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="internetChargeType" label="网络计费模式" show-overflow-tooltip>
+          
+        </el-table-column>
+        <el-table-column prop="stCode" label="实例配置" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <p class="table-p">{{scope.row.instanceChargeType}}</p>
+            <p class="table-p">{{scope.row.expiredTime}}到期</p>
+          </template>
+        </el-table-column>
+        <el-table-column prop="parentProject" label="所属项目" width="100">
+        </el-table-column>
+        <el-table-column label="操作">
+          <template slot-scope="scope" width="220">
+            <span @click="bindMail" style="color:#409EFF;hover:cursor:pointer">绑定邮箱</span>&nbsp;
+            <router-link :to="{path:'/configure',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看详情</router-link>
+            &nbsp;&nbsp;&nbsp;
+            <router-link :to="{path:'/configure/monitor',query:{instanceId:scope.row.instanceId,instanceName:scope.row.instanceName}}" style="color:#409EFF">查看监控</router-link>
+          </template>
+        </el-table-column>
+      </el-table> -->
+      <el-dialog
+        title="提示"
+        :visible.sync="dialogVisible"
+        width="60%"
+        >
+        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+          <!-- <el-form-item prop="email" label="邮箱" :rules="[
+              { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+              { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+            ]"
+          >
+            <el-input v-model="dynamicValidateForm.email"></el-input>
+          </el-form-item> -->
+          <el-row v-for="(item,index) in dynamicValidateForm.domains" :key="index">
+            <el-col span="12">
+              <el-form-item prop="name" label="名字">
+                <el-input v-model="item.name"></el-input>
+                </el-form-item>
+              </el-col>
+              <el-col span="12">
+              <el-form-item prop="email" label="邮箱">
+                <el-input v-model="item.email"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-button @click.prevent="removeRow(domain)">删除</el-button>
+          </el-row>
+          <!-- <el-form-item
+            v-for="(domain, index) in dynamicValidateForm.domains"
+            :label="'域名' + index"
+            :key="domain.key"
+            :prop="'domains.' + index + '.value'"
+            :rules="{
+              required: true, message: '域名不能为空', trigger: 'blur'
+            }"
+          >
+            <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
+          </el-form-item> -->
+          <el-form-item>
+            <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+            <el-button @click="addDomain">新增域名</el-button>
+            <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+          </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+          <el-button @click="dialogVisible = false">取 消</el-button>
+          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+        </span>
+      </el-dialog>
+      <!-- <el-pagination
+        @size-change="sizeChange"
+        @current-change="currentChange"
+        :current-page="pageCurrent"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+        style="margin-top:10px;"
+      ></el-pagination> -->
+    </div>
+    
+  </div>
+</template>
+
+<script>
+import { message } from "./../../util/item";
+export default {
+  data() {
+    return {
+      //搜索相关
+      filterInfo: {
+        query: {
+          regionId:"ap-chengdu",
+          instanceId:"ins-ctpq7oqv"
+        }
+      },
+      //表格相关
+      tableInfo: {
+        url: this.nozzle.instanceInfoList, //接口地址
+        refresh: 1,
+        isLevel: true,
+        initCurpage: 1,
+        data: [
+          // {
+          //   "instanceId": "ins-ctpq7oqv",
+          //   "instanceName": "activity-cvm-2020-08-07",
+          //   "uuid": "15f65f34-ba1c-49df-8ed6-1cfca05bcd37",
+          //   "instanceState": "运行中",
+          //   "instanceType": "标准型SA2.LARGE16CentOS 7.2 64bit",
+          //   "instanceStandard": "标准型SA2.LARGE16",
+          //   "restrictState": "NORMAL",
+          //   "regionId": "ap-chengdu",
+          //   "region": "成都",
+          //   "zone": "成都1区",
+          //   "osName": "CentOS 7.2 64bit",
+          //   "cpu": 4,
+          //   "internetMaxBandwidthOut": 1,
+          //   "diskType": "高性能云硬盘",
+          //   "net": "西南成都VPC|10.0.0.0/16",
+          //   "publicAddress": [
+          //       "119.27.160.75"
+          //   ],
+          //   "privateAddress": [
+          //       "10.0.0.17"
+          //   ],
+          //   "instanceChargeType": "包年包月",
+          //   "parentProject": "默认项目",
+          //   "createdTime": "2020-08-07 23:14:47",
+          //   "expiredTime": "2023-08-07 23:14:47",
+          //   "vpcId": "vpc-2yh3538y(西南成都VPC|10.0.0.0/16)",
+          //   "subNetId": "subnet-athj26o1(成都)",
+          //   "asVpcGateway": false,
+          //   "imageId": "img-2x39h23l",
+          //   "imageName": "139iso",
+          //   "camRoleName": "",
+          //   "keyIds": null,
+          //   "tags": [],
+          //   "memory": 16,
+          //   "imageType": "自定义镜像",
+          //   "internetChargeType": "按带宽包年包月计费"
+          // }
+        ],
+        fieldList: [
+          { label: "ID/名称", value: "instanceName", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "状态", value: "instanceState", width: 70 },
+          { label: "可用区", value: "zone", width: 100 },
+          { label: "实例类型", value: "instanceType", minWidth: 120, tooltip: true },
+          { label: "实例配置", value: "diskType", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "主IPv4地址", value: "publicAddress", minWidth: 150, tooltip: true, type: "slot" },
+          { label: "网络计费模式", value: "internetChargeType", minWidth: 120, tooltip: true },
+          { label: "实例时间", value: "expiredTime", minWidth: 120, tooltip: true, type: "slot" },
+          { label: "所属项目", value: "parentProject", minWidth: 100, tooltip: true }
+        ],
+        handle: {
+          fixed: "right",
+          label: "操作",
+          width: "180",
+          btList: [
+            // { label: "绑定邮箱", size: "small", type: "text", event: "permission", show: true },
+            { label: "查看详情", size: "small", type: "text", event: "detail", show: true },
+            { label: "查看监控", size: "small", type: "text", event: "monitor", show: true },
+          ]
+        }
+      },
+      //列表相关
+      listTypeInfo: {
+
+      },
+      TableData: [], //表格数据
+      pageCurrent: 1, //分页默认显示页
+      total: 0, //分页上显示的数据总条数
+      pageSize: 10, //分页上显示的每页的条数
+      loading: false,
+      dialogVisible:false,
+      dynamicValidateForm: {
+        domains: [{
+          name: '',
+          mail:''
+        }],
+        email: ''
+      }
+    };
+  },
+  created(){
+    // this.getTableData()
+  },
+  mounted() {
+    // this.LoadAllProject();
+    this.tableInfo.refresh = Math.random();
+  },
+  methods: {
+    //点击事件
+    handleClick(event, data) {
+      switch(event) {
+        //查看详情
+        case "detail":
+          this.$router.push({
+            path:"/ServiceWatch/detail",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName,
+            }
+          });
+          break;
+        //查看监控
+        case "monitor":
+          this.$router.push({
+            path:"/ServiceWatch/serverMonitor",
+            query:{
+              instanceId:data.instanceId,
+              instanceName:data.instanceName
+            }
+          });
+          break;
+      }
+    },
+    removeRow(){
+
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
+    removeDomain(item) {
+      var index = this.dynamicValidateForm.domains.indexOf(item)
+      if (index !== -1) {
+        this.dynamicValidateForm.domains.splice(index, 1)
+      }
+    },
+    addDomain() {
+      this.dynamicValidateForm.domains.push({
+        value: '',
+        key: Date.now()
+      });
+    },
+    bindMail(){
+      // console.log(11)
+      this.dialogVisible =true
+    },
+    //分页
+    sizeChange(val) {
+      // 改变每页的条数
+      this.pageSize = val;
+      this.getTableData();
+    },
+    currentChange(val) {
+      //改变页数
+      this.pageCurrent = val;
+      this.getTableData();
+    },
+    // 根据平台获取已配置的预警报警线 可选填站点
+    getTableData() {
+      this.loading = true;
+      this.TableData = [];
+      this.$http.post(this.nozzle.instanceInfoList, {
+            regionId:'ap-chengdu',
+            instanceId:"ins-ctpq7oqv"
+        }).then(res => {
+          this.loading = false; 
+          if(res.data.code === 3000){
+            // this.$message({type:'warning',message:'网络差'})
+            this.$message({
+              message: "网络超时，请刷新后再次请求",
+              type: "error"
+            });
+          }
+          if(res.data.code === 200) {
+            if(res.data.data.length) {
+              this.TableData = res.data.data;
+              this.total = res.data.data.length;
+            }
+          }
+        })
+    },
+  }
+};
+</script>
+
+<style scoped>
+#AlarmConfiguration {
+  width: 100%;
+  height: 100%;
+}
+/* 顶部搜索 */
+#ACTopSearchBox {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  text-align: left;
+}
+#ACTopSearchBox .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+/* 表格 */
+#ACContent {
+  width: 100%;
+  height: calc(100% - 70px);
+  margin-top: 10px;
+  background: rgba(53, 53, 53, 0.5);
+}
+/* 弹窗 */
+#DialogSearch {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  text-align: left;
+}
+#DialogSearch .el-input {
+  width: 250px;
+  margin: 0 10px;
+}
+#DialogCentent {
+  width: 100%;
+  height: 600px;
+}
+/* 内层弹窗 */
+.Dialog2List {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  box-sizing: border-box;
+  text-align: center;
+}
+.Dialog2List .el-input {
+  width: 217px;
+}
+.Dialog2ListName {
+  display: inline-block;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
+  color: white;
+  text-align: center;
+}
+.Dialog2ListButton {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: rgb(0, 111, 255);
+  background: rgba(255, 255, 255, 0);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+.Dialog2ListButton2 {
+  height: 40px;
+  width: 100px;
+  display: inline-block;
+  line-height: 40px;
+  border-radius: 2px;
+  text-decoration: none;
+  color: white;
+  background: rgb(0, 111, 255);
+  border: 1px solid rgb(0, 111, 255);
+  margin: 0 30px;
+}
+/* .table-p{
+  text-align:left;
+  line-height: 18;
+  font-size: 12px;
+} */
+</style>
+
+<style >
+.el-dialog__body {
+  padding-top: 0 !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/PageChart/line/index.vue b/src/components/common/PageChart/line/index.vue
new file mode 100644
index 0000000..e750aee
--- /dev/null
+++ b/src/components/common/PageChart/line/index.vue
@@ -0,0 +1,308 @@
+<template>
+  <div :style="'height:' + height + '; width: ' + width" />
+</template>
+
+<script>
+let echarts = require('echarts/lib/echarts')
+// 引入折线图等组件
+require('echarts/lib/chart/line')
+// // 引入提示框和title组件，图例
+require('echarts/lib/component/toolbox')
+require('echarts/lib/component/title')
+require('echarts/lib/component/legend')
+require('echarts/lib/component/grid')
+require('echarts/lib/component/dataZoom')
+require('echarts/lib/component/tooltip')
+export default{
+  name:'ChartLine',
+  props:{
+    width:{
+      type:String,
+      default:'100%'
+    },
+    height:{
+      type:String,
+      default:'400px'
+    },
+    chartData:{
+      type:Object,
+      default:()=>{
+        return {}
+      }
+    },
+    //标题
+    title:{
+      type:String,
+      default:''
+    },
+    titleSize:{
+      type:Number,
+      default:16
+    },
+    titleX:{
+      type:String,
+      default:'center'
+    },
+    titleY:{
+      type:String,
+      default:'3%'
+    },
+    titleShow:{
+      type:Boolean,
+      default:true
+    },
+    //图例相关
+    legendShow:{
+      type:Boolean,
+      default:true
+    },
+    legendOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    legendX:{
+      type:String,
+      default:'center'
+    },
+    legendY:{
+      type:String,
+      default:'bottom'
+    },
+    //工具栏相关
+    toolboxShow:{
+      type:Boolean,
+      default:false
+    },
+    toolboxOrient:{
+      type:String,
+      default:'horizontal'
+    },
+    //提示框相关
+    tooltipShow:{
+      type:Boolean,
+      default:true
+    },
+    tooltipTrigger:{
+      type:String,
+      default:"axis"
+    },
+    //区域缩放相关
+    dataZoomType:{
+      type:String,
+      default:"inside"
+    },
+    //坐标轴相关
+    xAxisShow:{
+      type:Boolean,
+      default:true
+    },
+    xAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisSplitLineShow:{
+      type:Boolean,
+      default:false
+    },
+    yAxisLineShow:{
+      type:Boolean,
+      default:false
+    },
+    //坐标系相关
+    gridTop:{
+      type:Number,
+      default:10
+    },
+    gridLeft:{
+      type:String,
+      default:'5%'
+    },
+    gridRight:{
+      type:String,
+      default:'10%'
+    },
+    gridBottom:{
+      type:Number,
+      default:0
+    },
+    //单位相关
+    xUnit:{
+      type:String,
+      default:''
+    },
+    yUnit:{
+      type:String,
+      default:''
+    },
+    //最值显示
+    markPoint:{
+      type:Boolean,
+      default:false
+    },
+    xList:{
+      type:Array,
+      default:()=>{
+        return []
+      }
+    }
+  },
+  data(){
+    return{
+      chart:null, //Echarts实例
+    }
+  },
+  watch:{
+    //监听到数据改变，重新加载echart数据
+    chartData(val){
+      this.removeChart('reset')
+      this.initData()
+    }
+  },
+  mounted(){
+    this.init()
+    this.initData()
+  },
+  methods:{
+    //初始化
+    init(){
+      this.chart = echarts.init(this.$el)
+      //监听页面大小改变
+      window.addEventListener('resize', ()=>{
+        if(this.chart){
+          this.chart.resize()
+        }
+      })
+    },
+    //初始化数据
+    initData(){
+      if(!this.chart) return
+      const obj = JSON.parse(JSON.stringify(this.chartData))
+      const arr = []
+      if(obj.dataList && obj.dataList.length) {
+        obj.dataList.forEach((item, index) => {
+          // 对echarts数据做处理
+          item = {
+            name: obj.nameList[index],
+            data: item,
+            type: 'line'
+          }
+          // 根据参数判断是否显示最值
+          if (this.markPoint) {
+            item.markPoint = {
+              label: { show: true },
+              data: [
+                { type: 'max', name: '最大值', label: '最大值' },
+                { type: 'min', name: '最小值', label: '最小值' }
+              ]
+            }
+            item.markLine = {
+              data: [
+                { type: 'average', name: '平均值' }
+              ]
+            }
+          }
+          arr.push(item)
+        })
+        obj.dataList = arr
+        this.initChart(obj)
+      }
+    },
+    //初始化echarts
+    initChart(data){
+      this.chart.setOption({
+        color: ["#3398DB", "red"],
+        title:{
+          show:this.titleShow,
+          text:this.title,
+          left:this.titleX,
+          top:this.titleY,
+          textStyle:{
+            fontSize:this.titleSize
+          }
+        },
+        //图例设置
+        legend:{
+          show:this.legendShow,
+          orient:this.legendOrient,
+          left:this.legendX,
+          top:this.legendY,
+          data:data.nameList
+        },
+        //工具栏
+        toolbox:{
+          show:this.toolboxShow,
+          orient:this.toolboxOrient,
+          feature:{
+            saveAsImage:{show:true},
+            dataView:{show:true,readOnly:true}
+          }
+        },
+        //提示框
+        tooltip: {
+          show:this.tooltipShow,
+          trigger: this.tooltipTrigger,
+          axisPointer: {
+            type: "line",
+            crossStyle: {
+              color: "#333"
+            },
+            snap:true,
+            axis:'x'
+          },
+        },
+        //区域缩放
+        dataZoom:[
+          {
+            type: this.dataZoomType
+          }
+        ],
+        grid:{
+          top:this.gridTop,
+          left:this.gridLeft,
+          right:this.gridRight,
+          bottom:this.gridBottom,
+          containLabel:true
+        },
+        xAxis:{
+          show:this.xAxisShow,
+          type:'category',
+          name:this.xUnit,
+          nameTextStyle:{
+            fontSize:12
+          },
+          splitLine:{
+            show:this.xAxisSplitLineShow,
+          },
+          boundaryGap:false,
+          axisTick:{show:false}, //坐标轴刻度是否显示
+          data:this.xList
+        },
+        yAxis:{
+          type:'value',
+          name:this.yUnit,
+          splitNumber: 2,
+          axisLine:{
+            show:this.yAxisLineShow
+          },
+          splitLine:{
+            show:this.yAxisSplitLineShow
+          }
+        },
+        series:data.dataList
+      })
+    },
+    //注销echarts
+    removeChart(type){
+      if(!this.chart) return
+      this.chart.dispose() // 销毁echarts
+      this.chart = null
+      if(type === 'reset'){
+        this.init()
+      }
+    }
+  },
+  beforeDestroy(){
+    this.removeChart()
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/common/PageTable/index.vue b/src/components/common/PageTable/index.vue
index 1b82a2b..01ba393 100644
--- a/src/components/common/PageTable/index.vue
+++ b/src/components/common/PageTable/index.vue
@@ -227,6 +227,11 @@
     type: {
       type: String,
       default: "all"
+    },
+    //表格传递的参数是否同级
+    isLevel: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -274,8 +279,14 @@
         // }
       }
       // 如果不需要分页，则无分页相关参数
-      const dataObj = this.pagination ? { data: obj } : { data: {} };
-      return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      // const dataObj = this.pagination ? { data: obj } : { data: {} };
+      // return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      if(!this.isLevel) {
+        const dataObj = this.pagination ? { data: obj } : { data: {} };
+        return this.pagination ? { ...this.listInfo.query, ...dataObj } : dataObj;
+      }else{
+        return this.pagination ? { ...this.listInfo.query, ...obj } : obj
+      }
     },
     //选中数据
     handleSelectionChange(rows) {
diff --git a/src/components/index.js b/src/components/index.js
index 2b2ed2a..faf7b38 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -2,10 +2,12 @@
 import PageFilter from "@/components/common/PageFilter";
 import PageForm from "@/components/common/PageForm";
 import PageTable from "@/components/common/PageTable";
+import ChartLine from "@/components/common/PageChart/line";
 
 export default Vue => {
   Vue.component("page-dialog", PageDialog);
   Vue.component("page-filter", PageFilter);
   Vue.component("page-form", PageForm);
   Vue.component("page-table", PageTable);
+  Vue.component("chart-line", ChartLine);
 };
diff --git a/src/components/index.vue b/src/components/index.vue
index 2610bb0..68f095b 100644
--- a/src/components/index.vue
+++ b/src/components/index.vue
@@ -135,7 +135,13 @@
                 >统计报表</el-menu-item
               >
             </el-submenu>
-
+            <el-submenu index="12" v-has="'m12'">
+              <template slot="title">
+                <i class="el-icon-location"></i>
+                <span>服务监控</span>
+              </template>
+              <el-menu-item index="/ServiceWatch/serverManage" v-has="'m12-1'">服务器管理</el-menu-item>
+            </el-submenu>
             <el-submenu index="8" v-has="'m7'">
               <template slot="title">
                 <i class="el-icon-location"></i>
diff --git a/src/components/newFiber/NewFiberSearch.vue b/src/components/newFiber/NewFiberSearch.vue
index 66dad73..4226c58 100644
--- a/src/components/newFiber/NewFiberSearch.vue
+++ b/src/components/newFiber/NewFiberSearch.vue
@@ -126,7 +126,7 @@
         <!--搜索-->
         <div class="site-sidebar_form">
           <el-input
-            placeholder="请输入站点名称"
+            placeholder="请输入站点名称/站点编号"
             v-model="currentSiteName"
             @keyup.native.enter="handleChange"
             clearable
diff --git a/src/router/index.js b/src/router/index.js
index 2341577..cb21321 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -122,7 +122,33 @@
           component: resolve =>
             require(["@/components/DataAnalysis/StatisticalReport"], resolve)
         },
-
+        {
+          path: "/ServiceWatch/serverManage", // 服务监控-服务器管理
+          name: "ServerManage",
+          component: resolve => require(["@/components/ServiceWatch/serverManage"], resolve)
+        },
+        {
+          path: "/ServiceWatch/detail", // 服务监控-服务器详情
+          component: resolve => require(["@/components/ServiceWatch/serverDetail"], resolve),
+          redirect: '/ServiceWatch/serverDetail',
+          children: [
+            {
+              path: "/ServiceWatch/serverDetail", // 服务监控-服务器详情
+              name: "ServerDetail",
+              component: resolve => require(["@/components/ServiceWatch/components/detail"], resolve)
+            },
+            {
+              path: "/ServiceWatch/serverMonitor", // 服务监控-服务器监控
+              name: "ServerMonitor",
+              component: resolve => require(["@/components/ServiceWatch/components/monitor"], resolve)
+            },
+            {
+              path: "/ServiceWatch/serverApplied", // 服务监控-服务应用
+              name: "ServerApplied",
+              component: resolve => require(["@/components/ServiceWatch/components/applied"], resolve)
+            }
+          ]
+        },
         {
           path: "/Engineering/Nowfault", // 查询实时故障数据
           name: "Nowfault",
diff --git a/src/util/interface.js b/src/util/interface.js
index e0b5312..041c740 100644
--- a/src/util/interface.js
+++ b/src/util/interface.js
@@ -6,6 +6,7 @@
 import IotPc from "./IotPc";
 import group from "./group";
 import projectSet from "./projectSet";
+import serverManage from "./serverManage";
 // import task from './apiField/task';
 // import dataSource from './apiField/dataSource';
 
@@ -30,5 +31,6 @@
 nozzle = Object.assign(nozzle, IotPc);
 nozzle = Object.assign(nozzle, group);
 nozzle = Object.assign(nozzle, projectSet);
+nozzle = Object.assign(nozzle, serverManage);
 // nozzle = Object.assign(nozzle, dataSource);
 export default nozzle;
diff --git a/src/util/serverManage.js b/src/util/serverManage.js
new file mode 100644
index 0000000..c49103d
--- /dev/null
+++ b/src/util/serverManage.js
@@ -0,0 +1,25 @@
+/**
+ * 项目管理相关接口
+ * @exports {Object}
+ * 陈洪刚
+ */
+let host = '/serverManage';
+
+let nozzle = {
+  monitorInfoList: "/monitor/infoList", // 模块总结构
+  monitorMetricInfo: "/monitor/metricInfo", // 指标名
+  instanceInfoList: "/instance/infoList", // 服务器列
+  downloadMonitor: "/download/monitor", // 下载
+//   rtuPageSave: "/rtuPage/save",
+//   rtuPageRtuModuleQueryPage: "/rtuPage/rtuModule/queryPage", // 模块id moduleName
+//   rTUSettingServiceUpdate: "/rTUSettingService/update", // 上传接口
+//   rTUSettingServiceQueryById: "/rTUSettingService/queryById", // 上传接口 rTUSettingService/queryById?id=16
+
+  exeQueryList: "/exe/queryList", //服务应用列表
+  exeQueryDetail: "/exe/queryDetail", //服务应用详情
+};
+
+for (let item in nozzle) {
+  nozzle[item] = host + nozzle[item];
+}
+export default nozzle;