Commit 30484ddf authored by 王文琼's avatar 王文琼

看板模板

parent 9399d136
......@@ -88,9 +88,7 @@
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
......
<template>
<div class="main-left">
<div class="border-container">
<div class="name-title">
===
</div>
<div id="radar1">
<component :is="left1" > </component>
<!-- <Edubalance /> -->
</div>
<Border />
</div>
<div class="border-container">
<div class="name-title">
===
</div>
<div id="graduateyear1">
<component :is="left2" > </component>
</div>
<ul class="three-pie clearfix">
<li>
<div id="sexrate1">
<component :is="left3" > </component>
</div>
</li>
<li>
<div id="householdrate1">
<component :is="left4" > </component>
</div>
</li>
</ul>
<Border />
</div>
</div>
<div class="main-left">
<div class="border-container">
<div class="name-title">
<a v-if="chartListLeft[0].tittle">{{chartListLeft[0].tittle}}</a>
<a v-else>===</a>
</div>
<div id="radar1">
<component :is="left1" :id="chartListLeft[0].id "></component>
<!-- <Edubalance /> -->
</div>
<Border />
</div>
<div class="border-container">
<div class="name-title">
<a v-if="chartListLeft[1].tittle">{{chartListLeft[1].tittle}}</a>
<a v-else>===</a>
</div>
<div id="graduateyear1">
<component :is="left2" :id="chartListLeft[1].id "></component>
</div>
<ul class="three-pie clearfix">
<li>
<div id="sexrate1">
<div class="name-title">
<a v-if="chartListLeft[2].tittle">{{chartListLeft[2].tittle}}</a>
<a v-else>===</a>
</div>
<component :is="left3" :id=" chartListLeft[2].id "></component>
</div>
</li>
<li>
<div id="householdrate1">
<div class="name-title">
<a v-if="chartListLeft[3].tittle">{{chartListLeft[3].tittle}}</a>
<a v-else>===</a>
</div>
<component :is="left4" :id="chartListLeft[3].id "></component>
</div>
</li>
</ul>
<Border />
</div>
</div>
</template>
<script>
import Border from "../chartDemo/border";
import Pie from '../../chart/echarts/pie';
import Bar from '../../chart/echarts/bar';
import chartLine from '../../chart/echarts/line';
import Radar from '../../chart/echarts/radar';
import Scatter from '../../chart/echarts/scatter';
import Graduateyear from '../../chart/echarts/graduateyear';
import Sexrate from '../../chart/echarts/sexrate';
import Householdrate from '../../chart/echarts/householdrate';
import Courserate from '../../chart/echarts/courserate';
import Professionrate from '../../chart/echarts/professionrate'
import Changedetail from '../../chart/echarts/changedetail'
import Juniorservice from '../../chart/echarts/juniorservice'
import Edubalance from '../../chart/echarts/edubalance'
export default {
components: {
Pie,
Border,
Bar,
chartLine,
Radar,
Scatter,
Graduateyear,
Sexrate,
Householdrate,
Courserate,
Professionrate,
Changedetail,
Juniorservice,
Edubalance
},
data() {
return {
chart: {
BackgroundColor: "#040f3c",
},
id:'id3',
chartListLeft:[],
left1:'',
left2:'',
left3:'',
left4:''
}
},
// props:[
// 'chartListLeft'
// ],
// props:{
// chartListLeft:Array,
// },
mounted() {
this.$nextTick(() => {
this.chartListLeft = JSON.parse(localStorage.getItem("chartListLeft"))
this.left1 = this.chartListLeft[0].chartTypeId;
this.left2 = this.chartListLeft[1].chartTypeId;
this.left3 = this.chartListLeft[2].chartTypeId;
this.left4 = this.chartListLeft[3].chartTypeId;
console.log("vvvvvvvvvvvvv"+this.left1)
});
},
methods: {
},
}
import Border from "../chartDemo/border";
import Pie from "../../chart/echarts/pie";
import Bar from "../../chart/echarts/bar";
import chartLine from "../../chart/echarts/line";
import Radar from "../../chart/echarts/radar";
import Scatter from "../../chart/echarts/scatter";
import Graduateyear from "../../chart/echarts/graduateyear";
import Sexrate from "../../chart/echarts/sexrate";
import Householdrate from "../../chart/echarts/householdrate";
import Courserate from "../../chart/echarts/courserate";
import Professionrate from "../../chart/echarts/professionrate";
import Changedetail from "../../chart/echarts/changedetail";
import Juniorservice from "../../chart/echarts/juniorservice";
import Edubalance from "../../chart/echarts/edubalance";
export default {
components: {
Pie,
Border,
Bar,
chartLine,
Radar,
Scatter,
Graduateyear,
Sexrate,
Householdrate,
Courserate,
Professionrate,
Changedetail,
Juniorservice,
Edubalance
},
data() {
return {
chart: {
BackgroundColor: "#040f3c"
},
id: "id3",
chartListLeft: JSON.parse(localStorage.getItem("chartListLeft")),
left1: "",
left2: "",
left3: "",
left4: ""
};
},
// props:[
// 'chartListLeft'
// ],
// props:{
// chartListLeft:Array,
// },
mounted() {
this.$nextTick(() => {
// this.chartListLeft =
this.left1 = this.chartListLeft[0].chartTypeId;
this.left2 = this.chartListLeft[1].chartTypeId;
this.left3 = this.chartListLeft[2].chartTypeId;
this.left4 = this.chartListLeft[3].chartTypeId;
console.log("vvvvvvvvvvvvv" + this.left1);
});
},
methods: {}
};
</script>
<style scoped>
.main-left {
float: left;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
#radar1 {
height: 275px;
}
#dormitorydetail1 {
height: 135px;
}
#graduateyear1 {
height: 192px;
}
.three-pie {
border-top: 1px solid #2c768a;
margin: -10px;
margin-top: 10px;
height: 266px;
}
.three-pie li {
float: left;
width: 50%;
border-right: 1px solid #2c768a;
box-sizing: border-box;
}
.three-pie li:last-child {
border-right: none;
}
#sexrate1,
#householdrate1 {
width:100%;
height: 266px;
}
.main-left {
float: left;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
#radar1 {
height: 275px;
}
#dormitorydetail1 {
height: 135px;
}
#graduateyear1 {
height: 192px;
}
.three-pie {
border-top: 1px solid #2c768a;
margin: -10px;
margin-top: 10px;
height: 266px;
}
.three-pie li {
float: left;
width: 50%;
border-right: 1px solid #2c768a;
box-sizing: border-box;
}
.three-pie li:last-child {
border-right: none;
}
#sexrate1,
#householdrate1 {
width: 100%;
height: 266px;
}
</style>
<template>
<div class="main-middle">
<div class="border-container">
<div id="mapadd1">
<component :is="main1" > </component>
</div>
<Border />
</div>
<div class="border-container">
<ul class="teacher-pie clearfix">
<li>
<div class="name-title">
=======
</div>
<div id="courserate1">
<component :is="main2" > </component>
</div>
</li>
<li>
<div class="name-title">
=======
</div>
<div id="professionrate1">
<component :is="main3" > </component>
</div>
</li>
</ul>
<div class="name-title">
===
</div>
<div id="changedetail1">
<component :is="main4" > </component>
</div>
<Border />
</div>
</div>
<div class="main-middle">
<div class="border-container">
<div id="mapadd1">
<div class="name-title">
<a v-if="chartListMain[2].tittle">{{chartListMain[2].tittle}}</a>
<a v-else>===</a>
</div>
<component :is="main1" :id="chartListMain[0].id "></component>
</div>
<Border />
</div>
<div class="border-container">
<ul class="teacher-pie clearfix">
<li>
<div class="name-title">
<a v-if="chartListMain[1].tittle">{{chartListMain[1].tittle}}</a>
<a v-else>===</a>
</div>
<div id="courserate1">
<component :is="main2" :id=" chartListMain[1].id "></component>
</div>
</li>
<li>
<div class="name-title">
<a v-if="chartListMain[2].tittle">{{chartListMain[2].tittle}}</a>
<a v-else>===</a>
</div>
<div id="professionrate1">
<component :is="main3" :id=" chartListMain[2].id "></component>
</div>
</li>
</ul>
<div class="name-title">
<a v-if="chartListMain[3].tittle">{{chartListMain[3].tittle}}</a>
<a v-else>===</a>
</div>
<div id="changedetail1">
<component :is="main4" :id=" chartListMain[3].id "></component>
</div>
<Border />
</div>
</div>
</template>
<script>
import Border from "../chartDemo/border";
import Pie from '../../chart/echarts/pie';
import Bar from '../../chart/echarts/bar';
import chartLine from '../../chart/echarts/line';
import Radar from '../../chart/echarts/radar';
import Scatter from '../../chart/echarts/scatter';
import Graduateyear from '../../chart/echarts/graduateyear';
import Sexrate from '../../chart/echarts/sexrate';
import Householdrate from '../../chart/echarts/householdrate';
import Courserate from '../../chart/echarts/courserate';
import Professionrate from '../../chart/echarts/professionrate'
import Changedetail from '../../chart/echarts/changedetail'
import Juniorservice from '../../chart/echarts/juniorservice'
import Edubalance from '../../chart/echarts/edubalance'
export default {
components: {
Pie,
Border,
Bar,
chartLine,
Radar,
Scatter,
Graduateyear,
Sexrate,
Householdrate,
Courserate,
Professionrate,
Changedetail,
Juniorservice,
Edubalance
},
data() {
return {
chart: {
BackgroundColor: "#040f3c",
},
id:'id3',
chartListMain:[],
main1:'',
main2:'',
main3:'',
main4:''
}
},
mounted() {
this.$nextTick(() => {
this.chartListMain = JSON.parse(localStorage.getItem("chartListMain"))
this.main1 = this.chartListMain[0].chartTypeId;
this.main2 = this.chartListMain[1].chartTypeId;
this.main3 = this.chartListMain[2].chartTypeId;
this.main4 = this.chartListMain[3].chartTypeId;
console.log("vvvvvvvvvvvvv"+this.main1)
});
},
methods: {
},
}
import Border from "../chartDemo/border";
import Pie from "../../chart/echarts/pie";
import Bar from "../../chart/echarts/bar";
import chartLine from "../../chart/echarts/line";
import Radar from "../../chart/echarts/radar";
import Scatter from "../../chart/echarts/scatter";
import Graduateyear from "../../chart/echarts/graduateyear";
import Sexrate from "../../chart/echarts/sexrate";
import Householdrate from "../../chart/echarts/householdrate";
import Courserate from "../../chart/echarts/courserate";
import Professionrate from "../../chart/echarts/professionrate";
import Changedetail from "../../chart/echarts/changedetail";
import Juniorservice from "../../chart/echarts/juniorservice";
import Edubalance from "../../chart/echarts/edubalance";
export default {
components: {
Pie,
Border,
Bar,
chartLine,
Radar,
Scatter,
Graduateyear,
Sexrate,
Householdrate,
Courserate,
Professionrate,
Changedetail,
Juniorservice,
Edubalance
},
data() {
return {
chart: {
BackgroundColor: "#040f3c"
},
id: "id3",
chartListMain: JSON.parse(localStorage.getItem("chartListMain")),
main1: "",
main2: "",
main3: "",
main4: ""
};
},
mounted() {
this.$nextTick(() => {
//this.chartListMain =
this.main1 = this.chartListMain[0].chartTypeId;
this.main2 = this.chartListMain[1].chartTypeId;
this.main3 = this.chartListMain[2].chartTypeId;
this.main4 = this.chartListMain[3].chartTypeId;
console.log("vvvvvvvvvvvvv" + this.main1);
});
},
methods: {}
};
</script>
<style scoped>
.main-middle {
padding: 0 10px;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
#mapadd1 {
height: 304px;
}
.number-show {
position: absolute;
top: 20%;
right: 5%;
}
.number-show span.span-name {
font-size: 14px;
color: #fffd51;
}
.number-show span.span-number-show {
font-size: 18px;
color: #54b5b5;
font-style: italic;
}
.number-show li {
line-height: 25px;
}
#teacherrate1,
#courserate1,
#professionrate1 {
height: 200px;
}
#agelist1 {
height: 130px;
}
#changedetail1 {
height: 229px;
}
.teacher-pie li:last-child {
border-right: none;
}
.teacher-pie li .name-title {
padding-left: 10px;
padding-top: 10px;
}
.teacher-pie li {
float: left;
width: 50%;
border-right: 1px solid #2c768a;
box-sizing: border-box;
}
.teacher-pie {
border-bottom: 1px solid #2c768a;
margin: -10px;
margin-bottom: 0;
}
.main-middle {
padding: 0 10px;
}
.border-container {
position: relative;
margin-top: 15px;
padding: 10px;
border: 1px solid #54dcf2;
}
.name-title {
font-size: 20px;
color: #00ffff;
}
#mapadd1 {
height: 304px;
}
.number-show {
position: absolute;
top: 20%;
right: 5%;
}
.number-show span.span-name {
font-size: 14px;
color: #fffd51;
}
.number-show span.span-number-show {
font-size: 18px;
color: #54b5b5;
font-style: italic;
}
.number-show li {
line-height: 25px;
}
#teacherrate1,
#courserate1,
#professionrate1 {
height: 200px;
}
#agelist1 {
height: 130px;
}
#changedetail1 {
height: 229px;
}
.teacher-pie li:last-child {
border-right: none;
}
.teacher-pie li .name-title {
padding-left: 10px;
padding-top: 10px;
}
.teacher-pie li {
float: left;
width: 50%;
border-right: 1px solid #2c768a;
box-sizing: border-box;
}
.teacher-pie {
border-bottom: 1px solid #2c768a;
margin: -10px;
margin-bottom: 0;
}
</style>
<template>
<div class="main-right">
<div class="border-container">
<div class="name-title">===</div>
<div class="name-title">
<a v-if="chartListRight[0].tittle">{{chartListRight[0].tittle}}</a>
<a v-else>===</a>
</div>
<div style=" height: 275px;">
<component :is="right1"></component>
<component :is="right1" :id=" chartListRight[0].id "></component>
</div>
<Border />
</div>
<div class="border-container">
<div class="name-title">===</div>
<div class="name-title">
<a v-if="chartListRight[1].tittle">{{chartListRight[1].tittle}}</a>
<a v-else>===</a>
</div>
<div id="juniorservice1">
<component :is="right2"></component>
<component :is="right2" :id=" chartListRight[1].id "></component>
</div>
<Border />
</div>
<div class="border-container">
<div class="name-title">===</div>
<div class="name-title">
<a v-if="chartListRight[2].tittle">{{chartListRight[2].tittle}}</a>
<a v-else>===</a>
</div>
<div id="edubalance1">
<component :is="right3"></component>
<component :is="right3" :id="chartListRight[2].id "></component>
</div>
<Border />
</div>
......@@ -63,7 +72,7 @@ export default {
BackgroundColor: "#040f3c"
},
chartListRight: [],
chartListRight: JSON.parse(localStorage.getItem("chartListRight")),
right1: "",
right2: "",
right3: ""
......@@ -72,7 +81,7 @@ export default {
mounted() {
this.$nextTick(() => {
this.chartListRight = JSON.parse(localStorage.getItem("chartListRight"));
// this.chartListRight = ;
this.right1 = this.chartListRight[0].chartTypeId;
this.right2 = this.chartListRight[1].chartTypeId;
this.right3 = this.chartListRight[2].chartTypeId;
......
......@@ -15,7 +15,7 @@ export default {
return {
width: 0,
height: 0,
id: "love"
// id: "love"
};
},
mounted() {
......@@ -31,7 +31,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
// props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -12,7 +12,7 @@ var echarts = require("echarts");
export default {
data() {
return {
id: "changedetail",
// id: "changedetail",
};
},
......@@ -25,7 +25,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -12,7 +12,7 @@ var echarts = require("echarts");
export default {
data() {
return {
id: "courserate",
data: [
{
name: "FK",
......@@ -65,7 +65,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -12,7 +12,7 @@ var echarts = require("echarts");
export default {
data() {
return {
id: "edubalance",
// id: "edubalance",
};
},
......@@ -25,7 +25,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -13,7 +13,7 @@ export default {
name: "radar",
data() {
return {
id: "graduateyear"
// id: "graduateyear"
};
},
mounted() {
......@@ -25,7 +25,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -5,14 +5,12 @@
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "householdrate",
// id: "householdrate",
data: [
{
name: 'FK',
......@@ -60,7 +58,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -5,14 +5,11 @@
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
data() {
return {
id: "juniorservice",
// id: "juniorservice",
};
},
......@@ -25,7 +22,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -5,10 +5,7 @@
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "radar",
data() {
......@@ -95,7 +92,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -5,17 +5,14 @@
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "pie",
data() {
return {
width: 0,
height: 0,
id: "pie"
// id: "pie"
};
},
mounted() {
......@@ -31,7 +28,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
// props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -12,7 +12,7 @@ var echarts = require("echarts");
export default {
data() {
return {
id: "professionrate",
// id: "professionrate",
data: [
{
name: "FK",
......@@ -54,7 +54,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -6,21 +6,18 @@
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "radar1",
data() {
return {
width: 0,
height: 0,
id: "radar1"
// id: "radar1"
};
},
mounted() {
console.log(this.width, this.height);
console.log(this.id);
this.$nextTick(() => {
this.setCharcts();
......@@ -28,7 +25,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
// props: ["chart", "id"],
props: ["id"],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -5,10 +5,7 @@
</template>
<script>
import Axios from "@/function/axios.js";
import qs from "qs";
var echarts = require("echarts");
export default {
name: "radar",
data() {
......@@ -71,7 +68,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
// props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
......@@ -12,7 +12,7 @@ var echarts = require("echarts");
export default {
data() {
return {
id: "sexrate",
// id: "sexrate",
data: [
{
name: "PK",
......@@ -60,7 +60,7 @@ export default {
},
//props: [ 'width', 'height','boardstore','chart','id'],
//props: ['chart', 'id'],
props: [ 'id'],
methods: {
setCharcts() {
var myChart = echarts.init(document.getElementById(this.id));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment