页面优化

zhanghua

2023-11-13 4c6f2df21a29048440a85e34dadcd4f1c75c179c

页面优化

 src/api/smoke/statistics.js

@@ -13,6 +13,10 @@
    // 监测报警统计&运维情况报表
    findCurAlarmList: (params) => {
        return http.get('/sccg/smoke/statistics/listCurAlarm', params);
    }
    },

    // 检测仪总体情况报表 档案
    getDocument: (params) => {
        return http.get('/sccg/smoke/statistics/detectorDailyStats/document', params);
    }
}

 src/assets/icons/svg/dailySum.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699864983138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4031" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M839.647708 1016.974416H184.352292a98.358181 98.358181 0 0 1-97.719492-98.358182V107.480583A98.358181 98.358181 0 0 1 184.352292 9.122402h383.213694a97.080802 97.080802 0 0 1 63.868948 24.90889l275.27517 243.979385a95.803423 95.803423 0 0 1 32.573164 72.810602v567.794955a98.358181 98.358181 0 0 1-99.63556 98.358182zM184.352292 74.907419a32.573164 32.573164 0 0 0-32.573164 32.573164v811.135651a32.573164 32.573164 0 0 0 32.573164 32.573164h655.295416a32.573164 32.573164 0 0 0 32.573164-32.573164V350.821279a30.657095 30.657095 0 0 0-10.857722-23.631512l-274.63648-243.979384a35.127922 35.127922 0 0 0-21.715442-8.302964z" fill="#323333" p-id="4032"></path><path d="M448.131051 354.653416H288.458679a33.211853 33.211853 0 0 1 0-63.868949H448.131051a33.211853 33.211853 0 1 1 0 63.868949zM667.840235 547.537641H288.458679a32.573164 32.573164 0 0 1 0-63.868949h379.381556a32.573164 32.573164 0 0 1 0 63.868949zM667.840235 741.060556H288.458679a33.211853 33.211853 0 0 1 0-63.868949h379.381556a33.211853 33.211853 0 0 1 0 63.868949zM883.078593 359.124242h-319.344744a32.573164 32.573164 0 0 1-33.211854-32.573164V42.334255a33.211853 33.211853 0 1 1 63.868949 0v251.643659h285.494202a32.573164 32.573164 0 1 1 0 63.868949z" fill="#323333" p-id="4033"></path></svg>

 src/assets/icons/svg/devices.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699865143316" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14890" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M827.733333 989.866667h-631.466666c-39.253333 0-71.68-32.426667-71.68-69.973334V172.373333C124.586667 133.12 157.013333 102.4 196.266667 102.4h158.72c13.653333 0 25.6 11.946667 25.6 25.6V170.666667h266.24V128c0-13.653333 11.946667-25.6 25.6-25.6h158.72c39.253333 0 71.68 32.426667 71.68 69.973333v745.813334c-3.413333 39.253333-35.84 71.68-75.093334 71.68z m-631.466666-836.266667c-10.24 0-20.48 8.533333-20.48 18.773333v745.813334c0 10.24 8.533333 18.773333 20.48 18.773333h633.173333c10.24 0 20.48-8.533333 20.48-18.773333V172.373333c0-10.24-8.533333-18.773333-20.48-18.773333h-133.12v42.666667c0 13.653333-11.946667 25.6-25.6 25.6H353.28c-13.653333 0-25.6-11.946667-25.6-25.6V153.6h-131.413333z" fill="#333333" p-id="14891"></path><path d="M670.72 221.866667H353.28c-13.653333 0-25.6-11.946667-25.6-25.6v-136.533334c0-13.653333 11.946667-25.6 25.6-25.6h317.44c13.653333 0 25.6 11.946667 25.6 25.6v136.533334c0 13.653333-11.946667 25.6-25.6 25.6z m-291.84-51.2h266.24V85.333333H378.88v85.333334zM443.733333 786.773333c-6.826667 0-13.653333-1.706667-18.773333-6.826666-10.24-10.24-10.24-25.6 0-35.84l136.533333-136.533334h-163.84c-10.24 0-20.48-6.826667-23.893333-15.36s-1.706667-20.48 5.12-27.306666l180.906667-180.906667c10.24-10.24 25.6-10.24 35.84 0s10.24 25.6 0 35.84l-136.533334 136.533333h163.84c10.24 0 20.48 6.826667 23.893334 15.36s1.706667 20.48-5.12 27.306667L462.506667 778.24c-5.12 5.12-11.946667 8.533333-18.773334 8.533333z" fill="#333333" p-id="14892"></path><path d="M723.626667 952.32H209.92c-20.48 0-35.84-17.066667-35.84-35.84V310.613333c0-20.48 17.066667-35.84 35.84-35.84h513.706667c20.48 0 35.84 17.066667 35.84 35.84v605.866667c0 20.48-15.36 35.84-35.84 35.84z" fill="#333333" opacity=".3" p-id="14893"></path></svg>

 src/assets/icons/svg/intimeData.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699865041092" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9029" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M832 128v768H256V128h576m64-64H192v896h704V64z" p-id="9030"></path><path d="M161.3 296.2v-0.2H320v-40H161.3c-35.5 0-64.3 28.7-64.3 64s28.8 64 64.3 64h90v-40h-90v-0.2c-13.3 0-24.1-10.7-24.1-23.8 0-13.1 10.8-23.8 24.1-23.8zM161.3 488.2v-0.2H320v-40H161.3c-35.5 0-64.3 28.7-64.3 64s28.8 64 64.3 64h90v-40h-90v-0.2c-13.3 0-24.1-10.7-24.1-23.8 0-13.1 10.8-23.8 24.1-23.8zM161.3 680.2v-0.2H320v-40H161.3c-35.5 0-64.3 28.7-64.3 64s28.8 64 64.3 64h90v-40h-90v-0.2c-13.3 0-24.1-10.7-24.1-23.8 0-13.1 10.8-23.8 24.1-23.8z" p-id="9031"></path><path d="M320 277m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="9032"></path><path d="M320 469m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="9033"></path><path d="M320 662m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z" p-id="9034"></path><path d="M384 256h385v40H384zM384 384h385v40H384zM384 512h385v40H384zM384 640h256v40H384z" p-id="9035"></path></svg>

 src/assets/icons/svg/tenHourData.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699865094403" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12027" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M896 928H128a32 32 0 0 1-32-32V128a32 32 0 0 1 64 0v736H896a32 32 0 0 1 0 64z" fill="#4D4D4D" p-id="12028"></path><path d="M352 896a32 32 0 0 1-32-32v-320a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zM576 896a32 32 0 0 1-32-32V448a32 32 0 0 1 64 0v416a32 32 0 0 1-32 32zM800 896a32 32 0 0 1-32-32V384a32 32 0 0 1 64 0v480a32 32 0 0 1-32 32zM256 416a32.64 32.64 0 0 1-25.6-12.8 32 32 0 0 1 6.4-44.8l256-192a31.36 31.36 0 0 1 41.6 0l108.8 108.16L876.8 102.4a32 32 0 1 1 38.4 51.2l-256 192a31.36 31.36 0 0 1-41.6-3.2L512 234.24 275.2 409.6a31.36 31.36 0 0 1-19.2 6.4z" fill="#4D4D4D" p-id="12029"></path></svg>

 src/assets/icons/svg/tenMinData.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699865071125" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10975" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M426.666667 170.666667v682.666666h170.666666V170.666667h-170.666666zM170.666667 384v469.333333h170.666666V384H170.666667z m512 170.666667v298.666666h170.666666v-298.666666h-170.666666z" p-id="10976"></path></svg>

 src/assets/imgs/normalLocale.png

 src/views/smoke/realTime/components/detectorDailySumDays.vue

