pfkecharts
This commit is contained in:
parent
5c87111b7c
commit
41137027c0
|
|
@ -0,0 +1,39 @@
|
|||
<svg width="376" height="223" viewBox="0 0 376 223" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.3282 221.621C2.3282 221.621 68.5839 221.621 107.618 221.621C147.236 221.621 187.974 131.516 187.974 131.516C187.974 131.516 228.713 221.618 268.331 221.621C307.232 221.623 373.621 221.621 373.621 221.621" stroke="url(#paint0_linear_36_35168)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M1.47058 1.0004C1.47058 1.0004 60.8109 1.001 107.247 1.0004C147.048 0.999885 187.974 91.5213 187.974 91.5213C187.974 91.5213 228.901 1.00128 268.702 1.0004C309.047 0.999503 374.478 1.0004 374.478 1.0004" stroke="url(#paint1_linear_36_35168)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M360.169 1L374.478 1" stroke="url(#paint2_linear_36_35168)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M15.7793 1L1.47058 1" stroke="url(#paint3_linear_36_35168)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M360.169 221.622L374.478 221.622" stroke="url(#paint4_linear_36_35168)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M15.7793 221.622L1.47058 221.622" stroke="url(#paint5_linear_36_35168)" stroke-width="2" stroke-linecap="round"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_36_35168" x1="2.3282" y1="221.623" x2="373.621" y2="221.623" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4399FF"/>
|
||||
<stop offset="0.394246" stop-color="#0047FF" stop-opacity="0"/>
|
||||
<stop offset="0.600393" stop-color="#0038FF" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#43A5FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_36_35168" x1="1.47058" y1="1" x2="374.478" y2="1" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0091FF"/>
|
||||
<stop offset="0.0572917" stop-color="#0091FF"/>
|
||||
<stop offset="0.394246" stop-color="#0038FF" stop-opacity="0"/>
|
||||
<stop offset="0.600393" stop-color="#0047FF" stop-opacity="0"/>
|
||||
<stop offset="1" stop-color="#0091FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_36_35168" x1="360.169" y1="1" x2="374.478" y2="1" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0091FF"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_36_35168" x1="15.7793" y1="1" x2="1.47058" y2="1" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0091FF"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_36_35168" x1="360.169" y1="221.622" x2="374.478" y2="221.622" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0091FF"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint5_linear_36_35168" x1="15.7793" y1="221.622" x2="1.47058" y2="221.622" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0091FF"/>
|
||||
<stop offset="1" stop-color="white"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
34
src/App.vue
34
src/App.vue
|
|
@ -180,7 +180,7 @@ export default {
|
|||
height: 91vh;
|
||||
bottom: 0;
|
||||
top: 9vh;
|
||||
background: #00322d;
|
||||
background: #000000;
|
||||
// background-image: url('/public/img/enp_blue/bg_enp_half.png');
|
||||
background-size: cover;
|
||||
z-index: 1000;
|
||||
|
|
@ -239,23 +239,23 @@ export default {
|
|||
background: none !important;
|
||||
}
|
||||
|
||||
.searchSelect>.select-trigger>.el-input>.el-input__wrapper {
|
||||
width: 7vw;
|
||||
height: 3vh;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('/public/img/enp_blue/selectBg.png');
|
||||
}
|
||||
// .searchSelect>.select-trigger>.el-input>.el-input__wrapper {
|
||||
// width: 7vw;
|
||||
// height: 3vh;
|
||||
// border: none !important;
|
||||
// box-shadow: none !important;
|
||||
// background-size: 100% 100%;
|
||||
// background-image: url('/public/img/enp_blue/selectBg.png');
|
||||
// }
|
||||
|
||||
.searchInput>.el-input__wrapper {
|
||||
width: 7vw;
|
||||
height: 3vh;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
background-size: 100% 100%;
|
||||
background-image: url('/public/img/enp_blue/selectBg.png');
|
||||
}
|
||||
// .searchInput>.el-input__wrapper {
|
||||
// width: 7vw;
|
||||
// height: 3vh;
|
||||
// border: none !important;
|
||||
// box-shadow: none !important;
|
||||
// background-size: 100% 100%;
|
||||
// background-image: url('/public/img/enp_blue/selectBg.png');
|
||||
// }
|
||||
|
||||
.enpCheckbox>.el-checkbox>.el-checkbox__label {
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<el-card>
|
||||
<el-card class="enpelCard">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>CEMS监测清单</span>
|
||||
</div>
|
||||
</template>
|
||||
<scTable :data="tableData" style="width: 100%;" size="large" :apiObj="apiObj" row-key="id" :params="params"
|
||||
hidePagination @row-click="rowClick">
|
||||
<div id="enpTable">
|
||||
<scTable :data="tableData" style="width: 100%;" class="enpTable" size="large" :apiObj="apiObj" row-key="id"
|
||||
:params="params" hidePagination @row-click="rowClick">
|
||||
<el-table-column type="index" width="50" />
|
||||
<el-table-column prop="equipment_number" label="设备编号" width="180" />
|
||||
<el-table-column prop="equipment_name" label="设备名称" />
|
||||
|
|
@ -48,9 +49,11 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="监测达标率" />
|
||||
</scTable>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
<div style="height: 8px;"></div>
|
||||
<el-card style="width: 100%; " v-show="currentEquipmentId != ''">
|
||||
<el-card style="width: 100%; " v-show="currentEquipmentId != ''" class="enpelCard">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>CEMS监测详情</span>
|
||||
|
|
@ -98,7 +101,12 @@ export default {
|
|||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {},
|
||||
legend: {
|
||||
|
||||
// itemStyle: {
|
||||
// color: '#fff'
|
||||
// }
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
|
|
@ -144,7 +152,7 @@ export default {
|
|||
var that = this;
|
||||
var myChart = echarts.getInstanceByDom(document.getElementById('cChart'));
|
||||
if (myChart == undefined) {
|
||||
myChart = echarts.init(document.getElementById('cChart'));
|
||||
myChart = echarts.init(document.getElementById('cChart'), 'dark');
|
||||
}
|
||||
myChart.showLoading();
|
||||
this.$API.bi.dataset.exec.req('enp_edata', {
|
||||
|
|
|
|||
|
|
@ -157,8 +157,9 @@
|
|||
<!-- 表 -->
|
||||
<div class="rightCard">
|
||||
<div class="pageTitle">排放口及关联设备动态信息</div>
|
||||
<div id="dataChart" style="width: 100%; height:600px;margin-top:1vh"></div>
|
||||
<div style="color:#ffffff;">
|
||||
<div id="dataChart" style="width: 100%; height:500px;margin-top:1vh"></div>
|
||||
<div id="dataChart2" style="width: 100%; height:200px;margin-top:1vh"></div>
|
||||
<!-- <div style="color:#ffffff;">
|
||||
<div class="greenBlock">
|
||||
<div class="greenBlockInner"></div>
|
||||
</div>CEMS监测设备
|
||||
|
|
@ -189,7 +190,7 @@
|
|||
<div class="enpCheckbox">
|
||||
<el-checkbox v-model="checked16" label="磨尾除尘器运行信号" size="large" />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -210,17 +211,17 @@
|
|||
|
||||
<!-- 查询条件 -->
|
||||
<div style="display:flex">
|
||||
<el-select v-model="query.area" class="searchSelect" placeholder="" style="width:7vw">
|
||||
<el-select v-model="query.area" placeholder="" style="width:7vw">
|
||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-input class="searchInput" :input-style="searchInputStyle" style="width:7vw" v-model="query.search"
|
||||
<el-input :input-style="searchInputStyle" style="width:7vw;margin:0 5px" v-model="query.search"
|
||||
placeholder=""></el-input>
|
||||
<div class="searchBtn"></div>
|
||||
<el-button @click="handleQuery">查询</el-button>
|
||||
</div>
|
||||
<!-- table表格 -->
|
||||
<div style="margin-top:2vh" id="enpTable">
|
||||
<scTable :data="tableData" :apiObj="apiObj" calss="enpTable" style="" @row-click="rowClick">
|
||||
<scTable :data="tableData" :apiObj="apiObj" class="enpTable" style="" @row-click="rowClick">
|
||||
<el-table-column prop="index" label="序号"></el-table-column>
|
||||
<el-table-column prop="number" label="排放口编号"></el-table-column>
|
||||
<el-table-column prop="name" label="排放口名称"></el-table-column>
|
||||
|
|
@ -285,19 +286,12 @@ export default {
|
|||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
// grid: {
|
||||
// left: '3%',
|
||||
// right: '4%',
|
||||
// bottom: '3%',
|
||||
// containLabel: true
|
||||
// },
|
||||
grid: [{
|
||||
height: '35%',
|
||||
bottom: '50%',
|
||||
}, {
|
||||
height: '35%',
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
}],
|
||||
containLabel: true
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
|
|
@ -312,18 +306,9 @@ export default {
|
|||
dataset: {
|
||||
source: []
|
||||
},
|
||||
xAxis: [
|
||||
{ type: 'category' },
|
||||
{ type: 'category' },
|
||||
],
|
||||
yAxis: [{}, {}],
|
||||
series: [
|
||||
{ type: 'line', xAxisIndex: 0 }, { type: 'line', xAxisIndex: 0 },
|
||||
{ type: 'line', xAxisIndex: 1 }, { type: 'line', xAxisIndex: 1 },
|
||||
{ type: 'line', xAxisIndex: 1 }, { type: 'line', xAxisIndex: 1 },
|
||||
{ type: 'line', xAxisIndex: 1 },
|
||||
{ xAxisIndex: 1, type: 'line' },
|
||||
]
|
||||
xAxis: { type: 'category' },
|
||||
yAxis: {},
|
||||
series: [{ type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }, { type: 'line' }]
|
||||
},
|
||||
eqs: {},
|
||||
eqc: {},
|
||||
|
|
@ -375,15 +360,10 @@ export default {
|
|||
},
|
||||
getDetailData() {
|
||||
var that = this;
|
||||
let base = +new Date(1988, 9, 3);
|
||||
let oneDay = 24 * 3600 * 1000;
|
||||
let data = [[base, Math.random() * 300]];
|
||||
for (let i = 1; i < 20000; i++) {
|
||||
let now = new Date((base += oneDay));
|
||||
data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
|
||||
}
|
||||
var chartDom = document.getElementById('dataChart');
|
||||
var chartDom2 = document.getElementById('dataChart2');
|
||||
var myChart = echarts.init(chartDom);
|
||||
var myChart2 = echarts.init(chartDom2);
|
||||
// let option = {
|
||||
// tooltip: {
|
||||
// trigger: 'axis',
|
||||
|
|
@ -430,19 +410,14 @@ export default {
|
|||
query: that.biquery,
|
||||
// raise_exception: true
|
||||
};
|
||||
this.$API.bi.dataset.exec.req('enp_edata', params).then(res => {
|
||||
this.$API.bi.dataset.exec.req('enp_edata2', params).then(res => {
|
||||
let newOption = Object.assign({}, this.basicOption);
|
||||
let ds0 = res.data.ds0
|
||||
let series = []
|
||||
if (ds0) {
|
||||
let ds00 = ds0[0]
|
||||
for (var x = 1, y = ds00.length; x < y; x++) {
|
||||
if (x < 3) {
|
||||
series.push({ type: 'line', xAxisIndex: 0 })
|
||||
} else {
|
||||
series.push({ type: 'line', xAxisIndex: 1 })
|
||||
}
|
||||
|
||||
series.push({ type: 'line' })
|
||||
}
|
||||
}
|
||||
newOption.dataset.source = res.data.ds0;
|
||||
|
|
@ -450,6 +425,8 @@ export default {
|
|||
newOption.title.text = that.eqc.name;
|
||||
newOption.series = series;
|
||||
myChart.setOption(newOption);
|
||||
myChart2.setOption(newOption);
|
||||
echarts.connect([myChart, myChart2])
|
||||
}).then(() => { myChart.hideLoading() })
|
||||
},
|
||||
}
|
||||
|
|
@ -512,7 +489,7 @@ export default {
|
|||
line-height: 3vh;
|
||||
position: absolute;
|
||||
right: 3vh;
|
||||
top: 01.5vh;
|
||||
top: 2.5vh;
|
||||
font-size: 1vh;
|
||||
width: fit-content;
|
||||
color: #ffffff;
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
<div class="menuItem">台账管理</div>
|
||||
</div>
|
||||
<div class="wraning_icon"></div>
|
||||
<div class="user_icon" @click="drawerClick"></div>
|
||||
<div class="user_icon" @click="backSystem"></div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -176,11 +176,12 @@
|
|||
</div>
|
||||
<div>
|
||||
<div class="title_s">水泥磨机排气筒</div>
|
||||
<div class="status"><span style="color:green">数据正常</span><span>2024-01-26 14:32:06</span></div>
|
||||
<div class="tableHear">
|
||||
<div style="width:22vh;padding-left:5vh">项目</div>
|
||||
<div style="width:8vh">实测</div>
|
||||
<div style="width:6vh">折算</div>
|
||||
<div class="status"><span style="color:#32D74B">数据正常</span><span>2024-01-26 14:32:06</span></div>
|
||||
<div class="tableHear" style="padding: 0 1vh;">
|
||||
<div style="flex:1;height:1vh"></div>
|
||||
<div style="flex:5;margin: 0 1vh;">项目</div>
|
||||
<div style="flex:2">实测</div>
|
||||
<div style="flex:2">折算</div>
|
||||
</div>
|
||||
<div class="rowItem">
|
||||
<div class="rowindex">1</div>
|
||||
|
|
@ -245,7 +246,7 @@
|
|||
<img class="blockTitleImg" src="img/enp_blue/block_title.svg">
|
||||
</div>
|
||||
<div>
|
||||
<div class="tableHear" style="margin-top:1vh;height:2.6vh;line-height:2.6vh;display:flex;padding-left:1vh">
|
||||
<div class="tableHear" style="margin-top:1vh;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh">
|
||||
<div style="flex:2">项目</div>
|
||||
<div style="flex:1">PM10(μg/m³)</div>
|
||||
<div style="flex:1">PM2.5(μg/m³)</div>
|
||||
|
|
@ -422,7 +423,7 @@ export default {
|
|||
that.initDomStyle();
|
||||
that.$nextTick(() => {
|
||||
setTimeout(function () {
|
||||
// that.initFactory();
|
||||
that.initFactory();
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
|
|
@ -434,6 +435,9 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
backSystem() {
|
||||
this.$router.push({ path: '/dashboard_enp' });
|
||||
},
|
||||
closeDialog() {
|
||||
this.elDrawer = false;
|
||||
this.activeIndex = 0;
|
||||
|
|
@ -618,14 +622,14 @@ export default {
|
|||
const createScene = function () {
|
||||
const scene = new BABYLON.Scene(engine);
|
||||
scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
|
||||
// const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 });
|
||||
// const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
|
||||
// groundMaterial.majorUnitFrequency = 5;
|
||||
// groundMaterial.minorUnitVisibility = 0.5;
|
||||
// groundMaterial.gridRatio = 2;
|
||||
// // groundMaterial.opacity = 0.99;
|
||||
// ground.material = groundMaterial;
|
||||
// ground.position.y = -0.1
|
||||
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 });
|
||||
const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
|
||||
groundMaterial.majorUnitFrequency = 5;
|
||||
groundMaterial.minorUnitVisibility = 0.5;
|
||||
groundMaterial.gridRatio = 2;
|
||||
// groundMaterial.opacity = 0.99;
|
||||
ground.material = groundMaterial;
|
||||
ground.position.y = -0.1
|
||||
// 加载背景图片
|
||||
const backgroundImage = new BABYLON.Layer('', 'img/enp_blue/bg_enp.png', scene, true);
|
||||
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2));
|
||||
|
|
@ -639,6 +643,55 @@ export default {
|
|||
// 灯光
|
||||
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
||||
light.intensity = 1.6;
|
||||
// skybox
|
||||
const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
|
||||
var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene);
|
||||
skyboxMaterial.backFaceCulling = false;
|
||||
skybox.material = skyboxMaterial;
|
||||
/*
|
||||
* Keys:
|
||||
* - 1: Day
|
||||
* - 2: Evening
|
||||
* - 3: Increase Luminance
|
||||
* - 4: Decrease Luminance
|
||||
* - 5: Increase Turbidity
|
||||
* - 6: Decrease Turbidity
|
||||
* - 7: Move horizon to -50
|
||||
* - 8: Restore horizon to 0
|
||||
*/
|
||||
var setSkyConfig = function (property, from, to) {
|
||||
var keys = [
|
||||
{ frame: 0, value: from },
|
||||
{ frame: 100, value: to }
|
||||
];
|
||||
|
||||
var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
|
||||
animation.setKeys(keys);
|
||||
|
||||
scene.stopAnimation(skybox);
|
||||
scene.beginDirectAnimation(skybox, [animation], 0, 100, false, 1);
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", function (evt) {
|
||||
switch (evt.keyCode) {
|
||||
case 49: setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); break; // 1
|
||||
case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); break; // 2
|
||||
|
||||
case 51: setSkyConfig("material.luminance", skyboxMaterial.luminance, 0.1); break; // 3
|
||||
case 52: setSkyConfig("material.luminance", skyboxMaterial.luminance, 1.0); break; // 4
|
||||
|
||||
case 53: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 40); break; // 5
|
||||
case 54: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 5); break; // 6
|
||||
|
||||
case 55: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 50); break; // 7
|
||||
case 56: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 0); break; // 8
|
||||
default: break;
|
||||
}
|
||||
});
|
||||
|
||||
// Set to Day
|
||||
setSkyConfig("material.inclination", skyboxMaterial.inclination, 0);
|
||||
|
||||
// 全屏GUI
|
||||
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
|
||||
that.myui = advancedTexture;
|
||||
|
|
@ -1315,17 +1368,17 @@ header {
|
|||
}
|
||||
|
||||
.rowindex {
|
||||
width: 4vh;
|
||||
flex: 1;
|
||||
height: 4vh;
|
||||
line-height: 4vh;
|
||||
text-align: center;
|
||||
margin-bottom: 1vh;
|
||||
background-image: url('/public/img/enp_blue/序号边框.svg');
|
||||
background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.rowname {
|
||||
width: 17vh;
|
||||
flex: 5;
|
||||
height: 4vh;
|
||||
margin: 0 1vh;
|
||||
padding: 0.5vh;
|
||||
|
|
@ -1335,7 +1388,7 @@ header {
|
|||
}
|
||||
|
||||
.rownum {
|
||||
width: 13vh;
|
||||
flex: 4;
|
||||
height: 4vh;
|
||||
padding: 0.5vh;
|
||||
line-height: 3vh;
|
||||
|
|
|
|||
Loading…
Reference in New Issue