Merge branch 'master' of http://113.200.75.45:82/monitor_v3/hg-monitor-web into master-V32-XuHaoJie

 Conflicts:
	hg-monitor-web-zj/src/main/resources/static/vue3/src/router/index.js

@@ -809,17 +809,36 @@ layui.define(['xmSelect', 'md5'], function (exports) {
         },
         //打开性能曲线图
         openLineChart: function (title, params) {
+            // Start 将对象转成key=value&key1=value1 LSQ 2022/1/17
+            let urlParams='';
+            for(let key in params){
+                if(params[key]){
+                    urlParams+=key+'='+params[key]+'&'
+                }
+            }
+            urlParams=urlParams.substr(0,urlParams.length-1)
+            //End LSQ 2022/1/17
             if (!title) {
                 title = "性能曲线图";
             }
             view('commonViewModel').render("template/detail/line").then(function (res) {
+                // Start ident==1为性能趋势 LSQ 2022/1/17
+                let type=1;
+                let content=laytpl(res.body).render(JSON.stringify(params));
+                if(params.ident && params.ident == 1){
+                    type=2;
+                    content=['/vue3/index.html#/vue3/pieDetailLine?'+urlParams, 'no'];
+                }
+                //End LSQ 2022/1/17
                 layer.open({
                     title: [title, 'font-size:18px;'],
-                    type: 1,
+                    // type: 1,
+                    type: type,
                     area: ['80%', '90%'],
                     shadeClose: true,//开启遮罩层
                     id: 'line_chart_div',
-                    content: laytpl(res.body).render(JSON.stringify(params)),
+                    // content: laytpl(res.body).render(JSON.stringify(params)),
+                    content: content,
                     cancel: function () {
                         clearTimeout(obj.lineTimer);
                     }
@@ -1808,7 +1827,6 @@ layui.define(['xmSelect', 'md5'], function (exports) {
             }
         }
     });
-
     //对外暴露的接口
     exports('common', obj);
 });

@@ -136,11 +136,13 @@ layui.define(['laytpl', 'layer'], function(exports){
                 return;
             }
             if(e.status == '401'){
-                layer.msg("登录凭证失效，请重新登录验证！", {
-                    icon: 7, time: 3000
-                },function () {
-                    view.exit();
-                });
+                if(localStorage.getItem('access_token')) {
+                    layer.msg("登录凭证失效，请重新登录验证！", {
+                        icon: 7, time: 3000
+                    }, function () {
+                        view.exit();
+                    });
+                }
             }else if(e.status == '500'){
                 layer.msg("服务异常，请联系管理员!</br>错误信息："+e.responseJSON["resp_msg"], {
                     icon: 7, time: 5000
@@ -254,7 +256,15 @@ layui.define(['laytpl', 'layer'], function(exports){
         }
 
         if(e.status === 404){
-          that.render('template/tips/404');
+            if(!localStorage.getItem('access_token')) {
+                layer.msg("登录凭证失效，请重新登录验证！", {
+                    icon: 7, time: 3000
+                }, function () {
+                    view.exit()
+                });
+            } else {
+                that.render('template/tips/404');
+            }
         } else {
           that.render('template/tips/error');
         }

@@ -85,7 +85,8 @@
                      data-name="{{item.favName}}" data-res="{{item.resNum}}">
                 </div>
             </div>
-            <div class="layui-card-header favorite-title" data-id="{{item.favId}}" id="title_{{item.favId}}">{{item.favName}}</div>
+<!--       LH     我的收藏夹文件名过长省略并悬浮提示-->
+            <div  style="white-space:nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;" class="layui-card-header favorite-title" data-id="{{item.favId}}" id="title_{{item.favId}}" lay-tips="{{item.favName}}">{{item.favName}}</div>
         </div>
     </div>
     {{#  }); }}

@@ -64,3 +64,64 @@
 .userright .roles{
     border: solid 1px rgb(251, 196, 196);
 }
+/*时间范围组件 // Start LSQ 2022/1/17*/
+.drop-active{
+    background-color: #ecf5ff;
+    color: #66b1ff;
+}
+.select-div{
+    margin-left: 10px;
+}
+.date-flex-div-around{
+    display: flex;
+}
+
+/* 性能趋势图 */
+.pie-detail-title{
+    border-bottom: 1px solid #f6f6f6;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    padding:0 20px;
+}
+.pie-detail-title-active{
+    min-width: 65px;
+    border-bottom: 2px solid #5FB878;
+    line-height: 43px;
+}
+.pie-detail-content{
+    margin:20px;
+    padding:20px;
+    border:1px solid #f6f6f6;
+}
+.pie-line-filter{
+    margin-left: 20px;
+}
+.detail-content{
+    margin-top:20px;
+}
+.detail_linechart {
+    height: 400px !important;
+}
+.line-filter-content{
+    display: flex;
+    justify-content: end;
+}
+.line-filter-item.active{
+    background: #1E9FFF;
+    color: #fff;
+}
+.line-filter-item{
+    padding: 0 8px;
+    border-radius: 2px;
+    line-height: 30px;
+    letter-spacing: 3px;
+    cursor: pointer;
+}
+.pie-flex-end{
+    display: flex;
+    justify-content: end;
+    align-items: center;
+}
+
+/* //End LSQ 2022/1/17*/
\ No newline at end of file

+<el-row class="dataRange-container">
+    <el-col :span="24">
+        <div class="tabs-div date-flex-div-around">
+            <el-col :span="18">
+                <el-date-picker
+                        class="picker-div"
+                        v-model="dateValue"
+                        type="datetimerange"
+                        range-separator="--"
+                        start-placeholder="开始时间"
+                        end-placeholder="结束时间"
+                        format="YYYY-MM-DD hh:mm:ss"
+                        value-format="YYYY-MM-DD hh:mm:ss"
+                        :shortcuts="shortcuts"
+                        @change="changeDate"
+                        size="small"
+                >
+                </el-date-picker>
+            </el-col>
+            <el-col :span="6" class="select-div">
+               <!-- <el-select v-model="checkedId" class="m-2" placeholder="聚合频率" size="large">
+                    <el-option
+                            v-for="item in frequencyData"
+                            :key="item.ddicDesc"
+                            :label="item.ddicName"
+                            :value="item.ddicDesc"
+                            @change="changeItem"
+                    >
+                    </el-option>
+                </el-select>-->
+
+                <el-dropdown split-button type="primary" size="small">
+                        聚合频率
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item :class="{'drop-active':checkedId==item.ddicDesc}" v-for="item in frequencyData"  @click="changeItem(item.ddicDesc,item.ddicName)"
+                                              :key="item.ddicId"
+                                              :command="item.ddicDesc">
+                                {{item.ddicName}}
+                                </el-radio>
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </el-col>
+        </div>
+    </el-col>
+</el-row>
\ No newline at end of file

+export default {
+    name: 'dateRange',
+    template: '',
+    components: {},
+    props: {
+        keys:{
+            type:String,
+            default: 'C620C1D453B79095A64314C8215335D5:KPI7054BC34:cpu'
+        },
+        dateValueData:{
+            type:Array,
+            default:[]
+        },
+        intervalGroup:{
+            type:String,
+            default:''
+        }
+    },
+    data () {
+        return {
+
+        }
+    },
+    setup(props, {attrs, slots, emit}){
+        const {proxy} = Vue.getCurrentInstance();
+        //接口参数-开始结束时间
+        let timeScope=Vue.ref();
+        //接口参数-聚合频率
+        // let intervalGroup=Vue.ref(60);
+        //接口参数-资源id:指标id:flag,资源id:指标id:flag
+        let keysVal=props.keys;
+        //聚合频率数据
+        let frequencyData=Vue.ref([
+            {
+                name:'5分钟聚合',
+                val:5,
+                id:'001'
+            },{
+                name:'15分钟聚合',
+                val:15,
+                id:'002'
+            },{
+                name:'1小时聚合',
+                val:60,
+                id:'003'
+            },{
+                name:'12小时聚合',
+                val:720,
+                id:'004'
+            },{
+                name:'1天聚合',
+                val:1440,
+                id:'005'
+            },{
+                name:'不聚合',
+                val:0,
+                id:'006'
+            }
+        ])
+
+        //自定义选择时间
+        let dateValue=Vue.ref();
+        //选中的聚合频率
+        let checkedId=Vue.ref();
+        let commandVal=Vue.ref('聚合频率')
+        //聚合频率选择
+        const changeItem=(val,name)=>{
+            checkedId.value=val;
+            commandVal.value=name;
+            loadPerformance();
+            emit('callbackrate',val)
+        }
+        //时间控件左侧
+        let shortcuts=Vue.ref([
+            {
+                text: '最近30分钟',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(30,'m');
+                    return [start, end]
+                },
+            },
+            {
+                text: '最近1小时',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(1,'h');
+                    return [start, end]
+                },
+            },
+            {
+                text: '最近1天',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(1,'d');
+                    return [start, end]
+                },
+            },
+            {
+                text: '最近3天',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(3,'d');
+                    return [start, end]
+                },
+            },
+            {
+                text: '最近7天',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(7,'d');
+                    return [start, end]
+                },
+            },
+            {
+                text: '最近15天',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(15,'d');
+                    return [start, end]
+                },
+            },
+            {
+                text: '最近1个月',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(1,'M');
+                    return [start, end]
+                },
+            },
+            {
+                text: '最近2个月',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(2,'M');
+                    return [start, end]
+                },
+            },
+            {
+                text: '最近3个月',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(3,'M');
+                    return [start, end]
+                },
+            },
+            {
+                text: '半年内',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(6,'M');
+                    return [start, end]
+                },
+            },
+            {
+                text: '1年内',
+                value: () => {
+                    const end = new Date();
+                    const start = formatDate(12,'M');
+                    return [start, end]
+                },
+            },
+            {
+                text: '全部',
+                value: () => {
+                    const end = new Date();
+                    const start = ''
+                    return [start, end]
+                },
+            },
+        ])
+        //开始时间
+        let startTime=Vue.ref();
+        //结束时间
+        let endTime=Vue.ref();
+        //相差天数
+        let calcDayNum=Vue.ref(0);
+        //时间范围改变选中
+        const changeDate=(val)=>{
+            calcDayNum.value=calcDay(val[0],val[1]);
+            getRate(calcCode(calcDayNum.value))
+            emit('callbacktime',val)
+
+        }
+        //计算两个日期相差天数
+        const calcDay=(start,end)=>{
+            let endTime = new Date(end).getTime() / 1000 - parseInt(new Date(start).getTime() / 1000);
+            let timeDay = parseInt(endTime / 60 / 60 / 24);        //相差天数
+            return timeDay;
+        }
+        //计算需要传参的code值
+        const calcCode=(val)=>{
+            let code='';
+            if(val>0 && val<7){
+                code='time_scope_DAY';
+            }else if(val>=7 && val<30){
+                code='time_scope_WEEK';
+            }else if(val>=30 && val<90){
+                code='time_scope_MONTH';
+            }else if(val>=90 && val<180){
+                code='time_scope_QUARTER';
+            }else if(val>=180 && val<365){
+                code='time_scope_SEMESTER';
+            }else if(val>=365){
+                code='time_scope_YEAR';
+            }
+            return code;
+        }
+
+        //确定
+        const sureBtn=()=>{
+            let dateValueArr=dateValue.value;
+            if(dateValueArr && dateValueArr.length>0){
+                timeScope.value=dateValueArr.join(',');
+            }else{
+                timeScope.value='';
+            }
+
+            loadPerformance();
+
+        }
+        //查询性能数据-自定义视图
+        const loadPerformance=()=>{
+            let params={
+                timeScope:timeScope.value,
+                intervalGroup:checkedId.value,
+                keys:keysVal
+            }
+            proxy.$http.get(`/api-web/cm-data-range/loadPerformanceCustom`, params, function (res) {
+                emit('callbacksure',res)
+            })
+        }
+        //转换个位数为 00
+        let timeFormat =(number)=> {
+            return number.length == 1 ? ('0' + number) : number
+        }
+        //获取时间点 转年月日的方法
+        const getDateTime=(newDate)=>{
+            let dateTime='';
+            let year=newDate.getFullYear();//获取当前年
+            let month=timeFormat(newDate.getMonth()+1);//获取当前月
+            let day=timeFormat(newDate.getDate());//获取当前日
+            let hours=timeFormat(newDate.getHours()+'');//获取当前时
+            let minutes=timeFormat(newDate.getMinutes()+'');//获取当前分
+            let seconds=timeFormat(newDate.getSeconds()+'');//获取当前秒
+            dateTime= year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds;
+            return dateTime;
+        }
+        //获取前n段时间的时间点
+        const formatDate=(num,code)=>{
+            let m=num;
+            let myDate=new Date();
+            let lowData='';//当前年月日往前推m个月后获取到的年月日
+            if(code=='m'){
+                //当前时间前n分钟
+                myDate.setMinutes(myDate.getMinutes()-m);
+                lowData =getDateTime(myDate);  //用了上面转年月日的方法
+
+            }else if(code=='h'){
+                //当前时间前n小时
+                myDate.setHours(myDate.getHours()-m)
+                lowData =getDateTime(myDate);  //用了上面转年月日的方法
+            }else if(code=='d'){
+                //当前时间前n天
+                myDate.setDate(myDate.getDate() - m);
+                lowData =getDateTime(myDate);   //用了上面转年月日的方法
+            }else if(code=='M'){
+                //当前时间前n月
+                myDate.setMonth(myDate.getMonth()-m);
+                lowData =getDateTime(myDate);   //用了上面转年月日的方法
+
+            }else{
+
+            }
+            return lowData;
+
+        }
+        //判断是否传值进来
+        const isDetail=()=>{
+            if(props.dateValueData && props.dateValueData.length>0){
+                dateValue.value=props.dateValueData
+                changeDate(dateValue.value);
+            }
+                checkedId.value=props.intervalGroup;
+        }
+
+        //获取聚合频率数据
+        const getRate=(defCode)=>{
+            let param = {
+                ddicName: defCode
+            }
+            proxy.$http.get(`/api-web/ContrastAnalysis/selectTogetherRate`, param, function (res) {
+                if (res && res.data) {
+                    frequencyData.value = res.data;
+
+                }
+                sureBtn();
+            });
+        }
+
+        // 挂载完
+        Vue.onMounted(() => {
+            isDetail();
+
+        })
+        return {
+            commandVal,
+            calcDayNum,
+            calcDay,
+            shortcuts,
+            timeScope,
+            keysVal,
+            startTime,
+            endTime,
+            frequencyData,
+            dateValue,
+            changeItem,
+            checkedId,
+            changeDate,
+            sureBtn,
+            timeFormat,
+            formatDate,
+            getDateTime,
+            loadPerformance
+        }
+
+    }
+
+}
\ No newline at end of file