@@ -1,13 +1,84 @@
<template>
  
    <div>
        <el-descriptions>
            <el-descriptions-item label="餐饮企业名称:">{{
                localeInfo.customer.Name
            }}</el-descriptions-item>
            <el-descriptions-item label="联系人:">{{
                localeInfo.customer.Contact
            }}</el-descriptions-item>
            <el-descriptions-item label="联系电话:">{{
                localeInfo.customer.Mobile
            }}</el-descriptions-item>
            <el-descriptions-item label="详细地址:">
                {{ localeInfo.customer.Address }}
            </el-descriptions-item>
            <el-descriptions-item label="监测点类型:">
                {{
                    localeInfo.customer.Typ == 4 ? '一般检测点' : '其他'
                }}</el-descriptions-item
            >
            <el-descriptions-item label="所属单位:">
                {{ localeInfo.customer.Org }}</el-descriptions-item
            >
            <el-descriptions-item label="菜系:"></el-descriptions-item>
            <el-descriptions-item label="风速:">
                {{ localeInfo.locale.FanSpeed }}m/s
            </el-descriptions-item>
            <el-descriptions-item label="风量:">
                {{ localeInfo.locale.FanQuantity }}m³/h</el-descriptions-item
            >
            <el-descriptions-item label="管道截面面积:">
                {{ localeInfo.locale.PipeArea }}m²</el-descriptions-item
            >
            <el-descriptions-item label="灶头数量:">
                {{ localeInfo.locale.StoveNum }}个</el-descriptions-item
            >
            <el-descriptions-item label="集气罩面积:">
                {{ localeInfo.locale.StoveArea }}m²</el-descriptions-item
            >
        </el-descriptions>
    </div>
