image.png

    element-ui、vue2

    1. <template>
    2.   <div class="change_record">
    3.     <div class="title-box">
    4.       <span class="title">设备状态变更情况</span>
    5.       <div>
    6.         <span class="show-style">显示</span>
    7.         <el-radio-group v-model="showKey" @change="changeRadio" style="margin-right: 24px;">
    8.           <el-radio label="sn">SN</el-radio>
    9.           <el-radio label="eid">EID</el-radio>
    10.           <el-radio label="iccid">ICCID</el-radio>
    11.         </el-radio-group>
    12.         <el-button plain class="down-excel" @click="exportExcel">{{$t('common.导出记录')}}</el-button>
    13.       </div>
    14.     </div>
    15.     <div class="change-box">
    16.       <div class="change-content">
    17.         <el-row class="change-item" v-for="(item, index) in tableData" :key="index">
    18.           <div class="timeline" :id="'timeline_'+index">{{item.eid}}</div>
    19.           <div class="explain">
    20.             <span class="huibiao" style="background-color: #DF001F;"></span>
    21.             <span>{{item.offline_format}}</span>
    22.             <span class="huibiao" style="background-color: #FFDD00;"></span>
    23.             <span>{{item.unstable_format}}</span>
    24.             <span class="huibiao" style="background-color: #AAE252;"></span>
    25.             <span>{{item.online_format}}</span>
    26.             <span class="change-count">变化：{{item.state_change_time}}次</span>
    27.           </div>
    28.         </el-row>
    29.       </div>
    30.       <WhiteSpace heightProps="20px" />
    31.       <el-pagination
    32.                      class="page"
    33.                      layout="prev, pager, next, sizes, jumper"
    34.                      @size-change="handleSizeChange"
    35.                      @current-change="handleCurrentChange"
    36.                      :current-page="currentPage"
    37.                      :page-size="pageSize"
    38.                      :page-sizes="[10, 20, 30, 40]"
    39.                      :total="amount">
    40.       </el-pagination>
    41.       <WhiteSpace heightProps="12px" />
    42.     </div>
    43.   </div>
    44. </template>
    46. <script>
    47.   import XLSX from "xlsx";
    48.   import lodash from 'lodash';
    49.   import moment from 'moment';
    50.   import * as echarts from 'echarts';
    51.   export default {
    52.     components: {},
    53.     data() {
    54.       return {
    55.         showKey: 'eid',
    56.         currentPage: 1,
    57.         pageSize: 10,
    58.         tableData: [],
    59.         types: [{
    60.           name: '在线',
    61.           value: 'online',
    62.           color: '#73D500',
    63.         }, {
    64.           name: '不稳定',
    65.           value: 'unstable',
    66.           color: '#FFDD00',
    67.         }, {
    68.           name: '离线',
    69.           value: 'offline',
    70.           color: '#DF001F',
    71.         }, {
    72.           name: '未知',
    73.           value: 'unknown',
    74.           color: '#DF001F',
    75.         }, {
    76.           name: '中控电量低',
    77.           value: 'noPower',
    78.           color: '#FFDD00',
    79.         }],
    80.         option: {
    81.           tooltip: {
    82.             position: function(point, params, dom, rect, size) {
    83.               if (params.value[7]) {
    84.                 return ['10%', '-240%'];
    85.               } else {
    86.                 return ['10%', '10%'];
    87.               }
    88.             },
    89.             formatter: function(params) {
    90.               let str = `<p>
    91.                 <span>${params.marker} ${params.name}</span>
    92.                 <p>UCT ${params.value[4]} 至 ${params.value[5]}</p>
    93.                 <span>时长：${params.value[6]}</span>
    94.               </p>`;
    95.               return str;
    96.             }
    97.           },
    98.           title: {
    99.             text: '',
    100.             left: 'start',
    101.             // right: 'center',
    102.             top: 'center',
    103.             bottom: 'center',
    104.           },
    105.           grid: {
    106.             left: 0,
    107.             right: 0,
    108.           },
    109.           xAxis: {
    110.             type: 'time',
    111.             scale: true,
    112.             // position: 'top',
    113.             // type: 'time',
    114.             // splitNumber: 10,
    115.             // boundaryGap: ["0", "100%"],
    116.             // splitLine: {
    117.             //   show: false
    118.             // },
    119.             // axisLine: {
    120.             //   show: true
    121.             // }
    122.           },
    123.           yAxis: {
    124.             data: null,
    125.             type: 'category',
    126.             // offset: 100,
    127.             // axisLine: {
    128.             //   show: false
    129.             // },
    130.             // splitLine: {
    131.             //   show: true,
    132.             // },
    133.           },
    134.           series: [{
    135.             type: 'custom',
    136.             itemStyle: {
    137.               opacity: 0.8
    138.             },
    139.             encode: {
    140.               x: [1, 2],
    141.               y: 0
    142.             },
    143.             data: null,
    144.             renderItem: function(params, api) {
    145.               var categoryIndex = api.value(0);
    146.               var start = api.coord([api.value(1), categoryIndex]);
    147.               var end = api.coord([api.value(2), categoryIndex]);
    148.               var height = api.size([0, 1])[1] * 0.3;
    149.               var rectShape = echarts.graphic.clipRectByRect({
    150.                 x: start[0],
    151.                 y: start[1] - height / 2,
    152.                 width: end[0] - start[0],
    153.                 height: height
    154.               }, {
    155.                 x: params.coordSys.x,
    156.                 y: params.coordSys.y,
    157.                 width: params.coordSys.width,
    158.                 height: params.coordSys.height
    159.               });
    161.               return rectShape && {
    162.                 type: 'rect',
    163.                 shape: rectShape,
    164.                 style: api.style()
    165.               };
    166.             }
    167.           }]
    168.         },
    169.       };
    170.     },
    171.     props: {
    172.       dataSource: {
    173.         type: Array,
    174.         default () {
    175.           return []
    176.         }
    177.       },
    178.       amount: {
    179.         type: Number,
    180.         default: 100,
    181.       },
    182.       controlPrams: {
    183.         type: Object,
    184.         default: () => {
    185.           return {};
    186.         },
    187.       },
    188.     },
    189.     computed: {},
    190.     watch: {
    191.       dataSource(newval) {
    192.         this.dataFormat(newval)
    193.       },
    194.     },
    195.     filters: {
    196.       timeformat(val) {
    197.         if (!val) return '';
    198.         return moment(val).local().format('YYYY.MM.DD HH:mm:ss');
    199.       },
    200.     },
    201.     methods: {
    202.       exportExcel() {
    203.         function sheet2blob(sheet, sheetName) {
    204.           sheetName = sheetName || 'sheet1';
    205.           var workbook = {
    206.             SheetNames: [sheetName],
    207.             Sheets: {}
    208.           };
    209.           workbook.Sheets[sheetName] = sheet;
    210.           var wopts = {
    211.             bookType: 'xlsx',
    212.             bookSST: false,
    213.             type: 'binary'
    214.           };
    215.           var wbout = XLSX.write(workbook, wopts);
    216.           var blob = new Blob([s2ab(wbout)], {
    217.             type: "application/octet-stream"
    218.           });
    220.           function s2ab(s) {
    221.             var buf = new ArrayBuffer(s.length);
    222.             var view = new Uint8Array(buf);
    223.             for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    224.             return buf;
    225.           }
    226.           return blob;
    227.         }
    229.         function openDownloadDialog(url, saveName) {
    230.           if (typeof url == 'object' && url instanceof Blob) {
    231.             url = URL.createObjectURL(url);
    232.           }
    233.           var aLink = document.createElement('a');
    234.           aLink.href = url;
    235.           aLink.download = saveName || '';
    236.           var event;
    237.           if (window.MouseEvent) event = new MouseEvent('click');
    238.           else {
    239.             event = document.createEvent('MouseEvents');
    240.             event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    241.           }
    242.           aLink.dispatchEvent(event);
    243.         }
    245.         const aoa = [];
    246.         const sheetTitle = [
    247.           this.showKey.toUpperCase(),
    248.           '离线',
    249.           '不稳定',
    250.           '在线',
    251.           '变化',
    252.           '开始时间',
    253.           '结束时间',
    254.         ];
    255.         aoa.push(sheetTitle);
    257.         let selectTime = this.controlPrams.selectTime;
    258.         let begin = 'UTC ' + moment(selectTime[0]).utc().format('YYYY.MM.DD HH:mm:ss');
    259.         let end = 'UTC ' + moment(selectTime[1]).utc().format('YYYY.MM.DD HH:mm:ss');
    260.         for (let i in this.tableData) {
    261.           let item = []
    262.           item.push(this.tableData[i][this.showKey]);
    263.           item.push(this.tableData[i].offline_format);
    264.           item.push(this.tableData[i].unstable_format);
    265.           item.push(this.tableData[i].online_format);
    266.           item.push(this.tableData[i].state_change_time);
    267.           item.push(begin);
    268.           item.push(end);
    269.           aoa.push(item);
    270.         }
    272.         const sheet = XLSX.utils.aoa_to_sheet(aoa);
    273.         sheet["!cols"] = [{
    274.           wch: 26,
    275.         }, {
    276.           wch: 26,
    277.         }, {
    278.           wch: 26,
    279.         }, {
    280.           wch: 26,
    281.         }, {
    282.           wch: 9,
    283.         }, {
    284.           wch: 23,
    285.         }, {
    286.           wch: 23,
    287.         }];
    288.         openDownloadDialog(sheet2blob(sheet), '设备状态变更情况.xlsx');
    289.       },
    290.       handleSizeChange(val) {
    291.         this.pageSize = val;
    292.         this.$emit('record-change', {
    293.           pageSize: this.pageSize,
    294.           currentPage: this.currentPage,
    295.           showKey: this.showKey,
    296.         })
    297.       },
    298.       handleCurrentChange(val) {
    299.         this.currentPage = val;
    300.         this.$emit('record-change', {
    301.           pageSize: this.pageSize,
    302.           currentPage: this.currentPage,
    303.           showKey: this.showKey,
    304.         })
    305.       },
    306.       changeRadio(val) {
    307.         this.showKey = val;
    308.         this.$emit('record-change', {
    309.           pageSize: this.pageSize,
    310.           currentPage: this.currentPage,
    311.           showKey: this.showKey,
    312.         })
    313.       },
    314.       formatPercentageNew(num, total) {
    315.         let rate = (num / total * 100).toFixed(2) + '%';
    316.         return rate;
    317.       },
    318.       formatTime2DurationNew(count) {
    319.         let time = '';
    320.         let second = count % 60;
    321.         let minute = parseInt(parseInt(count) / 60) % 60;
    322.         time = second + "秒";
    323.         if (minute >= 1) {
    324.           time = minute + "分" + second + "秒";
    325.         }
    326.         let hour = parseInt(parseInt(count / 60) / 60) % 24;
    327.         if (hour >= 1) {
    328.           time = hour + "小时" + minute + "分" + second + "秒";
    329.         }
    330.         var day = parseInt(parseInt(parseInt(count / 60) / 60) / 24);
    331.         if (day >= 1) {
    332.           time = day + "天" + hour + "小时" + minute + "分" + second + "秒";
    333.         }
    334.         return time;
    335.       },
    336.       dataFormat(data) {
    337.         if (data && data.length > 0) {
    338.           let len = data.length;
    339.           data.map((item, index) => {
    340.             let {
    341.               offline_duration = 0,
    342.                 online_duration = 0,
    343.                 unstable_duration = 0
    344.             } = item;
    345.             let total_duration = offline_duration + online_duration + unstable_duration;
    346.             let offline_duration_format = this.formatTime2DurationNew(offline_duration);
    347.             let online_duration_format = this.formatTime2DurationNew(online_duration);
    348.             let unstable_duration_format = this.formatTime2DurationNew(unstable_duration);
    349.             let offline_duration_rate = this.formatPercentageNew(offline_duration, total_duration);
    350.             let online_duration_rate = this.formatPercentageNew(online_duration, total_duration);
    351.             let unstable_duration_rate = this.formatPercentageNew(unstable_duration, total_duration);
    352.             item.offline_format = `离线（${offline_duration_format}，${offline_duration_rate}）`;
    353.             item.online_format = `在线（${online_duration_format}，${online_duration_rate}）`;
    354.             item.unstable_format = `不稳定（${unstable_duration_format}，${unstable_duration_rate}）`;
    355.             setTimeout(() => {
    356.               let flag = (len - index) <= 3;
    357.               this.initChart(item, index, flag);
    358.             }, 500)
    359.           })
    360.           this.tableData = data;
    361.         }
    362.       },
    363.       initChart(item, index, flag) {
    364.         let state = item.state || [];
    365.         let data = [];
    366.         for (let i = 0; i < state.length; i++) {
    367.           let tmp = state[i];
    368.           let typeItem = lodash.find(this.types, {
    369.             'value': tmp.state
    370.           })
    371.           let begin = moment(tmp.start_time).valueOf();
    372.           let end = moment(tmp.end_time).valueOf();
    373.           let diff = (end - begin) / 1000;
    374.           let duration = this.formatTime2DurationNew(diff) || '0s';
    375.           let begin_format = moment(tmp.start_time).utc().format('YYYY.MM.DD HH:mm:ss');
    376.           let end_format = moment(tmp.end_time).utc().format('YYYY.MM.DD HH:mm:ss');
    377.           data.push({
    378.             name: tmp[this.showKey],
    379.             value: [i, begin, end, tmp.state_duration, begin_format, end_format, duration, flag],
    380.             itemStyle: {
    381.               normal: {
    382.                 color: typeItem.color
    383.               }
    384.             }
    385.           });
    386.         }
    388.         // 修改option
    389.         this.option.series[0].data = data;
    390.         this.option.yAxis.data = [item[this.showKey]];
    391.         this.option.title.text = item[this.showKey];
    392.         // 获取图表id
    393.         let chartDom = document.getElementById(`timeline_${index}`);
    394.         chartDom.style.height = 26 + 'px';
    395.         chartDom.style.width = '800px';
    396.         // 初始化图表
    397.         let myChart = echarts.init(chartDom);
    398.         myChart.resize();
    399.         myChart.clear();
    400.         myChart.setOption(this.option);
    401.       },
    402.     },
    403.     created() {},
    404.     mounted() {}
    405.   }
    406. </script>
    408. <style lang="scss" scoped>
    409.   .change_record {
    410.     width: 100%;
    411.     box-sizing: border-box;
    412.     border-radius: 4px;
    413.     box-shadow: 0px 8px 16px rgba(55, 70, 95, 0.070171);
    414.     background-color: #FFFFFF;
    416.     .title-box {
    417.       padding: 0 36px;
    418.       width: 100%;
    419.       height: 66px;
    420.       background-color: #FAFBFB;
    421.       display: flex;
    422.       align-items: center;
    423.       justify-content: space-between;
    424.       box-sizing: border-box;
    426.       .title {
    427.         font-weight: 500;
    428.         font-size: 12px;
    429.         color: #828D99;
    430.       }
    432.       .show-style {
    433.         margin-right: 12px;
    434.         font-weight: 600;
    435.         font-size: 12px;
    436.         color: #828D99;
    437.       }
    439.       .down-excel {
    440.         padding: 6px 10px;
    441.         font-weight: 400;
    442.         font-size: 14px;
    443.         color: #304156;
    444.       }
    445.     }
    447.     .change-box {
    448.       width: 100%;
    450.       .change-content {
    451.         width: 100%;
    452.         overflow-x: scroll;
    453.         // overflow-y: hidden;
    454.         overflow-y: visible;
    455.         border: 1px solid #F0F1F2;
    457.         .change-item {
    458.           display: flex;
    459.           flex-direction: row;
    460.         }
    462.         .change-item:first-child {
    464.           .timeline,
    465.           .explain {
    466.             border-top: 0px;
    467.           }
    468.         }
    470.         .timeline {
    471.           min-width: 800px;
    472.           width: 800px;
    473.           height: 26px;
    474.           // background: green;
    475.           border-top: 1px solid #F0F1F2;
    476.           border-right: 1px solid #F0F1F2;
    477.           box-sizing: border-box;
    478.         }
    480.         .explain {
    481.           flex: 1;
    482.           display: flex;
    483.           flex-direction: row;
    484.           align-items: center;
    485.           font-weight: 400;
    486.           font-size: 12px;
    487.           color: #304156;
    488.           white-space: nowrap;
    489.           border-top: 1px solid #F0F1F2;
    490.           box-sizing: border-box;
    492.           .huibiao {
    493.             margin: 0 4px 0 6px;
    494.             width: 6px;
    495.             height: 12px;
    496.           }
    498.           .change-count {
    499.             margin: 0 12px 0 8px;
    500.           }
    501.         }
    502.       }
    504.       .page {
    505.         text-align: center;
    506.       }
    507.     }
    508.   }
    509. </style>

    image.png