From cc2b138c0bd76ca2d7424cac350672f89b1c55f7 Mon Sep 17 00:00:00 2001
From: su1124 <1583764726@qq.com>
Date: 星期五, 05 一月 2024 18:02:04 +0800
Subject: [PATCH] su
---
src/views/picture/music/index.vue | 596 ++++++++++++++++++++++++-----------------------------------
1 files changed, 246 insertions(+), 350 deletions(-)
diff --git a/src/views/picture/music/index.vue b/src/views/picture/music/index.vue
index c566984..1a56a33 100644
--- a/src/views/picture/music/index.vue
+++ b/src/views/picture/music/index.vue
@@ -334,19 +334,19 @@
</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="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>
<div class="nums">
- <span class="nums_txt">500</span>
- <span class="nums_txt">1000</span>
- <span class="nums_txt">2000</span>
- <span class="nums_txt">3000</span>
- <span class="nums_txt">4000</span>
- <span class="nums_txt">6000</span>
+ <span
+ class="nums_txt"
+ v-for="(item, index) in yList"
+ :key="index"
+ >{{ item }}</span
+ >
</div>
<el-form
:model="queryParams"
@@ -356,13 +356,37 @@
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="bgcoun"
+ style="width: 50px"
+ @input="sels"
+ />
+ <el-input
+ v-model="bgcoun1"
+ style="width: 50px"
+ @input="sels1"
+ />
+ <el-input
+ v-model="bgcoun2"
+ style="width: 50px"
+ @input="sels2"
+ />
+ <el-input
+ v-model="bgcoun3"
+ style="width: 50px"
+ @input="sels3"
+ />
+ <el-input
+ v-model="bgcoun4"
+ style="width: 50px"
+ @input="sels4"
+ />
+ <el-input
+ v-model="bgcoun5"
+ style="width: 50px"
+ @input="sels5"
+ />
</el-form-item>
<el-form-item label="瀹炴祴楠ㄥ鍊�:" prop="tjNum">
<el-input v-model="queryParams.tjNum" style="width: 50px" />
@@ -377,12 +401,12 @@
<div>
<div class="nums">
- <span class="nums_txt">500</span>
- <span class="nums_txt">1000</span>
- <span class="nums_txt">2000</span>
- <span class="nums_txt">3000</span>
- <span class="nums_txt">4000</span>
- <span class="nums_txt">6000</span>
+ <span
+ class="nums_txt"
+ v-for="(item, index) in yList"
+ :key="index"
+ >{{ item }}</span
+ >
</div>
<el-form
:model="queryParams"
@@ -543,34 +567,36 @@
components: { Public },
data() {
return {
- teamYYNums:[],
- LineCharts:[],
+ teamYYNums: [],
+ LineCharts: [],
row: {},
value1: "",
- zhexianList: [
+ yList: [500, 1000, 2000, 3000, 4000, 6000],
+ youeryuanshiList: [],
+ zuoeryuanshiList: [
{
numb: 500,
- bgcoun: 3,
+ bgcoun: 1,
},
{
numb: 1000,
- bgcoun: 32,
- },
- {
- numb: 2000,
- bgcoun: 31,
- },
- {
- numb: 3000,
bgcoun: 43,
},
{
+ numb: 2000,
+ bgcoun: 43,
+ },
+ {
+ numb: 3000,
+ bgcoun: 32,
+ },
+ {
numb: 4000,
- bgcoun: 13,
+ bgcoun: 23,
},
{
numb: 6000,
- bgcoun: 32,
+ bgcoun: 13,
},
],
tableData: [
@@ -599,14 +625,13 @@
input: "",
min: "",
max: "",
- Customer: "",
Order: "",
ReportToday: "",
TobeToday: "",
- LineChart: [],
+ youeryuanshi: [],
personYYNum: [],
reportNum: [],
- teamYYNum: [],
+ youeryuanshi1: [],
PieChart: [],
PieChart2: [],
drawer: false,
@@ -661,6 +686,12 @@
dataobj: {},
// 琛ㄥ崟鏍￠獙
rules: {},
+ bgcoun: "",
+ bgcoun1: "",
+ bgcoun2: "",
+ bgcoun3: "",
+ bgcoun4: "",
+ bgcoun5: "",
};
},
created() {
@@ -672,334 +703,199 @@
});
},
methods: {
+ sels(val) {
+ this.youeryuanshiList = [];
+ this.youeryuanshiList.push({
+ bgcoun: val,
+ numb: 2000,
+ });
+ this.getech();
+ },
+ sels1(val) {
+ this.youeryuanshiList = [];
+ this.youeryuanshiList.push({
+ bgcoun: val,
+ numb: 1000,
+ });
+ this.getech();
+ },
+ sels2(val) {
+ this.youeryuanshiList = [];
+ this.youeryuanshiList.push({
+ bgcoun: val,
+ numb: 2000,
+ });
+ this.getech();
+ },
+ sels3(val) {
+ this.youeryuanshiList = [];
+ this.youeryuanshiList.push({
+ bgcoun: val,
+ numb: 2000,
+ });
+ this.getech();
+ },
+ sels4(val) {
+ this.youeryuanshiList = [];
+ this.youeryuanshiList.push({
+ bgcoun: val,
+ numb: 2000,
+ });
+ this.getech();
+ },
+ sels5(val) {
+ this.youeryuanshiList = [];
+ this.youeryuanshiList.push({
+ bgcoun: val,
+ numb: 2000,
+ });
+ this.getech();
+ },
handleRowClick(selection) {
this.row = selection.customer;
this.row.tjType = Number(selection.customer.tjType);
this.drawer = true;
- this.getech();
+ // this.getech();
},
getech() {
this.loading = true;
- // 鏌ヨ浠婃棩鐧昏
- getCustomer().then((response) => {
- this.Customer = response;
- this.loading = false;
+ console.log(this.youeryuanshiList);
+ this.youeryuanshiList.forEach((item) => {
+ this.youeryuanshi.push(item.numb);
+ this.youeryuanshi1.push(item.bgcoun);
});
- // 鏌ヨ浠婃棩宸叉
- getOrder().then((response) => {
- this.Order = response;
- this.loading = false;
- });
- // 鏌ヨ浠婃棩鎶ュ憡
- getReportToday().then((response) => {
- this.ReportToday = response;
- this.loading = false;
- });
- // 鏌ヨ浠婃棩寰呮
- getTobeToday().then((response) => {
- this.TobeToday = response;
- this.loading = false;
- });
- getChart().then((response) => {
- response.data.forEach((item) => {
- this.LineChart.push(item.date);
- this.personYYNum.push(item.tdcoun);
- this.reportNum.push(item.grcoun);
- this.teamYYNum.push(item.bgcoun);
- });
- let myChart = this.$echarts.init(document.getElementById("main"));
+ let myChart = this.$echarts.init(document.getElementById("main"));
- myChart.setOption({
- title: {
- text: "宸﹁�冲師濮嬪惉鍔�",
+ myChart.setOption({
+ title: {
+ text: "宸﹁�冲師濮嬪惉鍔�",
+ },
+ tooltip: {
+ trigger: "axis",
+ },
+ // legend: {
+ // data: ["姣忔棩浣撴鐧昏鏁�", "姣忔棩鍥綋鐧昏鏁�", "姣忔棩鍙戝竷鎶ュ憡鏁�"],
+ // },
+ grid: {
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {},
},
- tooltip: {
- trigger: "axis",
- },
- // legend: {
- // data: ["姣忔棩浣撴鐧昏鏁�", "姣忔棩鍥綋鐧昏鏁�", "姣忔棩鍙戝竷鎶ュ憡鏁�"],
+ },
+ xAxis: {
+ data: [500, 1000, 2000, 3000, 4000, 6000],
+ // type: "category",
+ // boundaryGap: false,
+ // axisLine: {
+ // show: true,
+ // lineStyle: {
+ // color: "blue",
+ // size: 12,
+ // width: 0,
+ // tyle: "solid",
+ // },
// },
- grid: {
- left: "3%",
- right: "4%",
- bottom: "3%",
- containLabel: true,
- },
- toolbox: {
- feature: {
- saveAsImage: {},
+ // data: this.LineChart,
+ },
+ yAxis: {
+ type: "value",
+ },
+ series: [
+ {
+ data: this.youeryuanshi1,
+ name: "鍙宠�冲師濮嬪惉鍔�",
+ type: "line",
+ symbol: "circle", //鎷愮偣鐨勫舰鐘�
+ symbolSize: 10, //鎷愮偣澶у皬
+ lineStyle: {
+ color: "#5470C6",
+ width: 2,
},
- },
- xAxis: [
- {type: "category",
- data: ["250", "750", "1.5k", "3k", "6k", "12k"]},
- { data: ["125", "500", "1k", "2k", "4k", "8k"]},
- // type: "category",
- // boundaryGap: false,
- // axisLine: {
- // show: true,
- // lineStyle: {
- // color: "blue",
- // size: 12,
- // width: 0,
- // tyle: "solid",
- // },
- // },
- // data: this.LineChart,
- ],
- yAxis: {
- type: 'value'
- },
- series: [
- {
- data: [3, 32, 31, 43, 13, 32],
- type: "line",
- symbol: "circle", //鎷愮偣鐨勫舰鐘�
- symbolSize: 13, //鎷愮偣澶у皬
- lineStyle: {
- color: "#5470C6",
- width: 2,
- },
-
- itemStyle: {
- borderWidth: 1,
- borderColor: "black",
- color: "#fff",
- },
- },
- ],
- });
- let sizeFun = function () {
- myChart.resize();
- };
- window.addEventListener("resize", sizeFun);
- this.loading = false;
+ itemStyle: {
+ borderWidth: 1,
+ borderColor: "black",
+ color: "#fff",
+ },
+ },
+ ],
});
- getChart().then((response) => {
- console.log(this.zhexianList);
- this.zhexianList.forEach((item) => {
- console.log(item);
- this.LineCharts.push(item.numb);
- this.teamYYNums.push(item.bgcoun);
- });
- let myChart = this.$echarts.init(document.getElementById("main1"));
+ let sizeFun = function () {
+ myChart.resize();
+ };
+ window.addEventListener("resize", sizeFun);
- myChart.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 () {
- myChart.resize();
- };
- window.addEventListener("resize", sizeFun);
+ this.loading = false;
- this.loading = false;
- });
+ // 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"));
- getChart().then((response) => {
- response.data.forEach((item) => {
- this.LineChart.push(item.date);
- this.personYYNum.push(item.tdcoun);
- this.reportNum.push(item.grcoun);
- this.teamYYNum.push(item.bgcoun);
- });
- let myChart = this.$echarts.init(document.getElementById("main2"));
+ // 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);
- myChart.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.LineChart,
- },
- yAxis: {
- type: "value",
- min: 0,
- max: 50,
- interval: 5,
- },
- series: [
- {
- name: "姣忔棩浣撴鐧昏鏁�",
- type: "line",
- stack: "Total",
- data: this.personYYNum,
- },
- {
- name: "姣忔棩鍥綋鐧昏鏁�",
- type: "line",
- stack: "Total",
- data: this.reportNum,
- },
- {
- name: "姣忔棩鍙戝竷鎶ュ憡鏁�",
- type: "line",
- stack: "Total",
- data: this.teamYYNum,
- },
- ],
- });
- let sizeFun = function () {
- myChart.resize();
- };
- window.addEventListener("resize", sizeFun);
-
- this.loading = false;
- });
-
- getChart().then((response) => {
- response.data.forEach((item) => {
- this.LineChart.push(item.date);
- this.personYYNum.push(item.tdcoun);
- this.reportNum.push(item.grcoun);
- this.teamYYNum.push(item.bgcoun);
- });
- let myChart = this.$echarts.init(document.getElementById("main3"));
-
- myChart.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.LineChart,
- },
- yAxis: {
- type: "value",
- min: 0,
- max: 50,
- interval: 5,
- },
- series: [
- {
- name: "姣忔棩浣撴鐧昏鏁�",
- type: "line",
- stack: "Total",
- data: this.personYYNum,
- },
- {
- name: "姣忔棩鍥綋鐧昏鏁�",
- type: "line",
- stack: "Total",
- data: this.reportNum,
- },
- {
- name: "姣忔棩鍙戝竷鎶ュ憡鏁�",
- type: "line",
- stack: "Total",
- data: this.teamYYNum,
- },
- ],
- });
- let sizeFun = function () {
- myChart.resize();
- };
- window.addEventListener("resize", sizeFun);
-
- this.loading = false;
- });
+ // this.loading = false;
+ // });
},
// 榧犳爣杩涘叆鍘熷浘绌洪棿鍑芥暟
enterHandler() {
@@ -1246,7 +1142,7 @@
.tanchuangbox_left {
margin-top: 20px;
margin-left: 20px;
- width: 50%;
+ width: 60%;
}
.data-view {
display: flex;
@@ -1262,7 +1158,7 @@
margin-bottom: 10px;
}
.nums_txt {
- margin-right: 10px;
+ margin-right: 18px;
}
.tanchuangbox_left1 {
display: flex;
@@ -1271,7 +1167,7 @@
display: flex;
}
.tanchuangbox_right {
- width: 50%;
+ width: 40%;
}
.ss {
display: flex;
--
Gitblit v1.8.0