From d94af68ec3f6317124df81296b08c7c110641fca Mon Sep 17 00:00:00 2001
From: value <z1292839451@163.com>
Date: 星期四, 24 八月 2023 09:10:43 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/views/chart/work/index.vue | 210 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 208 insertions(+), 2 deletions(-)
diff --git a/src/views/chart/work/index.vue b/src/views/chart/work/index.vue
index 1b667ad..59b9b32 100644
--- a/src/views/chart/work/index.vue
+++ b/src/views/chart/work/index.vue
@@ -1,13 +1,219 @@
<template>
- <div>宸ヤ綔缁熻鍥�</div>
+ <div class="work-main" style="overflow: scroll;width:100%;height:100vh">
+ <div class="work-head">
+ <el-row :gutter="10">
+ <el-col :span="24">
+ <el-card>
+ <el-form :inline="true" :model="formInline" class="demo-form-inline">
+ <el-form-item>
+ <p><span>*</span>妫�娴嬫棩鏈�:</p>
+ <el-date-picker
+ v-model="dateTime"
+ type="daterange"
+ range-separator="鑷�"
+ start-placeholder="寮�濮嬫棩鏈�"
+ end-placeholder="缁撴潫鏃ユ湡">
+ </el-date-picker>
+ </el-form-item>
+ <el-form-item>
+ <p><span>*</span>妫�楠岀被鍨�:</p>
+ <el-select v-model="formInline.region" placeholder="閲囪喘鍏ュ簱">
+ <el-option label="鍖哄煙涓�" value="shanghai"></el-option>
+ <el-option label="鍖哄煙浜�" value="beijing"></el-option>
+ </el-select>
+ </el-form-item>
+ <el-form-item class="buttons">
+ <el-button>娓呯┖</el-button>
+ <el-button type="primary" @click="onSubmit">鏌ヨ</el-button>
+ </el-form-item>
+ </el-form>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="work-center" >
+ <el-row :gutter="20">
+ <el-col :span="12">
+ <el-card>
+ <p>璐熻矗浜虹粺璁�</p>
+ <div id="leaderStati" style="width:100%;height:400px;"></div>
+ </el-card>
+ </el-col>
+ <el-col :span="12">
+ <el-card>
+ <p>瀹為獙鍛樼粺璁�</p>
+ <div id="testerStati" style="width:100%;height:400px;"></div>
+ </el-card>
+ </el-col>
+ <el-col :span="12">
+ <el-card>
+ <p>璐熻矗浜哄強鏃剁巼</p>
+ <div id="leaderTimly" style="width:100%;height:400px;"></div>
+ </el-card>
+ </el-col>
+ <el-col :span="12">
+ <el-card>
+ <p>瀹為獙鍛樺強鏃剁巼</p>
+ <div id="testerTimly" style="width:100%;height:400px;"></div>
+ </el-card>
+ </el-col>
+ </el-row>
+ </div>
+ <div class="work-foot"></div>
+ </div>
</template>
<script>
+import * as echarts from 'echarts';
export default {
+ data() {
+ return {
+ formInline: {
+ user: '',
+ region: ''
+ },
+ dateTime: '',
+ }
+ },
+ mounted(){
+ this.initLeaderStatiChart('leaderStati');
+ this.initLeaderTimlyChart();
+ this.initLeaderStatiChart('testerStati');
+ this.initTesterTimlyChart();
+ },
+ methods: {
+ onSubmit() {
+ console.log('submit!');
+ },
+ initLeaderStatiChart(id){
+ var chartDom = document.getElementById(id);
+ var myChart = echarts.init(chartDom);
+ var option;
+ let xAxisData = [];
+ let data1 = [];
+ let data2 = [];
+ let data3 = [];
+ let data4 = [];
+ for (let i = 0; i < 10; i++) {
+ xAxisData.push('Class' + i);
+ data1.push(+(Math.random() * 2).toFixed(2));
+ data2.push(+(Math.random() * 5).toFixed(2));
+ data3.push(+(Math.random() + 0.3).toFixed(2));
+ data4.push(+Math.random().toFixed(2));
+ }
+ var emphasisStyle = {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: 'rgba(0,0,0,0.3)'
+ }
+ };
+ option = {
+ legend: {
+ data: ['bar', 'bar2'],
+ left: 'center'
+ },
+ tooltip: {},
+ xAxis: {
+ data: xAxisData,
+ name: '濮撳悕',
+ axisLine: { onZero: true },
+ splitLine: { show: false },
+ splitArea: { show: false }
+ },
+ yAxis: {},
+ grid: {
+ bottom: 100
+ },
+ series: [
+ {
+ name: 'bar',
+ type: 'bar',
+ stack: 'one',
+ emphasis: emphasisStyle,
+ data: data1
+ },
+ {
+ name: 'bar2',
+ type: 'bar',
+ stack: 'one',
+ emphasis: emphasisStyle,
+ data: data2
+ }
+ ]
+ };
+ myChart.on('brushSelected', function (params) {
+ var brushed = [];
+ var brushComponent = params.batch[0];
+ for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) {
+ var rawIndices = brushComponent.selected[sIdx].dataIndex;
+ brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
+ }
+ myChart.setOption({
+ title: {
+ backgroundColor: '#333',
+ text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
+ bottom: 0,
+ right: '10%',
+ width: 100,
+ textStyle: {
+ fontSize: 12,
+ color: '#fff'
+ }
+ }
+ });
+ });
+
+ option && myChart.setOption(option);
+ },
+ initTesterStatiChart(){
+
+ },
+ initLeaderTimlyChart(){
+
+ },
+ initTesterTimlyChart(){
+
+ },
+ }
}
</script>
<style lang="scss" scoped>
-
+ .work-main{
+ width:100%;
+ margin:0;
+ padding: 0;
+ .work-head{
+ width:94%;
+ height:100;
+ margin: 5px 10px;
+ position: fixed;
+ z-index: 10;
+ .demo-form-inline{
+ margin: 0px 10px;
+ p{
+ margin: 0;
+ font-size: 16px;
+ font-weight: bold;
+ span{
+ font-size: 16px;
+ font-weight: bold;
+ color: red;
+ }
+ }
+ .buttons{
+ margin: 40px 0px 0px 900px;
+ }
+ }
+ }
+ .work-center{
+ margin: 0px 0px 5px 10px;
+ padding: 18vh 0px 5px 0px;
+ .el-card{
+ margin: 5px 0px;
+ height:500px;
+ }
+ }
+ }
</style>
--
Gitblit v1.9.3