@@ -103,7 +103,7 @@
                     </el-row>
 
                     <cm-table-page :columns="columns" :dataList="dataList" @loaddata="getPage" :showIndex="true"
-                                   :showBorder="false" :showSelection="false" :showTools="isEditName"
+                                   :showBorder="false" :showSelection="true" :showTools="isEditName"  @selectionChange="selectionChange"
                                    :showPage="false" :height="height - 84">
                         <template #default="{row,prop,column}">
                             <!--<div class="fileName-div" style="display: flex; align-items: center;" v-if="isEditName && prop == 'fileName'" @click="getFile(row)">

@@ -678,7 +678,22 @@ export default {
         }
         let uploadCallBack = ({document, fileInfo}) => {
             reload(false);
-            props.fileIds.push(document.id)
+            if (document.category.toUpperCase() == document.category){
+                props.fileIds.push(document.id);
+            }
+            // Start 上传成功后弹出授权弹框 LSQ 2022/1/12
+            setTimeout(function (){
+                if(dataList.value && dataList.value.length>0){
+                    dataList.value.map(v=>{
+                        if(v.id==document.id){
+                            v.checked=true;
+                        }
+                    })
+                    showUserDialog(true);
+                }
+
+            },1500)
+            //End LSQ 2022/1/12
             // 执行回调
             emit('callback', {document, fileInfo});
         }
