From 930b8403e74bdba2b7a8f3a38270a5227bf78995 Mon Sep 17 00:00:00 2001 From: zouyu <2723363702@qq.com> Date: 星期四, 24 八月 2023 17:54:45 +0800 Subject: [PATCH] modified: .env.development new file: src/api/chart/work/index.js renamed: src/api/home.js -> src/api/home/index.js modified: src/layout/components/Navbar.vue modified: src/router/index.js modified: src/views/CNAS/satisfactionSurveys/index.vue modified: src/views/chart/work/index.vue modified: src/views/home/index.vue --- .env.development | 2 src/api/chart/work/index.js | 36 +++ src/views/home/index.vue | 6 src/views/chart/work/index.vue | 417 ++++++++++++++++++++++++++++++++----- src/layout/components/Navbar.vue | 61 ++++ src/views/CNAS/satisfactionSurveys/index.vue | 105 ++++---- src/api/home/index.js | 0 src/router/index.js | 17 8 files changed, 507 insertions(+), 137 deletions(-) diff --git a/.env.development b/.env.development index ab9be2d..6ec8b12 100644 --- a/.env.development +++ b/.env.development @@ -2,4 +2,4 @@ ENV = 'development' # base api -VUE_APP_BASE_API = 'http://localhost:1234/' +VUE_APP_BASE_API = 'http://192.168.110.87:1234/' diff --git a/src/api/chart/work/index.js b/src/api/chart/work/index.js new file mode 100644 index 0000000..b948d37 --- /dev/null +++ b/src/api/chart/work/index.js @@ -0,0 +1,36 @@ +import request from '@/utils/request' + +//鑾峰彇璐d换浜洪」鐩暟缁熻 +export function getDutyMater(params) { + return request({ + url: '/work/dutyMater', + method: 'get', + params + }) +} + +//鑾峰彇璐d换浜哄強鏃剁巼 +export function getDutyTimely(params) { + return request({ + url: '/work/dutytimely', + method: 'get', + params + }) +} +//鑾峰彇鎵ц浜洪」鐩暟缁熻 +export function getExecuteMater(params) { + return request({ + url: '/work/executeMater', + method: 'get', + params + }) +} + +//鑾峰彇鎵ц浜哄強鏃剁巼 +export function getExecuteTimely(params) { + return request({ + url: '/work/executetimely', + method: 'get', + params + }) +} \ No newline at end of file diff --git a/src/api/home.js b/src/api/home/index.js similarity index 100% rename from src/api/home.js rename to src/api/home/index.js diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue index 41a57c4..9f1ae3e 100644 --- a/src/layout/components/Navbar.vue +++ b/src/layout/components/Navbar.vue @@ -6,25 +6,41 @@ <div class="right-menu"> <div class="right-serves"> - <i class="el-icon-setting" /> - <i class="el-icon-bell" /> - <i class="el-icon-time" /> + <!-- <i class="el-icon-setting" /> --> + + <p @click="toMessage"><el-badge is-dot class="el-icon-bell message-icon"></el-badge></p> + <!-- <i class="el-icon-time" /> --> </div> <el-dropdown class="avatar-container" trigger="click"> <div class="avatar-wrapper"> <a class="user-avatar">{{ '涓ぉ'.slice(0,1) }}</a> </div> <el-dropdown-menu slot="dropdown" class="user-dropdown"> - <router-link to="/"> - <el-dropdown-item> - 淇敼瀵嗙爜 + <el-dropdown-item > + <p @click="dialogFormVisible = true">淇敼瀵嗙爜</p> </el-dropdown-item> - </router-link> <el-dropdown-item divided @click.native="logout"> <span style="display:block;">閫�鍑虹櫥褰�</span> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> + <el-dialog title="淇敼瀵嗙爜" :visible.sync="dialogFormVisible" :append-to-body="true"> + <el-form :model="form"> + <el-form-item label="鏃у瘑鐮�" :label-width="formLabelWidth"> + <el-input v-model="form.oldPwd" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="鏂板瘑鐮�" :label-width="formLabelWidth"> + <el-input maxlength="30" show-word-limit v-model="form.newPwd" autocomplete="off"></el-input> + </el-form-item> + <el-form-item label="纭瀵嗙爜" :label-width="formLabelWidth"> + <el-input maxlength="30" show-word-limit v-model="form.confirmPwd" autocomplete="off"></el-input> + </el-form-item> + </el-form> + <div slot="footer" class="dialog-footer"> + <el-button @click="reset()">鍙� 娑�</el-button> + <el-button type="primary" @click="editPwd">纭� 瀹�</el-button> + </div> + </el-dialog> </div> </div> </template> @@ -35,6 +51,17 @@ // import Hamburger from '@/components/Hamburger' export default { + data(){ + return { + form: { + oldPwd: '', + newPwd: '', + confirmPwd: '' + }, + dialogFormVisible: false, + formLabelWidth: '120px' + } + }, components: { // Breadcrumb, // Hamburger @@ -46,6 +73,18 @@ ]) }, methods: { + reset(){ + this.dialogFormVisible = false; + this.form.oldPwd = ''; + this.form.newPwd = ''; + this.form.confirmPwd = ''; + }, + toMessage(){ + this.$router.push('/message/toDo'); + }, + editPwd(){ + console.log(1); + }, toggleSideBar() { this.$store.dispatch('app/toggleSideBar') }, @@ -67,7 +106,13 @@ border-bottom: 1px solid #f0f2f5; // box-shadow: 0 0 0.857143rem rgba(0, 0, 0, 0.12); // box-shadow: 0 1px 4px rgba(0,21,41,.08); - + .message-icon{ + margin-right: 10px; + cursor: pointer; + } + .v-modal{ + z-index: 8; + } .hamburger-container { line-height: 46px; height: 100%; diff --git a/src/router/index.js b/src/router/index.js index d21d534..f843389 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -418,22 +418,23 @@ { path: '/message', component: Layout, - redirect: '/message/message', + redirect: '/message/toDo', name: 'Message', meta: { title: '娑堟伅寰呭姙', icon: 'el-icon-s-help' }, children: [ + { + path: 'toDo', + name: 'ToDo', + component: () => import('@/views/message/toDo/index'), + meta: { title: '鎴戠殑寰呭姙', icon: 'tree' } + }, { path: 'message', name: 'Message', + // hidden: true, component: () => import('@/views/message/message/index'), - meta: { title: '鎴戠殑娑堟伅', icon: 'table' } + // meta: { title: '鎴戠殑娑堟伅', icon: 'table' } }, - { - path: 'toDo', - name: 'ToDo', - component: () => import('@/views/message/toDo/index'), - meta: { title: '鎴戠殑寰呭姙', icon: 'tree' } - } ] }, { diff --git a/src/views/CNAS/satisfactionSurveys/index.vue b/src/views/CNAS/satisfactionSurveys/index.vue index f1e2efb..05f49fe 100644 --- a/src/views/CNAS/satisfactionSurveys/index.vue +++ b/src/views/CNAS/satisfactionSurveys/index.vue @@ -482,74 +482,73 @@ </script> <style lang="scss" scoped> -.top-bar { - margin: -25px -15px; - background: #fff; - display: flex; - justify-content: space-between; - padding: 5px 24px 0px 24px; +.content-main { + .el-form .el-form-item .el-form-item__content { + width: 100% !important; + } - .input-form { - width: 800px; - } - - .el-dropdown-link { - cursor: pointer; - color: #409EFF !important; - } - - .el-icon-arrow-down { - font-size: 12px !important; - } - - -} - -.library-table { - background-color: #fff; - flex: 1; - margin: 0px -15px; - margin-top: 40px; - display: flex; - flex-direction: column; - - .table-header { - padding: 20px; + .top-bar { + margin: -25px -15px; + background: #fff; display: flex; justify-content: space-between; + padding: 5px 24px 0px 24px; - .el-form-item { - margin-bottom: 30px !important; + .input-form { + width: 800px; } + + .el-dropdown-link { + cursor: pointer; + color: #409EFF !important; + } + + .el-icon-arrow-down { + font-size: 12px !important; + } + + } - .table-box { - padding: 0px 20px; - margin-top: 20px; + .library-table { + background-color: #fff; flex: 1; - background: #fff; + margin: 0px -15px; + margin-top: 40px; display: flex; flex-direction: column; - >div:nth-child(2) { + .table-header { + padding: 20px; display: flex; - justify-content: end; - margin: 10px 0; + justify-content: space-between; + + .el-form-item { + margin-bottom: 30px !important; + } } - } -} + .table-box { + padding: 0px 20px; + margin-top: 20px; + flex: 1; + background: #fff; + display: flex; + flex-direction: column; -.table, -tr, -td { - padding: 10px; -} -</style> -<style > -.content-main { - .el-form .el-form-item .el-form-item__content { - width: 100% !important; + >div:nth-child(2) { + display: flex; + justify-content: end; + margin: 10px 0; + } + + } + } + + .table, + tr, + td { + padding: 10px; } } </style> diff --git a/src/views/chart/work/index.vue b/src/views/chart/work/index.vue index 59b9b32..e04f144 100644 --- a/src/views/chart/work/index.vue +++ b/src/views/chart/work/index.vue @@ -4,27 +4,31 @@ <el-row :gutter="10"> <el-col :span="24"> <el-card> - <el-form :inline="true" :model="formInline" class="demo-form-inline"> - <el-form-item> + <el-form :rules="rules" ref="formInline" :inline="true" + :model="formInline" class="demo-form-inline"> + <el-form-item prop="date"> <p><span>*</span>妫�娴嬫棩鏈�:</p> <el-date-picker - v-model="dateTime" + v-model="formInline.date" + format="yyyy-MM-dd" + value-format="yyyy-MM-dd" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡"> </el-date-picker> </el-form-item> - <el-form-item> + <el-form-item prop="type"> <p><span>*</span>妫�楠岀被鍨�:</p> - <el-select v-model="formInline.region" placeholder="閲囪喘鍏ュ簱"> - <el-option label="鍖哄煙涓�" value="shanghai"></el-option> - <el-option label="鍖哄煙浜�" value="beijing"></el-option> + <el-select v-model="formInline.type" placeholder="閲囪喘鍏ュ簱"> + <el-option label="鍘熸潗鏂�" value="0"></el-option> + <el-option label="鎴愬搧" value="1"></el-option> + <el-option label="濮旀墭鍝�" value="2"></el-option> </el-select> </el-form-item> <el-form-item class="buttons"> - <el-button>娓呯┖</el-button> - <el-button type="primary" @click="onSubmit">鏌ヨ</el-button> + <el-button @click="resetForm('formInline')">娓呯┖</el-button> + <el-button type="primary" @click="onSubmit('formInline')">鏌ヨ</el-button> </el-form-item> </el-form> </el-card> @@ -48,59 +52,105 @@ <el-col :span="12"> <el-card> <p>璐熻矗浜哄強鏃剁巼</p> - <div id="leaderTimly" style="width:100%;height:400px;"></div> + <div id="leaderTimely" style="width:100%;height:400px;"></div> </el-card> </el-col> <el-col :span="12"> <el-card> <p>瀹為獙鍛樺強鏃剁巼</p> - <div id="testerTimly" style="width:100%;height:400px;"></div> + <div id="testerTimely" style="width:100%;height:400px;"></div> </el-card> </el-col> </el-row> </div> - <div class="work-foot"></div> + <div class="work-foot"> + <el-button type="primary">鏁版嵁瀵煎嚭</el-button> + </div> </div> </template> <script> import * as echarts from 'echarts'; +import { getDutyMater,getDutyTimely,getExecuteMater,getExecuteTimely +} from '@/api/chart/work/index' export default { data() { return { formInline: { - user: '', - region: '' + date: null, + type: '' }, - dateTime: '', + rules: { + type: [ + { required: true, message: '璇烽�夋嫨妫�娴嬬被鍨�', trigger: 'change' } + ], + date: [ + {required: true, message: '璇烽�夋嫨鏃ユ湡', trigger: 'change' } + ] + }, } }, mounted(){ - this.initLeaderStatiChart('leaderStati'); - this.initLeaderTimlyChart(); - this.initLeaderStatiChart('testerStati'); - this.initTesterTimlyChart(); + // this.initLeaderStatiChart(""); + this.initLeaderTimelyChart("leaderTimely"); + this.initTesterStatiChart("testerStati"); + this.initTesterTimelyChart("testerTimely"); }, methods: { - onSubmit() { - console.log('submit!'); + async queryData(){ + let date = this.formInline.date; + let obj = { + startTime : date[0], + endTime : date[1], + type : this.formInline.type + } + const dutyMater = await getDutyMater(obj); + const dutyTimely = await getDutyTimely(obj); + const executeMater = await getExecuteMater(obj); + const executeTimely = await getExecuteTimely(obj); + console.log("dm",dutyMater.data); + console.log("dt",dutyTimely.data); + console.log("em",executeMater.data.length); + console.log("et",executeTimely.data); + this.initLeaderStatiChart("leaderStati",dutyMater.data); + this.initLeaderTimelyChart("leaderTimely",dutyTimely.data); + this.initTesterStatiChart("testerStati",executeMater.data); + this.initTesterTimelyChart("testerTimely",executeTimely.data); }, - initLeaderStatiChart(id){ + onSubmit(formName) { + this.$refs[formName].validate((valid) => { + if (valid) { + this.queryData(); + } else { + console.log('error submit!!'); + return false; + } + }); + }, + resetForm(formName) { + this.formInline.date = null; + this.formInline.type = null; + this.$refs[formName].resetFields(); + }, + initLeaderStatiChart(id,dutyMater){ var chartDom = document.getElementById(id); var myChart = echarts.init(chartDom); + window.addEventListener('resize', function() { + myChart.resize(); + }); var option; - + let max = 0; let xAxisData = []; let data1 = []; let data2 = []; - let data3 = []; - let data4 = []; - for (let i = 0; i < 10; i++) { - xAxisData.push('Class' + i); - data1.push(+(Math.random() * 2).toFixed(2)); - data2.push(+(Math.random() * 5).toFixed(2)); - data3.push(+(Math.random() + 0.3).toFixed(2)); - data4.push(+Math.random().toFixed(2)); + for(let i=0;i<dutyMater.length;i++){ + xAxisData.push(dutyMater[i].name); + data1.push(dutyMater[i].finsh); + data2.push(dutyMater[i].unfinish); + let sum = dutyMater[i].finsh + dutyMater[i].unfinish; + if( sum > max ){ + max = sum; + } } var emphasisStyle = { itemStyle: { @@ -110,7 +160,7 @@ }; option = { legend: { - data: ['bar', 'bar2'], + data: ['宸插畬鎴�', '鏈畬鎴�'], left: 'center' }, tooltip: {}, @@ -121,59 +171,282 @@ splitLine: { show: false }, splitArea: { show: false } }, - yAxis: {}, + yAxis: { + min: 0, + max: max, + interval: max, + }, grid: { bottom: 100 }, series: [ { - name: 'bar', + name: '宸插畬鎴�', + barWidth: '20%', type: 'bar', stack: 'one', emphasis: emphasisStyle, - data: data1 + data: data1, + itemStyle: { + color: '#80d9c5' + } }, { - name: 'bar2', + name: '鏈畬鎴�', + barWidth: '20%', type: 'bar', stack: 'one', emphasis: emphasisStyle, - data: data2 + data: data2, + itemStyle: { + color: '#f2d09d' + }, } ] }; - myChart.on('brushSelected', function (params) { - var brushed = []; - var brushComponent = params.batch[0]; - for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) { - var rawIndices = brushComponent.selected[sIdx].dataIndex; - brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', ')); + option && myChart.setOption(option); + }, + initTesterStatiChart(id,executeMater){ + console.log("qqq----",executeMater); + var chartDom = document.getElementById(id); + var myChart = echarts.init(chartDom); + window.addEventListener('resize', function() { + myChart.resize(); + }); + var option; + + let xAxisData = []; + let data1 = []; + let data2 = []; + // for(let i=0;i<executeMater.length;i++){ + // xAxisData.push(executeMater[i].name); + // data1.push(executeMater[i].finsh); + // data2.push(executeMater[i].unfinsh); + // } + var emphasisStyle = { + itemStyle: { + shadowBlur: 10, + shadowColor: 'rgba(0,0,0,0.3)' } - myChart.setOption({ - title: { - backgroundColor: '#333', - text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'), - bottom: 0, - right: '10%', - width: 100, - textStyle: { - fontSize: 12, - color: '#fff' + }; + option = { + legend: { + data: ['鏁版嵁1', '鏁版嵁2'], + left: 'center' + }, + tooltip: {}, + xAxis: { + data: xAxisData, + name: '濮撳悕', + axisLine: { onZero: true }, + splitLine: { show: false }, + splitArea: { show: false } + }, + yAxis: { + min: 0, + max: 60, + interval: 10, + }, + grid: { + bottom: 100 + }, + series: [ + { + name: '鏁版嵁1', + type: 'bar', + stack: 'one', + emphasis: emphasisStyle, + data: data1, + itemStyle:{ + color: "#d97559" + } + }, + { + name: '鏁版嵁2', + type: 'bar', + stack: 'one', + emphasis: emphasisStyle, + data: data2, + itemStyle:{ + color: "#e4c477" } } - }); + ] + }; + option && myChart.setOption(option); + }, + initLeaderTimelyChart(id,dutyTimely){ + var chartDom = document.getElementById(id); + var myChart = echarts.init(chartDom); + window.addEventListener('resize', function() { + myChart.resize(); }); + var option; + option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['鏍峰搧鏁�', '瀹屾垚鍙婃椂鐜�'] + }, + xAxis: [ + { + name: '濮撳悕', + type: 'category', + data: ['娌愮',], + axisPointer: { + type: 'shadow' + }, + itemStyle: { + top: '20px' + } + } + ], + yAxis: [ + { + type: 'value', + name: '鏁伴噺', + min: 0, + max: 10, + interval: 1, + axisLabel: { + formatter: '{value}' + } + }, + { + type: 'value', + name: '鐧惧垎姣�', + min: 0, + max: 100, + interval: 10, + axisLabel: { + formatter: '{value} %' + } + } + ], + series: [ + { + name: '鏍峰搧鏁�', + type: 'bar', + barWidth: '20%', + tooltip: { + valueFormatter: function (value) { + return value; + } + }, + data: [4.0], + itemStyle: { + color: '#9fceff' + } + }, + { + name: '瀹屾垚鍙婃椂鐜�', + type: 'line', + tooltip: { + valueFormatter: function (value) { + return value + ' %'; + } + }, + data: [7.5], + itemStyle: { + color: '#d2eec5' + } + }, + ] + }; option && myChart.setOption(option); }, - initTesterStatiChart(){ + initTesterTimelyChart(id,executeTimely){ + var chartDom = document.getElementById(id); + var myChart = echarts.init(chartDom); + window.addEventListener('resize', function() { + myChart.resize(); + }); + var option; + option = { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999' + } + } + }, + legend: { + data: ['椤圭洰鏁�', '瀹屾垚鍙婃椂鐜�'], + show: true + }, + xAxis: [ + { + type: 'category', + data: ["","",""], + axisPointer: { + type: 'shadow' + } + } + ], + yAxis: [ + { + type: 'value', + name: '', + min: 0, + max: 50, + interval: 5, + axisLabel: { + formatter: '{value}' + } + }, + { + type: 'value', + name: '', + min: 0, + max: 100, + interval: 10, + axisLabel: { + formatter: '{value} %' + } + } + ], + series: [ + { + name: '椤圭洰鏁�', + type: 'bar', + tooltip: { + valueFormatter: function (value) { + return value ; + } + }, + data: [2.0, 4.9, 7.0], + itemStyle: { + color: '#5087ec' + } + }, + { + name: '瀹屾垚鍙婃椂鐜�', + type: 'line', + yAxisIndex: 1, + tooltip: { + valueFormatter: function (value) { + return value + ' %'; + } + }, + data: [2.0, 2.2, 3.3], + itemStyle: { + color: '#68bbc4' + } + } + ] + }; - }, - initLeaderTimlyChart(){ - - }, - initTesterTimlyChart(){ - + option && myChart.setOption(option); }, } } @@ -186,7 +459,7 @@ padding: 0; .work-head{ width:94%; - height:100; + height:100px; margin: 5px 10px; position: fixed; z-index: 10; @@ -203,16 +476,32 @@ } } .buttons{ - margin: 40px 0px 0px 900px; + margin: 40px 0px 0px 50%; } } } .work-center{ - margin: 0px 0px 5px 10px; + margin: 0px 0px 150px 10px; padding: 18vh 0px 5px 0px; .el-card{ margin: 5px 0px; height:500px; + p{ + font-size: 22px; + margin: 0; + padding: 0; + } + } + } + .work-foot{ + width:100%; + height:50px; + position: fixed; + bottom: 0px; + z-index: 10; + text-align: right; + .el-button{ + margin-right: 7%; } } } diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 9173448..d7201cd 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -71,7 +71,7 @@ </el-col> <el-col :span="12"> <el-card :body-style="{ padding: '0px',height:'25vh' }"> - <p style="z-index: 10;position: absolute;font-size: 10px;margin-left: 10px;color: #ff0000;">鏈楠�</p> + <p style="z-index: 2;position: absolute;font-size: 10px;margin-left: 10px;color: #ff0000;">鏈楠�</p> <el-table :data="uncheckedData" :cell-style="cell" @@ -105,7 +105,7 @@ import * as echarts from 'echarts'; import { getVerifiedTop3,getUncheckedTop4,getMatAndFinshQualified, getCheckAndProjectNum,getTurno -} from '@/api/home' +} from '@/api/home/index' export default { name: "home", data() { @@ -113,7 +113,7 @@ insNum: 0, insUnNum: 0, insproNum: 0, - insproUnNum: 1110, + insproUnNum: 0, radioType: "鏈勾", imgSrc: require("@/assets/404_images/bg.png"), verifiedData: new Array(), -- Gitblit v1.9.3