</template>

<script>
import statisticsApi from "@/api/smoke/statistics";
export default {
    data() {
        return {
            localeInfo: {}
        }
    },

    created() {
        this.getData();
    },
    methods: {
        getData() {
            let param = {
                field: "detectorDailySumDays",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                debugger
                this.localeInfo = res.Data
            })

        },

        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return "warning-row";
            } else {
                return "success-row";
            }
            return "";
        },
    },
    props: ['inTimeData']
}
</script>

<style>

</style>

 src/views/smoke/realTime/components/devices.vue

@@ -1,13 +1,166 @@
<template>
  
    <div>
        <div class="title">设备信息</div>
        <div style="width: 100%; overflow-x: scroll">
            <el-table
                border
                stripe
                ref="multipleTable"
                :header-cell-style="{
                    background: '#F5F5F5',
                    'font-weight': '650',
                    'line-height': '45px'
                }"
                :data="tableData"
                :row-class-name="tableRowClassName"
            >
                <el-table-column prop="MN" label="设备编码" min-width="120px">
                </el-table-column>
                <el-table-column
                    prop="Locale.Name"
                    label="监测点"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="LocaleNameStr"
                    label="所属单位"
                    min-width="120px"
                >
                </el-table-column>
                <el-table-column
                    prop="SubtypeStr"
                    label="设备类型"
                    min-width="120px"
                >
                </el-table-column>
                <el-table-column prop="ModelStr" label="型号" min-width="95px">
                </el-table-column>
                <el-table-column prop="Brand" label="品牌" min-width="95px">
                </el-table-column>
                <el-table-column prop="Sim" label="SIM卡" min-width="95px">
                </el-table-column>
            </el-table>
        </div>

        <div class="title">监测点运维情况</div>
        <div style="width: 100%; overflow-x: scroll">
            <el-table
                border
                stripe
                ref="multipleTable"
                :header-cell-style="{
                    background: '#F5F5F5',
                    'font-weight': '650',
                    'line-height': '45px'
                }"
                :data="tableData2"
                :row-class-name="tableRowClassName"
            >
                <el-table-column prop="hour_str" label="监测点" width="100px">
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="监测点地址"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="维护类型"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="设备编号"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="派单日期"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="处理日期"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="运维人员"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="操作状态"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="hour_str"
                    label="查看详情"
                    min-width="150px"
                >
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import statisticsApi from "@/api/smoke/statistics";
export default {
    data() {
        return {
            tableData: [],
            tableData2: []
        }
    },

    created() {
        this.getData();
    },
    methods: {
        getData() {
            let param = {
                field: "devices",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                let list = res.Data
                list.forEach(o => {
                    o.LocaleNameStr = o.Locale.Name.substring(0, o.Locale.Name.length - 3)
                    o.SubtypeStr = o.Subtype == 3 ? '检测仪设备' : '-'
                    o.ModelStr = o.Model == 2 ? 'MRJC-YY-A01' : '-'
                });
                this.tableData = list
            })

        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return "warning-row";
            } else {
                return "success-row";
            }
            return "";
        },
    },
    props: ['inTimeData']
}
</script>

