没有合适的资源?快使用搜索试试~ 我知道了~
全局组件定义的三种方式
需积分: 0 0 下载量 48 浏览量
2024-01-23
11:21:07
上传
评论
收藏 54KB DOCX 举报
温馨提示
试读
28页
全局组件定义的三种方式
资源推荐
资源详情
资源评论
<template>
<div>
<div class="sensor-form-card">
<div style="height: 500px" v-loading="loading">
<canvas id="planet-chart-data5"></canvas>
</div>
<div class="center">
<el-button type="primary" icon="el-icon-arrow-left"
@click="$router.push({ path: '/Oil' })" style="position:
absolute; margin-top: 20px; right:
10px"><span>back</span></el-button>
<el-button type="success" i class="el-icon-arrow-right
el-icon--right" @click="$router.push({ path: '/Form5' })"
style="position: absolute; margin-top: 100px; right: 10px"
><span>下一頁</span></el-button
>
</div>
<div class="status-indicator">
<div class="status-box normal"></div>
<span class="status-text">正常</span>
</div>
<div class="status-indicator">
<div class="status-box high-temperature"></div>
<span class="status-text">溫度大於自訂上限門檻</span>
</div>
<div class="status-indicator">
<div class="status-box critical-temperature"></div>
<span class="status-text">溫度>70°C</span>
</div>
<div class="status-indicator">
<div class="status-box low-temperature"></div>
<span class="status-text">溫度小於自訂上限門檻</span>
</div>
</div>
<div class="sensor-form-card">
<el-date-picker
style="margin: 8px"
v-model="selectedDate"
type="daterange"
:start-placeholder="startPlaceholder"
:end-placeholder="endPlaceholder"
range-separator="至"
:value-format="valueFormat"
:picker-options="pickerOptionsDate"
:key="day"
@change="createGrayBlocks"
></el-date-picker>
<!--`:key="hour"`為每個小圖塊指定一個唯一的鍵 -->
<!--
<div class="container">
<div v-for="hour in 24" :key="hour" class="block">
<div v-for="day in 30" :key="day"
class="block"></div>
</div>
</div>
-->
<el-row>
<el-col :span="2">
<div class="container">
<div v-for="dayText in this.day" :key="dayText"
class="dayText">{{ dayText }}</div>
</div>
</el-col>
<el-col :span="22">
<div class="container">
<div v-for="date in this.day" :key="date"
class="day-block">
<div v-for="hour in 24" :key="`${date}-
${hour}`" :class="{ 'hour-block': true, orange:
isHighlighted(date, hour) }"></div>
</div>
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import Chart from 'chart.js'
export default {
// name: 'sensor-temp',
data() {
return {
//valueFormat: 'yyyy-MM-dd', //可以讓日期選擇出來是按照這個
格式
highlightedDate: '2024-01-04',
year: 'year',
month: 'month',
day: 'day',
selectedDate: [], //0119
greyBoxCount: 0, // 灰色方塊的數量 //0119
startPlaceholder: 'YYYY-MM-DD',
endPlaceholder: 'YYYY-MM-DD',
five: 0,
five1: 0,
zero: 0,
AlertReport: [
{
total: 20,
lubr: 10,
vibr: 7,
temp: 3,
list: [
{
date: '2022-01-04',
lubr: ['10:00:00Z', '12:30:00Z '],
vibr: ['13:00:00Z', '14:30:00Z '],
temp: ['17:00:00Z', '18:30:00Z '],
},
],
},
],
AlertChart: null,
AlertChartData: {
type: 'horizontalBar', // Change to 'bar' for vertical
bars
data: {
labels: [], // Labels for each date (x-axis)
datasets: [],
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
title: {
display: true,
text: 'Chart.js Vertical Bar Chart',
},
},
scales: {
xAxes: [
{
type: 'linear',
position: 'bottom',
ticks: {
beginAtZero: true,
stepSize: 60 * 60 * 1000,
max: 24 * 60 * 60 * 1000, // Maximum value
represents 24 hours
callback: function (value) {
// Convert milliseconds to a 24-hour time
format
const hours = Math.floor(value / (60 * 60
* 1000))
const minutes = Math.floor((value % (60 *
60 * 1000)) / (60 * 1000))
return `${hours}:${minutes}`
},
},
scaleLabel: {
display: true,
labelString: 'Time',
},
stacked: true,
barThickness: 20, // 调整条形图的宽度,以像素为单
位
barPercentage: 0.5, // 调整条形图的宽度相对于刻度
之间的空间的百分比
},
],
yAxes: [
{
ticks: {
beginAtZero: true,
},
scaleLabel: {
display: true,
labelString: 'Date',
},
stacked: true,
剩余27页未读,继续阅读
资源评论
brian_1111
- 粉丝: 1
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功