2021片段代码记录-智能感知

【if else美化】

// 前
if(newValue.length === 0){this.btn_disable = true
} else{this.btn_disable = false
}
// 后
this.btn_disable = newValue.length === 0

【五层数据联动】冗余待改善

<template><!-- 数据展示页面 --><div class="container"><!-- 头部 --><div class="head"><div class="title">{{ this.$route.meta.title }}</div><div class="top"><div class="left">场景:</div><!-- 展开/收起 --><div class="right"><a v-if="sceneList > 20" @click="fold = !fold" style="margin-right: 34px">{{ fold ? "收起" : "展开" }}<a-icon :type="fold ? 'up' : 'down'" /></a></div><!-- 场景列表 --><div class="center"><template v-for="(item, index) in sceneList"><a-checkable-tagv-if="index < 16 || fold":key="index":checked="selectedScene == item.id"@change="handleSelectScene(item)":class="selectedScene == item.id ? 'tag-disabled-checked' : ''"style="margin: 0 25px 0 0">{{ item.name }}</a-checkable-tag></template></div></div></div><div class="content"><a-card><!-- 下左侧 --><a-card-grid style="width: 28%; height: 650px"><!-- 动作 --><div style="width: 100%; height: 35%; padding: 0px"><div class="border_title">动作</div><div style="margin-top:13px;height: 135px; overflow: auto"><template v-for="item in actionList"><a-checkable-tag:key="item.id":checked="selectedAction == item.id"@change="handleSelectAction(item)":class="selectedAction == item.id ? 'tag-disabled-checked' : ''"style="margin-bottom: 20px">{{ item.name }}</a-checkable-tag></template></div></div><div style="margin: 0 -24px 0 -24px"><hr style="margin: 13px 0 22px; border: none; height: 1px; background: #ebebeb" /></div><!-- 设备 --><div style="width: 100%; height: 65%"><div class="border_title">设备</div><a-input-search placeholder="搜索设备" class="search_ic" @search="onSearch" /><div class="cla_equip"><template v-for="item in equipmentList"><a-checkable-tag:key="item.deviceId":checked="selectedEquipment == item.deviceId"@change="handleSelectEquipment(item)":class="selectedEquipment == item.deviceId ? 'ant-tag-checkable-checked' : ''"style="margin-bottom: 20px; display: block"><span>{{ item.deviceName }}</span></a-checkable-tag></template></div></div></a-card-grid><!-- 下右侧 --><a-card-grid style="width: 72%; height: 650px"><div><a-form layout="inline" style="height: 6%"><!-- 时间选择 --><a-form-item><a-select v-model="selectedTime" @change="onTimeChange" class="noboder"><a-icon slot="suffixIcon" type="caret-down" style="color: #0c6fe1; margin-left: 9px" /><a-select-option v-for="item in timeList" :key="item.id" :value="item.value">{{item.value}}</a-select-option></a-select></a-form-item><!-- 传感器属性选择 --><a-form-item class="min_wid" style="margin-left: 20px"><a-selectmode="multiple"placeholder="请选择传感器":default-value="selectedSensors"v-model="selectedSensors"style="max-width: 500px"maxSelected="4"@change="onCheckChange"><a-select-option v-for="i in sensorList" :value="i.propertyIdentifier" :key="i.id">{{ i.propertyName }}</a-select-option></a-select></a-form-item><!-- 三个按钮 --><a-form-item style="float: right"><a-buttonstyle="margin-right: 15px; border-radius: 4px"type="primary"icon="upload"@click="exportFile">导出数据</a-button><a-radio-group v-model="mode" @change="changeView"><a-radio-button value="chart" style="border-radius: 4px 0px 0px 4px">图表</a-radio-button><a-radio-button value="table" style="border-radius: 0px 4px 4px 0px">表格</a-radio-button></a-radio-group></a-form-item></a-form></div><div v-show="no_res" class="wait_cla"><img class="img_center" src="@/assets/nothing.png" alt="" /><div class="tips">很抱歉，当前条件下数据为空</div></div><divv-show="mode === 'chart'"id="linechart"class="hid":style="{ width: '100%', height: '580px', padding: '30px' }"></div><div class="table_cla" v-show="mode === 'table'"><a-table:rowKey="getId":dataSource="tableData":pagination="pagination":loading="loading"@change="handleTableChange"><a-table-column title="时间" :sorter="true" :sortOrder="sortOrder" dataIndex="time"><template slot-scope="value">{{ formatDate(value) }}</template></a-table-column><a-table-column title="标识符" dataIndex="attribute"><template slot-scope="value">{{ value }}</template></a-table-column><a-table-column title="原始值" dataIndex="value"><template slot-scope="value">{{ value }}</template></a-table-column></a-table></div></a-card-grid></a-card></div></div>
</template>
<script>
import * as echarts from 'echarts'
import download from '@/utils/download'
import {getAllScenes,getActions,searchEquipment,getTimeSlot,getProperty,getChart,exportData,getTable
} from '@/api/dataDisplay'
import uuidv1 from 'uuid/v1'
import moment from 'moment'export default {data () {return {sceneList: [],equipmentList: [],actionList: [],timeList: [],sensorList: [],selectedScene: undefined,selectedAction: undefined,selectedEquipment: undefined,selectedSensors: [],selectedTime: undefined,chartData: {x: [],series: []},tableData: [], // 表格绑定数据sortOrder: 'descend', // 排序loading: false, // 是否加载中pagination: {current: 1, // 当前页码pageSize: 7, // 每页条数total: 0, // 总数showTotal: total => `共${total}项`, // 显示总数pageSizeOptions: ['5', '10', '20', '50', '100'], // 分页选项showSizeChanger: true, // determine whether pageSize can be changedshowQuickJumper: true // 	determine whether you can jump to pages directly},fold: true, // 场景展开或收起up: false, // 传感器下拉控制mode: 'chart', // 控制表格/图表显示no_res: true // 空结果显示与否}},watch: {selectedSensors (newValue, oldValue) {if (this.mode === 'table') {this.tableData = []this.showTable()} else {this.no_res = truethis.handleChart()}}},mounted () {this.showScenes()setTimeout(() => {this.onCheckChange()}, 1000)},methods: {// 获取随机列表唯一码getId () {return uuidv1().replace(/-/g, '')},// 初始化时获取所有场景async showScenes () {try {const result = await getAllScenes()this.sceneList = result.dataif (this.sceneList.length !== 0) {this.selectedScene = this.sceneList[0].idthis.showActions()}if (this.sceneList.length === 0) {this.actionList = []this.equipmentList = []this.timeList = []this.sensorList = []this.selectedScene = undefinedthis.selectedAction = undefinedthis.selectedEquipment = undefinedthis.selectedSensors = undefinedthis.selectedTime = undefined}} catch (e) {console.log(e)}},// 获取动作列表，默认第一个场景async showActions () {try {const result = await getActions(this.selectedScene)this.actionList = result.dataif (this.actionList.length !== 0) {this.selectedAction = this.actionList[0].idthis.showEquipment()} else {this.equipmentList = []this.timeList = []this.sensorList = []this.selectedAction = undefinedthis.selectedEquipment = undefinedthis.selectedSensors = undefinedthis.selectedTime = undefined}} catch (e) {console.log(e)}},// 获取设备列表async showEquipment (value) {try {const prama = {sceneId: this.selectedScene,actionId: this.selectedAction,deviceName: value}const result = await searchEquipment(prama)this.equipmentList = result.dataif (this.equipmentList.length !== 0) {this.selectedEquipment = this.equipmentList[0].deviceIdthis.showTimeSlot()} else {this.timeList = []this.sensorList = []this.selectedEquipment = undefinedthis.selectedSensors = undefinedthis.selectedTime = undefined}} catch (e) {console.log(e)}},// 获取时间段async showTimeSlot () {this.timeList = []try {const prama = {sceneId: this.selectedScene,actionId: this.selectedAction,deviceId: this.selectedEquipment}const result = await getTimeSlot(prama)if (result.data.length !== 0) {result.data.forEach(item => {const i = item.startTime + '~' + item.endTime.slice(-8)this.timeList.push({id: item.id,value: i.replace(/-/g, '.')})})this.selectedTime = this.timeList[0].valuethis.showProperty()} else {this.sensorList = []this.selectedSensors = undefinedthis.selectedTime = undefined}} catch (e) {console.log(e)}},// 获取属性async showProperty () {try {this.selectedSensors = []const prama = {sceneId: this.selectedScene,actionId: this.selectedAction,deviceId: this.selectedEquipment,startTime: this.selectedTime ? this.selectedTime.slice(0, 19).replace(/\./g, '-') : '',endTime: this.selectedTime? this.selectedTime.slice(0, 11).replace(/\./g, '-') + this.selectedTime.slice(-8): ''}const result = await getProperty(prama)this.sensorList = result.dataif (this.sensorList[0]) {this.selectedSensors.push(this.sensorList[0].propertyIdentifier)} else {this.selectedSensors = undefined}} catch (e) {console.log(e)}},// 获取并整合图表原始数据async handleChart () {try {this.chartData = {x: [],series: []}const prama = {propertyIdentifierList: this.selectedSensors,deviceId: this.selectedEquipment,startTime: this.selectedTime.slice(0, 19).replace(/\./g, '-'),endTime: this.selectedTime.slice(0, 11).replace(/\./g, '-') + this.selectedTime.slice(-8)}const result = await getChart(prama)this.selectedSensors.forEach((item, index) => {const yData = []for (const i in result.data.chart_data) {// 控制x轴只push一次if (index === 0) {this.chartData.x.push(i)}yData.push(result.data.chart_data[i][index])}this.chartData.series.push({name: item,type: 'line',data: yData})})console.log(this.chartData)this.showChart()} catch (e) {console.log(e)this.no_res = true}},// 导出数据async exportFile () {try {const { data } = await exportData({propertyIdentifierList: this.selectedSensors,deviceId: this.selectedEquipment,startTime: this.selectedTime.slice(0, 19).replace(/\./g, '-'),endTime: this.selectedTime.slice(0, 11).replace(/\./g, '-') + this.selectedTime.slice(-8)})download(data)} catch (e) {console.log(e)}},// 表格展示async showTable () {try {this.loading = trueconst prama = {propertyIdentifierList: this.selectedSensors,sceneId: this.selectedScene,actionId: this.selectedAction,deviceId: this.selectedEquipment,startTime: this.selectedTime ? this.selectedTime.slice(0, 19).replace(/\./g, '-') : '',endTime: this.selectedTime? this.selectedTime.slice(0, 11).replace(/\./g, '-') + this.selectedTime.slice(-8): '',sortType: this.sortOrder === 'ascend' ? '1' : '-1',pageNum: this.pagination.current,pageSize: this.pagination.pageSize}const result = await getTable(prama)this.tableData = result.data.listif (result.data.count) {this.pagination.total = result.data.count}} catch (e) {console.log(e)} finally {this.loading = false}},// 切换场景handleSelectScene (e) {this.selectedScene = JSON.stringify(e.id)this.showActions()},// 切换动作handleSelectAction (e) {this.selectedAction = JSON.stringify(e.id)this.showEquipment()},// 切换设备handleSelectEquipment (e) {this.selectedEquipment = JSON.stringify(e.deviceId)this.showTimeSlot()},// 切换时间onTimeChange (item) {console.log('时间' + item)this.showProperty()this.onCheckChange()},// 切换传感器属性多选onCheckChange (values) {console.log('传感器属性' + values)if (values) {if (values.length > 4) {this.$message.warning('最多选择4个传感器')this.selectedSensors = []}}},// 切换表格、图表视图changeView () {console.log('当前页签： ' + this.mode)if (this.mode === 'table') {this.showTable()} else {this.handleChart()}},// 渲染折线图showChart () {try {// 基于准备好的dom，初始化echarts实例var chartDom = document.getElementById('linechart')var myChart = echarts.init(chartDom)var option// 指定图表的配置项和数据option = {title: {},legend: {data: this.selectedSensors},grid: {left: '3%',right: '4%',bottom: '50px',containLabel: true},dataZoom: [{type: 'inside',start: 0,end: 80},{start: 0,end: 80}],xAxis: {type: 'category',boundaryGap: false,data: this.chartData.x},yAxis: {type: 'value'},series: this.chartData.series}myChart.clear()// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)this.no_res = false} catch (e) {console.log(e)this.no_res = true}},// 改变表格传参async handleTableChange (pagination, filters, sorter) {if (pagination !== undefined) {this.pagination.current = pagination.currentthis.pagination.pageSize = pagination.pageSizethis.sortOrder = sorter.order === 'descend' ? '-1' : '1'}// this.pagination.current = 1// this.pagination.pageSize = 10// this.sortOrder = '-1'await this.showTable()},// 时间格式化formatDate (value) {return moment(value).format('YYYY-MM-DD HH:mm:ss.SSS')},onOk (value) {console.log('onOk: ', value)},// 设备-搜索onSearch (value) {this.showEquipment(value)}}
}
</script>
<style lang="less" scoped>
.container {color: rgba(0, 0, 0, 0.85);width: 100%;overflow: hidden;.head {background-color: #fff;padding: 30px 32px 20px;.title {font-weight: 500;font-size: 20px;/deep/ .ant-select-selection {border-radius: 4px;}}.top {padding-top: 20px;.left {width: 75px;padding-left: 30px;float: left;}.right {width: 110px;float: right;}.center {margin: 0px 110px 0px 75px;width: 84%;}}}.content {margin: 32px;height: 650px;border-radius: 16px;overflow: hidden;.border_title {font-size: 16px;line-height: 16px;color: rgba(0, 0, 0, 0.85);border-left: 4px solid #188efc;padding-left: 10px;}.search_ic {width: 376px;height: 32px;margin: 20px 0;/deep/ .ant-input {border-radius: 5px;}}.cla_equip {height: 250px;overflow: auto;/deep/ .ant-tag-checkable {span {padding: 0 10px;}}/deep/ .ant-tag-checkable-checked {color: rgba(0, 0, 0, 0.65);background: #fff;span {background: #e6f0fc;border-radius: 4px;padding: 0 10px;}}}.noboder {min-width: 240px;/deep/ .ant-select-selection--single {border: none;box-shadow: 0 0px 0px #fff;}/deep/ .ant-select-open {border: none;box-shadow: 0 0px 0px #fff;}/deep/ .ant-select-enabled {border: none;box-shadow: 0 0px 0px #fff;}}.min_wid {/deep/ .ant-form-item-control-wrapper {min-width: 200px;}}.table_cla {padding: 10px 16px 10px 0;overflow: auto;height: 500px;}}
}
.wait_cla {display: flex;flex-direction: column;justify-content: center;min-height: 100%;align-items: center;
}
/deep/ .ant-tag {font-size: 14px;
}
/deep/ .ant-tag-checkable-checked {background: #e6f0fc;border-radius: 4px;color: #0c6fe1;
}
.hid {overflow: hidden;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/728838.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Ant Design Vue 修改Model弹框 样式不生效

Ant Design Vue 修改Model弹框 样式不生效

今天在使用 Ant Design Vue 组件库中又踩了一个坑 其他的样式都可以更改&#xff0c;唯独更改 Model 弹框组件的样式一直不生效 于是研究了好久才找到样式不生效的原因 最后又折腾了好久&#xff0c;参考了不少资料才得出的解决方案&#xff1a;
阅读更多...
Gin 获取请求参数

Gin 获取请求参数

POST 请求参数 Gin 获取Post请求URL参数有三种方式 func (c *Context) PostForm(key string) string func (c *Context) DefaultPostForm(key, defaultValue string) string func (c *Context) GetPostForm(key string) (string, bool)大多数情况下使用的是application/x-www…
阅读更多...
力扣刷题

力扣刷题

文章目录 1. 双指针1.1 两数之和1.2 三数之和1.3 盛最多水的容器1.4 接雨水 2. 字串2.1 滑动窗口最大值 3. 动态规划4. 多维动态规划4.1 最长回文字串 1. 双指针 1.1 两数之和 思路&#xff1a;因为是有序数组&#xff0c; 1.2 三数之和 题目要求不能重复 思路&#xff1a;三…
阅读更多...
力扣刷题Days12第二题--100相同的树（js）

力扣刷题Days12第二题--100相同的树（js）

目录 1,题目 2&#xff0c;代码 2.1深度优先遍历 2.2广度优先遍历 3&#xff0c;学习与总结 1,题目 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是…
阅读更多...
vue element plus Form 表单

vue element plus Form 表单

表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件。 使用表单&#xff0c;您可以收集、验证和提交数据。 TIP Form 组件已经从 2. x 的 Float 布局升级为 Flex 布局。 典型表单# 最基础的表单包括各种输入表单项&#xff0c;比如input、select、radio、checkbo…
阅读更多...
Java毕业设计 基于SpringBoot vue 疫苗咨询与预约系统

Java毕业设计 基于SpringBoot vue 疫苗咨询与预约系统

Java毕业设计 基于SpringBoot vue 疫苗咨询与预约系统 SpringBoot vue 疫苗咨询与预约系统 功能介绍 用户前端&#xff1a;首页 图片轮播 疫苗信息 条件查询 疫苗详情 点我收藏 评论 接种疫苗 疫情资讯 资讯详情 资讯评论 论坛交流 发布帖子 公告信息 公告详情 留言反馈 登录…
阅读更多...
基于AM62X+FPGA/MCU的B码对时定制化整机解决方案

基于AM62X+FPGA/MCU的B码对时定制化整机解决方案

什么是IRIG-B码对时 IRIG-B(inter-range instrumentationgroup-B)码是一种时间同步标准&#xff0c;通常用于精确的时间测量和数据同步&#xff0c;广泛应用于电力、通信、航空等领域。 IRIG-B码为每秒一帧的时间串码&#xff0c;一帧串码中包含100个码元&#xff0c;频率为1K…
阅读更多...
C++ 特殊的类设计

C++ 特殊的类设计

目录 1.请设计一个类&#xff0c;不能被拷贝 2. 请设计一个类&#xff0c;只能在堆上创建对象 3. 请设计一个类&#xff0c;只能在栈上创建对象 4. 请设计一个类&#xff0c;不能被继承 5. 请设计一个类&#xff0c;只能创建一个对象(单例模式) 1.请设计一个类&#xff0c;…
阅读更多...
用readproc函数读取进程的状态

用readproc函数读取进程的状态

概要&#xff1a; 本篇演示用readproc函数读取进程的状态 libprocps库的安装参考笔者的文章readproc.h-CSDN博客 演示所用的系统是Ubuntu22.04 一、代码 #include<stdio.h> #include<stdlib.h> #include<proc/readproc.h> int main() {struct PROCTAB *…
阅读更多...
CentOS下安装RabbitMQ

CentOS下安装RabbitMQ

准备工作&#xff0c;更新yum源 正式环境慎用 yum update -y # 进入目录 cd /etc/yum.repos.d/ # 创建目录 mkdir backup # 默认源配备份 mv C* backup/ # 下载阿里云yum源 wget -O /etc/yum.repos.d/CenOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo # 清除旧…
阅读更多...
大唐国际务实迎战两会保电，智能巡检机器人助力电力保障

大唐国际务实迎战两会保电，智能巡检机器人助力电力保障

全国两会召开在即。近年来&#xff0c;我国两会期间电力供应稳定性备受关注。作为国家重要的政治盛会&#xff0c;两会的顺利召开需要可靠的电力保障&#xff0c;以确保会议期间各项活动的正常进行。大唐国际作为国内领先的电力企业&#xff0c;面临着如何保障两会期间电力供应…
阅读更多...
金融行业专题｜基金超融合架构转型与场景探索合集（2023版）

金融行业专题｜基金超融合架构转型与场景探索合集（2023版）

更新内容 更新 SmartX 超融合在基金行业的覆盖范围、部署规模与应用场景。更新信创云资源池、关键业务系统性能优化等场景实践。更多超融合金融核心生产业务场景实践&#xff0c;欢迎下载阅读电子书《金融核心生产业务场景探索文章合集》。 随着数字化经济的蓬勃发展&#xf…
阅读更多...
【Linux-tar/gzip/zip】

【Linux-tar/gzip/zip】

Linux-tar/gzip/zip ■ tar■ gzip■ zip■ unzip解压缩 ■ tar 基本语法&#xff1a; tar [选项] 压缩后的压缩包 要压缩的文件 选项说明描述-cf :对文件或文件夹进行打包-v :显示压缩的进度- z :使用gzip压缩工具把打包后的文件进行压缩为.gz-j :使用bzip2压缩工具把打包后…
阅读更多...
如何使用WinSCP结合Cpolar实现公网远程访问内网Linux服务器

如何使用WinSCP结合Cpolar实现公网远程访问内网Linux服务器

文章目录 1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 ​ Winscp是一个支持SSH(Secure SHell)的可视化SCP(Secure Copy)文件传输软件&#xff0c;它的主要功能是在本地与远程计…
阅读更多...
基本工具学习--宝藏“课程”

基本工具学习--宝藏“课程”

Contents Linux概念&提问Vim命令正则表达式工具 Git自我修养 Linux Linux入门教程鸟哥的Linux私房菜Harley Hahn’s Guide to Unix and Linux计算机教育缺失的一课&#xff1a;https://missing.csail.mit.edu/Linux C编程一站式学习&#xff1a;https://akaedu.github.io/…
阅读更多...
HCIP---IS-IS协议

HCIP---IS-IS协议

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 一.IS-IS协议概述 IS-IS是一种基于链路状态的内部网关协议&#xff08;IGP&#xff09;&#xff0c;它使用最短路径优先算法&#xff08;SPF或Dijkstra&#xff09;进行路由计算。这种协议在自治…
阅读更多...
javascript:void(0)用法及常见问题解析

javascript:void(0)用法及常见问题解析

文章目录 一、javascript:void(0)用法1. 阻止链接的默认行为2. 结合事件处理器3. 为什么使用 javascript:void(0) 而不是 #4. 现代替代方案 二、javascript:void(0)常见问题解析常见问题解析1. 为何使用 javascript:void(0) 而不是简单的 #&#xff1f;2. javascript:void(0) 是…
阅读更多...
代码随想录算法训练营第16天| 104. 二叉树的最大深度、559. N 叉树的最大深度、111. 二叉树的最小深度、222. 完全二叉树的节点个数

代码随想录算法训练营第16天| 104. 二叉树的最大深度、559. N 叉树的最大深度、111. 二叉树的最小深度、222. 完全二叉树的节点个数

104. 二叉树的最大深度 题目链接 104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 思路 二叉树最大深度这道题用层序遍历的话可以用一个变量记录size更新的次数&#xff0c;15min解决。 class Solution { public:int maxDepth(TreeNode* root) {//二叉树这…
阅读更多...
buuctf EasyBypass --不会编程的崽

buuctf EasyBypass --不会编程的崽

buu后边的题有些确实难&#xff0c;有些其实也没那么复杂。昨天做一道异或绕过的题&#xff0c;现在还没看懂QAQ 先来一题简单的吧。哎&#xff0c;随缘更新吧 <?phphighlight_file(__FILE__);$comm1 $_GET[comm1]; $comm2 $_GET[comm2];if(preg_match("/\|\|\\|\…
阅读更多...
探秘HTTPS：如何通过SSL/TLS保证网络通信安全

探秘HTTPS：如何通过SSL/TLS保证网络通信安全

目录 引言 详解HTTPS加密实现机制 SSL/TLS工作原理 结论 引言 随着网络安全威胁的日益增加&#xff0c;HTTPS通过SSL&#xff08;Secure Sockets Layer&#xff09;和TLS&#xff08;Transport Layer Security&#xff09;协议提供的加密技术变得至关重要。这些技术保证了用…
阅读更多...
最新文章

Copyright @ 2022~2023