<style>

.title {
    line-height: 1;
    text-align: left;
    font-size: 20px;
    margin: 5px 0px;
}
</style>

 src/views/smoke/realTime/components/intimeData.vue

@@ -1,13 +1,169 @@
<template>
  
    <div>
        <div style="width: 100%; overflow-x: scroll">
            <el-table
                border
                stripe
                ref="multipleTable"
                :header-cell-style="{
                    background: '#F5F5F5',
                    'font-weight': '650',
                    'line-height': '45px'
                }"
                :data="tableData"
                :row-class-name="tableRowClassName"
            >
                <el-table-column label="序号" type="index" width="60px">
                </el-table-column>
                <el-table-column
                    prop="acquit_at_str"
                    label="采集时间"
                    min-width="150px"
                >
                </el-table-column>
                <el-table-column
                    prop="fan_status_str"
                    label="风机状态"
                    min-width="120px"
                >
                </el-table-column>
                <el-table-column
                    prop="hydrocarbon_conc"
                    label="风机电流（A）"
                    min-width="120px"
                >
                </el-table-column>
                <el-table-column
                    prop="filter_status"
                    label="净化器状态"
                    min-width="95px"
                >
                </el-table-column>
                <el-table-column
                    prop="emissions_conc"
                    label="油烟浓度(mg/m³)"
                    min-width="180px"
                >
                </el-table-column>
                <el-table-column
                    prop="granule_conc"
                    label="颗粒物浓度(mg/m³)"
                    min-width="180px"
                >
                </el-table-column>
                <el-table-column
                    prop="hydrocarbon_conc"
                    label="非甲烷总烃浓度(mg/m³)"
                    min-width="190px"
                >
                </el-table-column>
                <el-table-column prop="status" label="设备状态" width="120px">
                </el-table-column>
            </el-table>
        </div>
        <div class="tools">
            <div class="pagination">
                <el-pagination
                    background
                    @prev-click="handlePrev"
                    @next-click="handleNext"
                    :current-page="currentPage"
                    layout="prev, pager, next"
                    :total="totalNum"
                    :page-size="pageSize"
                    @current-change="changeCurrentPage"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import statisticsApi from "@/api/smoke/statistics";
export default {
    data() {
        return {
            currentPage: 1,
            pageSize: 20,
            totalNum: 0,
            tableData: []
        }
    },
    created() {
        this.getRealTimeList();
    },
    methods: {
        getRealTimeList() {
            let param = {
                field: "intimeData",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                let list = res.Data.content
                list.forEach(o => {
                    o.acquit_at_str = this.dateFormat(
                        "YYYY-mm-dd HH:MM:SS",
                        new Date(o.acquit_at * 1000)
                    );
                    o.fan_status_str = o.fan_status == '1' ? '开' : '关'
                    o.status = '达标'
                });
                this.tableData = list
                this.totalNum = res.Data.total
            })

        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "warning-row";
            } else {
                return "success-row";
            }
        },
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getRealTimeList();
        },
        dateFormat(fmt, date) {
            let ret;
            const opt = {
                "Y+": date.getFullYear().toString(), // 年
                "m+": (date.getMonth() + 1).toString(), // 月
                "d+": date.getDate().toString(), // 日
                "H+": date.getHours().toString(), // 时
                "M+": date.getMinutes().toString(), // 分
                "S+": date.getSeconds().toString(), // 秒
                // 有其他格式化字符需求可以继续添加，必须转化成字符串
            };
            for (let k in opt) {
                ret = new RegExp("(" + k + ")").exec(fmt);
                if (ret) {
                    fmt = fmt.replace(
                        ret[1],
                        ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, "0")
                    );
                }
            }
            return fmt;
        },
    },
    props: ['inTimeData']
}
</script>

