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 | 688 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 607 insertions(+), 81 deletions(-) diff --git a/src/views/picture/music/index.vue b/src/views/picture/music/index.vue index a9b663e..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> @@ -50,16 +52,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" @@ -72,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" /> --> @@ -139,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" @@ -226,109 +234,303 @@ 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" + :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 - @keyup.enter.native="handleQuery" style="width: 150px" + disabled /> </el-form-item> <el-form-item label="鍗曚綅宸ョ" prop="name"> <el-input v-model="queryParams.name" placeholder="璇疯緭鍏ュ崟浣嶅伐绉�" - clearable - @keyup.enter.native="handleQuery" + 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 - @keyup.enter.native="handleQuery" + disabled style="width: 150px" /> </el-form-item> - <el-form-item label="鎬у埆" prop="name"> - <el-input - v-model="queryParams.name" - placeholder="璇疯緭鍏ユ�у埆" - clearable - @keyup.enter.native="handleQuery" + <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 - @keyup.enter.native="handleQuery" + 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 - @keyup.enter.native="handleQuery" + 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 - @keyup.enter.native="handleQuery" + disabled style="width: 150px" /> </el-form-item> - <el-form-item label="浣撴绫诲瀷" prop="name"> - <el-input - v-model="queryParams.name" - placeholder="璇疯緭鍏ヤ綋妫�绫诲瀷" - clearable - @keyup.enter.native="handleQuery" + <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 - @keyup.enter.native="handleQuery" + 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> + <div class="tanchuangbox_left1"> + <div> + <div class="nums"> + <span + class="nums_txt" + v-for="(item, index) in yList" + :key="index" + >{{ item }}</span + > + </div> + <el-form + :model="queryParams" + ref="queryForm" + size="small" + :inline="true" + v-show="showSearch" + label-width="90px" + > + <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" /> + <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" + v-for="(item, index) in yList" + :key="index" + >{{ item }}</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> + <span>鑱屼笟鍙�</span> + <div style="width: 100%; min-height: 300px"></div> + </div> + <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> <Public ref="aaa" @add="handleChanges" /> </div> </template> - + <script> import { getList, @@ -337,6 +539,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 { @@ -346,11 +561,79 @@ "sys_dict_specimen", "dict_user_marry", "dict_user_national", + "dict_tjtype", ], name: "Picture", components: { Public }, data() { return { + 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", + name: "鍙傝�冨��", + address: "鍙岃�虫甯稿惉鍔涙洸绾挎甯稿弬鑰冨��1", + }, + { + date: "2", + name: "鍙傝�冨��", + address: "鍙岃�虫甯稿惉鍔涙洸绾挎甯稿弬鑰冨��2", + }, + { + date: "3", + name: "寮傚父鍊�", + address: "鍙岃�虫甯稿惉鍔涙洸绾垮紓甯稿��1", + }, + { + date: "4", + name: "寮傚父鍊�", + address: "鍙岃�虫甯稿惉鍔涙洸绾垮紓甯稿��2", + }, + ], + textarea: "", + input: "", + min: "", + max: "", + Order: "", + ReportToday: "", + TobeToday: "", + youeryuanshi: [], + personYYNum: [], + reportNum: [], + youeryuanshi1: [], + PieChart: [], + PieChart2: [], drawer: false, topStyle: { transform: "" }, r_img: {}, @@ -403,12 +686,217 @@ dataobj: {}, // 琛ㄥ崟鏍¢獙 rules: {}, + bgcoun: "", + bgcoun1: "", + bgcoun2: "", + bgcoun3: "", + bgcoun4: "", + bgcoun5: "", }; }, created() { this.getList(); }, + mounted() { + this.$nextTick(() => { + this.$refs.inputName.focus(); + }); + }, 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(); + }, + 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: "宸﹁�冲師濮嬪惉鍔�", + }, + tooltip: { + trigger: "axis", + }, + // legend: { + // data: ["姣忔棩浣撴鐧昏鏁�", "姣忔棩鍥綋鐧昏鏁�", "姣忔棩鍙戝竷鎶ュ憡鏁�"], + // }, + grid: { + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + toolbox: { + feature: { + saveAsImage: {}, + }, + }, + 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", + }, + series: [ + { + data: this.youeryuanshi1, + name: "鍙宠�冲師濮嬪惉鍔�", + type: "line", + symbol: "circle", //鎷愮偣鐨勫舰鐘� + symbolSize: 10, //鎷愮偣澶у皬 + 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) => { + // this.zuoeryuanshiList.forEach((item) => { + // this.LineCharts.push(item.numb); + // this.teamYYNums.push(item.bgcoun); + // }); + // let myChart1 = this.$echarts.init(document.getElementById("main1")); + + // 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); + + // this.loading = false; + // }); + }, // 榧犳爣杩涘叆鍘熷浘绌洪棿鍑芥暟 enterHandler() { // 灞傜僵鍙婃斁澶х┖闂寸殑鏄剧ず @@ -496,35 +984,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(); @@ -584,7 +1072,7 @@ }, }; </script> - + <style> #table .el-table__header-wrapper .el-checkbox { display: none; @@ -651,4 +1139,42 @@ float: left; position: relative; } -</style> +.tanchuangbox_left { + margin-top: 20px; + margin-left: 20px; + width: 60%; +} +.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: 18px; +} +.tanchuangbox_left1 { + display: flex; +} +.tanchuangbox { + display: flex; +} +.tanchuangbox_right { + width: 40%; +} +.ss { + display: flex; + flex-direction: column; + margin-right: 10px; +} +.ss_txt { + width: 60px; +} +</style> \ No newline at end of file -- Gitblit v1.8.0