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 | 880 ++++++++++++++++++++++++++++++++-------------------------- 1 files changed, 488 insertions(+), 392 deletions(-) diff --git a/src/views/picture/music/index.vue b/src/views/picture/music/index.vue index c566984..ac58e26 100644 --- a/src/views/picture/music/index.vue +++ b/src/views/picture/music/index.vue @@ -335,18 +335,18 @@ <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="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,33 +356,81 @@ 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="yqdwb" + style="width: 50px" + @input="ysels" + /> + <el-input + v-model="yqdyq" + style="width: 50px" + @input="ysels1" + /> + <el-input + v-model="yqdlq" + style="width: 50px" + @input="ysels2" + /> + <el-input + v-model="yqdsq" + style="width: 50px" + @input="ysels3" + /> + <el-input + v-model="yqdsiq" + style="width: 50px" + @input="ysels4" + /> + <el-input + v-model="yqdliuq" + style="width: 50px" + @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> <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" @@ -392,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> @@ -543,36 +639,12 @@ components: { Public }, data() { return { - teamYYNums:[], - LineCharts:[], + res: [], + teamYYNums: [], + LineCharts: [], row: {}, value1: "", - zhexianList: [ - { - numb: 500, - bgcoun: 3, - }, - { - numb: 1000, - bgcoun: 32, - }, - { - numb: 2000, - bgcoun: 31, - }, - { - numb: 3000, - bgcoun: 43, - }, - { - numb: 4000, - bgcoun: 13, - }, - { - numb: 6000, - bgcoun: 32, - }, - ], + yList: [500, 1000, 2000, 3000, 4000, 6000], tableData: [ { date: "1", @@ -599,14 +671,16 @@ input: "", min: "", max: "", - Customer: "", Order: "", ReportToday: "", TobeToday: "", - LineChart: [], + youeryuanshi: [], personYYNum: [], reportNum: [], - teamYYNum: [], + 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, @@ -661,6 +735,30 @@ dataobj: {}, // 琛ㄥ崟鏍¢獙 rules: {}, + 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() { @@ -672,334 +770,332 @@ }); }, methods: { + ysels(val) { + this.youeryuanshi1[0] = val; + this.getech(); + }, + ysels1(val) { + this.youeryuanshi1[1] = val; + this.getech(); + }, + ysels2(val) { + this.youeryuanshi1[2] = val; + this.getech(); + }, + ysels3(val) { + this.youeryuanshi1[3] = val; + this.getech(); + }, + ysels4(val) { + this.youeryuanshi1[4] = val; + this.getech(); + }, + 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; 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; + let myChart = this.$echarts.init(document.getElementById("main")); + + myChart.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.youeryuanshi1, + name: "鍙宠�冲師濮嬪惉鍔�", + type: "line", + symbol: "circle", //鎷愮偣鐨勫舰鐘� + symbolSize: 10, //鎷愮偣澶у皬 + lineStyle: { + color: "#1515FF", + width: 2, + }, + + itemStyle: { + borderWidth: 1, + borderColor: "black", + color: "#fff", + }, + }, + ], }); - // 鏌ヨ浠婃棩宸叉 - getOrder().then((response) => { - this.Order = response; - this.loading = false; + let sizeFun = function () { + myChart.resize(); + }; + window.addEventListener("resize", sizeFun); + + this.loading = false; + }, + // 鍙宠�崇煫姝e惉鍔� + getech1() { + this.loading = true; + let myChart2 = this.$echarts.init(document.getElementById("main2")); + + myChart2.setOption({ + title: { + text: "鍙宠�虫牎姝e惉鍔�", + }, + 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: "鍙宠�虫牎姝e惉鍔�", + type: "line", + symbol: "none", //鎷愮偣鐨勫舰鐘� + symbolSize: 10, //鎷愮偣澶у皬 + lineStyle: { + color: "#1515FF", + width: 2, + }, + + itemStyle: { + borderWidth: 1, + borderColor: "black", + color: "#fff", + }, + }, + ], }); - // 鏌ヨ浠婃棩鎶ュ憡 - getReportToday().then((response) => { - this.ReportToday = response; - this.loading = false; + let sizeFun = function () { + myChart.resize(); + }; + window.addEventListener("resize", sizeFun); + + 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", + }, + }, + ], }); - // 鏌ヨ浠婃棩寰呮 - getTobeToday().then((response) => { - this.TobeToday = response; - this.loading = false; + let sizeFun = function () { + myChart.resize(); + }; + window.addEventListener("resize", sizeFun); + + this.loading = false; + }, + // 宸﹁�崇煫姝e惉鍔� + getech3() { + this.loading = true; + let myChart2 = this.$echarts.init(document.getElementById("main3")); + + myChart2.setOption({ + title: { + text: "宸﹁�虫牎姝e惉鍔�", + }, + 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: "宸﹁�虫牎姝e惉鍔�", + type: "line", + symbol: "none", //鎷愮偣鐨勫舰鐘� + symbolSize: 10, //鎷愮偣澶у皬 + lineStyle: { + color: "#1515FF", + width: 2, + }, + + itemStyle: { + borderWidth: 1, + borderColor: "black", + color: "#fff", + }, + }, + ], }); - 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 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", - 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; - }); - 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")); - - 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; - }); - - 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")); - - myChart.setOption({ - title: { - text: "鍙宠�崇煫姝e惉鍔�", - }, - 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: "宸﹁�崇煫姝e惉鍔�", - }, - 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 +1342,7 @@ .tanchuangbox_left { margin-top: 20px; margin-left: 20px; - width: 50%; + width: 60%; } .data-view { display: flex; @@ -1262,7 +1358,7 @@ margin-bottom: 10px; } .nums_txt { - margin-right: 10px; + margin-right: 18px; } .tanchuangbox_left1 { display: flex; @@ -1271,7 +1367,7 @@ display: flex; } .tanchuangbox_right { - width: 50%; + width: 40%; } .ss { display: flex; -- Gitblit v1.8.0