<style>

</style>

 src/views/smoke/realTime/components/tenHourData.vue

@@ -1,13 +1,90 @@
<template>
  
    <div style="width: 100%; overflow-x: scroll">
        <el-table
            border
            stripe
            ref="multipleTable"
            :header-cell-style="{
                background: '#F5F5F5',
                'font-weight': '650',
                'line-height': '45px'
            }"
            :data="tableData"
            :row-class-name="tableRowClassName"
        >
            <el-table-column label="序号" type="index" width="60px">
            </el-table-column>
            <el-table-column prop="hour_str" label="时间" min-width="150px">
            </el-table-column>
            <el-table-column
                prop="emissions_conc"
                label="油烟折算浓度"
                min-width="120px"
            >
            </el-table-column>
            <el-table-column
                prop="granule_conc"
                label="颗粒物折算浓度"
                min-width="120px"
            >
            </el-table-column>
            <el-table-column
                prop="hydrocarbon_conc"
                label="非甲烷折算浓度"
                min-width="95px"
            >
            </el-table-column>
            <el-table-column
                prop="status_str"
                label="排放状态"
                min-width="180px"
            >
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import statisticsApi from "@/api/smoke/statistics";
export default {
    data() {
        return {
            tableData: []
        }
    },

    created() {
        this.getData();
    },
    methods: {
        getData() {
            let param = {
                field: "tenHourData",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                let list = res.Data.list
                list.forEach(o => {
                    o.hour_str = o.hour + '-' + (o.hour + 1) + '点'
                    o.status_str = o.status == '0' ? '达标' : '超标'
                    o.status = '达标'
                });
                this.tableData = list
            })

        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 === 0) {
                return "warning-row";
            } else {
                return "success-row";
            }
        },
    },
    props: ['inTimeData']
}
</script>

<style>

</style>

 src/views/smoke/realTime/components/tenMinData.vue

@@ -1,13 +1,113 @@
<template>
  
    <div id="mychart" class="echart-foot"></div>
</template>

<script>
import * as echarts from "echarts";
import statisticsApi from "@/api/smoke/statistics";
export default {
    data() {
        return {
            echarts: null,
        }
    },

    created() {
        this.getData();
    },
    methods: {
        getData() {
            let param = {
                field: "tenMinData",
                localeId: this.inTimeData.Lid
            }
            statisticsApi.getDocument(param).then(jsonStr => {
                const res = JSON.parse(jsonStr)
                let list = res.Data

                let myecharts = echarts.init(document.getElementById("mychart"));

                let times = this.getTimer('2020-01-01 00:00:00', 10, 144);
                let data1 = [] // 油烟浓度
                let data2 = [] // 颗粒物浓度
                let data3 = [] // 非甲烷总烃浓度
                times.forEach((o, index) => {
                    if (list[index]) {
                        data1.push(list[index].emissions_conc);
                        data2.push(list[index].granule_conc);
                        data3.push(list[index].hydrocarbon_conc);
                    }
                    else {
                        data1.push(0);
                        data2.push(0);
                        data3.push(0);

                    }
                });
                // 绘制图表
                myecharts.setOption({
                    title: {
                        text: '平均浓度mg/m³'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['油烟浓度', '颗粒物浓度', '非甲烷总烃浓度']
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: times
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '油烟浓度',
                            data: data1,
                            stack: 'Total',
                            type: "line",
                        },
                        {
                            name: '颗粒物浓度',
                            data: data2, stack: 'Total',
                            type: "line"
                        },
                        {
                            name: '非甲烷总烃浓度', stack: 'Total',
                            data: data3,
                            type: "line"
                        },
                    ],
                });

            })

        },

        getTimer(start, Timer, length) {
            var lists = [];
            var count = 0; //初始值为0
            for (let j = 0; j < length; j++) {
                count += 1;
                var seconds = Date.parse(start); //标准时间转毫秒数
                var totals = j * Timer * 60 * 1000 + seconds; //固定时间间隔+开始时间的总毫秒数
                var res = new Date(totals).toString().split(' ')[4];//毫秒数转字符串，截取，取值

                lists.push(res)
            }
            return lists;
        }

    },
    props: ['inTimeData']
}
</script>