@@ -886,7 +901,32 @@ export default {
             isInput.value=item.id;
         }
 
+        // Start 列表模式增加多选框 LSQ 2022/1/12
+        //表格全选事件
+        let selectionChange=(val)=>{
+            let tableDataList=dataList.value;
+            tableDataList.map((v,i)=>{
+                v.checked=false;
+            })
+            let selectData=val;
+            if(selectData.length>0){
+                selectData.map((item,index)=>{
+                    tableDataList.map((v,i)=>{
+                        if(item.id==v.id){
+                            v.checked=true;
+                        }
+                    })
+                })
+
+            }else{
+                tableDataList.map((v,i)=>{
+                    v.checked=false;
+                })
+            }
+        }
+        //End LSQ 2022/1/12
         return {
+            selectionChange,
             /* viewEdit,*/
             breadcrumbList,
             editFileName,

@@ -40,7 +40,9 @@ Promise.all([
         //指标类型数
         .component('cm-kpi-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputkpitree/index')))
         //所属系统
-        .component('cm-biz-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputbiztypetree/index')));
+        .component('cm-biz-type-tree-input', Vue.defineAsyncComponent(() => myImport('components/common/inputbiztypetree/index')))
+        //时间范围组件
+        .component('cm-date-range', Vue.defineAsyncComponent(() => myImport('components/common/dateRange/index')));
 
 
 // 	// 自定义指令

