提交代码

src/api/modules/data.js

@@ -9,10 +9,18 @@ export default {
             params: {},
         }, false)
     },
-    //查询传感器数据列表
-    async getSensorsList(form) {
+    //查询传感器数据表格分页列表
+    async getPageList(form) {
         return httpApi({
-            url: '/api/index/sensors/data/list',
+            url: '/api/index/sensors/data/tab-page',
+            method: 'POST',
+            data: form,
+        }, false)
+    },
+    //查询传感器数据图表列表
+    async getChartList(form) {
+        return httpApi({
+            url: '/api/index/sensors/data/chart-list',
             method: 'POST',
             data: form,
         }, false)

src/views/home/components/echarts.vue

@@ -7,8 +7,23 @@ import * as echarts from 'echarts'
 import echartsBase from '~com/echarts/index.vue'
 import { nextTick, onMounted, ref, watch } from 'vue'
 import { useAppStore } from '~src/store'
+import { getObjValue } from 'js-fast-way'
+const props = defineProps({
+    unit: {
+        type: String,
+        default: '°C',
+    },
+    datas: {
+        type: Object,
+        default: () => ({ name: '', date: [], data: [] }),
+    },
+})
+
 const appStore = useAppStore()
 
+const echartDatas = ref(props.datas)
+const echartUnit = ref(props.unit)
+
 //渲染完成
 onMounted(() => {
     nextTick(() => {
@@ -16,6 +31,16 @@ onMounted(() => {
     })
 })
 
+//深度监听
+watch(() => [
+    props.unit,
+    props.datas,
+], ([unit, datas]) => {
+    echartUnit.value = unit
+    echartDatas.value = getObjValue(datas)
+    setOptions()
+}, { deep: true })
+
 //监听
 watch(() => [
     appStore.isEchartSize,
@@ -30,15 +55,7 @@ const colors = '#09c', colora = '#214568'
 const echart = ref(null)
 const setOption = ref({})
 const setOptions = () => {
-    let base = +new Date(1968, 9, 3)
-    let oneDay = 24 * 3600 * 1000
-    let date = []
-    let data = [Math.random() * 300]
-    for (let i = 1; i < 100; i++) {
-        let now = new Date((base += oneDay))
-        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'))
-        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
-    }
+    const { name, date, data } = echartDatas.value
     setOption.value = {
         backgroundColor: 'transparent',
         tooltip: {
@@ -68,7 +85,7 @@ const setOptions = () => {
             },
         },
         legend: {
-            data: ['名称'],
+            data: [name],
             textStyle: {
                 color: colors,
             },
@@ -95,7 +112,7 @@ const setOptions = () => {
             },
         },
         yAxis: {
-            name: '°C',
+            name: echartUnit.value,
             type: 'value',
             boundaryGap: [0, '30%'],
             splitLine: {
@@ -115,7 +132,7 @@ const setOptions = () => {
         dataZoom: [
             {
                 start: 0,
-                end: data.length,
+                end: 100,
                 borderColor: 'transparent',
                 backgroundColor: '#223654',
                 fillerColor: 'rgba(3, 197, 194, .2)',
@@ -127,7 +144,7 @@ const setOptions = () => {
         ],
         series: [
             {
-                name: '名称',
+                name: name,
                 type: 'line',
                 stack: 'Total',
                 emphasis: {
@@ -149,6 +166,11 @@ const setOptions = () => {
                     ]),
                 },
                 data: data,
+                tooltip: {
+                    valueFormatter(value) {
+                        return value + echartUnit.value
+                    },
+                },
             },
         ],
     }

src/views/home/components/index.vue

@@ -65,25 +65,41 @@
         </div>
     </div>
     <div class="row_radio_group">
-        <el-radio-group v-model="change_type" size="large">
+        <el-radio-group v-model="change_type" size="large" @change="typeChange">
             <el-radio label="echarts">图表</el-radio>
             <el-radio label="table">表格</el-radio>
         </el-radio-group>
     </div>
     <div class="data_container">
-        <baseEcharts v-if="change_type === 'echarts'" />
+        <baseEcharts v-if="change_type === 'echarts'" :unit="groupUnit" :datas="echartsData" />
         <template v-if="change_type === 'table'">
             <div 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-column prop="date" label="检测时间" />
+                    <el-table-column prop="sensorName" label="传感器名称" />
+                    <el-table-column prop="ysValue" label="原始值" />
+                    <el-table-column prop="jcValue" label="检测值">
+                        <template #default="scope">
+                            {{ scope.row.jcValue + groupUnit }}
+                        </template>
+                    </el-table-column>
+                    <el-table-column prop="bjInfo" label="报警信息">
+                        <template #default="scope">
+                            {{ scope.row.bjInfo ? scope.row.bjInfo : '-' }}
+                        </template>
+                    </el-table-column>
                 </el-table>
             </div>
             <div class="data_page_box">
-                <el-pagination background layout="total, prev, pager, next" :total="1000" :page-size="30" />
+                <el-pagination
+                    background
+                    layout="total, prev, pager, next"
+                    :total="searchForm.total"
+                    :page-size="searchForm.size"
+                    :current-page="searchForm.current"
+                    @size-change="sizesUpdate"
+                    @current-change="pagesUpdate"
+                />
             </div>
         </template>
     </div>
@@ -116,6 +132,7 @@ onMounted(() => {
 
 //获取分组列表
 const groupList = ref([])
+const groupUnit = ref('°C')
 const getGroupList = async () => {
     groupList.value = []
     const { data } = await mainApi.getGroupList({
@@ -125,18 +142,21 @@ const getGroupList = async () => {
     groupList.value = res
     if (res.length > 0) {
         searchForm.value.sensorId = res[0].sensorId
+        groupUnit.value = res[0].numericalUnit
         getTableData().then()
     }
 }
 
 //分组切换
 const groupListChange = () => {
+    searchForm.value.current = 1
     getTableData()
 }
 
 //日期时间范围
 const dateTime = ref([sevenDay, toDay])
 const dateTimeChange = (val) => {
+    searchForm.value.current = 1
     if (val && val.length > 0) {
         searchForm.value.startTime = val[0] + ' 00:00:00'
         searchForm.value.endTime = val[1] + ' 23:59:59'
@@ -149,18 +169,55 @@ const searchForm = ref({
     sensorId: null,
     startTime: sevenDay + ' 00:00:00',
     endTime: toDay + ' 23:59:59',
+    total: 1000,
+    size: 30,
+    current: 1,
 })
 
-//表格或图表数据
-const tableData = []
-const getTableData = async () => {
-    tableData.value = []
-    const { data } = await mainApi.getSensorsList(searchForm.value)
-    tableData.value = getArrValue(data)
+//条数改变
+const sizesUpdate = (val) => {
+    searchForm.value.size = val
+    getTableData()
 }
 
+const pagesUpdate = (val) => {
+    searchForm.value.current = val
+    getTableData()
+}
+
+
 //类型
 const change_type = ref('echarts')
+const typeChange = () => {
+    searchForm.value.current = 1
+    getTableData()
+}
+
+//表格或图表数据
+const tableData = ref([])
+const echartsData = ref({ name: '', date: [], data: [] })
+const getTableData = async () => {
+    const type = change_type.value
+    if (type === 'echarts') {
+        echartsData.value = { name: '', date: [], data: [] }
+        let newData = { name: '', date: [], data: [] }
+        const { data } = await mainApi.getChartList(searchForm.value)
+        const res = getArrValue(data)
+        if (res.length > 0) {
+            newData.name = res[0].sensorName
+        }
+        for (let i = 0; i < res.length; i++) {
+            newData.date.push(res[i].date)
+            newData.data.push(res[i].jcValue)
+        }
+        echartsData.value = newData
+    } else if (type === 'table') {
+        tableData.value = []
+        const { data } = await mainApi.getPageList(searchForm.value)
+        tableData.value = getArrValue(data?.records)
+        searchForm.value.total = data?.total ?? 0
+    }
+}
 </script>
 
 <style lang="scss">