<style>

.echart-foot {
    height: 400px;
    width: 100%;
}
</style>

 src/views/smoke/realTime/index.vue

@@ -17,11 +17,11 @@
      >
        <el-table-column label="序号" type="index" width="60px">
        </el-table-column>
        <el-table-column prop="Locale" label="监测点" width="120px">
        <el-table-column prop="Locale" label="监测点" min-width="120px">
        </el-table-column>
        <el-table-column prop="Addr" label="安装地址" width="180px">
        <el-table-column prop="Addr" label="安装地址" min-width="180px">
        </el-table-column>
        <el-table-column prop="AcquitAtStr" label="采集时间" width="100px">
        <el-table-column prop="AcquitAtStr" label="采集时间" min-width="100px">
        </el-table-column>
        <el-table-column prop="FanStatusStr" label="风机状态" width="80px">
        </el-table-column>
@@ -67,11 +67,20 @@
        </el-table-column>
        <el-table-column prop="OnlineStatusStr" label="整体状态" width="80px">
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="550px">
        <el-table-column prop="operation" label="操作" width="180px">
          <template slot-scope="scope">
            <div class="operation">
              <span @click="handleDetectorDailySumDays(scope.row)"
                >一点一档</span
              <i class="el-icon-document" @click="handleDetectorDailySumDays(scope.row)" title="一点一档"></i>
              <span class="line">|</span>
              <i class="el-icon-notebook-1" @click="handleIntimeData(scope.row)" title="查看每分钟数据"></i>
              <span class="line">|</span>
              <i class="el-icon-s-data" @click="handleTenMinData(scope.row)" title="查看10min浓度"></i>
              <span class="line">|</span>
              <i class="el-icon-data-analysis" @click="handleTenHourData(scope.row)" title="查看小时折算浓度"></i>
              <span class="line">|</span>
              <i class="el-icon-monitor" @click="handleDevices(scope.row)" title="监测点设备管理"></i>
              <!-- <span @click="handleDetectorDailySumDays(scope.row)"
                ></span
              >
              <span class="line">|</span>
              <span @click="handleIntimeData(scope.row)">查看每分钟数据</span>
@@ -82,7 +91,7 @@
                >查看小时折算浓度</span
              >
              <span class="line">|</span>
              <span @click="handleDevices(scope.row)">监测点设备管理</span>
              <span @click="handleDevices(scope.row)">监测点设备管理</span> -->
            </div>
          </template>
        </el-table-column>
@@ -109,6 +118,7 @@
      width="80%"
    >
      <DetectorDailySumDays
        title="一点一档"
        v-if="dialogDetectorDailySumDays"
        @closeDialog="closeDialog"
        :inTimeData="inTimeData"
@@ -123,6 +133,7 @@
    >
      <IntimeData
        v-if="dialogIntimeData"
        title="分钟采集数据"
        @closeDialog="closeDialog"
        :inTimeData="inTimeData"
      ></IntimeData>
@@ -136,6 +147,7 @@
    >
      <TenMinData
        v-if="dialogTenMinData"
        title="10min浓度曲线"
        @closeDialog="closeDialog"
        :inTimeData="inTimeData"
      ></TenMinData>
@@ -143,6 +155,7 @@
    
    <el-dialog
      :destroy-on-close="true"
        title="小时折算浓度"
      :visible.sync="dialogTenHourData"
      width="80%"
    >
@@ -156,6 +169,7 @@
    
    <el-dialog
      :destroy-on-close="true"
        title="监测点设备管理"
      :visible.sync="dialogDevices"
      width="80%"
    >
@@ -409,11 +423,14 @@
.el-table {
  .operation {
    display: flex;
    color: var(--operation-color);
    // color: var(--operation-color);
    .line {
      padding: 0 5px;
    }

    font-size: 20px;
    cursor: pointer;
    color: #666;
    span:hover {
      cursor: pointer;
    }