@@ -29,7 +29,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se
         var oldBusTypeCode = data && data.busTypeCode ? data.busTypeCode : '';
 
         var busType;
-        
+
         // 父业务下拉框
         admin.req({
             url: domainName + '/api-web/manage/bustype/page',
@@ -71,10 +71,16 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se
                     busType = response.data[0];
                     form.val('form-bustype-edit', busType);
                     $('form[lay-filter="form-bustype-edit"] input[name="busTypeCode"]').attr('readonly', true);
-                    userSelect.setValue([busType.admin]);
+                    setTimeout(function (){
+                        userSelect.setValue([busType.admin]);
+                    },2000)
+
                     let principal = busType.principal;
                     let principalLi = principal ? principal.split(",") : [];
-                    opsSelect.setValue(principalLi);
+                    setTimeout(function (){
+                        opsSelect.setValue(principalLi);
+                    },2000)
+
 
                     //是否启用 1启用 0不启用
                     let isUse = busType.isUse || busType.isUse == 0 ? busType.isUse : 1;
@@ -209,6 +215,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se
         function initUserSelect() {
             $.ajax({
                 url: domainName + '/api-user/users/getAll?access_token=' + accessToken,
+                sync: false,
                 success: function (res) {
                     userSelect = xmSelect.render({
                         el: '.adminUser',
@@ -231,6 +238,7 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se
         function initUserSelectOps() {
             $.ajax({
                 url: domainName + '/api-user/users/getAll?access_token=' + accessToken,
+                sync: false,
                 success: function (res) {
                     opsSelect = xmSelect.render({
                         el: '#opsProject-username-select',
@@ -254,4 +262,4 @@ layui.define(['table', 'form', 'admin', 'layer', 'laytpl', 'common', 'view', 'se
         });
 
     });
-});
\ No newline at end of file
+});

@@ -106,7 +106,6 @@ body{
     align-items: center;
     width: 20px;
     height: 20px;
-    background:rgb(30,159,255);
     border-radius: 2px;
     cursor: pointer;
 }
@@ -176,4 +175,5 @@ body{
 .list-handle{
     display: flex;
     justify-content: space-around;
+    color:rgb(30,159,255);
 }
\ No newline at end of file

@@ -156,6 +156,11 @@ const routes = [{
 		component: () => myImport('views/portSenseConfig/index')
 	},
 	{
+		path: '/vue3/pieDetailLine',
+		name: 'pieDetailLine',
+		component: () => myImport('views/pieDetailLine/index')
+	},
+	{
 		path: '/vue3/portSenseSelect',
 		name: 'portSenseSelect',
 		component: () => myImport('views/portSenseSelect/index')

@@ -46,7 +46,7 @@
                         <template #default="scope">
                             <div class="list-handle">
                                 <span class="icon-bg">
-                                     <i class="icon-list icon-list-delete" title="删除" @click="handleDelete(scope.row)"></i>
+                                     <i class="el-icon-delete" title="删除" @click="handleDelete(scope.row)"></i>
                                 </span>
                                 <span class="icon-bg">
                                      <i class="el-icon-edit-outline" title="修改" @click="handleUpdate(scope.row)"></i>

@@ -61,7 +61,6 @@ export default {
         //点击标签进行搜索
         const changeTag = (status) => {
             currentPage.value=1;
-            pageSize.value=10;
             checkedId.value = status;
             keyword.value=status;
             getDataList();
@@ -136,7 +135,6 @@ export default {
         // 点击按钮搜索
         let onBtnSearch = () => {
             currentPage.value=1;
-            pageSize.value=10;
             getDataList();
         }
         //获取缓存数据
@@ -151,6 +149,8 @@ export default {
                     if (res && res.data) {
                         count.value = res.count;
                         tableDataList.value = res.data;
+                    }else{
+                        tableDataList.value='暂无数据';
                     }
                 });
             }

+<div class="pie-detail-line-container" >
+  <div class="pie-detail-title">
+    <span class="pie-detail-title-active">性能走势</span>
+  </div>
+ <!-- 趋势分析 预警分析-->
+  <div class="pie-detail-content">
+    <el-row class="detail-content-title">
+      <el-col :span="8"></el-col>
+      <el-col :span="16" class="pie-flex-end">
+        <cm-date-range v-if="interval=='custom'"  @callbacksure="getOptionData" @callbacktime="callbacktime" @callbackrate="callbackrate"></cm-date-range>
+        <div class="line-filter pie-line-filter">
+          <div class="linechartfrequency line-filter-content">
+            <div v-if="interval!='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='DAY'}]" data-value="DAY"  >一天</div>
+            <div v-if="interval!='custom'" @click="changeInterval('WEEK')" :class="['line-filter-item', {'active':interval=='WEEK'}]"  data-value="WEEK">一周</div>
+            <div v-if="interval!='custom'" @click="changeInterval('MONTH')" :class="['line-filter-item', {'active':interval=='MONTH'}]"  data-value="MONTH">一月</div>
+            <div v-if="interval!='custom'" @click="changeInterval('YEAR')" :class="['line-filter-item', {'active':interval=='YEAR'}]"  data-value="YEAR">一年</div>
+            <div v-if="interval!='custom'" @click="changeInterval('custom')" :class="['line-filter-item', {'active':interval=='custom'}]"  data-value="custom">自定义</div>
+            <div v-if="interval=='custom'" @click="changeInterval('DAY')" :class="['line-filter-item', {'active':interval=='custom'}]"  data-value="custom">取消自定义</div>
+          </div>
+        </div>
+
+      </el-col>
+
+    </el-row>
+    <el-row class="detail-content">
+      <el-col :span="24" class="detail_linechart">
+        <LineChart :optionData="optionData" v-if="optionData"></LineChart>
+
+<!--        <div class="detail_linechart" id="indentKpiLineChart"></div>-->
+        <!--      <div class="detail_linechart" id="warningKpiLineChart" style="margin-top:35px;"></div>-->
+        <!--      <div class="detail_linechart" id="line-tingyun-trendKpiLineChart" style="margin-top:35px;"></div>-->
+
+
+      </el-col>
+    </el-row>
+  </div>
+
+</div>
+

+export default {
+    name: 'pieDetailLine',
+    template: '',
+    components:{
+        'LineChart': Vue.defineAsyncComponent(
+            () => myImport('views/zjdaping/components/lineChart/index')
+        )
+    },
+    data() {
+        return{}
+    },
+    setup(props, {attrs, slots, emit}) {
+        const {proxy} = Vue.getCurrentInstance();
+        let interval=Vue.ref('DAY');
+        let optionData=Vue.ref({});
+        let names = Vue.ref(['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']);
+        let series = Vue.ref([]);
+        let rateData = Vue.ref([]);
+        let kpiUnit = Vue.ref('');
+        let kpiName = Vue.ref('');//指标名称
+        let startTime=Vue.ref('');
+        let endTime=Vue.ref('');
+        let  colorsArr=Vue.ref([
+                {
+                    start: '#46d6d8',
+                    end: '#2883d0'
+                },
+                {
+                    start: '#facf5b',
+                    end: '#f77623'
+                },
+                {
+                    start: '#C04DD8',
+                    end: '#D81F72'
+                },
+                {
+                    start: '#F5A1EB',
+                    end: '#A04DE2'
+                },
+                {
+                    start: '#F36093',
+                    end: '#FF465C'
+                },
+                {
+                    start: '#C2E74D',
+                    end: '#00AE8B'
+                },
+                {
+                    start: '#3DC3FF',
+                    end: '#01FFFF'
+                },
+                {
+                    start: '#B850ED',
+                    end: '#9062EF'
+                },
+                {
+                    start: '#305be6',
+                    end: '#36a7d3'
+                },
+                {
+                    start: '#FFA500',
+                    end: '#FFEE00'
+                },
+                {
+                    start: '#C4E64C',
+                    end: '#2de078'
+                },
+                {
+                    start: '#30ffb3',
+                    end: '#01FFFF'
+                },
+                {
+                    start: '#FF4488',
+                    end: '#F13EFF'
+                },
+                {
+                    start: '#A64CE2',
+                    end: '#625AE7'
+                },
+                {
+                    start: '#5AEBC7',
+                    end: '#5FC9F8'
+                },
+                {
+                    start: '#FFA500',
+                    end: '#FFEE00'
+                },
+                {
+                    start: '#00AAD6',
+                    end: '#625AE7'
+                },
+                {
+                    start: '#E48BDE',
+                    end: '#FF9262'
+                },
+                {
+                    start: '#B2797B',
+                    end: '#FF4B51'
+                },
+                {
+                    start: '#ffe393',
+                    end: '#feff5b'
+                }
+            ])
+        let keys=Vue.ref('');
+        let getOptionData=(res)=>{
+            let nameArr=[];
+            let dataArr=[];
+            if(res && res.success){
+                if(res.map){
+                    let resData=res.map;
+                    kpiUnit.value = resData.kpiUnit == null ? "" : resData.kpiUnit;
+                    Object.keys(resData).forEach(function(key){
+                        Object.keys(resData[key]).sort(function (a, b) {
+                            return a<b?1:-1;
+                        }).forEach(function(time){
+                            nameArr.push(time);
+                            dataArr.push(resData[key][time])
+                        })
+                    })
+                    rateData.value = {
+                        names: nameArr,
+                        series: [{
+                            "data": dataArr,
+                            "name": '平均值'
+                        }],
+                        kpiUnit: kpiUnit.value
+                    }
+
+                }
+
+            }else{
+                proxy.$global.showMsg(res.msg,'warning');
+            }
+
+
+            setSeries();
+
+        }
+        const changeInterval=(val)=>{
+            interval.value=val;
+            if(val=='custom'){
+            }else{
+                getLineChart();
+
+            }
+        }
+
+        const getLineChart=()=>{
+            let params=proxy.$route.query
+            let resourceId=params.resId;//资源ID
+            let kpiId =params.kpiId; //指标ID
+            let flag =params.flag;//二级资源标识
+            let warning =params.warning;//预警指标标识
+            let ident =params.ident;//性能指标标识
+            let trend =params.trend;//趋势指标标识
+            keys.value=resourceId+":"+kpiId+":"+flag;
+            kpiName.value = params.name;//指标名称
+            let url = '/api-web/detail/performance/line/chart?interval=' + interval.value + '&startTime='
+                + startTime.value + '&endTime=' + endTime.value + '&resId=' + resourceId + '&kpiIds=' + kpiId + '&subResId=' + flag;
+            proxy.$http.get(url, {},function (res){
+                kpiUnit.value = res.data.kpiUnit == null ? "" : res.data.kpiUnit;
+                if (res.data && res.data.names.length == 0) {
+                    rateData.value = {
+                        names: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+                        series: [{
+                            "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                            "name": kpiName.value
+                        }],
+                        kpiUnit: kpiUnit.value
+                    }
+                } else {
+                    rateData.value = res.data;
+                }
+                setSeries();
+            },function (error){
+                rateData.value = {
+                    names: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
+                    series: [{
+                        "data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+                        "name": kpiName.value
+                    }],
+                    kpiUnit: kpiUnit.value
+                }
+                setSeries();
+            })
+
+        }
+        const setSeries=()=>{
+            series.value=[];
+            $.each(rateData.value.series,function (i,v) {
+                series.value.push({
+                    name: v.name,
+                    type: 'line',
+                    data: v.data,
+                    symbolSize: 12,
+                    symbol: 'circle',
+                    itemStyle: {
+                        normal: {
+                            color:  colorsArr.value[i].start //图标颜色
+                        }
+                    },
+                    lineStyle: {
+                        normal: {
+                            width: 3,  //连线粗细
+                            color: colorsArr.value[i].end //连线颜色
+                        }
+                    }
+                })
+            });
+            optionDataInit();
+        }
+        const optionDataInit=()=>{
+
+            optionData.value = {
+                tooltip: {
+                    trigger: 'axis',
+                    formatter:function (param) {
+                        var tips = kpiName.value+" "+param[0].name +"<br/>";
+                        $.each(param,function (i,v) {
+                            tips += v.marker+" "+v.seriesName + ":"+v.value +kpiUnit.value+"</br>"
+                        });
+                        return tips;
+                    }
+                },
+                legend: {
+                    show: true
+                },
+                grid: {
+                    top: '10%',
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                toolbox: {
+                    feature: {
+                        saveAsImage: {
+                            show: false
+                        }
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: rateData.value.names,
+                    axisLine: {
+                        lineStyle: {
+                            color: '#c9c9c9'
+                        }
+                    },
+                    axisLabel: {
+                        color: '#232425',
+                        showMaxLabel: true
+                    },
+                    splitArea: {
+                        show: true,
+                        areaStyle: {
+                            color: ['rgba(200,200,200,0.1)', 'transparent'
+                            ]
+                        }
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    scale: true,
+                    boundaryGap: ['10%', '10%'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#232425'
+                        },
+                        show: false
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            color: ['#ccc']
+                        }
+                    }
+                },
+                series:series.value
+            };
+        }
+        //时间范围组件回调函数--时间范围
+        const callbacktime=(val)=>{
+
+        }
+        //时间范围组件回调函数--聚合频率
+        const callbackrate=(val)=>{
+
+        }
+        // 挂载完
+        Vue.onMounted(() => {
+            getLineChart();
+        })
+        return {
+            interval,
+            optionData,
+            names,
+            series,
+            rateData,
+            kpiUnit,
+            kpiName,
+            keys,
+            optionDataInit,
+            getOptionData,
+            getLineChart,
+            changeInterval
+        }
+    }
+}