Browse Source

历史参数曲线图表修改

develop
fuguobin 9 months ago
parent
commit
3c3622bc79
  1. 4
      src/types/components.d.ts
  2. 12
      src/views/data-visual/index.scss
  3. 10
      src/views/data-visual/index.vue
  4. 16
      src/views/details/index.vue

4
src/types/components.d.ts

@ -9,15 +9,12 @@ declare module '@vue/runtime-core' {
export interface GlobalComponents {
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
Button: typeof import('./../components/Widgets/button.vue')['default']
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
ElButton: typeof import('element-plus/es')['ElButton']
ElCard: typeof import('element-plus/es')['ElCard']
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@ -33,7 +30,6 @@ declare module '@vue/runtime-core' {
ElRow: typeof import('element-plus/es')['ElRow']
ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
ElSelect: typeof import('element-plus/es')['ElSelect']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElSwitch: typeof import('element-plus/es')['ElSwitch']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']

12
src/views/data-visual/index.scss

@ -1,20 +1,20 @@
@import url('@/assets/fonts/font.css');
.screenContainer {
// position: fixed;
// left: 50%;
// top: 50%;
position: fixed;
left: 50%;
top: 50%;
transform-origin: 0 0;
transition: 0.3s;
color: #fff;
font-size: 16px;
background-color: #24344E;
background-color: #24344e;
z-index: 100;
.header {
position: relative;
height: 125px;
padding: 21px 40px 0 40px;
background-color: #1A2537;
border-bottom: 1px solid #47556C;
background-color: #1a2537;
border-bottom: 1px solid #47556c;
// span {
// line-height: 62px;
// font-size: 30px;

10
src/views/data-visual/index.vue

@ -1,14 +1,14 @@
<template>
<div ref="screenRef" class="screenContainer" :style="{ width: `${baseWidth}px`, height: `${baseHeight}px` }">
<div class="header">
<Header/>
<Header />
</div>
<div class="main">
<section class="charts">
<Charts/>
<Charts />
</section>
<section class="table">
<Table/>
<Table />
</section>
</div>
</div>
@ -32,11 +32,11 @@ const baseHeight = 1440;
// * 32:9
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
onMounted(() => {
// calcRate();
calcRate();
});
window.addEventListener('resize', () => {
//
// resize();
resize();
});
function calcRate() {
const appRef = screenRef.value;

16
src/views/details/index.vue

@ -344,7 +344,10 @@ const options = {
}
},
tooltip: {
trigger: 'axis'
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['']
@ -954,8 +957,8 @@ function init(data: any) {
offset: offsetData,
scale: true, //
// minInterval: 1, //
min: item.unitMin, //
max: item.unitMax, //
// min: item.unitMin, //
// max: item.unitMax, //
// interval: 10, //
nameTextStyle: {
fontSize: 12,
@ -981,7 +984,12 @@ function init(data: any) {
smooth: true,
symbol: 'none',
yAxisIndex: item.index,
data: item.data
data: item.data,
tooltip: {
valueFormatter: function (value: any) {
return value + ' ' + item.paramUnit;
}
}
});
});
const chart = echarts.init(stackedRef.value);

Loading…
Cancel
Save