From c3567454dcc7b6978370f5257e918c1774b58247 Mon Sep 17 00:00:00 2001 From: su1124 <1583764726@qq.com> Date: 星期四, 14 十二月 2023 18:04:56 +0800 Subject: [PATCH] su --- src/views/picture/music/index.vue | 678 ++++++++++++++++++++++++++++++++++++++++++++++++++++--- vue.config.js | 4 2 files changed, 633 insertions(+), 49 deletions(-) diff --git a/src/views/picture/music/index.vue b/src/views/picture/music/index.vue index a9b663e..9118e1f 100644 --- a/src/views/picture/music/index.vue +++ b/src/views/picture/music/index.vue @@ -50,16 +50,17 @@ <div style="width: 100%; margin-left: 10px; display: flex"> <div style="width: 97%; margin-right: 30px"> + <!-- @selection-change="handleSelectionChange" --> <el-table id="table" v-loading="loading" ref="tb" :data="pictureList" - @selection-change="handleSelectionChange" + @row-click="handleRowClick" border height="630px" > - <el-table-column type="selection" width="40" align="center" /> + <!-- <el-table-column type="selection" width="40" align="center" /> --> <el-table-column label="浣撴鍙�" align="center" @@ -226,10 +227,10 @@ title="鎴戞槸鏍囬" :visible.sync="drawer" :with-header="false" - size="60%" + size="85%" > - <div> - <div style="margin-top:20px;width:50%"> + <div class="tanchuangbox"> + <div class="tanchuangbox_left"> <el-form :model="queryParams" ref="queryForm" @@ -243,7 +244,6 @@ v-model="queryParams.tjNum" placeholder="璇疯緭鍏ュ崟浣嶅悕绉�" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </el-form-item> @@ -252,25 +252,22 @@ v-model="queryParams.name" placeholder="璇疯緭鍏ュ崟浣嶅伐绉�" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </el-form-item> - <el-form-item label="濮撳悕" prop="name"> + <el-form-item label="濮撳悕" prop="name"> <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ュ鍚�" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </el-form-item> - <el-form-item label="鎬у埆" prop="name"> + <el-form-item label="鎬у埆" prop="name"> <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ユ�у埆" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </el-form-item> @@ -279,16 +276,14 @@ v-model="queryParams.name" placeholder="璇疯緭鍏ュ勾榫�" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </el-form-item> - <el-form-item label="韬唤璇佸彿" prop="name"> + <el-form-item label="韬唤璇佸彿" prop="name"> <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ヨ韩浠借瘉鍙�" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </el-form-item> @@ -297,7 +292,6 @@ v-model="queryParams.name" placeholder="璇疯緭鍏ヤ綋妫�鏃ユ湡" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </el-form-item> @@ -306,7 +300,6 @@ v-model="queryParams.name" placeholder="璇疯緭鍏ヤ綋妫�绫诲瀷" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </el-form-item> @@ -315,13 +308,171 @@ v-model="queryParams.name" placeholder="璇疯緭鍏ュ伐榫�" clearable - @keyup.enter.native="handleQuery" style="width: 150px" /> </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> + <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> + </div> + <el-form + :model="queryParams" + ref="queryForm" + size="small" + :inline="true" + 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> + <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> + </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> + </div> + <el-form + :model="queryParams" + ref="queryForm" + size="small" + :inline="true" + 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> + <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> + </el-form> + </div> + </div> </div> - <div style="width:50%"></div> + <div class="tanchuangbox_right"> + <div style="display: flex;margin-top:20px"> + <div + style=" + width: 50px; + display: flex; + flex-direction: column; + margin-top: 46px; + " + > + <span style="margin-bottom: 16px">鍙宠�筹細</span> + <span style="margin-bottom: 17px">宸﹁�筹細</span> + <span>鍙岃�筹細</span> + </div> + <div class="ss"> + <span class="ss_txt">璇骞冲潎</span> + <el-input v-model="input" style="width: 60px"></el-input> + <el-input v-model="input" style="width: 60px"></el-input> + <el-input v-model="input" style="width: 60px"></el-input> + </div> + <div class="ss"> + <span class="ss_txt">500璇鐭</span> + <el-input v-model="input" style="width: 60px"></el-input> + <el-input v-model="input" style="width: 60px"></el-input> + </div> + <div class="ss"> + <span class="ss_txt">1000璇鐭</span> + <el-input v-model="input" style="width: 60px"></el-input> + <el-input v-model="input" style="width: 60px"></el-input> + </div> + <div class="ss"> + <span class="ss_txt">2000璇鐭</span> + <el-input v-model="input" style="width: 60px"></el-input> + <el-input v-model="input" style="width: 60px"></el-input> + </div> + <div class="ss"> + <span class="ss_txt">楂橀姘斿骞冲潎</span> + <el-input v-model="input" style="width: 60px"></el-input> + <el-input v-model="input" style="width: 60px"></el-input> + <el-input v-model="input" style="width: 60px"></el-input> + </div> + <div class="ss"> + <span class="ss_txt">楂橀楠ㄥ骞冲潎</span> + <el-input v-model="input" style="width: 60px"></el-input> + <el-input v-model="input" style="width: 60px"></el-input> + </div> + </div> + + <div style="margin-top: 20px"> + <span>鐢垫祴鍚皬缁擄細</span> + <el-input + style="margin-top: 10px" + type="textarea" + :rows="2" + placeholder="璇疯緭鍏ュ唴瀹�" + v-model="textarea" + > + </el-input> + </div> + <div> + <span>甯歌璧锋鍒楄〃</span> + <el-table :data="tableData" style="width: 100%"> + <el-table-column prop="date" label="搴忓彿" width="180"> + </el-table-column> + <el-table-column prop="name" label="鎵�瑙侀」绫诲瀷" width="180"> + </el-table-column> + <el-table-column prop="address" label="鎵�瑙侀」缁撴灉鍊�"> + </el-table-column> + </el-table> + </div> + <div style="margin-top: 20px"> + <span>妫�鏌ュ尰鐢燂細</span> + <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"> + <el-button type="primary">鐢熸垚灏忕粨</el-button> + <el-button type="primary">淇濆瓨</el-button> + </div> + </div> </div> </el-drawer> @@ -337,6 +488,19 @@ addPicture, updatePureToneTest, } from "@/api/picture/pureToneTest"; +import { + getCustomer, + getOrder, + getReportToday, + getTobeToday, + getPieChart, + getChart, +} from "@/api/home"; +const echarts = require("echarts/lib/echarts"); +require("echarts/lib/component/title"); +require("echarts/lib/component/tooltip"); +require("echarts/lib/component/legend"); +require("echarts/lib/chart/pie"); import Public from "@/components/public"; export default { @@ -351,6 +515,43 @@ components: { Public }, data() { return { + value1:"", + tableData: [ + { + date: "1", + name: "鍙傝�冨��", + address: "鍙岃�虫甯稿惉鍔涙洸绾挎甯稿弬鑰冨��1", + }, + { + date: "2", + name: "鍙傝�冨��", + address: "鍙岃�虫甯稿惉鍔涙洸绾挎甯稿弬鑰冨��2", + }, + { + date: "3", + name: "寮傚父鍊�", + address: "鍙岃�虫甯稿惉鍔涙洸绾垮紓甯稿��1", + }, + { + date: "4", + name: "寮傚父鍊�", + address: "鍙岃�虫甯稿惉鍔涙洸绾垮紓甯稿��2", + }, + ], + textarea: "", + input: "", + min: "", + max: "", + Customer: "", + Order: "", + ReportToday: "", + TobeToday: "", + LineChart: [], + personYYNum: [], + reportNum: [], + teamYYNum: [], + PieChart: [], + PieChart2: [], drawer: false, topStyle: { transform: "" }, r_img: {}, @@ -407,8 +608,353 @@ }, created() { this.getList(); + }, methods: { + handleRowClick(selection){ + console.log(selection); + this.drawer = true; + this.getech(); + }, + getech() { + this.loading = true; + // 鏌ヨ浠婃棩鐧昏 + getCustomer().then((response) => { + this.Customer = response; + this.loading = false; + }); + // 鏌ヨ浠婃棩宸叉 + 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")); + + 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("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.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("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; + }); + }, // 榧犳爣杩涘叆鍘熷浘绌洪棿鍑芥暟 enterHandler() { // 灞傜僵鍙婃斁澶х┖闂寸殑鏄剧ず @@ -496,35 +1042,35 @@ this.handleQuery(); }, // 澶氶�夋閫変腑鏁版嵁 - handleSelectionChange(selection) { - this.drawer = true; - this.imgsrc = selection[0].picturePath; - this.tjNumber = selection[0].customer.tjNumber; - this.ids = selection.map((item) => item.id); - selection.forEach((element) => { - this.tableList = element.list; - if (this.tableList.length != 0) { - this.tableList.forEach((item) => { - this.form.fixedValue = item.fixedValue; - this.form.measuredValue = item.measuredValue; - }); - this.$nextTick(() => { - this.$refs.mu.toggleRowSelection(this.tableList[0], true); - }); - } else { - this.$refs.mu.clearSelection(); - } - }); - // this.tableList.forEach(item => { - // this.imgsrc = item.dctt - // }) - if (selection.length > 1) { - let del_row = selection.shift(); - this.$refs.tb.toggleRowSelection(del_row, false); //璁剧疆杩欎竴琛屽彇娑堥�変腑 - } - this.single = selection.length !== 1; - this.multiple = !selection.length; - }, + // handleSelectionChange(selection) { + // this.drawer = true; + // this.imgsrc = selection[0].picturePath; + // this.tjNumber = selection[0].customer.tjNumber; + // this.ids = selection.map((item) => item.id); + // selection.forEach((element) => { + // this.tableList = element.list; + // if (this.tableList.length != 0) { + // this.tableList.forEach((item) => { + // this.form.fixedValue = item.fixedValue; + // this.form.measuredValue = item.measuredValue; + // }); + // this.$nextTick(() => { + // this.$refs.mu.toggleRowSelection(this.tableList[0], true); + // }); + // } else { + // this.$refs.mu.clearSelection(); + // } + // }); + // // this.tableList.forEach(item => { + // // this.imgsrc = item.dctt + // // }) + // if (selection.length > 1) { + // let del_row = selection.shift(); + // this.$refs.tb.toggleRowSelection(del_row, false); //璁剧疆杩欎竴琛屽彇娑堥�変腑 + // } + // this.single = selection.length !== 1; + // this.multiple = !selection.length; + // }, // /** 鏂板鎸夐挳鎿嶄綔 */ // handleAdd() { // this.reset(); @@ -651,4 +1197,42 @@ float: left; position: relative; } +.tanchuangbox_left { + margin-top: 20px; + margin-left: 20px; + width: 50%; +} +.data-view { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 5px 15px; +} +#main { + padding: 10px; +} +.nums { + margin-left: 90px; + margin-bottom: 10px; +} +.nums_txt { + margin-right: 10px; +} +.tanchuangbox_left1 { + display: flex; +} +.tanchuangbox { + display: flex; +} +.tanchuangbox_right { + width: 50%; +} +.ss { + display: flex; + flex-direction: column; + margin-right: 10px; +} +.ss_txt { + width: 60px; +} </style> diff --git a/vue.config.js b/vue.config.js index 57f3239..3e59ffc 100644 --- a/vue.config.js +++ b/vue.config.js @@ -36,9 +36,9 @@ // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { //target: `https://ltpeis.xaltjdkj.cn:5501/prod-api/getInfo`, - target: `http://192.168.0.104:5011`, + // target: `http://192.168.0.104:5011`, // // target: `http://192.168.0.99:8080/ltkj-admin`, - // target: `https://ltpeis.xaltjdkj.cn:5011/ltkj-admin`, + target: `https://ltpeis.xaltjdkj.cn:5011/ltkj-admin`, // target: `http://10.168.0.9:5011`, changeOrigin: true, pathRewrite: { -- Gitblit v1.8.0