| | |
| | | <!-- 实时监测 --> |
| | | <template> |
| | | <el-row ref="h1"> |
| | | <el-col> |
| | | <!-- 菜单读标题 --> |
| | | <div ref="h1" class="header-container"> |
| | | <span class="describe-info">店铺名选择:</span> |
| | | <!-- 店铺名 级联 --> |
| | | <ShopNameAndID @submit-id="(n) => (deviceId[1] = n)"></ShopNameAndID> |
| | | |
| | | <!-- 异常类型选择 --> |
| | | <ExceptionType @submitExceptionType="(val) => (exceptionValue = val)"> |
| | | </ExceptionType> |
| | | |
| | | <TimeSelect @submit-time="giveTime"></TimeSelect> |
| | | </div> |
| | | <div |
| | | ref="h2" |
| | | style="display: flex; margin-top: 2px; justify-content: right" |
| | | > |
| | | <el-button |
| | | type="primary" |
| | | plain |
| | | @click="showTable" |
| | | style="margin-left: 20px" |
| | | :loading="button.queryButton" |
| | | >查询</el-button |
| | | > |
| | | |
| | | <el-tooltip |
| | | class="box-item" |
| | | effect="dark" |
| | | content="点击可导出Excel文件" |
| | | placement="top-start" |
| | | > |
| | | <!-- 做成函数js文件 --> |
| | | <el-icon |
| | | class="iconExcel clickable" |
| | | title="导出Excel文件" |
| | | @click="exportDom" |
| | | > |
| | | <i-ep-Download /> |
| | | <!-- 导出为Excel --> |
| | | </el-icon> |
| | | </el-tooltip> |
| | | </div> |
| | | <div style="display: flex; justify-content: right; margin-right: 40px"> |
| | | <span class="collapse-header-text"> |
| | | 静安区 {{ beginTime }} —— {{ endTime }} 油烟检测异常信息汇总</span |
| | | > |
| | | </div> |
| | | <br /> |
| | | |
| | | <el-collapse ref="h3" v-model="activeNames"> |
| | | <el-collapse-item name="1"> |
| | | <template #title> |
| | | <el-tooltip |
| | | class="box-item" |
| | | effect="dark" |
| | | content="点击可折叠" |
| | | placement="right-start" |
| | | > |
| | | <h4 class="collapse-header">异常分析</h4> |
| | | <el-icon class="header-icon"> |
| | | <i-ep-info-filled /> |
| | | </el-icon> |
| | | </el-tooltip> |
| | | |
| | | <el-tooltip |
| | | class="box-item" |
| | | effect="dark" |
| | | content="点击可折叠" |
| | | placement="right-start" |
| | | > |
| | | </el-tooltip> |
| | | </template> |
| | | <el-card class="box-card"> |
| | | <el-row :gutter="25"> |
| | | <el-col :span="8"> |
| | | <div style="display: flex"> |
| | | <img |
| | | src="@/assets/exceed.jpg" |
| | | style="width: 25px; height: 25px; margin-top: 5px" |
| | | /> |
| | | <span |
| | | style=" |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | margin-top: 4px; |
| | | margin-left: 4px; |
| | | " |
| | | >油烟浓度超标</span |
| | | > |
| | | </div> |
| | | |
| | | <div class="box-card-label"> |
| | | <el-scrollbar> |
| | | <span class="box-card-label">店铺数量:</span> |
| | | <span style="font-size: 20px" |
| | | >{{ exception0.length }} /{{ shopsTotal }}</span |
| | | > |
| | | <span style="margin-left: 150px; font-size: 14px"> |
| | | 占比:{{ |
| | | ((exception0.length / shopsTotal) * 100).toFixed(1) |
| | | }}%</span |
| | | > |
| | | </el-scrollbar> |
| | | </div> |
| | | |
| | | <hr /> |
| | | <div class="box-card-butcontainer"> |
| | | <el-card class="sub-box-card"> |
| | | <el-scrollbar max-height="70px"> |
| | | <ExceptionText |
| | | v-for="(item, index) in exception0" |
| | | :key="item" |
| | | :devId="item.devId" |
| | | exception-value="0" |
| | | :begin-time="beginTime" |
| | | :end-time="endTime" |
| | | @submit-exception-data="getAbnormalDataByClick" |
| | | > |
| | | {{ item.diName }} |
| | | <span |
| | | v-if="index < exception0.length - 1" |
| | | class="text-blank" |
| | | >,</span |
| | | > |
| | | </ExceptionText> |
| | | </el-scrollbar> |
| | | </el-card> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <el-col :span="8"> |
| | | <div style="display: flex"> |
| | | <img |
| | | src="@/assets/exception.jpg" |
| | | style="width: 25px; height: 25px; margin-top: 5px" |
| | | /> |
| | | <span |
| | | style=" |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | margin-top: 5px; |
| | | margin-left: 4px; |
| | | " |
| | | >供电异常</span |
| | | > |
| | | </div> |
| | | <div class="box-card-label"> |
| | | <el-scrollbar> |
| | | <span class="box-card-label">店铺数量:</span> |
| | | <span style="font-size: 20px" |
| | | >{{ exception1.length }} /{{ shopsTotal }}</span |
| | | > |
| | | <span style="margin-left: 150px; font-size: 14px"> |
| | | 占比:{{ |
| | | ((exception1.length / shopsTotal) * 100).toFixed(1) |
| | | }}%</span |
| | | > |
| | | </el-scrollbar> |
| | | </div> |
| | | |
| | | <hr /> |
| | | |
| | | <div> |
| | | <el-card class="sub-box-card"> |
| | | <el-scrollbar max-height="70px"> |
| | | <ExceptionText |
| | | v-for="(item, index) in exception1" |
| | | :key="item" |
| | | :devId="item.devId" |
| | | exception-value="1" |
| | | :begin-time="beginTime" |
| | | :end-time="endTime" |
| | | @submit-exception-data="getAbnormalDataByClick" |
| | | > |
| | | {{ item.diName }} |
| | | <span |
| | | v-if="index < exception1.length - 1" |
| | | class="text-blank" |
| | | >,</span |
| | | > |
| | | </ExceptionText> |
| | | </el-scrollbar> |
| | | </el-card> |
| | | </div> |
| | | </el-col> |
| | | |
| | | <el-col :span="8"> |
| | | <div style="display: flex"> |
| | | <img |
| | | src="@/assets/offline.jpg" |
| | | style="width: 25px; height: 25px; margin-top: 5px" |
| | | /> |
| | | <span |
| | | style=" |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | margin-top: 5px; |
| | | margin-left: 4px; |
| | | " |
| | | >掉线</span |
| | | > |
| | | </div> |
| | | <div class="box-card-label"> |
| | | <el-scrollbar> |
| | | <span class="box-card-label">店铺数量:</span> |
| | | <span style="font-size: 20px" |
| | | >{{ exception2.length }} /{{ shopsTotal }}</span |
| | | > |
| | | <span style="margin-left: 150px; font-size: 14px"> |
| | | 占比:{{ |
| | | ((exception2.length / shopsTotal) * 100).toFixed(1) |
| | | }}%</span |
| | | > |
| | | </el-scrollbar> |
| | | </div> |
| | | <hr /> |
| | | <div> |
| | | <el-card class="sub-box-card"> |
| | | <el-scrollbar max-height="70px"> |
| | | <ExceptionText |
| | | v-for="(item, index) in exception2" |
| | | :key="item" |
| | | :devId="item.devId" |
| | | exception-value="2" |
| | | :begin-time="beginTime" |
| | | :end-time="endTime" |
| | | @submit-exception-data="getAbnormalDataByClick" |
| | | > |
| | | {{ item.diName }} |
| | | <span |
| | | v-if="index < exception2.length - 1" |
| | | class="text-blank" |
| | | >,</span |
| | | > |
| | | </ExceptionText> |
| | | </el-scrollbar> |
| | | </el-card> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | </el-card> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | |
| | | <h4 class="table-text">异常数据</h4> |
| | | |
| | | </el-col> |
| | | </el-row> |
| | | <el-card class="table-page" v-show="!isNoData"> |
| | | <el-table |
| | | ref="tableH" |
| | | v-loading="loading" |
| | | :data="displayData" |
| | | style="width: 100%" |
| | | border |
| | | :height="tableHeight" |
| | | :cell-class-name="tableCellClassName" |
| | | |
| | | > |
| | | <el-table-column prop="diName" label="店铺名称"> |
| | | <template #default="{ row }"> |
| | | <el-tooltip effect="dark" :content="row.diName"> |
| | | <div class="cell ellipsis">{{ row.diName }}</div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column prop="devId" label="设备编号"> |
| | | <template #default="{ row }"> |
| | | <el-tooltip effect="dark" :content="row.devId"> |
| | | <div class="cell ellipsis">{{ row.devId }}</div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column prop="exception" label="异常分类"> |
| | | <template #default="{ row }"> |
| | | <el-tooltip effect="dark" :content="row.exception"> |
| | | <div class="cell ellipsis">{{ row.exception }}</div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="异常类型"> |
| | | <template #default="{ row }"> |
| | | <span v-if="row.exceptionType == '0'">油烟数据超标</span> |
| | | <span v-else-if="row.exceptionType == '1'">疑似供电异常</span> |
| | | <span v-else-if="row.exceptionType == '2'">掉线</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="region" label="地区"> |
| | | <template #default="{ row }"> |
| | | <el-tooltip effect="dark" :content="row.region"> |
| | | <div class="cell ellipsis">{{ row.region }}</div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | |
| | | <el-table-column prop="beginTime" label="开始时间"> |
| | | <template #default="{ row }"> |
| | | <el-tooltip effect="dark" :content="row.beginTime"> |
| | | <div class="cell ellipsis">{{ row.beginTime }}</div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column prop="endTime" label="结束时间"> |
| | | <template #default="{ row }"> |
| | | <el-tooltip effect="dark" :content="row.endTime"> |
| | | <div class="cell ellipsis">{{ row.endTime }}</div> |
| | | </el-tooltip> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作"> |
| | | <template #default="{ row }"> |
| | | <el-button |
| | | type="primary" |
| | | class="table-button" |
| | | @click="showDrawer(row)" |
| | | >查看详情</el-button |
| | | > |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | <el-pagination |
| | | ref="h4" |
| | | background |
| | | @size-change="handleSizeChange" |
| | | @current-change="handleCurrentChange" |
| | | :total="total" |
| | | :page-size="pageSize" |
| | | layout="total,prev, pager, next, jumper" |
| | | /> |
| | | </el-card> |
| | | <el-empty v-show="isNoData" :image-size="200" /> |
| | | <!-- 对话框 --> |
| | | <div> |
| | | <el-dialog v-model="centerDialogVisible" draggable align-center> |
| | | <template #header> |
| | | <div style="font-size: 17px"> |
| | | 店铺名:{{ rowShopName }} |
| | | <span style="margin-left: 40px">异常类型:</span> |
| | | <span v-if="rowExceptionType == '0'">油烟数据超标</span> |
| | | <span v-else-if="rowExceptionType == '1'">供电异常</span> |
| | | <span v-else-if="rowExceptionType == '2'">掉线</span> |
| | | <div style="margin-top: 10px"> |
| | | 异常时间段:{{ rowBeginTime }} ~ |
| | | {{ rowEndTime }} |
| | | </div> |
| | | </div> |
| | | <div class="dialog-button-position"> |
| | | <el-button |
| | | type="danger" |
| | | :loading="button.preButton" |
| | | :disabled="isPreCantouch || banTouch" |
| | | @click="getPreviousRowData" |
| | | >上条异常</el-button |
| | | > |
| | | <el-button |
| | | type="danger" |
| | | :loading="button.afterButton" |
| | | :disabled="isNextCantouch || banTouch" |
| | | @click="getNextRowData" |
| | | >下条异常</el-button |
| | | > |
| | | </div> |
| | | </template> |
| | | |
| | | <!-- 超标数据时 --> |
| | | <!-- 折线图 --> |
| | | |
| | | <!-- 掉线 --> |
| | | <div |
| | | ref="lineChart" |
| | | class="line-chart" |
| | | style=" |
| | | width: 100%; |
| | | height: 300px; |
| | | margin-bottom: 20px; |
| | | /* margin-left: 10px; |
| | | min-width: 350px; */ |
| | | " |
| | | ></div> |
| | | |
| | | <!-- <ExceptionTypeLineChart |
| | | :option="option" |
| | | :is-open-dialog="centerDialogVisible" |
| | | v-loading="chartLoading" |
| | | ></ExceptionTypeLineChart> --> |
| | | |
| | | <!-- --> |
| | | <div style="margin-top: 40px; margin-bottom: 5px; border: 1px"> |
| | | <el-table |
| | | :data="exceedingData" |
| | | height="360" |
| | | border |
| | | style="margin-top: 25px" |
| | | > |
| | | <el-table-column fixed prop="diName" label="店铺名称" /> |
| | | <el-table-column prop="mvStatCode" label="设备编号" /> |
| | | |
| | | <el-table-column prop="mvDataTime" label="采集时间" /> |
| | | <el-table-column |
| | | prop="mvFumeConcentration2" |
| | | label="油烟浓度(mg/m³)" |
| | | /> |
| | | </el-table> |
| | | </div> |
| | | |
| | | <el-tag type="success" class="mx-1" effect="dark" round |
| | | ><span class="table-line-lable" v-show="rowExceptionType == '0'" |
| | | >异常记录: |
| | | </span> |
| | | <span v-show="rowExceptionType == '1' || rowExceptionType == '2'" |
| | | >缺失数据:</span |
| | | > |
| | | <span class="table-line-num">{{ exceptionTotal }}条</span> |
| | | <span v-show="rowExceptionType === '1' || rowExceptionType === '2'"> |
| | | (逻辑计算)</span |
| | | > |
| | | </el-tag> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import axiosInstance from '../utils/request.js'; |
| | | // 异步组件 |
| | | const DashBoard = defineAsyncComponent(() => |
| | | import('../sfc/DashBoardTest.vue') |
| | | ) |
| | | import ExceptionType from '../sfc/ExceptionType.vue'; |
| | | import TimeSelect from '../sfc/TimeSelect.vue'; |
| | | import ExceptionText from '../sfc/ExceptionText.vue'; |
| | | import * as XLSX from 'xlsx/xlsx.mjs'; |
| | | import dayjs from 'dayjs'; |
| | | import axiosInstanceInstance from '../utils/request.js'; |
| | | import * as echarts from 'echarts'; |
| | | |
| | | const ShopNameAndID = defineAsyncComponent(() => |
| | | import('../sfc/../sfc/ShopNameAndID.vue') |
| | | ); |
| | | |
| | | // 异常图形异步组件 |
| | | const ExceptionTypeLineChart = defineAsyncComponent(() => |
| | | import('../sfc/ExceptionTypeLineChart.vue') |
| | | ); |
| | | export default { |
| | | components:{ |
| | | DashBoard |
| | | name: 'TablePage', |
| | | components: { |
| | | ExceptionType, |
| | | TimeSelect, |
| | | ShopNameAndID, |
| | | ExceptionText, |
| | | // ExceptionTypeLineChart |
| | | }, |
| | | data() { |
| | | return { |
| | | // 卡片大小 |
| | | cardSize: 'medium', |
| | | // 默认打开的折叠面板 |
| | | activeNames:'1', |
| | | // isShow:false, |
| | | // 要展示的仪表盘数量 |
| | | // totalCharts: 0, |
| | | // 实时更新间隔 3秒 |
| | | timeInterval:60000, |
| | | // 外部设备 |
| | | outside: { |
| | | // 设备信息表的数据 |
| | | shopnames: [], |
| | | checkAll: false, |
| | | isIndeterminate: false, |
| | | // 已选择店铺 |
| | | checkedShops: [], |
| | | |
| | | //返回选择的所有店铺的数据 |
| | | realTimeData: [] |
| | | chart: null, |
| | | // 折线图加载中 |
| | | chartLoading:false, |
| | | button:{ |
| | | // 查询按钮 |
| | | queryButton:false, |
| | | // 上一条按钮 |
| | | preButton:false, |
| | | // 下一条按钮 |
| | | afterButton:false, |
| | | // |
| | | banTouch:0 |
| | | }, |
| | | // 异常折线图的配置 |
| | | option: {}, |
| | | // 折线图展示 |
| | | isChartShow: false, |
| | | // table元素 |
| | | tableRef: null, |
| | | // 异常表格数据 |
| | | tableHeight: 300, |
| | | // 空数据状态 |
| | | isNoData: false, |
| | | // 弹出框中表格条数 |
| | | exceptionTotal: 0, |
| | | // 无数据时的时间数组,元素相差10分钟 |
| | | // abnormalTimeTenMinute: [], |
| | | // 店铺总数 |
| | | shopsTotal: 0, |
| | | |
| | | // 内部设备 |
| | | inner: { |
| | | // 内部接口返回的所有数据 |
| | | getData:[], |
| | | // 选中的店铺对应全部字段信息 |
| | | inFumeValue:[], |
| | | // 店铺名字 |
| | | shopnames: [], |
| | | checkAll: false, |
| | | isIndeterminate: false, |
| | | // 已选择店铺 |
| | | checkedShops: [] |
| | | }, |
| | | // ’上一条‘按钮是否可以被点击状态 |
| | | isPreCantouch: false, |
| | | // ’下一条‘按钮是否可以被点击状态 |
| | | isNextCantouch: false, |
| | | |
| | | // chartInstance: [] |
| | | // // 内部设备 |
| | | // devices: [] |
| | | // 对话框是否展示 |
| | | centerDialogVisible: false, |
| | | |
| | | // 抽屉头部信息 |
| | | // 折线图对应的当前表格行数据 |
| | | // 店铺名 |
| | | rowShopName: '', |
| | | // 异常类型 |
| | | rowExceptionType: '', |
| | | // 异常开始时间 |
| | | rowBeginTime: '', |
| | | // 异常结束时间 |
| | | rowEndTime: '', |
| | | // 异常的设备编号 |
| | | rowMvStatCode: '', |
| | | |
| | | // 表格的一行数据 |
| | | rowTable: [], |
| | | //拼接的所有数据 |
| | | allExceptionTimeData: [], |
| | | // 无数据时增加的前30分钟数据 |
| | | beforeData: [], |
| | | // 无数据时增加的后40分钟数据 |
| | | afterData: [], |
| | | |
| | | // -1表示未选择表格的行 |
| | | selectedRowIndex: -1, |
| | | |
| | | // 默认选择的折叠面板编号 |
| | | activeNames: ['1'], |
| | | // 异常时的表格 |
| | | abnormalTb: [], |
| | | // 异常的起止时间 |
| | | abnormalBt: '', |
| | | abnormalEt: '', |
| | | // 是否展示时间轴 否 |
| | | isAbnormal: false, |
| | | // 保存着异常类型0对应的店铺名称和设备编号 |
| | | exception0: [], |
| | | // 保存着异常类型1对应的店铺名称和设备编号 |
| | | exception1: [], |
| | | // 保存着异常类型2对应的店铺名称和设备编号 |
| | | exception2: [], |
| | | // 加载动画 |
| | | loading: false, |
| | | // 抽屉加载动画 |
| | | loadingDrawer: true, |
| | | // 分页展示数据 |
| | | |
| | | // 异常表的数据 |
| | | displayData: [], |
| | | // 存放后端返回的json数据 |
| | | jsonData: [], |
| | | // 分页的起始索引 |
| | | startIndex: 0, |
| | | // 当前页 |
| | | currentPage: 1, |
| | | // 每页条数 |
| | | pageSize: 10, |
| | | total: 0, |
| | | // 选择店铺名 |
| | | deviceId: [], |
| | | deviceInfo: [], |
| | | // 时间选择器开始时间 |
| | | beginTime: '', |
| | | // 时间选择器结束时间 |
| | | endTime: '', |
| | | // 异常表数据 |
| | | abnormalData: [], |
| | | // 弹出的对话框中的异常表格数据 |
| | | exceedingData: [], |
| | | drawerVisible: false, |
| | | // 表格的一行数据 |
| | | drawerData: {}, |
| | | // 抽屉方向,从右向左打开 |
| | | drawerDirection: 'rtl', |
| | | optionsTime: [ |
| | | // 时间颗粒度 |
| | | { |
| | | value: '10', |
| | | label: '10分钟数据', |
| | | disabled: true |
| | | } |
| | | ], |
| | | // 店铺名 级联选择器 |
| | | optionsShop: [], |
| | | // 异常类型选择器 |
| | | exceptionValue: [] |
| | | }; |
| | | }, |
| | | computed: { |
| | | cardStyle() { |
| | | let width = '400px'; |
| | | let height = '500px'; |
| | | if (this.cardSize === 'small') { |
| | | width = '200px'; |
| | | height = '200px'; |
| | | } else if (this.cardSize === 'large') { |
| | | width = '600px'; |
| | | height = '600px'; |
| | | } |
| | | return { |
| | | width, |
| | | height |
| | | }; |
| | | }, |
| | | |
| | | }, |
| | | methods: { |
| | | // 同步改变仪表盘大小 |
| | | getDashBoardStyle() { |
| | | if (this.cardSize === 'small') { |
| | | return { |
| | | width: '180px', |
| | | height: '120px', |
| | | margin: '10px' |
| | | }; |
| | | } else if (this.cardSize === 'large') { |
| | | return { |
| | | width: '380px', |
| | | height: '220px', |
| | | margin: '10px' |
| | | }; |
| | | } else { |
| | | return { |
| | | width: '280px', |
| | | height: '170px', |
| | | margin: '10px' |
| | | }; |
| | | } |
| | | }, |
| | | // 改变布局大小 从而实现每行放置仪表盘数量增多 |
| | | getColSpan(){ |
| | | if (this.cardSize === 'small') { |
| | | return 3 |
| | | } else if (this.cardSize === 'medium') { |
| | | return 4 |
| | | } |
| | | else if (this.cardSize === 'large'){ |
| | | return 8 |
| | | } |
| | | return 6 |
| | | }, |
| | | |
| | | // 改变卡片大小 |
| | | changeCardSize(size) { |
| | | this.cardSize = size; |
| | | }, |
| | | //获取所有店铺名字 |
| | | getDeviceInfo() { |
| | | // 获取外部设备的店铺名称 |
| | | axiosInstance.get('/fume/device').then((result) => { |
| | | result.data.data.forEach((item) => { |
| | | this.outside.shopnames.push(item.diName); |
| | | }); |
| | | }); |
| | | |
| | | //从内部接口获取实时数据的所有店铺名称 |
| | | axiosInstance |
| | | .get('https://fyami.com.cn/device/min/value/real_time', { |
| | | params: { page: 1, per_page: 20 } |
| | | }) |
| | | .then((result) => { |
| | | // 保存内部接口获取的所有信息 |
| | | this.getData = result.data.data |
| | | result.data.data.forEach((item) => { |
| | | |
| | | this.inner.shopnames.push(item.siteName); |
| | | }); |
| | | }); |
| | | }, |
| | | // 外部设备全选 |
| | | handleCheckAllChangeOutside(val) { |
| | | this.outside.checkedShops = val ? this.outside.shopnames : []; |
| | | this.outside.isIndeterminate = false; |
| | | }, |
| | | handleCheckedCitiesChangOutside(value) { |
| | | const checkedCount = value.length; |
| | | this.outside.checkAll = checkedCount === this.outside.shopnames.length; |
| | | this.outside.isIndeterminate = |
| | | checkedCount > 0 && checkedCount < this.outside.shopnames.length; |
| | | }, |
| | | |
| | | // 内部设备全选 |
| | | handleCheckAllChangeInner(val) { |
| | | this.inner.checkedShops = val ? this.inner.shopnames : []; |
| | | this.inner.isIndeterminate = false; |
| | | }, |
| | | handleCheckedCitiesChangeInner(value) { |
| | | const checkedCount = value.length; |
| | | this.inner.checkAll = checkedCount === this.inner.shopnames.length; |
| | | this.inner.isIndeterminate = |
| | | checkedCount > 0 && checkedCount < this.inner.shopnames.length; |
| | | }, |
| | | |
| | | // 判断一个数组是否包含该元素 |
| | | hasElement(array, element) { |
| | | return array.includes(element); |
| | | }, |
| | | |
| | | |
| | | //根据所选店铺求请并渲染仪表盘 |
| | | request() { |
| | | if(this.outside.checkedShops.length!=0){ |
| | | let temp = this.outside.checkedShops.join(); |
| | | let params = {}; |
| | | if (this.outside.checkedShops.length != 0) { |
| | | params['shops'] = temp; |
| | | // 监听 判断按钮是否可点击 |
| | | watch: { |
| | | selectedRowIndex(newVaue) { |
| | | // 处于表格的最后一条数据 设置‘上一条’按钮不可点 |
| | | if (newVaue === this.displayData.length - 1) { |
| | | this.isPreCantouch = true; |
| | | //用户先点了第一条,pre为true,然后点击最后一条,next为true。此时两个按钮都被封锁 |
| | | if (this.isNextCantouch == true) { |
| | | this.isNextCantouch = false; |
| | | } |
| | | axiosInstance.get('/fume/lastest', { params: params }).then((result) => { |
| | | this.outside.realTimeData = result.data.data; |
| | | console.log('66', this.outside.realTimeData); |
| | | // console.log('长度为:',this.outside.realTimeData.length); |
| | | // 渲染折线图 |
| | | // this.updateCharts(); |
| | | }); |
| | | } |
| | | |
| | | // 选择了内部设备 |
| | | if(this.inner.checkedShops.length!=0){ |
| | | // 清空数据 |
| | | this.inner.inFumeValue=[] |
| | | this.getData.forEach(item=>{ |
| | | let itemOne = item.siteName |
| | | // 拿到选中的店铺对应的浓度值 |
| | | if(this.hasElement(this.inner.checkedShops,itemOne)){ |
| | | this.inner.inFumeValue.push(item) |
| | | } |
| | | }) |
| | | console.log(this.inner.inFumeValue); |
| | | // 处于表格第一条数据 设置‘下一条’按钮不可点 |
| | | else if (newVaue === 0) { |
| | | this.isNextCantouch = true; |
| | | //用户先点了表格最后一条,next为true,然后点击第一条,pre为true。此时两个按钮都被封锁 |
| | | if (this.isPreCantouch == true) { |
| | | this.isPreCantouch = false; |
| | | } |
| | | } |
| | | console.log('调用了'); |
| | | // 处于表格的中间行 将按钮设置为可点击状态 |
| | | else { |
| | | this.isPreCantouch = false; |
| | | this.isNextCantouch = false; |
| | | } |
| | | }, |
| | | |
| | | // 点击按钮触发 |
| | | show() { |
| | | // 当取消选择时,防止图形还保留在页面。 |
| | | if(this.outside.checkedShops.length==0){ |
| | | this.outside.realTimeData = [] |
| | | } |
| | | if(this.inner.checkedShops.length == 0){ |
| | | this.inner.inFumeValue = [] |
| | | } |
| | | // 根据所选的店铺请求数据 |
| | | this.request(); |
| | | setInterval(() => { |
| | | this.request(); |
| | | }, this.timeInterval); |
| | | // 得到要展示的仪表盘数量 |
| | | // this.totalCharts = |
| | | // this.outside.checkedShops.length + this.inner.checkedShops.length; |
| | | // 当选择的时间发生变化时,异常分析部分的异常店铺数量同步变化 |
| | | beginTime() { |
| | | this.getShopNames(); |
| | | }, |
| | | endTime() { |
| | | this.getShopNames(); |
| | | }, |
| | | centerDialogVisible() { |
| | | // this.initChart(); |
| | | // this.chart.clear |
| | | window.addEventListener('resize', this.updateChart); |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | // 获取所有店铺名字 |
| | | // 从接口获取店铺名称 给级联下拉框 |
| | | this.getDeviceInfo(); |
| | | // 展示最近7天数据 |
| | | this.getRecentSevenDays(); |
| | | // 根据异常类型返回店铺名称和设备编号 渲染异常分析部分对应的店铺名 |
| | | this.getShopNames(); |
| | | this.calcTableHeight(); |
| | | |
| | | window.addEventListener('resize', this.updateChart); |
| | | }, |
| | | beforeUnmount() { |
| | | if (this.chart) { |
| | | this.chart.dispose; |
| | | } |
| | | }, |
| | | methods: { |
| | | calDialogWidth(){ |
| | | |
| | | }, |
| | | // 功能:初始化折线图 |
| | | initChart() { |
| | | // 创建echarts实例 |
| | | this.chart = echarts.init(this.$refs.lineChart); |
| | | // 定义图表的配置项和数据 |
| | | const option = { |
| | | grid: { |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | containLabel: true |
| | | }, |
| | | tooltip: {}, |
| | | toolbox: { |
| | | // 工具栏 |
| | | feature: { |
| | | // dataZoom: { |
| | | // // 区域缩放 |
| | | // yAxisIndex: 'none' |
| | | // }, |
| | | // 保存为图片 |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'time', |
| | | data: [], |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '油烟浓度', |
| | | type: 'line', |
| | | data: [] |
| | | } |
| | | ] |
| | | }; |
| | | // 使用刚指定的配置项和数据显示图表 |
| | | this.chart.setOption(option, true); |
| | | }, |
| | | |
| | | // 功能:跟页面响应式变化 |
| | | resizeChart() { |
| | | this.chart.resize(); |
| | | }, |
| | | // 功能:改变表格某个单元格的颜色 |
| | | tableCellClassName({ row, column, rowIndex, columnIndex }) { |
| | | if(columnIndex == 3){ |
| | | if (row.exceptionType == '0') { |
| | | return 'exceeding-row'; |
| | | } else if (row.exceptionType == '1') { |
| | | return 'abnormal-power-supply'; |
| | | } else if (row.exceptionType == '2') { |
| | | return 'disconnect'; |
| | | } |
| | | } |
| | | |
| | | }, |
| | | |
| | | //功能: 动态计算表格高度 |
| | | calcTableHeight() { |
| | | const h1 = this.$refs.h1.$el.offsetHeight; |
| | | const h2 = this.$refs.h4.$el.offsetHeight; |
| | | this.tableHeight = `calc(100vh - ${h1}px - ${h2}px - 45px - var(--el-main-padding) * 2 - var(--el-card-padding))`; |
| | | }, |
| | | |
| | | //功能: 时间是否超过10分钟 |
| | | isTimeDifferenceGreaterThan10Minutes(dateString1, dateString2) { |
| | | const date1 = new Date(dateString1); |
| | | const date2 = new Date(dateString2); |
| | | |
| | | // 计算两个日期的时间差(毫秒) |
| | | const timeDifferenceMs = Math.abs(date1 - date2); |
| | | |
| | | // 转换为分钟 |
| | | const timeDifferenceMinutes = Math.floor(timeDifferenceMs / (1000 * 60)); |
| | | |
| | | // 判断时间差是否大于10分钟 |
| | | return timeDifferenceMinutes > 10; |
| | | }, |
| | | |
| | | // 以10分钟为间隔返回时间字符串数组 |
| | | generateTimePoints(timePoints, yAxisData) { |
| | | let updatedTimePoints = []; |
| | | let yAxisDataAdressed = []; |
| | | for (let i = 0; i < timePoints.length; i++) { |
| | | updatedTimePoints.push(timePoints[i]); |
| | | yAxisDataAdressed.push(yAxisData[i]); |
| | | if (i < timePoints.length - 1) { |
| | | let current = timePoints[i]; |
| | | let next = timePoints[i + 1]; |
| | | while (this.isTimeDifferenceGreaterThan10Minutes(current, next)) { |
| | | current = dayjs(current) |
| | | .add(10, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss'); |
| | | updatedTimePoints.push(current); |
| | | yAxisDataAdressed.push(null); |
| | | } |
| | | } |
| | | } |
| | | let obj = {}; |
| | | obj['time'] = updatedTimePoints; |
| | | obj['data'] = yAxisDataAdressed; |
| | | return obj; |
| | | }, |
| | | |
| | | isExceedOneMonth(dateStr1, dateStr2) { |
| | | // 超过一个月,返回True,否则返回False |
| | | // 将日期字符串转为日期对象 |
| | | const date1 = new Date(dateStr1); |
| | | const date2 = new Date(dateStr2); |
| | | |
| | | // 获取两个日期的年、月、日 |
| | | const year1 = date1.getFullYear(); |
| | | const month1 = date1.getMonth(); |
| | | const day1 = date1.getDate(); |
| | | |
| | | const year2 = date2.getFullYear(); |
| | | const month2 = date2.getMonth(); |
| | | const day2 = date2.getDate(); |
| | | |
| | | // 判断两个日期是否相差一个月 |
| | | if (year1 === year2) { |
| | | // 年份相等,比较月份差值 |
| | | if (Math.abs(month1 - month2) === 1) { |
| | | // 月份差值为1,还需要判断具体日期 |
| | | if ( |
| | | (month1 < month2 && day1 < day2) || |
| | | (month1 > month2 && day1 > day2) |
| | | ) { |
| | | return true; |
| | | } |
| | | } |
| | | } else if (Math.abs(year1 - year2) === 1) { |
| | | // 年份差值为1,比较月份和日期 |
| | | if ( |
| | | (year1 < year2 && month1 === 11 && month2 === 0 && day1 < day2) || |
| | | (year1 > year2 && month1 === 0 && month2 === 11 && day1 > day2) |
| | | ) { |
| | | return true; |
| | | } |
| | | } |
| | | |
| | | // 默认返回false,表示两个日期字符串不相差一个月 |
| | | return false; |
| | | }, |
| | | |
| | | // 刚打开卡片时第一个图形不会自动伸缩 当点击上/下一条时会自动伸缩 |
| | | // 图形响应式变化 |
| | | updateChart() { |
| | | this.$nextTick(() => { |
| | | if (this.chart) { |
| | | this.chart.resize(); |
| | | } |
| | | }); |
| | | }, |
| | | |
| | | // 从时间选择器组件拿到开始和结束时间 |
| | | giveTime(val) { |
| | | //将中国标准时间转为指定格式(该组件返回的标准时间的格式,所以必须的加这个函数) |
| | | this.beginTime = dayjs(val[0]).format('YYYY-MM-DD HH:mm:ss'); |
| | | this.endTime = dayjs(val[1]).format('YYYY-MM-DD HH:mm:ss'); |
| | | }, |
| | | |
| | | // 参数:异常的开始和结束时间。返回时间数组,从开始时间的后10分钟到结束时间为止。 |
| | | // 比如12:00:00-13:00:00 所以返回的数组元素是 12:10:00 ,12:20:00,12:30:00....13:00:00 |
| | | descTenTime(begin, end) { |
| | | let time = []; |
| | | if (begin == end) { |
| | | time.push(begin); |
| | | return time; |
| | | } |
| | | // 保留结果 00 10 20 30 |
| | | let temp = dayjs(begin).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss'); |
| | | while (temp != end) { |
| | | time.push(temp); |
| | | temp = dayjs(temp).add(10, 'minute').format('YYYY-MM-DD HH:mm:ss'); |
| | | } |
| | | // 加上异常的结束时间 |
| | | time.push(temp); |
| | | return time; |
| | | }, |
| | | |
| | | // 保存当前选择的行所有信息 |
| | | setinfo(index) { |
| | | this.rowShopName = this.displayData[index].diName; |
| | | this.rowExceptionType = this.displayData[index].exceptionType; |
| | | this.rowBeginTime = this.displayData[index].beginTime; |
| | | this.rowEndTime = this.displayData[index].endTime; |
| | | this.rowMvStatCode = this.displayData[index].devId; |
| | | }, |
| | | |
| | | //功能: 供电异常和掉线时的表格数据 |
| | | setExceptionData() { |
| | | // 无数据时的时间数组 时间相差10分钟 |
| | | const abnormalTimeTenMinute = this.descTenTime( |
| | | this.rowBeginTime, |
| | | this.rowEndTime |
| | | ); |
| | | // 去除供电异常和掉线区间的第一个有元素的值 |
| | | this.exceedingData = []; |
| | | |
| | | for (let i = 0; i < abnormalTimeTenMinute.length; i++) { |
| | | this.exceedingData.push({ |
| | | mvStatCode: this.rowMvStatCode, |
| | | diName: this.rowShopName, |
| | | mvDataTime: abnormalTimeTenMinute[i], |
| | | mvFumeConcentration2: '' |
| | | }); |
| | | } |
| | | |
| | | // 保存无数据时表格条数 |
| | | this.exceptionTotal = abnormalTimeTenMinute.length; |
| | | }, |
| | | // 点击表格的行时 |
| | | selectTableRow(row) { |
| | | // 获取当前行的索引 |
| | | this.selectedRowIndex = this.displayData.indexOf(row); |
| | | // 进入抽屉页面更新头部数据 |
| | | this.setinfo(this.selectedRowIndex); |
| | | }, |
| | | |
| | | // 获取获取表格下一行数据 |
| | | getNextRowData() { |
| | | // 不是表格的第一行 |
| | | if (this.selectedRowIndex !== 0) { |
| | | // 点击过程中 锁住上下条按钮 在设置完图形配置项后解锁 |
| | | this.banTouch = 1 |
| | | |
| | | //得到上一行数据索引 |
| | | this.selectedRowIndex = this.selectedRowIndex - 1; |
| | | //请求数据 改变exceedingData |
| | | this.setinfo(this.selectedRowIndex); |
| | | let params = {}; |
| | | if (this.drawerData.devId) { |
| | | params['devId'] = this.displayData[this.selectedRowIndex].devId; |
| | | } |
| | | if (this.drawerData.beginTime) { |
| | | params['beginTime'] = |
| | | this.displayData[this.selectedRowIndex].beginTime; |
| | | } |
| | | if (this.drawerData.endTime) { |
| | | params['endTime'] = this.displayData[this.selectedRowIndex].endTime; |
| | | } |
| | | this.button.afterButton = true |
| | | axiosInstanceInstance |
| | | .get('/fume/exceed', { params: params }) |
| | | .then((response) => { |
| | | // 保存返回的超标数据 |
| | | this.exceedingData = response.data.data; |
| | | this.drawChartTest(); |
| | | this.exceptionTotal = this.exceedingData.length; |
| | | this.button.afterButton = false |
| | | }); |
| | | } |
| | | |
| | | }, |
| | | |
| | | // 获取获取表格下一行数据 |
| | | getPreviousRowData() { |
| | | // 不是表格的第一行 |
| | | if (this.selectedRowIndex < this.displayData.length - 1) { |
| | | // 点击过程中 锁住上下条按钮 在设置完图形配置项后解锁 |
| | | this.banTouch = 1 |
| | | |
| | | //得到上一行数据索引 |
| | | this.selectedRowIndex = this.selectedRowIndex + 1; |
| | | |
| | | //请求数据 改变exceedingData |
| | | this.setinfo(this.selectedRowIndex); |
| | | let params = {}; |
| | | if (this.drawerData.devId) { |
| | | params['devId'] = this.displayData[this.selectedRowIndex].devId; |
| | | } |
| | | if (this.drawerData.beginTime) { |
| | | params['beginTime'] = |
| | | this.displayData[this.selectedRowIndex].beginTime; |
| | | } |
| | | if (this.drawerData.endTime) { |
| | | params['endTime'] = this.displayData[this.selectedRowIndex].endTime; |
| | | } |
| | | this.button.preButton = true |
| | | axiosInstanceInstance |
| | | .get('/fume/exceed', { params: params }) |
| | | .then((response) => { |
| | | // 保存返回的超标数据 |
| | | this.exceedingData = response.data.data; |
| | | this.drawChartTest(); |
| | | this.exceptionTotal = this.exceedingData.length; |
| | | this.button.preButton = false |
| | | }); |
| | | } |
| | | }, |
| | | |
| | | // ‘查看详情’ 弹出框部分 |
| | | showDrawer(row) { |
| | | // 计算当前行的索引 |
| | | this.selectTableRow(row); |
| | | |
| | | this.rowTable = row; |
| | | |
| | | // 表格的行数据以对象形式给drawerData |
| | | this.drawerData = row; |
| | | |
| | | this.centerDialogVisible = true; |
| | | |
| | | // 初始化折线图 |
| | | this.initChart(); |
| | | // this.chart.clear |
| | | |
| | | // 根据行数据请求详细超标数据渲染折线图 |
| | | let params = {}; |
| | | if (this.drawerData.devId) { |
| | | params['devId'] = this.drawerData.devId; |
| | | } |
| | | if (this.drawerData.beginTime) { |
| | | params['beginTime'] = this.drawerData.beginTime; |
| | | } |
| | | if (this.drawerData.endTime) { |
| | | params['endTime'] = this.drawerData.endTime; |
| | | } |
| | | |
| | | axiosInstanceInstance |
| | | .get('/fume/exceed', { params: params }) |
| | | .then((response) => { |
| | | // 保存返回的超标数据 |
| | | this.exceedingData = response.data.data; |
| | | this.drawChartTest(); |
| | | this.exceptionTotal = this.exceedingData.length; |
| | | }); |
| | | }, |
| | | |
| | | // 用户根据输入的条件查询 |
| | | showTable() { |
| | | if (this.isExceedOneMonth(this.beginTime, this.endTime)) { |
| | | alert('时间跨度不能超过一个月'); |
| | | return; |
| | | } |
| | | let params = {}; |
| | | |
| | | if (this.deviceId[1]) { |
| | | params['devId'] = this.deviceId[1]; |
| | | } |
| | | if (this.exceptionValue.length != 0) { |
| | | params['exceptionValue'] = this.exceptionValue.join(); |
| | | } |
| | | |
| | | if (this.beginTime) { |
| | | params['beginTime'] = this.beginTime; |
| | | } |
| | | if (this.endTime) { |
| | | params['endTime'] = this.endTime; |
| | | } |
| | | this.loading = true; |
| | | this.button.queryButton = true |
| | | |
| | | axiosInstanceInstance |
| | | .get('/fume/abnormalthree', { params: params }) |
| | | .then((response) => { |
| | | this.abnormalData = response.data.data; |
| | | this.total = this.abnormalData.length; |
| | | this.loading = false; |
| | | this.button.queryButton = false |
| | | if (response.data.data.length == 0) { |
| | | ElMessage('该时段无数据'); |
| | | this.isNoData = true; |
| | | return; |
| | | } |
| | | // 移除空数据状态 |
| | | this.isNoData = false; |
| | | this.handleCurrentChange(1); |
| | | |
| | | }); |
| | | }, |
| | | handleSizeChange(val) { |
| | | this.pageSize = val; |
| | | // 改变每页显示数目时跳到第一页 |
| | | this.handleCurrentChange(1); |
| | | }, |
| | | handleCurrentChange(val) { |
| | | const startIndex = (val - 1) * this.pageSize; |
| | | const endIndex = startIndex + this.pageSize; |
| | | |
| | | this.displayData = this.abnormalData.slice(startIndex, endIndex); |
| | | }, |
| | | |
| | | //相差多少个十分钟 计算中并不包括开始时间,但包括结束时间。 |
| | | diffTenMinutesNum(beginNormal, endNormal) { |
| | | // 将开始时间和结束时间转换为dayjs对象 |
| | | const start = dayjs(beginNormal); |
| | | const end = dayjs(endNormal); |
| | | |
| | | // 计算结束时间减去开始时间中间相差多少个十分钟 |
| | | const diffInMinutes = end.diff(start, 'minute'); |
| | | const diffInTenMinutes = Math.floor(diffInMinutes / 10); |
| | | return diffInTenMinutes; |
| | | }, |
| | | |
| | | // 参数:异常的开始时间,异常的结束时间。 |
| | | // 功能:返回开始时间的前30分钟的时间点,结束时间后40分钟的时间点 |
| | | before30AndAfter40(begin, end) { |
| | | let time = []; |
| | | const before30MinBegin = dayjs(begin) |
| | | .subtract(30, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss'); |
| | | // 后一段的开始时间 |
| | | const after10MinBegin = dayjs(end) |
| | | .add(10, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss'); |
| | | // 往后40分钟 |
| | | const after40MinEnd = dayjs(end) |
| | | .add(40, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss'); |
| | | time.push(before30MinBegin); |
| | | time.push(after10MinBegin); |
| | | time.push(after40MinEnd); |
| | | return time; |
| | | }, |
| | | |
| | | // 参数:设备编号, 开始时间, 结束时间 |
| | | // 功能:返回某设备在该时段历史数据的get请求参数。 |
| | | requestGetParms(devnum, begin, end) { |
| | | return { |
| | | devId: devnum, |
| | | beginTime: begin, |
| | | endTime: end |
| | | }; |
| | | }, |
| | | // 参数:对象数组(该对象中的属性不能是引用类型,否则拷贝的值还是会相互影响) |
| | | // 功能:拷贝该对象数组。 |
| | | shallowCopyList(itemIsObjOfList) { |
| | | let tempList = []; |
| | | itemIsObjOfList.forEach((item) => { |
| | | tempList.push({ ...item }); |
| | | }); |
| | | return tempList; |
| | | }, |
| | | |
| | | // 参数:添加首尾时间数据的异常数据数组(元素为对象) |
| | | // 功能:对中间异常区间时间和值进行补充,返回处理后的结果 |
| | | // 详细描述:遍历数组,当发现数组元素为空时,设置该元素的时间为上一个元素时间的后10分钟,并把浓度值设置为null(上个元素的时间一定不为空,无需再去判断上个元素为空的情况)。 |
| | | addTenMinutes(exceptionDataArr) { |
| | | // x轴 日期时间 |
| | | let dateList = []; |
| | | // y轴 超标油烟浓度 |
| | | let fumeExceeding = []; |
| | | let obj = {}; |
| | | for (let i = 0; i < exceptionDataArr.length; i++) { |
| | | if (exceptionDataArr[i] == null) { |
| | | //x轴日期。元素为null时, 设置该元素的时间为前一元素的时间后10分钟 |
| | | dateList.push( |
| | | dayjs(dateList[dateList.length - 1]) |
| | | .add(10, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss') |
| | | ); |
| | | // 超标油烟浓度 |
| | | fumeExceeding.push(null); |
| | | } else { |
| | | //x轴日期 |
| | | dateList.push(exceptionDataArr[i].mvDataTime); |
| | | // 超标油烟浓度 |
| | | fumeExceeding.push(exceptionDataArr[i].mvFumeConcentration2); |
| | | } |
| | | } |
| | | obj['dateList'] = dateList; |
| | | obj['fumeExceeding'] = fumeExceeding; |
| | | return obj; |
| | | }, |
| | | |
| | | // 参数:加上前后区间的异常数据,时间字符串 |
| | | // 功能:判断data中是否有该日期时间,存在返回该时间对应的浓度值,否则返回-1 |
| | | findTimeInExceptionData(data, time) { |
| | | for (let i = 0; i < data.length; i++) { |
| | | if (data[i] == null) { |
| | | continue; |
| | | } |
| | | if (data[i]['mvDataTime'] == time) { |
| | | return data[i]['mvFumeConcentration2']; |
| | | } |
| | | } |
| | | return -1; |
| | | }, |
| | | // 参数:前区间的开始时间, 后区间的结束时间, 加上前后区间的总时间段的异常数据的对象数组 |
| | | // 功能:根据开始和结束时间,返回以10分钟为间隔的时间和对应的值 |
| | | keepContinuousByEachTenMinutes( |
| | | intervalStarTime, |
| | | intervalEndTime, |
| | | headAndTailExceptionData |
| | | ) { |
| | | let xAxis = []; |
| | | let yAxis = []; |
| | | let obj = {}; |
| | | let current = intervalStarTime; |
| | | let tail = dayjs(intervalEndTime) |
| | | .add(10, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss'); |
| | | while (current != tail) { |
| | | let value = this.findTimeInExceptionData( |
| | | headAndTailExceptionData, |
| | | current |
| | | ); |
| | | if (value != -1) { |
| | | xAxis.push(current); |
| | | yAxis.push(value); |
| | | } else { |
| | | xAxis.push(current); |
| | | yAxis.push(null); |
| | | } |
| | | current = dayjs(current) |
| | | .add(10, 'minute') |
| | | .format('YYYY-MM-DD HH:mm:ss'); |
| | | } |
| | | obj['xAxis'] = xAxis; |
| | | obj['yAxis'] = yAxis; |
| | | return obj; |
| | | }, |
| | | |
| | | // 参数:超标数据前面区间的数据 |
| | | // 功能:返回除去最后一个元素的数组 |
| | | removeLastItemOfBeforeData(beforeDataOfExceeding) { |
| | | let tempList = []; |
| | | if (beforeDataOfExceeding.length == 1) { |
| | | return tempList; |
| | | } else { |
| | | for (let i = 0; i < beforeDataOfExceeding.length - 1; i++) { |
| | | tempList.push({ ...beforeDataOfExceeding[i] }); |
| | | } |
| | | return tempList; |
| | | } |
| | | }, |
| | | |
| | | // 设置option |
| | | // 参数:x轴时间, y轴油烟浓度, 异常类别(0代表超标,1代表供电异常和掉线), 异常开始时间,异常结束时间,异常开始时间在整个区间的索引下标,异常结束时间在整个区间的索引下标 |
| | | setOption( |
| | | xData, |
| | | yData, |
| | | exceptionCategory, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | beginIndex, |
| | | endIndex |
| | | ) { |
| | | this.option = {}; |
| | | // 超标 |
| | | if (exceptionCategory == 0) { |
| | | this.chart.setOption({ |
| | | tooltip: {}, |
| | | toolbox: { |
| | | // 工具栏 |
| | | feature: { |
| | | // dataZoom: { |
| | | // yAxisIndex: 'none' |
| | | // }, |
| | | // 保存为图片 |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xData, |
| | | name: '时间', |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value.slice(11, -3); |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'mg/m³' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '油烟浓度', |
| | | type: 'line', |
| | | data: yData.map((item) => { |
| | | if (item >= 1) { |
| | | return { |
| | | value: item, |
| | | itemStyle: { |
| | | color: 'red' |
| | | } |
| | | }; |
| | | } |
| | | return item; |
| | | }), |
| | | // 变换指定时间区间的背景颜色 |
| | | markArea: { |
| | | itemStyle: { |
| | | color: 'rgba(255, 173, 177, 0.4)' |
| | | }, |
| | | data: [ |
| | | [ |
| | | { |
| | | name: '超标时间段', |
| | | xAxis: exceptionBeginTime |
| | | }, |
| | | { |
| | | xAxis: exceptionEndTime |
| | | } |
| | | ] |
| | | ] |
| | | }, |
| | | markLine: { |
| | | symbol: 'none', |
| | | itemStyle: { |
| | | // 基线公共样式 |
| | | normal: { |
| | | lineStyle: { |
| | | type: 'dashed' |
| | | }, |
| | | label: { |
| | | show: true, |
| | | position: 'end', |
| | | formatter: '{b}' |
| | | } |
| | | } |
| | | }, |
| | | data: [ |
| | | { |
| | | name: '超标', |
| | | type: 'average', |
| | | yAxis: 1, |
| | | lineStyle: { |
| | | // color: '#ff0000' |
| | | color: 'red' |
| | | } |
| | | } |
| | | ] |
| | | } |
| | | } |
| | | ], |
| | | // 指定时间区间的线段变颜色 |
| | | visualMap: { |
| | | show: false, |
| | | dimension: 0, |
| | | pieces: [ |
| | | { |
| | | lte: beginIndex, |
| | | color: 'green' |
| | | }, |
| | | { |
| | | gt: beginIndex, |
| | | lte: endIndex, |
| | | color: 'red' |
| | | }, |
| | | { |
| | | gt: endIndex, |
| | | lte: xData.length - 1, |
| | | color: 'green' |
| | | } |
| | | ] |
| | | } |
| | | }); |
| | | } |
| | | // 供电异常和掉线 |
| | | else if (exceptionCategory == 1) { |
| | | this.chart.setOption( { |
| | | tooltip: {}, |
| | | toolbox: { |
| | | // 工具栏 |
| | | feature: { |
| | | // dataZoom: { |
| | | // // 区域缩放 |
| | | // yAxisIndex: 'none' |
| | | // }, |
| | | // 保存为图片 |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | xAxis: { |
| | | type: 'category', |
| | | data: xData, |
| | | name: '时间', |
| | | axisLabel: { |
| | | formatter: function (value) { |
| | | return value.slice(11, -3); |
| | | } |
| | | } |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: 'mg/m³' |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '油烟数据', |
| | | type: 'line', |
| | | data: yData, |
| | | markLine: { |
| | | silent: true, |
| | | data: [ |
| | | // 标注无数据时间段的效果,将这个时间段的数轴部分变为红色 |
| | | { |
| | | name: '无数据', |
| | | xAxis: exceptionBeginTime |
| | | }, |
| | | { |
| | | xAxis: exceptionEndTime |
| | | } |
| | | ], |
| | | lineStyle: { |
| | | color: 'red' |
| | | } |
| | | } |
| | | } |
| | | ] |
| | | }); |
| | | } |
| | | this.banTouch = 0 |
| | | }, |
| | | |
| | | // 功能:点击 ‘查看详情’, ‘下一条’按钮时会 先逻辑计算。最后展示图形 |
| | | drawChartTest() { |
| | | this.beforeData = []; |
| | | this.afterData = []; |
| | | this.allExceptionTimeData = []; |
| | | //异常的开始时间 结束时间 |
| | | let exceptionBeginTime = this.rowBeginTime; |
| | | let exceptionEndTime = this.rowEndTime; |
| | | |
| | | // beforeAndAfterTime[0]:前30分钟的时间点 |
| | | // beforeAndAfterTime[1]:后10分钟的时间点 |
| | | // beforeAndAfterTime[2]:后40分钟的时间点 |
| | | let beforeAndAfterTime = this.before30AndAfter40( |
| | | exceptionBeginTime, |
| | | exceptionEndTime |
| | | ); |
| | | |
| | | // 构造异常时间前的区间数据请求参数 |
| | | let paramsBefore = this.requestGetParms( |
| | | this.displayData[this.selectedRowIndex].devId, |
| | | beforeAndAfterTime[0], |
| | | this.displayData[this.selectedRowIndex].beginTime |
| | | ); |
| | | |
| | | // 构造异常时间后的区间数据请求参数 |
| | | let paramsAfter = this.requestGetParms( |
| | | this.displayData[this.selectedRowIndex].devId, |
| | | beforeAndAfterTime[1], |
| | | beforeAndAfterTime[2] |
| | | ); |
| | | |
| | | // 折线图加载中效果 |
| | | this.chartLoading = true |
| | | // 请求前半段 |
| | | axiosInstanceInstance |
| | | .get('/fume/history', { params: paramsBefore }) |
| | | .then((result1) => { |
| | | this.beforeData = result1.data.data; |
| | | // 请求后半段 |
| | | axiosInstanceInstance |
| | | .get('/fume/history', { params: paramsAfter }) |
| | | .then((result2) => { |
| | | this.afterData = result2.data.data; |
| | | //保存异常区间的值 |
| | | let tempArr = []; |
| | | // 保存异常区间前后的值 |
| | | let before = []; |
| | | let after = []; |
| | | |
| | | // 判断是否是供电异常或掉线 |
| | | if ( |
| | | this.rowExceptionType === '1' || |
| | | this.rowExceptionType === '2' |
| | | ) { |
| | | // 重构表格 缺失异常数据自动填充 |
| | | this.setExceptionData(); |
| | | |
| | | //相差几个10分钟 |
| | | const TenMinuteNum = this.diffTenMinutesNum( |
| | | exceptionBeginTime, |
| | | exceptionEndTime |
| | | ); |
| | | //用null填充中异常无数据的时间 |
| | | for (let i = 0; i < TenMinuteNum; i++) { |
| | | tempArr.push(null); |
| | | } |
| | | before = this.shallowCopyList(this.beforeData); |
| | | |
| | | after = this.shallowCopyList(this.afterData); |
| | | // after = this.afterData |
| | | } |
| | | // 超标 |
| | | else { |
| | | let beforeTemp = this.removeLastItemOfBeforeData( |
| | | this.beforeData |
| | | ); |
| | | // 前后区间只显示距离超标区间时间最近的浓度小于1的时间点 |
| | | for (let i = beforeTemp.length - 1; i >= 0; i--) { |
| | | if (beforeTemp[i].mvFumeConcentration2 >= 1) { |
| | | break; |
| | | } |
| | | if (beforeTemp[i].mvFumeConcentration2 < 1) { |
| | | before.unshift(this.beforeData[i]); |
| | | } |
| | | } |
| | | |
| | | for (let i = 0; i < this.afterData.length; i++) { |
| | | if (this.afterData[i].mvFumeConcentration2 >= 1) { |
| | | break; |
| | | } |
| | | if (this.afterData[i].mvFumeConcentration2 < 1) { |
| | | after.unshift(this.afterData[i]); |
| | | } |
| | | } |
| | | tempArr = this.shallowCopyList(this.exceedingData); |
| | | } |
| | | |
| | | // 将前后区间数据 与 异常区间数据 合并 |
| | | this.allExceptionTimeData = [...before, ...tempArr, ...after]; |
| | | // x轴日期时间 |
| | | let dateList = []; |
| | | // y轴 超标油烟浓度 |
| | | let fumeExceeding = []; |
| | | let timeAndValue = {}; |
| | | |
| | | // 从添加了首位区间的开始和结束时间进行遍历 保证时间以10分钟为间隔 |
| | | timeAndValue = this.keepContinuousByEachTenMinutes( |
| | | beforeAndAfterTime[0], |
| | | beforeAndAfterTime[2], |
| | | this.allExceptionTimeData |
| | | ); |
| | | |
| | | dateList = timeAndValue['xAxis']; |
| | | fumeExceeding = timeAndValue['yAxis']; |
| | | |
| | | // 提取异常起始时间点在整个区间内的数据索引 |
| | | let startIndex = dateList.findIndex( |
| | | (item) => item === exceptionBeginTime |
| | | ); |
| | | let endIndex = dateList.findIndex( |
| | | (item) => item === exceptionEndTime |
| | | ); |
| | | |
| | | // 供电异常和掉线情况 超标情况 |
| | | if ( |
| | | this.rowExceptionType === '1' || |
| | | this.rowExceptionType === '2' |
| | | ) { |
| | | this.setOption( |
| | | dateList, |
| | | fumeExceeding, |
| | | 1, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | startIndex, |
| | | endIndex |
| | | ); |
| | | } else { |
| | | // 超标情况 |
| | | this.setOption( |
| | | dateList, |
| | | fumeExceeding, |
| | | 0, |
| | | exceptionBeginTime, |
| | | exceptionEndTime, |
| | | startIndex, |
| | | endIndex |
| | | ); |
| | | } |
| | | this.chartLoading = false |
| | | }); |
| | | }); |
| | | }, |
| | | |
| | | getDeviceInfo() { |
| | | // 级联下拉框数据 从接口中动态获取 |
| | | axiosInstanceInstance.get('/fume/device').then((result) => { |
| | | this.deviceInfo = result.data.data; |
| | | // 获取到总的店铺数量 |
| | | this.shopsTotal = result.data.data.length; |
| | | this.deviceInfo.forEach((item) => { |
| | | this.optionsShop[this.optionsShop.length] = { |
| | | value: item.diName, |
| | | label: item.diName, |
| | | children: [ |
| | | { |
| | | value: item.diCode, |
| | | label: item.diCode |
| | | } |
| | | ] |
| | | }; |
| | | }); |
| | | }); |
| | | }, |
| | | exportDom() { |
| | | // 导出为Excel文件 |
| | | const fields = [ |
| | | 'devId', |
| | | 'exceptionType', |
| | | 'region', |
| | | 'beginTime', |
| | | 'endTime' |
| | | ]; |
| | | const itemsFormatted = this.abnormalData.map((item) => { |
| | | const newItem = {}; |
| | | fields.forEach((field) => { |
| | | newItem[field] = item[field]; |
| | | }); |
| | | return newItem; |
| | | }); |
| | | // 创建xlsx对象 |
| | | const xls = XLSX.utils.json_to_sheet(itemsFormatted); |
| | | // 编辑表头行 修改表头 |
| | | xls['A1'].v = '设备编号'; |
| | | xls['B1'].v = '异常类型'; |
| | | xls['C1'].v = '地区'; |
| | | xls['D1'].v = '开始时间'; |
| | | xls['E1'].v = '结束时间'; |
| | | // 创建workbook,并把sheet添加进去 |
| | | const wb = XLSX.utils.book_new(); |
| | | XLSX.utils.book_append_sheet(wb, xls, 'Sheet1'); |
| | | // 将workbook转为二进制xlsx文件并下载 |
| | | XLSX.writeFile(wb, '分析数据.xlsx'); |
| | | }, |
| | | |
| | | getAbnormalDataByClick(val) { |
| | | this.abnormalData = val; |
| | | this.total = this.abnormalData.length; |
| | | // 默认显示第一页 |
| | | this.handleCurrentChange(1); |
| | | }, |
| | | |
| | | // 根据异常类型返回店铺名称和设备编号 |
| | | // 比如油烟超标对应的所有店铺名称和设备编号(已去除重复的店铺名) |
| | | getShopNames() { |
| | | axiosInstanceInstance |
| | | .get('/fume/shopname', { |
| | | params: { |
| | | exceptionType: '0', |
| | | beginTime: this.beginTime, |
| | | endTime: this.endTime |
| | | } |
| | | }) |
| | | .then((result) => { |
| | | this.exception0 = result.data.data; |
| | | }); |
| | | axiosInstanceInstance |
| | | .get('/fume/shopname', { |
| | | params: { |
| | | exceptionType: '1', |
| | | beginTime: this.beginTime, |
| | | endTime: this.endTime |
| | | } |
| | | }) |
| | | .then((result) => { |
| | | this.exception1 = result.data.data; |
| | | }); |
| | | axiosInstanceInstance |
| | | .get('/fume/shopname', { |
| | | params: { |
| | | exceptionType: '2', |
| | | beginTime: this.beginTime, |
| | | endTime: this.endTime |
| | | } |
| | | }) |
| | | .then((result) => { |
| | | this.exception2 = result.data.data; |
| | | }); |
| | | }, |
| | | |
| | | // 页面加载时默认展示7天异常表数据 |
| | | getRecentSevenDays() { |
| | | // 给级联选择器设置默认的选择项 |
| | | this.devId = ['付小姐在成都', 'qinshi_31010320210010']; |
| | | let params = {}; |
| | | params['beginTime'] = this.beginTime; |
| | | params['endTime'] = this.endTime; |
| | | axiosInstanceInstance |
| | | .get('/fume/abnormalone', { params: params }) |
| | | .then((response) => { |
| | | if (response.data.data.length == 0) { |
| | | ElMessage('该时段无数据'); |
| | | return; |
| | | } |
| | | // 保存返回的 |
| | | this.abnormalData = response.data.data; |
| | | // 分页 |
| | | this.total = this.abnormalData.length; |
| | | // 默认显示第一页 |
| | | this.handleCurrentChange(1); |
| | | this.loading = false; |
| | | }); |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <template> |
| | | |
| | | <div> |
| | | <el-collapse v-model="activeNames" > |
| | | <el-collapse-item name="1"> |
| | | <template #title> |
| | | <el-tooltip |
| | | class="box-item" |
| | | effect="dark" |
| | | content="点击可折叠" |
| | | placement="right-start" |
| | | > |
| | | <h2>选择某个设备的实时数据:</h2> |
| | | </el-tooltip> |
| | | </template> |
| | | <el-card shadow="always" class="form-card"> |
| | | <el-form label-width="120px"> |
| | | <el-form-item label="外部设备"> |
| | | <el-checkbox |
| | | v-model="outside.checkAll" |
| | | :indeterminate="outside.isIndeterminate" |
| | | @change="handleCheckAllChangeOutside" |
| | | >全选</el-checkbox |
| | | > |
| | | <el-checkbox-group |
| | | v-model="outside.checkedShops" |
| | | @change="handleCheckedCitiesChangOutside" |
| | | > |
| | | <el-checkbox |
| | | v-for="shop in outside.shopnames" |
| | | :key="shop" |
| | | :label="shop" |
| | | >{{ shop }} |
| | | </el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <div>已选择外部设备数量为:{{outside.checkedShops.length}}</div> |
| | | </el-form-item> |
| | | <!-- ------------------------------- --> |
| | | <style scoped> |
| | | |
| | | <el-form-item label="内部设备"> |
| | | <el-checkbox |
| | | v-model="inner.checkAll" |
| | | :indeterminate="inner.isIndeterminate" |
| | | @change="handleCheckAllChangeInner" |
| | | >全选</el-checkbox |
| | | > |
| | | <el-checkbox-group |
| | | v-model="inner.checkedShops" |
| | | @change="handleCheckedCitiesChangeInner" |
| | | class="inner-checkbox-group" |
| | | > |
| | | |
| | | <el-checkbox v-for="shop in inner.shopnames" :key="shop" :label="shop" |
| | | >{{ shop }} |
| | | </el-checkbox> |
| | | </el-checkbox-group> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <div>已选择内部设备数量为:{{inner.checkedShops.length}}</div> |
| | | </el-form-item> |
| | | <el-form-item > |
| | | <!-- <div class="right-form"> --> |
| | | <div class="time-interval"> |
| | | 实时更新间隔为:{{timeInterval/1000}}秒 |
| | | </div> |
| | | <!-- </div> --> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-card> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | </div> |
| | | |
| | | <div> |
| | | <el-tooltip |
| | | class="box-item" |
| | | effect="dark" |
| | | content="点击展示实时数据" |
| | | placement="top-start" |
| | | > |
| | | <el-button type="success" @click="show"> 展示 </el-button> |
| | | </el-tooltip> |
| | | </div> |
| | | <!-- |
| | | {{ outside.checkedShops }} |
| | | <br /> |
| | | {{ inner.checkedShops }} --> |
| | | |
| | | <!-- 仪表盘 --> |
| | | <!-- <div class="charts-container" v-for="(device,index) in outside.realTimeData" :key="device.mvStatCode"> |
| | | <div ref="chartsOutside" class="echarts" :id="`chartAP-${index}`"></div> |
| | | </div> --> |
| | | <el-button-group> |
| | | <el-button @click="changeCardSize('small')">缩小</el-button> |
| | | <el-button @click="changeCardSize('medium')">中等</el-button> |
| | | <el-button @click="changeCardSize('large')">放大</el-button> |
| | | </el-button-group> |
| | | |
| | | <h3 v-show="outside.realTimeData.length" class="outside-leble">外部设备:</h3> |
| | | <div v-if="outside.realTimeData"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="getColSpan" v-for="device in outside.realTimeData" :key="device.mvStatCode"> |
| | | <el-card :style="cardStyle"> |
| | | <template #header> |
| | | <div class="card-header">{{ device.diName }}</div> |
| | | </template> |
| | | <DashBoard :styleDashB="cardSize" :data="device.mvFumeConcentration2"></DashBoard> |
| | | <div>设备编号:{{ device.mvStatCode }}</div> |
| | | <hr class="divider-margin"/> |
| | | <divr class="data">风机电流(A):{{ device.mvFanElectricity}} </divr> |
| | | <hr class="divider-margin"> |
| | | <div class="data">净化器电流(A):{{ device.mvPurifierElectricity}}</div> |
| | | <hr class="divider-margin"/> |
| | | <div>产生时间:{{ device.mvDataTime }}</div> |
| | | <div class="status" :class="{'exceed': device.mvFumeConcentration2 >= 1}"> {{ device.mvFumeConcentration2 >= 1 ? '超标' : '' }}</div> |
| | | <!-- <div class="status1" :class="{'exceed1': device.mvFumeConcentration2 < 1}"> {{ device.mvFumeConcentration2 < 1 ? '未超标' : '' }}</div> --> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | |
| | | |
| | | <hr v-show="outside.realTimeData.length && inner.inFumeValue.length" class="line-marign"/> |
| | | <h3 v-show="inner.inFumeValue.length">内部设备:</h3> |
| | | <div v-if="inner.inFumeValue"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="6" v-for="device in inner.inFumeValue" :key="device.mnCode"> |
| | | <el-card> |
| | | <template #header> |
| | | <div class="card-header">{{ device.siteName }}</div> |
| | | </template> |
| | | <DashBoard :data="device.value"></DashBoard> |
| | | <div>设备编号:{{ device.mnCode }}</div> |
| | | <hr class="divider-margin"/> |
| | | <div>产生时间:{{ device.time }}</div> |
| | | <div class="status" :class="{'exceed': device.value > 1}"> {{ device.value >= 1 ? '超标' : '' }}</div> |
| | | <!-- <div class="status1" :class="{'exceed1': device.value < 1}"> {{ device.value < 1 ? '未超标' : '' }}</div> --> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <style lang="scss" scoped> |
| | | .form-card { |
| | | margin: 20px 10px; |
| | | // width: 96%; |
| | | border:1px solid #ebeef5; |
| | | border-radius: 4px; |
| | | .header-container { |
| | | display: flex; |
| | | margin-left: 20px; |
| | | /* flex-wrap: wrap; |
| | | align-items: center; */ |
| | | } |
| | | .inner-checkbox-group { |
| | | margin-left: 15px; |
| | | .ellipsis { |
| | | white-space: nowrap; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | } |
| | | .el-card { |
| | | margin-bottom: 10px; |
| | | |
| | | .iconExcel { |
| | | font-size: 25px; |
| | | margin-left: 20px; |
| | | bottom: -6px; |
| | | } |
| | | |
| | | /* 可鼠标箭头变为可点击状态 */ |
| | | .clickable { |
| | | cursor: pointer; |
| | | } |
| | | .card-header { |
| | | // display: flex; |
| | | // align-items: center; |
| | | // position: center; |
| | | margin: 0; |
| | | } |
| | | |
| | | body { |
| | | margin: 0; |
| | | } |
| | | .exception-divider-rowline { |
| | | margin: 10px 0px; |
| | | } |
| | | /* 异常分析数据与按钮 */ |
| | | .exception-container { |
| | | display: flex; |
| | | } |
| | | .example-showcase .el-loading-mask { |
| | | z-index: 9; |
| | | } |
| | | |
| | | .scrollbar-demo-item { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | height: 20px; |
| | | margin: 10px; |
| | | text-align: center; |
| | | border-radius: 4px; |
| | | background: var(--el-color-primary-light-9); |
| | | color: var(--el-color-primary); |
| | | } |
| | | .outside-leble { |
| | | margin-top: 10px; |
| | | } |
| | | // 分割线 |
| | | .line-marign { |
| | | margin: 20px 0; |
| | | } |
| | | .el-dialog { |
| | | width: 700px; |
| | | } |
| | | .dashboard { |
| | | margin-bottom: 20px; |
| | | border: #1de01d; |
| | | } |
| | | |
| | | .dashboard-title { |
| | | font-size: 20px; |
| | | text-align: center; |
| | | padding: 10px 0; |
| | | background-color: #f5f7fa; |
| | | } |
| | | |
| | | .echarts { |
| | | height: 300px; |
| | | } |
| | | |
| | | /* 超标 文字效果*/ |
| | | .status { |
| | | .collapse-header { |
| | | margin-left: 5px; |
| | | font-size: 18px; |
| | | color: #ff4d4f; |
| | | } |
| | | .collapse-header-text { |
| | | margin-top: 5px; |
| | | font-size: 14px; |
| | | color: gray; |
| | | } |
| | | |
| | | .box-card-label { |
| | | font-size: 14px; |
| | | white-space: nowrap; |
| | | } |
| | | :deep().el-card { |
| | | border-radius: 9px; |
| | | } |
| | | /* ‘查看详情’ 的弹出框高度调整 */ |
| | | :deep().el-dialog { |
| | | height: 98%; |
| | | /* 不出现滚动条 */ |
| | | overflow-y: hidden; |
| | | border-radius: 9px; |
| | | } |
| | | .table-page { |
| | | margin-left: 20px; |
| | | } |
| | | |
| | | .table-text { |
| | | font-size: 18px; |
| | | margin: 5px 0px 10px 20px; |
| | | } |
| | | .text-blank { |
| | | margin-right: 10px; |
| | | color: #000000; |
| | | } |
| | | /* 店铺名选择文本 */ |
| | | .describe-info { |
| | | margin-top: 5px; |
| | | font-weight: bold; |
| | | white-space: nowrap; |
| | | } |
| | | /* 时间选择文本 */ |
| | | .describe-time-text { |
| | | margin-left: 30px; |
| | | margin-top: 5px; |
| | | font-weight: bold; |
| | | } |
| | | |
| | | .exceed { |
| | | color: #ff4d4f; |
| | | } |
| | | |
| | | /* 未超标 */ |
| | | .status1 { |
| | | font-size: 18px; |
| | | color: #1de01d; |
| | | /* 异常表格下标签中的数组 */ |
| | | .table-line-num { |
| | | font-weight: bold; |
| | | color: black; |
| | | } |
| | | .button_info.el-button_inner { |
| | | text-align: left; |
| | | } |
| | | .el-collapse { |
| | | margin-left: 20px; |
| | | } |
| | | :deep().el-collapse .el-collapse-item__content { |
| | | padding-bottom: 0px; |
| | | } |
| | | .box-card { |
| | | height: 190px; |
| | | } |
| | | |
| | | .exceed1 { |
| | | color: #1de01d; |
| | | } |
| | | .blank { |
| | | height: 200px; |
| | | .sub-box-card { |
| | | height: 100px; |
| | | border: 0px; |
| | | } |
| | | |
| | | // 按钮 |
| | | .el-button { |
| | | margin-top: 20px; |
| | | .mx-1 { |
| | | margin-bottom: 0px; |
| | | } |
| | | // 分割线上下距离 |
| | | .divider-margin { |
| | | margin: 3px 0px ; |
| | | .dialog-button-position { |
| | | display: flex; |
| | | justify-content: right; |
| | | margin-bottom: 10px; |
| | | } |
| | | |
| | | :deep().el-table__row .exceeding-row{ |
| | | background-color: #F53F3F; |
| | | } |
| | | :deep().el-table__row .abnormal-power-supply{ |
| | | background-color: #FDF4BF; |
| | | } |
| | | :deep().el-table__row .disconnect{ |
| | | background-color: #F7BA1E; |
| | | } |
| | | |
| | | |
| | | .el-table { |
| | | color: #000000; |
| | | } |
| | | /* 表格的内边距 */ |
| | | :deep().el-table .el-table__cell { |
| | | padding: 2px; |
| | | } |
| | | |
| | | |
| | | /* 表格中的按钮宽度铺满 */ |
| | | .table-button { |
| | | width: 100%; |
| | | } |
| | | |
| | | </style> |
| | | |