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 | 738 ++++++++++++++++++++++++++------------------------------ 1 files changed, 340 insertions(+), 398 deletions(-) diff --git a/src/views/picture/music/index.vue b/src/views/picture/music/index.vue index 9118e1f..1a56a33 100644 --- a/src/views/picture/music/index.vue +++ b/src/views/picture/music/index.vue @@ -10,10 +10,12 @@ > <el-form-item label="浣撴鍙�" prop="tjNum"> <el-input + ref="inputName" v-model="queryParams.tjNum" placeholder="璇疯緭鍏ヤ綋妫�鍙�" clearable @keyup.enter.native="handleQuery" + @blur="handleQuery" style="width: 160px" /> </el-form-item> @@ -73,9 +75,14 @@ /> <!-- <el-table-column label="韬唤璇�" align="center" prop="customer.cusIdcard" width="170px" /> --> <el-table-column label="鎬у埆" align="center" prop="customer.cusSex"> - <template slot-scope="scope"> + <!-- <template slot-scope="scope"> {{ scope.row.customer.cusSex === 0 ? "鐢�" : "濂�" }} - <!-- <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.cusSex " /> --> + </template> --> + <template slot-scope="scope"> + <dict-tag + :options="dict.type.sys_user_sex" + :value="scope.row.customer.cusSex" + /> </template> </el-table-column> <!-- <el-table-column label="鐢熸棩" align="center" prop="customer.cusBrithday" width="110px" /> --> @@ -140,7 +147,7 @@ <el-table-column label="椤圭洰缁撴灉" align="center" prop="fixedValue" /> --> <!-- <el-table-column label="缁撹" align="center" prop="measuredValue" /> --> <!-- </el-table> - + <div style="height: 390px; margin-top: 10px"> <el-image v-loading="loading" @@ -232,101 +239,114 @@ <div class="tanchuangbox"> <div class="tanchuangbox_left"> <el-form - :model="queryParams" + :model="row" ref="queryForm" size="small" :inline="true" - v-show="showSearch" label-width="68px" > <el-form-item label="鍗曚綅鍚嶇О" prop="tjNum"> <el-input v-model="queryParams.tjNum" placeholder="璇疯緭鍏ュ崟浣嶅悕绉�" - clearable style="width: 150px" + disabled /> </el-form-item> <el-form-item label="鍗曚綅宸ョ" prop="name"> <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ュ崟浣嶅伐绉�" - clearable + disabled style="width: 150px" /> </el-form-item> - <el-form-item label="濮撳悕" prop="name"> + <el-form-item label="濮撳悕" prop="cusName"> <el-input - v-model="queryParams.name" + v-model="row.cusName" placeholder="璇疯緭鍏ュ鍚�" - clearable + disabled style="width: 150px" /> </el-form-item> - <el-form-item label="鎬у埆" prop="name"> - <el-input - v-model="queryParams.name" - placeholder="璇疯緭鍏ユ�у埆" - clearable + <el-form-item label="鎬у埆" prop="cusSex"> + <el-select + disabled + v-model="row.cusSex" + placeholder="璇烽�夋嫨鎬у埆" style="width: 150px" - /> + > + <el-option + v-for="dict in dict.type.sys_user_sex" + :key="dict.value" + :label="dict.label" + :value="parseInt(dict.value)" + ></el-option> + </el-select> </el-form-item> - <el-form-item label="骞撮緞" prop="name"> + <el-form-item label="骞撮緞" prop="age"> <el-input - v-model="queryParams.name" + v-model="row.age" placeholder="璇疯緭鍏ュ勾榫�" - clearable + disabled style="width: 150px" /> </el-form-item> - <el-form-item label="韬唤璇佸彿" prop="name"> + <el-form-item label="韬唤璇佸彿" prop="cusIdcard"> <el-input - v-model="queryParams.name" + v-model="row.cusIdcard" placeholder="璇疯緭鍏ヨ韩浠借瘉鍙�" - clearable + disabled style="width: 150px" /> </el-form-item> - <el-form-item label="浣撴鏃ユ湡" prop="name"> + <el-form-item label="浣撴鏃ユ湡" prop="tjTime"> <el-input - v-model="queryParams.name" + v-model="row.tjTime" placeholder="璇疯緭鍏ヤ綋妫�鏃ユ湡" - clearable + disabled style="width: 150px" /> </el-form-item> - <el-form-item label="浣撴绫诲瀷" prop="name"> - <el-input - v-model="queryParams.name" - placeholder="璇疯緭鍏ヤ綋妫�绫诲瀷" - clearable + <el-form-item label="浣撴绫诲瀷" prop="tjType"> + <el-select + disabled + v-model="row.tjType" + placeholder="璇烽�夋嫨浣撴绫诲瀷" style="width: 150px" - /> + > + <el-option + v-for="dict in dict.type.dict_tjtype" + :key="dict.value" + :label="dict.label" + :value="parseInt(dict.value)" + /> + </el-select> </el-form-item> - <el-form-item label="宸ラ緞" prop="name"> + <!-- <el-form-item label="宸ラ緞" prop="name"> <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ュ伐榫�" - clearable + disabled style="width: 150px" /> - </el-form-item> + </el-form-item> --> </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> <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" @@ -336,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" /> @@ -357,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" @@ -393,7 +437,11 @@ </div> </div> <div class="tanchuangbox_right"> - <div style="display: flex;margin-top:20px"> + <div> + <span>鑱屼笟鍙�</span> + <div style="width: 100%; min-height: 300px"></div> + </div> + <div style="display: flex; margin-top: 20px"> <div style=" width: 50px; @@ -464,11 +512,14 @@ </div> <div style="margin-top: 20px"> <span>妫�鏌ュ尰鐢燂細</span> - <el-input v-model="input" style="width: 160px;margin-right:10px"></el-input> + <el-input + v-model="input" + style="width: 160px; margin-right: 10px" + ></el-input> <el-date-picker v-model="value1" type="date" placeholder="閫夋嫨鏃ユ湡"> </el-date-picker> </div> - <div style="margin-top:20px"> + <div style="margin-top: 20px"> <el-button type="primary">鐢熸垚灏忕粨</el-button> <el-button type="primary">淇濆瓨</el-button> </div> @@ -479,7 +530,7 @@ <Public ref="aaa" @add="handleChanges" /> </div> </template> - + <script> import { getList, @@ -510,12 +561,44 @@ "sys_dict_specimen", "dict_user_marry", "dict_user_national", + "dict_tjtype", ], name: "Picture", components: { Public }, data() { return { - value1:"", + 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", @@ -542,14 +625,13 @@ input: "", min: "", max: "", - Customer: "", Order: "", ReportToday: "", TobeToday: "", - LineChart: [], + youeryuanshi: [], personYYNum: [], reportNum: [], - teamYYNum: [], + youeryuanshi1: [], PieChart: [], PieChart2: [], drawer: false, @@ -604,356 +686,216 @@ dataobj: {}, // 琛ㄥ崟鏍¢獙 rules: {}, + bgcoun: "", + bgcoun1: "", + bgcoun2: "", + bgcoun3: "", + bgcoun4: "", + bgcoun5: "", }; }, created() { this.getList(); - + }, + mounted() { + this.$nextTick(() => { + this.$refs.inputName.focus(); + }); }, methods: { - handleRowClick(selection){ - console.log(selection); - this.drawer = true; + 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(); }, 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", - 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; + itemStyle: { + borderWidth: 1, + borderColor: "black", + color: "#fff", + }, + }, + ], }); + let sizeFun = function () { + myChart.resize(); + }; + window.addEventListener("resize", sizeFun); - 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("main1")); + this.loading = false; - 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); + // 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")); - this.loading = false; - }); + // 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); - 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() { @@ -1130,7 +1072,7 @@ }, }; </script> - + <style> #table .el-table__header-wrapper .el-checkbox { display: none; @@ -1200,7 +1142,7 @@ .tanchuangbox_left { margin-top: 20px; margin-left: 20px; - width: 50%; + width: 60%; } .data-view { display: flex; @@ -1216,7 +1158,7 @@ margin-bottom: 10px; } .nums_txt { - margin-right: 10px; + margin-right: 18px; } .tanchuangbox_left1 { display: flex; @@ -1225,7 +1167,7 @@ display: flex; } .tanchuangbox_right { - width: 50%; + width: 40%; } .ss { display: flex; @@ -1235,4 +1177,4 @@ .ss_txt { width: 60px; } -</style> +</style> \ No newline at end of file -- Gitblit v1.8.0