首页

src/views/home/components/echarts.vue

@@ -26,6 +26,7 @@ watch(() => [
 })
 
 //图表配置
+const colors = '#09c', colora = '#214568'
 const echart = ref(null)
 const setOption = ref({})
 const setOptions = () => {
@@ -39,13 +40,23 @@ const setOptions = () => {
         data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
     }
     setOption.value = {
+        backgroundColor: 'transparent',
         tooltip: {
             trigger: 'axis',
             axisPointer: {
                 type: 'cross',
                 label: {
-                    backgroundColor: '#6a7985',
+                    backgroundColor: '#356280',
                 },
+                lineStyle: {
+                    type: 'solid',
+                    color: '#09c',
+                },
+            },
+            backgroundColor: 'rgba(0,0,0,.5)',
+            borderWidth: 0,
+            textStyle: {
+                color: '#fff',
             },
         },
         toolbox: {
@@ -58,26 +69,60 @@ const setOptions = () => {
         },
         legend: {
             data: ['名称'],
+            textStyle: {
+                color: colors,
+            },
+        },
+        grid: {
+            show: true,
+            borderWidth: 1,
+            bottom: 90,
+            borderColor: colora,
         },
-        //#09c
         xAxis: {
             type: 'category',
             boundaryGap: false,
             data: date,
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 1,
+                    color: colora,
+                },
+            },
+            axisLabel: {
+                color: colors,
+            },
         },
         yAxis: {
+            name: '°C',
             type: 'value',
             boundaryGap: [0, '30%'],
+            splitLine: {
+                show: true,
+                lineStyle: {
+                    width: 1,
+                    color: colora,
+                },
+            },
+            nameTextStyle: {
+                color: colors,
+            },
+            axisLabel: {
+                color: colors,
+            },
         },
         dataZoom: [
             {
-                type: 'inside',
                 start: 0,
                 end: data.length,
-            },
-            {
-                start: 0,
-                end:data.length,
+                borderColor: 'transparent',
+                backgroundColor: '#223654',
+                fillerColor: 'rgba(3, 197, 194, .2)',
+                brushSelect: false,
+                textStyle: {
+                    color: colors,
+                },
             },
         ],
         series: [

src/views/home/components/index.vue

@@ -64,7 +64,19 @@
         </el-radio-group>
     </div>
     <div class="data_container">
-        <baseEcharts />
+        <baseEcharts v-if="change_type === 'echarts'" />
+        <div v-if="change_type === 'table'" class="data_table_box">
+            <el-table :data="tableData" height="100%" style="width: 100%">
+                <el-table-column prop="key1" label="检测时间" />
+                <el-table-column prop="key2" label="传感器名称" />
+                <el-table-column prop="key3" label="原始值" />
+                <el-table-column prop="key4" label="检测值" />
+                <el-table-column prop="key5" label="报警信息" />
+            </el-table>
+        </div>
+        <div class="data_page_box">
+            <el-pagination background layout="total, prev, pager, next" :total="1000" :page-size="30" />
+        </div>
     </div>
 </template>
 
@@ -82,6 +94,16 @@ const tabTap = (val) => {
 const typeId = ref('1')
 const dateTime = ref(null)
 const change_type = ref('echarts')
+
+const tableData = [
+    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
+    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
+    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
+    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
+    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
+    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
+    { key1: '2016-05-03', key2: 'Grove St, Los Angeles', key3: 'No. 189', key4: '189', key5: '--' },
+]
 </script>
 
 <style lang="scss">

src/views/home/components/style.scss

@@ -136,4 +136,27 @@
     position: relative;
     width: 100%;
     height: calc(100% - 200px);
+    .data_table_box {
+        position: relative;
+        height: calc(100% - 55px);
+        .el-table {
+            --el-table-header-text-color: hsla(0,0%,100%,.85);
+            --el-table-header-bg-color: rgba(0,153,204,.85);
+            --el-table-border-color: rgba(0,153,204,.3);
+            --el-table-text-color: rgba(0,153,204,.85);
+            --el-table-row-hover-bg-color: rgb(41 41 65);
+        }
+    }
+    .data_page_box {
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+        .el-pagination {
+            --el-color-primary: #09c;
+            --el-text-color-regular: #09c;
+            --el-disabled-bg-color: rgba(0,153,204,.1);
+            --el-pagination-button-bg-color: rgba(0,153,204,.3);
+        }
+    }
 }