日期时间范围组件

@@ -64,3 +64,11 @@
 .userright .roles{
     border: solid 1px rgb(251, 196, 196);
 }
+/*时间范围组件*/
+.drop-active{
+    background-color: #ecf5ff;
+    color: #66b1ff;
+}
+.select-div{
+    margin-left: 10px;
+}
\ 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="17">
+                <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"
+                >
+                </el-date-picker>
+            </el-col>
+            <el-col :span="7" 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 size="large" type="primary">
+                        聚合频率
+                    <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();
+        }
+        //时间控件左侧
+        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))
+
+        }
+        //计算两个日期相差天数
+        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) {
+                if(res && res.data){
+                    emit('callbacksure',res.data)
+                }else{
+                    emit('callbacksure','')
+                }
+
+            })
+        }
+        //转换个位数为 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

@@ -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')));
 
 
 // 	// 自定义指令