From 02dd7d431d0a414bafef4602350d24c72a41de3f Mon Sep 17 00:00:00 2001
From: su1124 <1583764726@qq.com>
Date: 星期一, 08 一月 2024 18:03:40 +0800
Subject: [PATCH] su
---
src/views/picture/music/index.vue | 582 +++++++++++++++++++++++++++++++++++++++-------------------
1 files changed, 391 insertions(+), 191 deletions(-)
diff --git a/src/views/picture/music/index.vue b/src/views/picture/music/index.vue
index 1a56a33..ac58e26 100644
--- a/src/views/picture/music/index.vue
+++ b/src/views/picture/music/index.vue
@@ -334,9 +334,9 @@
</el-form>
<div class="data-view">
<div id="main" style="width: 40%; height: 300px"></div>
- <!-- <div id="main1" style="width: 40%; height: 300px"></div> -->
- <!-- <div id="main2" style="width: 40%; height: 300px"></div>
- <div id="main3" style="width: 40%; height: 300px"></div> -->
+ <div id="main1" style="width: 40%; height: 300px"></div>
+ <div id="main2" style="width: 40%; height: 300px"></div>
+ <div id="main3" style="width: 40%; height: 300px"></div>
</div>
<div class="tanchuangbox_left1">
<div>
@@ -356,45 +356,69 @@
v-show="showSearch"
label-width="90px"
>
- <el-form-item label="瀹炴祴姘斿鍊�:" >
+ <el-form-item label="瀹炴祴姘斿鍊�:">
<el-input
- v-model="bgcoun"
+ v-model="yqdwb"
style="width: 50px"
- @input="sels"
+ @input="ysels"
/>
<el-input
- v-model="bgcoun1"
+ v-model="yqdyq"
style="width: 50px"
- @input="sels1"
+ @input="ysels1"
/>
<el-input
- v-model="bgcoun2"
+ v-model="yqdlq"
style="width: 50px"
- @input="sels2"
+ @input="ysels2"
/>
<el-input
- v-model="bgcoun3"
+ v-model="yqdsq"
style="width: 50px"
- @input="sels3"
+ @input="ysels3"
/>
<el-input
- v-model="bgcoun4"
+ v-model="yqdsiq"
style="width: 50px"
- @input="sels4"
+ @input="ysels4"
/>
<el-input
- v-model="bgcoun5"
+ v-model="yqdliuq"
style="width: 50px"
- @input="sels5"
+ @input="ysels5"
/>
</el-form-item>
- <el-form-item label="瀹炴祴楠ㄥ鍊�:" prop="tjNum">
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
+ <el-form-item label="瀹炴祴楠ㄥ鍊�:">
+ <el-input
+ v-model="ygdwb"
+ style="width: 50px"
+ @input="ygsels"
+ />
+ <el-input
+ v-model="ygdyq"
+ style="width: 50px"
+ @input="ygsels1"
+ />
+ <el-input
+ v-model="ygdlq"
+ style="width: 50px"
+ @input="ygsels2"
+ />
+ <el-input
+ v-model="ygdsq"
+ style="width: 50px"
+ @input="ygsels3"
+ />
+ <el-input
+ v-model="ygdsiq"
+ style="width: 50px"
+ @input="ygsels4"
+ />
+ <el-input
+ v-model="ygdliuq"
+ style="width: 50px"
+ @input="ygsels5"
+ />
</el-form-item>
</el-form>
</div>
@@ -416,21 +440,69 @@
v-show="showSearch"
label-width="90px"
>
- <el-form-item label="瀹炴祴姘斿鍊�:" prop="tjNum">
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
+ <el-form-item label="瀹炴祴姘斿鍊�:">
+ <el-input
+ v-model="zqdwb"
+ style="width: 50px"
+ @input="zsels"
+ />
+ <el-input
+ v-model="zqdyq"
+ style="width: 50px"
+ @input="zsels1"
+ />
+ <el-input
+ v-model="zqdlq"
+ style="width: 50px"
+ @input="zsels2"
+ />
+ <el-input
+ v-model="zqdsq"
+ style="width: 50px"
+ @input="zsels3"
+ />
+ <el-input
+ v-model="zqdsiq"
+ style="width: 50px"
+ @input="zsels4"
+ />
+ <el-input
+ v-model="zqdliuq"
+ style="width: 50px"
+ @input="zsels5"
+ />
</el-form-item>
- <el-form-item label="瀹炴祴楠ㄥ鍊�:" prop="tjNum">
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
- <el-input v-model="queryParams.tjNum" style="width: 50px" />
+ <el-form-item label="瀹炴祴楠ㄥ鍊�:">
+ <el-input
+ v-model="zgdwb"
+ style="width: 50px"
+ @input="zgsels"
+ />
+ <el-input
+ v-model="zgdyq"
+ style="width: 50px"
+ @input="zgsels1"
+ />
+ <el-input
+ v-model="zgdlq"
+ style="width: 50px"
+ @input="zgsels2"
+ />
+ <el-input
+ v-model="zgdsq"
+ style="width: 50px"
+ @input="zgsels3"
+ />
+ <el-input
+ v-model="zgdsiq"
+ style="width: 50px"
+ @input="zgsels4"
+ />
+ <el-input
+ v-model="zgdliuq"
+ style="width: 50px"
+ @input="zgsels5"
+ />
</el-form-item>
</el-form>
</div>
@@ -567,38 +639,12 @@
components: { Public },
data() {
return {
+ res: [],
teamYYNums: [],
LineCharts: [],
row: {},
value1: "",
yList: [500, 1000, 2000, 3000, 4000, 6000],
- youeryuanshiList: [],
- zuoeryuanshiList: [
- {
- numb: 500,
- bgcoun: 1,
- },
- {
- numb: 1000,
- bgcoun: 43,
- },
- {
- numb: 2000,
- bgcoun: 43,
- },
- {
- numb: 3000,
- bgcoun: 32,
- },
- {
- numb: 4000,
- bgcoun: 23,
- },
- {
- numb: 6000,
- bgcoun: 13,
- },
- ],
tableData: [
{
date: "1",
@@ -631,7 +677,10 @@
youeryuanshi: [],
personYYNum: [],
reportNum: [],
- youeryuanshi1: [],
+ youeryuanshi1: [0, 0, 0, 0, 0, 0], //y鍔ㄦ�佹暟鍊�
+ youerjiaozheng1: [0, 0, 0, 0, 0, 0], //y鍔ㄦ�佹暟鍊�
+ zuoeryuanshi1: [0, 0, 0, 0, 0, 0], //y鍔ㄦ�佹暟鍊�
+ zuoerjiaozheng1: [0, 0, 0, 0, 0, 0], //y鍔ㄦ�佹暟鍊�
PieChart: [],
PieChart2: [],
drawer: false,
@@ -686,12 +735,30 @@
dataobj: {},
// 琛ㄥ崟鏍￠獙
rules: {},
- bgcoun: "",
- bgcoun1: "",
- bgcoun2: "",
- bgcoun3: "",
- bgcoun4: "",
- bgcoun5: "",
+ yqdwb: "",
+ yqdyq: "",
+ yqdlq: "",
+ yqdsq: "",
+ yqdsiq: "",
+ yqdliuq: "",
+ ygdwb: "",
+ ygdyq: "",
+ ygdlq: "",
+ ygdsq: "",
+ ygdsiq: "",
+ ygdliuq: "",
+ zqdwb: "",
+ zqdyq: "",
+ zqdlq: "",
+ zqdsq: "",
+ zqdsiq: "",
+ zqdliuq: "",
+ zgdwb: "",
+ zgdyq: "",
+ zgdlq: "",
+ zgdsq: "",
+ zgdsiq: "",
+ zgdliuq: "",
};
},
created() {
@@ -703,53 +770,102 @@
});
},
methods: {
- sels(val) {
- this.youeryuanshiList = [];
- this.youeryuanshiList.push({
- bgcoun: val,
- numb: 2000,
- });
+ ysels(val) {
+ this.youeryuanshi1[0] = val;
this.getech();
},
- sels1(val) {
- this.youeryuanshiList = [];
- this.youeryuanshiList.push({
- bgcoun: val,
- numb: 1000,
- });
+ ysels1(val) {
+ this.youeryuanshi1[1] = val;
this.getech();
},
- sels2(val) {
- this.youeryuanshiList = [];
- this.youeryuanshiList.push({
- bgcoun: val,
- numb: 2000,
- });
+ ysels2(val) {
+ this.youeryuanshi1[2] = val;
this.getech();
},
- sels3(val) {
- this.youeryuanshiList = [];
- this.youeryuanshiList.push({
- bgcoun: val,
- numb: 2000,
- });
+ ysels3(val) {
+ this.youeryuanshi1[3] = val;
this.getech();
},
- sels4(val) {
- this.youeryuanshiList = [];
- this.youeryuanshiList.push({
- bgcoun: val,
- numb: 2000,
- });
+ ysels4(val) {
+ this.youeryuanshi1[4] = val;
this.getech();
},
- sels5(val) {
- this.youeryuanshiList = [];
- this.youeryuanshiList.push({
- bgcoun: val,
- numb: 2000,
- });
+ ysels5(val) {
+ this.youeryuanshi1[5] = val;
this.getech();
+ },
+ ygsels(val) {
+ this.youerjiaozheng1[0] = val;
+ this.getech1();
+ },
+ ygsels1(val) {
+ this.youerjiaozheng1[1] = val;
+ this.getech1();
+ },
+ ygsels2(val) {
+ this.youerjiaozheng1[2] = val;
+ this.getech1();
+ },
+ ygsels3(val) {
+ this.youerjiaozheng1[3] = val;
+ this.getech1();
+ },
+ ygsels4(val) {
+ this.youerjiaozheng1[4] = val;
+ this.getech1();
+ },
+ ygsels5(val) {
+ this.youerjiaozheng1[5] = val;
+ this.getech1();
+ },
+
+ zsels(val) {
+ this.zuoeryuanshi1[0] = val;
+ this.getech2();
+ },
+ zsels1(val) {
+ this.zuoeryuanshi1[1] = val;
+ this.getech2();
+ },
+ zsels2(val) {
+ this.zuoeryuanshi1[2] = val;
+ this.getech2();
+ },
+ zsels3(val) {
+ this.zuoeryuanshi1[3] = val;
+ this.getech2();
+ },
+ zsels4(val) {
+ this.zuoeryuanshi1[4] = val;
+ this.getech2();
+ },
+ zsels5(val) {
+ this.zuoeryuanshi1[5] = val;
+ this.getech2();
+ },
+ zgsels(val) {
+ this.zuoerjiaozheng1[0] = val;
+ this.getech3();
+ },
+ zgsels1(val) {
+ this.zuoerjiaozheng1[1] = val;
+ this.getech3();
+ },
+ zgsels2(val) {
+ this.zuoerjiaozheng1[2] = val;
+ this.getech3();
+ },
+ zgsels3(val) {
+ this.zuoerjiaozheng1[3] = val;
+ this.getech3();
+ },
+ zgsels4(val) {
+ this.zuoerjiaozheng1[4] = val;
+ this.getech3();
+ },
+ zgsels5(val) {
+ this.zuoerjiaozheng1[5] = val;
+ this.getech3();
},
handleRowClick(selection) {
this.row = selection.customer;
@@ -757,25 +873,18 @@
this.drawer = true;
// this.getech();
},
+ // 鍙宠�冲師濮嬪惉鍔�
getech() {
this.loading = true;
- console.log(this.youeryuanshiList);
- this.youeryuanshiList.forEach((item) => {
- this.youeryuanshi.push(item.numb);
- this.youeryuanshi1.push(item.bgcoun);
- });
let myChart = this.$echarts.init(document.getElementById("main"));
myChart.setOption({
title: {
- text: "宸﹁�冲師濮嬪惉鍔�",
+ text: "鍙宠�冲師濮嬪惉鍔�",
},
tooltip: {
trigger: "axis",
},
- // legend: {
- // data: ["姣忔棩浣撴鐧昏鏁�", "姣忔棩鍥綋鐧昏鏁�", "姣忔棩鍙戝竷鎶ュ憡鏁�"],
- // },
grid: {
left: "3%",
right: "4%",
@@ -789,18 +898,6 @@
},
xAxis: {
data: [500, 1000, 2000, 3000, 4000, 6000],
- // type: "category",
- // boundaryGap: false,
- // axisLine: {
- // show: true,
- // lineStyle: {
- // color: "blue",
- // size: 12,
- // width: 0,
- // tyle: "solid",
- // },
- // },
- // data: this.LineChart,
},
yAxis: {
type: "value",
@@ -813,7 +910,7 @@
symbol: "circle", //鎷愮偣鐨勫舰鐘�
symbolSize: 10, //鎷愮偣澶у皬
lineStyle: {
- color: "#5470C6",
+ color: "#1515FF",
width: 2,
},
@@ -831,71 +928,174 @@
window.addEventListener("resize", sizeFun);
this.loading = false;
+ },
+ // 鍙宠�崇煫姝ｅ惉鍔�
+ getech1() {
+ this.loading = true;
+ let myChart2 = this.$echarts.init(document.getElementById("main2"));
- // getChart().then((response) => {
- // this.zuoeryuanshiList.forEach((item) => {
- // this.LineCharts.push(item.numb);
- // this.teamYYNums.push(item.bgcoun);
- // });
- // let myChart1 = this.$echarts.init(document.getElementById("main1"));
+ myChart2.setOption({
+ title: {
+ text: "鍙宠�虫牎姝ｅ惉鍔�",
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {},
+ },
+ },
+ xAxis: {
+ data: [500, 1000, 2000, 3000, 4000, 6000],
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ data: this.youerjiaozheng1,
+ name: "鍙宠�虫牎姝ｅ惉鍔�",
+ type: "line",
+ symbol: "none", //鎷愮偣鐨勫舰鐘�
+ symbolSize: 10, //鎷愮偣澶у皬
+ lineStyle: {
+ color: "#1515FF",
+ width: 2,
+ },
- // myChart1.setOption({
- // title: {
- // text: "宸﹁�冲師濮嬪惉鍔�",
- // },
- // tooltip: {
- // trigger: "axis",
- // },
- // // legend: {
- // // data: ["姣忔棩浣撴鐧昏鏁�", "姣忔棩鍥綋鐧昏鏁�", "姣忔棩鍙戝竷鎶ュ憡鏁�"],
- // // },
- // grid: {
- // left: "3%",
- // right: "4%",
- // bottom: "3%",
- // containLabel: true,
- // },
- // toolbox: {
- // feature: {
- // saveAsImage: {},
- // },
- // },
- // xAxis: {
- // // type: "category",
- // // boundaryGap: false,
- // // axisLine: {
- // // show: true,
- // // lineStyle: {
- // // color: "blue",
- // // size: 12,
- // // width: 0,
- // // tyle: "solid",
- // // },
- // // },
- // data: this.LineCharts,
- // },
- // yAxis: {
- // type: "value",
- // min: 0,
- // max: 50,
- // interval: 5,
- // },
- // series: [
- // {
- // name: "宸﹁�冲師濮嬪惉鍔�",
- // type: "line",
- // stack: "Total",
- // data: this.teamYYNums,
- // },
- // ],
- // });
- // let sizeFun = function () {
- // myChart1.resize();
- // };
- // window.addEventListener("resize", sizeFun);
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "black",
+ color: "#fff",
+ },
+ },
+ ],
+ });
+ let sizeFun = function () {
+ myChart.resize();
+ };
+ window.addEventListener("resize", sizeFun);
- // this.loading = false;
- // });
+ this.loading = false;
+ },
+ // 宸﹁�冲師濮嬪惉鍔�
+ getech2() {
+ this.loading = true;
+ let myChart2 = this.$echarts.init(document.getElementById("main1"));
+
+ myChart2.setOption({
+ title: {
+ text: "宸﹁�冲師濮嬪惉鍔�",
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {},
+ },
+ },
+ xAxis: {
+ data: [500, 1000, 2000, 3000, 4000, 6000],
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ data: this.zuoeryuanshi1,
+ name: "宸﹁�冲師濮嬪惉鍔�",
+ type: "line",
+ symbol: "triangle", //鎷愮偣鐨勫舰鐘�
+ symbolSize: 10, //鎷愮偣澶у皬
+ lineStyle: {
+ color: "#1515FF",
+ width: 2,
+ },
+
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "black",
+ color: "#fff",
+ },
+ },
+ ],
+ });
+ let sizeFun = function () {
+ myChart.resize();
+ };
+ window.addEventListener("resize", sizeFun);
+
+ this.loading = false;
+ },
+ // 宸﹁�崇煫姝ｅ惉鍔�
+ getech3() {
+ this.loading = true;
+ let myChart2 = this.$echarts.init(document.getElementById("main3"));
+
+ myChart2.setOption({
+ title: {
+ text: "宸﹁�虫牎姝ｅ惉鍔�",
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {},
+ },
+ },
+ xAxis: {
+ data: [500, 1000, 2000, 3000, 4000, 6000],
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ data: this.zuoerjiaozheng1,
+ name: "宸﹁�虫牎姝ｅ惉鍔�",
+ type: "line",
+ symbol: "none", //鎷愮偣鐨勫舰鐘�
+ symbolSize: 10, //鎷愮偣澶у皬
+ lineStyle: {
+ color: "#1515FF",
+ width: 2,
+ },
+
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "black",
+ color: "#fff",
+ },
+ },
+ ],
+ });
+ let sizeFun = function () {
+ myChart.resize();
+ };
+ window.addEventListener("resize", sizeFun);
+
+ this.loading = false;
},
// 榧犳爣杩涘叆鍘熷浘绌洪棿鍑芥暟
enterHandler() {
--
Gitblit v1.8.0