zangch
/
SaiLun.Thermoelectricity
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改看板

Browse Source
IOT
夜笙歌 1 year ago
parent 11456eb95d
commit 8b1f3d596b
1 changed files with 468 additions and 7 deletions
Show Stats Download Patch File Download Diff File

475
ruoyi-ui/src/views/board/index3.vue
Unescape Escape View File

@ -54,7 +54,33 @@
style="font-size: 1.6vw;font-weight: 700;margin: 0 0.5vw">0.5</span>db/m
</div>
<Chart class="chart1" ref="chart1"></Chart>
<Chart class="chart2" ref="chart2"></Chart>
<Chart class="chart3" ref="chart3"></Chart>
<Chart class="chart4" ref="chart4"></Chart>
<div class="table">
<vue-seamless-scroll
:class-option="scrollTableOption"
:data="scrollTableData"
class="case-item"
style="height: 100%"
>
<div
v-for="(item, index) in scrollTableData"
:key="index"
>
<div :style='"background-color:" + ((index % 2 === 0)? "#1077bc19":"#1077bc05") '>
<div class="scrollTableItem" style="color:#65c2f3;">
{{ item.value1 }}
</div>
<div class="scrollTableItem" style="color:#65c2f3;">
{{ item.value2 }}
</div>
</div>
</div>
</vue-seamless-scroll>
</div>
</div>
</div>
</template>
@ -62,12 +88,7 @@
<script>
import Chart from '@/components/Charts/Chart'
import vueSeamlessScroll from 'vue-seamless-scroll'
import {
baseMonitorInfoList,
countCabinet,
boardTempList,
selectLastTWTempertureData, recordBusbarAlarmCount
} from "@/api/board/index2";
import * as echarts from 'echarts'
export default {
data() {
@ -86,7 +107,7 @@ export default {
{
name: '颗粒物柱状图',
top: 69.6,
left: 30.8
left: 3
},
{
name: '1#变压器测温',
@ -114,6 +135,22 @@ export default {
left: 68
},
],
scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0,
},
scrollTableData: Array(5).fill('').map(function (i, k) {
return {
value1: 'ASDFGHJKL_1',
value2: '2222-22-22 22:22:22',
}
}),
}
},
components: {
@ -125,6 +162,387 @@ export default {
},
methods: {
getData() {
this.$refs.chart1.setData({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
},
grid: {
top: "15%",
left: "10%",
right: "5%",
bottom: "15%",
// containLabel: true
},
xAxis: [
{
type: "category",
axisLine: {
show: true,
},
splitArea: {
// show: true,
color: "#f00",
lineStyle: {
color: "#f00",
},
},
axisLabel: {
color: "#fff",
},
splitLine: {
show: false,
},
boundaryGap: false,
data: ["A", "B", "C", "D", "E", "F"],
},
],
yAxis: [
{
type: "value",
min: 0,
// max: 140,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
axisLine: {
// show: false,
},
axisLabel: {
// show: false,
margin: 20,
textStyle: {
color: "#d1e6eb",
},
},
axisTick: {
// show: false,
},
},
],
series: [
{
name: "注册总量",
type: "line",
showAllSymbol: true,
symbol: "circle",
symbolSize: 10,
lineStyle: {
normal: {
color: "#00ca95",
shadowColor: "rgba(0, 0, 0, .3)",
shadowBlur: 0,
shadowOffsetY: 5,
shadowOffsetX: 5,
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#00ca95",
},
},
itemStyle: {
color: "#00ca95",
borderColor: "#fff",
borderWidth: 3,
shadowColor: "rgba(0, 0, 0, .3)",
shadowBlur: 0,
shadowOffsetY: 2,
shadowOffsetX: 2,
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(0,202,149,0.3)",
},
{
offset: 1,
color: "rgba(0,202,149,0)",
},
],
false
),
shadowColor: "rgba(0,202,149, 0.9)",
shadowBlur: 20,
},
},
data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14],
},
],
})
this.$refs.chart2.setData({
series: [
{
title: {
show: false,
},
name: "",
type: "gauge",
min: 0,
max: 100,
splitNumber: 10,
startAngle: 180,
endAngle: 0,
center: ["50%", '95%'],
radius: '180%',
axisLabel: {
distance: 0,
fontFamily: "Microsoft YaHei UI",
fontSize: 16,
fontWeight: "normal",
fontStyle: "normal",
color: "#FFFFFF",
},
axisLine: {
lineStyle: {
width: 2,
color: '#2776e3',
},
},
pointer: {
length:'50%',
show: true,
},
itemStyle: {
normal: {
color: '#2776e3',
},
},
axisTick: {
length: 16,
lineStyle: {
width: 4,
color: '#2776e3',
},
},
splitLine: {
length: 32,
lineStyle: {
width: 4,
color: '#2776e3',
},
},
detail: {
show: false,
},
data: [
{
value: 66,
name: "半圆仪表_0",
},
],
},
],
})
this.$refs.chart3.setData({
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
},
xAxis: [
{
type: "category",
position: "bottom",
data: ["1#", "2#", "3#"],
boundaryGap: true,
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
color: "#fff",
},
},
],
yAxis: [
{
name: "",
show: true,
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
lineStyle: {
color: "#fff",
},
},
axisLabel: {
show: true,
color: "#fff",
},
},
],
series: [
{
name: "数量",
type: "pictorialBar",
barCategoryGap: "50%",
symbol: 'path://d="M150 50 L130 130 L170 130 Z"',
data: [
{
name: "1#",
value: 10,
},
{
name: "2#",
value: 6,
},
{
name: "3#",
value: 5,
},
],
},
],
})
this.$refs.chart4.setData({
grid: {
left: "2%",
right: "2%",
bottom: "2%",
top: "2%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params) {
return params[0].name + " : " + params[0].value;
},
},
xAxis: {
show: true,
type: "value",
axisLine:{
show: true,
},
axisTick:{
show: false,
},
axisLabel:{
show: true,
textStyle: {
color: "#fff",
},
},
splitLine:{
show: false,
}
},
yAxis: [
{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: [1,2,3,4,5],
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "12",
},
},
data: [1,2,3,4,5],
},
],
series: [
{
name: "值",
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 0,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "rgb(57,89,255,1)",
},
{
offset: 1,
color: "rgb(46,200,207,1)",
},
]),
},
},
barWidth: 20,
data: [1,2,3,4,5],
},
{
name: "背景",
type: "bar",
barWidth: 20,
barGap: "-100%",
data: [5,5,5,5,5],
itemStyle: {
normal: {
color: "rgba(24,31,68,1)",
barBorderRadius: 0,
},
},
},
],
})
}
}
}
@ -185,4 +603,47 @@ export default {
font-size: 0.9vw;
letter-spacing: 1px;
}
.chart1{
position: absolute;
top: 15.4%;
left: 2.2%;
width: 30.8%;
height: 20.2%;
}
.chart2{
position: absolute;
top: 44.6%;
left: 2.2%;
width: 30.8%;
height: 20.2%;
}
.chart3{
position: absolute;
top: 74%;
left: 2.2%;
width: 30.8%;
height: 20.2%;
}
.chart4{
position: absolute;
top: 15.4%;
left: 67.1%;
width: 30.8%;
height: 34.8%;
}
.table {
position: absolute;
top: 59.4%;
left: 67.1%;
width: 30.8%;
height: 34.8%;
overflow: hidden;
}
.scrollTableItem {
display: inline-block;
width: 50%;
text-align: center;
padding: 14px 0;
color: #4e99c5
}
</style>

Write Preview
Loading…
Cancel
Save