From 9c331d555ce7e82b4226556770a81c444442bb37 Mon Sep 17 00:00:00 2001
From: unknown <280848880@qq.com>
Date: 星期二, 14 十一月 2023 08:58:08 +0800
Subject: [PATCH] web苏州:1.3级导航样式修改 2.区域巡检提测 3.消耗统计提测
---
web/src/views/GoodManage/CostStatistics/EnergyCost.vue | 62
web/src/assets/icon/icon7.png | 0
web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue | 6
web/src/views/GoodManage/CostStatistics/RebarCost.vue | 966 +++++++-------
web/src/assets/icon/icon2.png | 0
web/src/views/SecureManage/RiskGrad/DangerInform.vue | 6
web/src/assets/icon/icon0.png | 0
web/src/views/GoodManage/CostStatistics/AuxiliaryCost.vue | 957 +++++++-------
web/src/assets/icon/icon5.png | 0
web/src/plugins/directive.js | 32
web/src/api/modules/safety.js | 19
web/src/assets/icon/icon6.png | 0
web/src/components/element/Form.vue | 29
web/src/views/SecureManage/RiskGrad/AreaPolling.vue | 409 ++++++
web/src/assets/icon/icon3.png | 0
web/src/assets/icon/icon1.png | 0
web/src/assets/icon/icon4.png | 0
web/src/views/DuctpiecePLM/PlanManage/DuctPlan.vue | 8
web/src/views/LayoutIndex/components/LayoutAside.vue | 196 +-
web/src/assets/icon/icon8.png | 0
web/src/views/GoodManage/CostStatistics/RawCost.vue | 909 +++++++-------
web/src/views/DuctpiecePLM/PlanManage/DuctForward.vue | 8
22 files changed, 2,038 insertions(+), 1,569 deletions(-)
diff --git a/web/src/api/modules/safety.js b/web/src/api/modules/safety.js
index fe7ff49..28874ff 100644
--- a/web/src/api/modules/safety.js
+++ b/web/src/api/modules/safety.js
@@ -233,6 +233,14 @@
axios.post('/secure/tRegionWarranty/update', params),
delete: params =>
axios.get('/secure/tRegionWarranty/delete', { params }),
+ },
+ // 区域巡检
+ polling: {
+ getLists: params =>
+ axios.post('/secure/regioninspection/selectPageList', params),
+ insert: params => axios.post('/secure/regioninspection/insertAndUpdate', params),
+ update: params => axios.post('/secure/regioninspection/insertAndUpdate', params),
+ delete: params => axios.get('/secure/regioninspection/delete', { params })
}
},
/**
@@ -266,17 +274,6 @@
getDetailWarning: params =>
axios.post('/materials/helmet/helmetReportUser', params),
},
- // 区域包保
- allocation : {
- getLists: params =>
- axios.post('/secure/tRegionWarranty/findAll', params),
- insert: params =>
- axios.post('/secure/tRegionWarranty/insert', params),
- update: params =>
- axios.post('/secure/tRegionWarranty/update', params),
- delete: params =>
- axios.get('/secure/tRegionWarranty/delete', { params }),
- }
},
diff --git a/web/src/assets/icon/icon0.png b/web/src/assets/icon/icon0.png
new file mode 100644
index 0000000..23b1f8a
--- /dev/null
+++ b/web/src/assets/icon/icon0.png
Binary files differ
diff --git a/web/src/assets/icon/icon1.png b/web/src/assets/icon/icon1.png
new file mode 100644
index 0000000..cb18a2d
--- /dev/null
+++ b/web/src/assets/icon/icon1.png
Binary files differ
diff --git a/web/src/assets/icon/icon2.png b/web/src/assets/icon/icon2.png
new file mode 100644
index 0000000..6583a24
--- /dev/null
+++ b/web/src/assets/icon/icon2.png
Binary files differ
diff --git a/web/src/assets/icon/icon3.png b/web/src/assets/icon/icon3.png
new file mode 100644
index 0000000..87dab8b
--- /dev/null
+++ b/web/src/assets/icon/icon3.png
Binary files differ
diff --git a/web/src/assets/icon/icon4.png b/web/src/assets/icon/icon4.png
new file mode 100644
index 0000000..dbbb19e
--- /dev/null
+++ b/web/src/assets/icon/icon4.png
Binary files differ
diff --git a/web/src/assets/icon/icon5.png b/web/src/assets/icon/icon5.png
new file mode 100644
index 0000000..c17a1af
--- /dev/null
+++ b/web/src/assets/icon/icon5.png
Binary files differ
diff --git a/web/src/assets/icon/icon6.png b/web/src/assets/icon/icon6.png
new file mode 100644
index 0000000..b1347f5
--- /dev/null
+++ b/web/src/assets/icon/icon6.png
Binary files differ
diff --git a/web/src/assets/icon/icon7.png b/web/src/assets/icon/icon7.png
new file mode 100644
index 0000000..1440b53
--- /dev/null
+++ b/web/src/assets/icon/icon7.png
Binary files differ
diff --git a/web/src/assets/icon/icon8.png b/web/src/assets/icon/icon8.png
new file mode 100644
index 0000000..144ceb3
--- /dev/null
+++ b/web/src/assets/icon/icon8.png
Binary files differ
diff --git a/web/src/components/element/Form.vue b/web/src/components/element/Form.vue
index a955305..8cbcfca 100644
--- a/web/src/components/element/Form.vue
+++ b/web/src/components/element/Form.vue
@@ -2,14 +2,11 @@
<div class="role">
<!-- https://juejin.cn/post/7042597964618924069?searchId=202310071305486BA29870D97939288832#heading-8 -->
<!-- https://juejin.cn/post/7139110255748710436?searchId=2023092815420483B1983D44854DBE6608#comment -->
- <el-form
- ref="ruleForm"
- class="rule-form"
- :model="formConfig.formModels"
- :rules="formConfig.formRules"
+ <el-form ref="ruleForm" class="rule-form" :model="formConfig.formModels" :rules="formConfig.formRules"
:label-width="formConfig.labelWidth || 'auto'">
+
<el-row>
- <el-col v-for="item in formConfig.formItems" :key="item.label" :span="item.span || 24">
+ <el-col v-for="item in formItems" :key="item.label" :span="item.span || 24">
<el-form-item :label="item.label" :style="formConfig.itemStyle || null">
<template v-if="item.type === 'input' || item.type === 'password'">
@@ -17,10 +14,14 @@
:show-password="item.type === 'password'"></el-input>
</template>
+ <template v-else-if="item.type === 'textarea'">
+ <el-input type="textarea" :placeholder="item.placeholder || `请输入${item.label}`"></el-input>
+ </template>
+
<template v-else-if="item.type === 'select'">
- <el-select :placeholder="item.placeholder || `请选择${item.label}`">
- <el-option v-for="option in item.options" :key="option.label" :label="option.label"
- :value="option.value"></el-option>
+ <el-select v-model="formConfig.formModels.realNames" :placeholder="item.placeholder || `请选择${item.label}`">
+ <el-option v-for="option in item.options" :key="option.id" :label="option.label"
+ :value="option.id"></el-option>
</el-select>
</template>
@@ -31,19 +32,25 @@
</el-form-item>
</el-col>
</el-row>
+
</el-form>
</div>
</template>
<script>
export default {
+ name: "cForm",
data() {
return {}
},
props: {
formConfig: {
type: Object,
- default: () => ({})
- }
+ default: () => { }
+ },
+ formItems: {
+ type: Array,
+ default: () => []
+ },
}
}
</script>
diff --git a/web/src/plugins/directive.js b/web/src/plugins/directive.js
index 08742f4..ded1455 100644
--- a/web/src/plugins/directive.js
+++ b/web/src/plugins/directive.js
@@ -1,13 +1,19 @@
-import Vue from 'vue'
-import { buttonPinia } from '@/pinia/index'
-
-Vue.directive('permission', {
- inserted: (el, binding) => {
- const { value } = binding
- const pinia = buttonPinia()
- const piniaBtns = pinia.$state.buttonInfo
- if (value && !piniaBtns.includes(value)) {
- el.parentNode.removeChild(el)
- }
- }
-})
+import Vue from 'vue'
+import { buttonPinia } from '@/pinia/index'
+
+Vue.directive('permission', {
+ inserted: (el, binding) => {
+ const { value } = binding
+ if (!value) return
+
+ const pinia = buttonPinia()
+ const piniaBtns = pinia.$state.buttonInfo
+ if (piniaBtns.includes(value)) {
+ value === 'insert' && (el.className += ' search_btn')
+ value === 'update' && (el.className += ' table_btn')
+ value === 'delete' && (el.className += ' delete_btn')
+ } else {
+ el.parentNode.removeChild(el)
+ }
+ }
+})
diff --git a/web/src/views/DuctpiecePLM/PlanManage/DuctForward.vue b/web/src/views/DuctpiecePLM/PlanManage/DuctForward.vue
index e8eff25..12dfe64 100644
--- a/web/src/views/DuctpiecePLM/PlanManage/DuctForward.vue
+++ b/web/src/views/DuctpiecePLM/PlanManage/DuctForward.vue
@@ -84,7 +84,13 @@
<el-table-column prop="checkTime" label="质检时间" align="center" width="160"></el-table-column>
<el-table-column prop="groupName" label="生产班组" align="center"></el-table-column>
<el-table-column prop="proName" label="项目" align="center" width="250" show-overflow-tooltip></el-table-column>
- <el-table-column prop="checkResult" label="质量标注" align="center"></el-table-column>
+ <el-table-column label="质量标注" align="center">
+ <template #default="{ row }">
+ <div>
+ {{ row.checkResult == 0 ? '未质检' : row.checkResult == 1 ? '合格' : row.checkResult == 2 ? '不合格' : row.checkResult == 3 ? '报废' : ''}}
+ </div>
+ </template>
+ </el-table-column>
</el-table>
</div>
<div class="bear_footer">
diff --git a/web/src/views/DuctpiecePLM/PlanManage/DuctPlan.vue b/web/src/views/DuctpiecePLM/PlanManage/DuctPlan.vue
index 513539b..23e8f7a 100644
--- a/web/src/views/DuctpiecePLM/PlanManage/DuctPlan.vue
+++ b/web/src/views/DuctpiecePLM/PlanManage/DuctPlan.vue
@@ -97,7 +97,13 @@
<el-table-column prop="checkTime" label="质检时间" align="center" width="160"></el-table-column>
<el-table-column prop="groupName" label="生产班组" align="center" ></el-table-column>
<el-table-column prop="proName" label="项目" align="center" width="250" show-overflow-tooltip></el-table-column>
- <el-table-column prop="checkResult" label="质量标注" align="center" ></el-table-column>
+ <el-table-column label="质量标注" align="center" >
+ <template #default="{ row }">
+ <div>
+ {{ row.checkResult == 0 ? '未质检' : row.checkResult == 1 ? '合格' : row.checkResult == 2 ? '不合格' : row.checkResult == 3 ? '报废' : ''}}
+ </div>
+ </template>
+ </el-table-column>
</el-table>
</div>
<div class="bear_footer">
diff --git a/web/src/views/GoodManage/CostStatistics/AuxiliaryCost.vue b/web/src/views/GoodManage/CostStatistics/AuxiliaryCost.vue
index 720fd67..14bc788 100644
--- a/web/src/views/GoodManage/CostStatistics/AuxiliaryCost.vue
+++ b/web/src/views/GoodManage/CostStatistics/AuxiliaryCost.vue
@@ -1,478 +1,479 @@
-<template>
- <div class="main">
- <div class="main_header">
- <div class="header_item">
- <span class="header_label">物品名称：</span>
- <el-select v-model="search.steelId" placeholder="请选择物品名称" clearable>
- <el-option
- v-for="item in optionAuxiliary"
- :key="item.assistId"
- :label="item.assistName+'-'+item.assistModel"
- :value="item.assistId">
- </el-option>
- </el-select>
- </div>
- <div class="header_item">
- <el-radio-group v-model="tabPosition" @input="timesChange">
- <el-radio-button label="day">日</el-radio-button>
- <el-radio-button label="month">月</el-radio-button>
- </el-radio-group>
- </div>
- <div class="header_item" v-if="showTimes">
- <span class="header_label">选择时间：</span>
- <el-date-picker
- v-model="search.dayData"
- :picker-options="pickerOptionsDay"
- :clearable="false"
- type="daterange"
- value-format="yyyy-MM-dd"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="header_item" v-if="!showTimes">
- <span class="header_label">选择月份：</span>
- <el-date-picker
- v-model="search.monthData"
- :picker-options="pickerOptionsMonth"
- :clearable="false"
- type="monthrange"
- value-format="yyyy-MM"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="header_item">
- <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
- <el-button v-if="showButton('export')" icon="el-icon-download" @click="exportAuxiliaryExcel()">导出Excel</el-button>
- </div>
- </div>
- <!-- <div class="main_middle">
- <div class="main_middle_titles">数据统计</div>
- <div class="main_middle_matter">
- <div class="middle_items" v-for="(item,index) in showDatas" :key="index">
- <div class="middle_items_text">{{item.steelModel}}</div>
- <div class="middle_items_datas">{{item.changeStock}}</div>
- </div>
- </div>
- </div> -->
- <div class="main_content" style="overflow:auto;padding-bottom:100px;">
- <div v-for="(echartItem,echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
- <div class="main_echart_titles">{{echartItem.assistName}}</div>
- <div :id="echartItem.assistId" class="main_content_chart"></div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import { buttonPinia } from '../../../pinia';
-import { downFiles } from '../../../plugins/public';
-export default {
- name: 'RebarCost',
- data() {
- return {
- search:{
- dayData:this.getDateTime(),
- monthData:this.getMonthTime()
- },//查询条件
- tabPosition:'day',//默认展示day
- showTimes:true,//是否展示日的日期 true：日 false: 月
- dateType:1,// 1:日 2:月
- optionAuxiliary:[],//材料类型
- showDatas:[],//展示的数据统计
- echartsList:[],//展示echarts表
- chartsImage:null,
- pickerMinDate:'',//日期选择增加限制
- pickerOptionsDay:{ //限制选择日期为15天
- onPick: ({
- maxDate,
- minDate
- }) => {
- this.pickerMinDate = minDate.getTime()
- if (maxDate) {
- this.pickerMinDate = ''
- }
- },
- disabledDate: (time) => {
- if (this.pickerMinDate !== '') {
- const one = 15 * 24 * 3600 * 1000
- const minTime = this.pickerMinDate - one
- const maxTime = this.pickerMinDate + one
- return time.getTime() < minTime || time.getTime() > maxTime
-
- }
- }
- },
- minDates: null,
- maxDates: null,
- pickerOptionsMonth: {
- disabledDate: (time) => {
- if (this.minDates !== null) {
- let minMonth = this.minDates.getMonth(),
- lastYear = new Date(this.minDates).setMonth(minMonth - 6),
- nextYear = new Date(this.minDates).setMonth(minMonth + 6);
- // 只能选 minDate 前后6个月的范围
- return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
- }
- return false;
- },
- onPick: ({minDate, maxDate}) => {
- this.minDates = minDate;
- this.maxDates = maxDate;
- }
- },
- }
- },
- mounted() {
- // this.searchButtonInfo()
- this.getAllTypes()
- },
- methods: {
- // 转圈圈
- functionLoading() {
- this.loadingView = this.$loading({
- lock: true,
- text: '请稍后...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- },
- //导出
- exportAuxiliaryExcel() {
- let params = {
- assistId:this.search.assistId ===undefined ||this.search.assistId ==='' ?'':this.search.assistId,
- dateType:this.dateType
- }
- if(this.dateType === 1){
- params.strTime = this.search.dayData&&this.search.dayData[0]
- params.endTime = this.search.dayData&&this.search.dayData[1]
- delete params.dayData
- }else{
- params.strTime = this.search.monthData&&this.search.monthData[0]
- params.endTime = this.search.monthData&&this.search.monthData[1]
- delete params.monthData
- }
- this.functionLoading();
- this.$api.Analyse.exportAuxilliaryCost(params).then(res => {
- downFiles(res, '辅材消耗信息', 'xls')
- this.loadingView.close()
- })
- .catch(() => {
- this.loadingView.close();
- })
- },
- //获取时间(默认15天)
- getDateTime(){
- return [new Date(new Date().getTime() - 3600*1000*24*15).toISOString().replace('T',' ').split('.')[0],new Date().toISOString().replace('T',' ').split('.')[0]]
- },
- //获取时间（默认6个月）
- getMonthTime(){
- let date = new Date();
- let year = date.getFullYear();
- let month = date.getMonth() + 1;
- let newYear = 0;
- let newMonth = 0;
- let newDateArr = [];
- for (let i = 0; i < 7; i++) {
- //这里是获取前六个月,所以循环6次,根据需要修改
- if (month - i < 1) {
- //这里的判断是如果当前月份往前推到了去年 需要做的处理
- newYear = year - 1;
- newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
- newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
- } else {
- newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
- newDateArr.push(year + '-' + newMonth);
- }
- }
- //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
- const end = newDateArr[0];
- const start = newDateArr[6];
- return [start, end];
- },
- //获取所有型号
- getAllTypes(){
- this.$api.Analyse.auxilliaryCostList({}).then(res=>{
- if(res.statusMsg === 'ok'){
- this.optionAuxiliary = res.data
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- },
- //展示不同的时间
- timesChange(val){
- if(val === 'month'){
- this.showTimes = false
- // this.search.dayData = ''
- this.dateType = 2
- }else{
- this.showTimes = true
- // this.search.monthData = ''
- this.dateType = 1
- }
- },
- //查询按钮
- searchButtonInfo() {
- let params = {
- assistId:this.search.assistId ===undefined ||this.search.assistId ==='' ?'':this.search.assistId,
- dateType:this.dateType
- }
- if(this.dateType === 1){
- params.strTime = this.search.dayData&&this.search.dayData[0]
- params.endTime = this.search.dayData&&this.search.dayData[1]
- delete params.dayData
- }else{
- params.strTime = this.search.monthData&&this.search.monthData[0]
- params.endTime = this.search.monthData&&this.search.monthData[1]
- delete params.monthData
- }
- this.$api.Analyse.searchAuxilliaryCost(params).then(res=>{
- if(res.statusMsg === 'ok'){
- this.echartsList = res.data
- res.data.forEach(item=>{
- let xtitle = item.betweenDate
- let showStock = []
- item.assistStatisticsDtos.forEach(ite=>{
- xtitle.forEach(iten=>{
- if(iten === ite.getDate){
- showStock.push({
- getDate:iten,
- changeStock:ite.changeStock
- })
- }else{
- showStock.push({
- getDate:iten,
- changeStock:0
- })
- }
- })
- })
- this.$nextTick(() => {
- this.createCharts(item.assistId, showStock,item.assistName);
- })
- })
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- },
- // 创建echart图表
- createCharts(name, data,titleName) {
- const labelData = data.map(item => item.getDate);
- const firstData = data.map(item => item.changeStock ? item.changeStock : 0);
- this.chartsImage = this.$echarts.init(document.getElementById(name));
- const option = {
- animationDuration: 1500,
- tooltip: {
- trigger: "axis",
- backgroundColor:'#071F46',
- textStyle:{
- color:'#fff',
- },
- formatter: function (params) {
- var relVal = params[0].name;
- for (var i = 0; i < params.length; i++) {
- if (params[i].componentIndex === 0) {
- relVal +=
- "<br/>" +
- params[i].marker +
- `${titleName}` +
- " : " +
- params[i].value;
- }
- }
- return relVal;
- },
- },
- grid: {
- top: "15%",
- right: "3%",
- left: "3%",
- bottom: "11%",
- },
- xAxis: [
- {
- type: "category",
- data: labelData,
- axisLine: {
- lineStyle: {
- width: 2,
- color: "#B7E4F7",
- },
- },
- axisLabel: {
- color: "#B7E4F7",
- },
- axisTick: {
- show: false,
- },
- },
- ],
- yAxis: [
- {
- type: "value",
- // max: 100,
- splitNumber: 10,
- axisLabel: {
- formatter: "{value}",
- textStyle: {
- color: "#CAD3E0",
- },
- },
- splitLine: {
- lineStyle: {
- width: 2,
- type: "dashed",
- color: "#28477C",
- },
- },
- },
- {
- type: "value",
- max: 100,
- splitNumber: 10,
- axisLabel: {
- formatter: "{value}%",
- textStyle: {
- color: "#B7E4F7",
- },
- },
- splitLine: {
- show: false,
- },
- },
- ],
- series: [
- {
- type: "bar",
- barWidth:40,
- data: firstData,
- yAxisIndex: 0,
- itemStyle: {
- normal: {
- color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
- [
- {
- offset: 0,
- color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
- },
- ],
- false
- ),
- },
- },
- },
- ],
- }
- this.chartsImage.clear();
- this.chartsImage.setOption(option);
- window.onresize = () => {
- this.chartsImage.resize()
- }
- },
- // 判断按钮权限信息
- showButton(str) {
- const pinia = buttonPinia();
- return pinia.$state.buttonInfo.includes(str);
- }
- },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/layout-main.scss";
-
-.main_middle{
- width: 97%;
- margin: 10px 18px;
-
- .main_middle_titles{
- width: 100%;
- color: #19F6F8;
- position: relative;
- padding: 10px 15px;
- border-bottom:1px solid #1B50AE ;
- &::before{
- content: "";
- position: absolute;
- left: 5px;
- top: 10px;
- width: 2px;
- height: 18px;
- background-color: #18F6F8;
- }
- }
- .main_middle_matter{
- padding-top: 15px;
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .middle_items{
- width: 150px;
- height: 80px;
- background: url('../../../assets/stir_img.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- .middle_items_text{
- color: #E1E5EB;
- }
- .middle_items_datas{
- color: #18F6F8;
- font-size: 18px;
- font-weight: 600;
- }
- }
- }
-}
-
-.echarts_items{
- height: 332px;
- padding-top: 10px;
- padding-bottom: 15px;
- margin-bottom: 20px;
- .main_echart_titles{
- width: 97%;
- color: #18F6F8;
- padding-bottom: 15px;
- padding-left: 15px;
- border-bottom: 1px solid #1C51B1;
- position: relative;
- &::before{
- width: 2px;
- height: 15px;
- content: "";
- position: absolute;
- top: 3px;
- left: 5px;
- background-color: #18F6F8;
- }
- }
- .main_content_chart {
- height: 100%;
- }
-}
-/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner{
- color: #19F7F9;
- border-color: #18F6F8;
- background-color: #0D4573!important;
-}
-/deep/.el-radio-button__inner{
- background-color: #0D4573;
- border-color:#18F6F8;
- border-radius: 0px 0px !important;
- border-color: #18F6F8;
- color: #E2E9EE;
-}
-</style>
+<!-- 物资管理=>消耗统计=>辅材消耗 -->
+<template>
+ <div class="main">
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">物品名称：</span>
+ <el-select v-model="search.steelId" placeholder="请选择物品名称" clearable>
+ <el-option
+ v-for="item in optionAuxiliary"
+ :key="item.assistId"
+ :label="item.assistName+'-'+item.assistModel"
+ :value="item.assistId">
+ </el-option>
+ </el-select>
+ </div>
+ <div class="header_item">
+ <el-radio-group v-model="tabPosition" @input="timesChange">
+ <el-radio-button label="day">日</el-radio-button>
+ <el-radio-button label="month">月</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="header_item" v-if="showTimes">
+ <span class="header_label">选择时间：</span>
+ <el-date-picker
+ v-model="search.dayData"
+ :picker-options="pickerOptionsDay"
+ :clearable="false"
+ type="daterange"
+ value-format="yyyy-MM-dd"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <div class="header_item" v-if="!showTimes">
+ <span class="header_label">选择月份：</span>
+ <el-date-picker
+ v-model="search.monthData"
+ :picker-options="pickerOptionsMonth"
+ :clearable="false"
+ type="monthrange"
+ value-format="yyyy-MM"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <div class="header_item">
+ <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
+ <el-button v-if="showButton('export')" icon="el-icon-download" @click="exportAuxiliaryExcel()">导出Excel</el-button>
+ </div>
+ </div>
+ <!-- <div class="main_middle">
+ <div class="main_middle_titles">数据统计</div>
+ <div class="main_middle_matter">
+ <div class="middle_items" v-for="(item,index) in showDatas" :key="index">
+ <div class="middle_items_text">{{item.steelModel}}</div>
+ <div class="middle_items_datas">{{item.changeStock}}</div>
+ </div>
+ </div>
+ </div> -->
+ <div class="main_content" style="overflow:auto;padding-bottom:100px;">
+ <div v-for="(echartItem,echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
+ <div class="main_echart_titles">{{echartItem.assistName}}</div>
+ <div :id="echartItem.assistId" class="main_content_chart"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { buttonPinia } from '../../../pinia';
+import { downFiles } from '../../../plugins/public';
+export default {
+ name: 'RebarCost',
+ data() {
+ return {
+ search:{
+ dayData:this.getDateTime(),
+ monthData:this.getMonthTime()
+ },//查询条件
+ tabPosition:'day',//默认展示day
+ showTimes:true,//是否展示日的日期 true：日 false: 月
+ dateType:1,// 1:日 2:月
+ optionAuxiliary:[],//材料类型
+ showDatas:[],//展示的数据统计
+ echartsList:[],//展示echarts表
+ chartsImage:null,
+ pickerMinDate:'',//日期选择增加限制
+ pickerOptionsDay:{ //限制选择日期为15天
+ onPick: ({
+ maxDate,
+ minDate
+ }) => {
+ this.pickerMinDate = minDate.getTime()
+ if (maxDate) {
+ this.pickerMinDate = ''
+ }
+ },
+ disabledDate: (time) => {
+ if (this.pickerMinDate !== '') {
+ const one = 15 * 24 * 3600 * 1000
+ const minTime = this.pickerMinDate - one
+ const maxTime = this.pickerMinDate + one
+ return time.getTime() < minTime || time.getTime() > maxTime
+
+ }
+ }
+ },
+ minDates: null,
+ maxDates: null,
+ pickerOptionsMonth: {
+ disabledDate: (time) => {
+ if (this.minDates !== null) {
+ let minMonth = this.minDates.getMonth(),
+ lastYear = new Date(this.minDates).setMonth(minMonth - 6),
+ nextYear = new Date(this.minDates).setMonth(minMonth + 6);
+ // 只能选 minDate 前后6个月的范围
+ return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
+ }
+ return false;
+ },
+ onPick: ({minDate, maxDate}) => {
+ this.minDates = minDate;
+ this.maxDates = maxDate;
+ }
+ },
+ }
+ },
+ mounted() {
+ this.searchButtonInfo()
+ this.getAllTypes()
+ },
+ methods: {
+ // 转圈圈
+ functionLoading() {
+ this.loadingView = this.$loading({
+ lock: true,
+ text: '请稍后...',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ });
+ },
+ //导出
+ exportAuxiliaryExcel() {
+ let params = {
+ assistId:this.search.assistId ===undefined ||this.search.assistId ==='' ?'':this.search.assistId,
+ dateType:this.dateType
+ }
+ if(this.dateType === 1){
+ params.strTime = this.search.dayData&&this.search.dayData[0]
+ params.endTime = this.search.dayData&&this.search.dayData[1]
+ delete params.dayData
+ }else{
+ params.strTime = this.search.monthData&&this.search.monthData[0]
+ params.endTime = this.search.monthData&&this.search.monthData[1]
+ delete params.monthData
+ }
+ this.functionLoading();
+ this.$api.Analyse.exportAuxilliaryCost(params).then(res => {
+ downFiles(res, '辅材消耗信息', 'xls')
+ this.loadingView.close()
+ })
+ .catch(() => {
+ this.loadingView.close();
+ })
+ },
+ //获取时间(默认15天)
+ getDateTime(){
+ return [new Date(new Date().getTime() - 3600*1000*24*15).toISOString().replace('T',' ').split('.')[0],new Date().toISOString().replace('T',' ').split('.')[0]]
+ },
+ //获取时间（默认6个月）
+ getMonthTime(){
+ let date = new Date();
+ let year = date.getFullYear();
+ let month = date.getMonth() + 1;
+ let newYear = 0;
+ let newMonth = 0;
+ let newDateArr = [];
+ for (let i = 0; i < 7; i++) {
+ //这里是获取前六个月,所以循环6次,根据需要修改
+ if (month - i < 1) {
+ //这里的判断是如果当前月份往前推到了去年 需要做的处理
+ newYear = year - 1;
+ newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
+ newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
+ } else {
+ newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
+ newDateArr.push(year + '-' + newMonth);
+ }
+ }
+ //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
+ const end = newDateArr[0];
+ const start = newDateArr[6];
+ return [start, end];
+ },
+ //获取所有型号
+ getAllTypes(){
+ this.$api.Analyse.auxilliaryCostList({}).then(res=>{
+ if(res.statusMsg === 'ok'){
+ this.optionAuxiliary = res.data
+ }else{
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ },
+ //展示不同的时间
+ timesChange(val){
+ if(val === 'month'){
+ this.showTimes = false
+ // this.search.dayData = ''
+ this.dateType = 2
+ }else{
+ this.showTimes = true
+ // this.search.monthData = ''
+ this.dateType = 1
+ }
+ },
+ //查询按钮
+ searchButtonInfo() {
+ let params = {
+ assistId:this.search.assistId ===undefined ||this.search.assistId ==='' ?'':this.search.assistId,
+ dateType:this.dateType
+ }
+ if(this.dateType === 1){
+ params.strTime = this.search.dayData&&this.search.dayData[0]
+ params.endTime = this.search.dayData&&this.search.dayData[1]
+ delete params.dayData
+ }else{
+ params.strTime = this.search.monthData&&this.search.monthData[0]
+ params.endTime = this.search.monthData&&this.search.monthData[1]
+ delete params.monthData
+ }
+ this.$api.Analyse.searchAuxilliaryCost(params).then(res=>{
+ if(res.statusMsg === 'ok'){
+ this.echartsList = res.data
+ res.data.forEach(item=>{
+ let xtitle = item.betweenDate
+ let showStock = []
+ item.assistStatisticsDtos.forEach(ite=>{
+ xtitle.forEach(iten=>{
+ if(iten === ite.getDate){
+ showStock.push({
+ getDate:iten,
+ changeStock:ite.changeStock
+ })
+ }else{
+ showStock.push({
+ getDate:iten,
+ changeStock:0
+ })
+ }
+ })
+ })
+ this.$nextTick(() => {
+ this.createCharts(item.assistId, showStock,item.assistName);
+ })
+ })
+ }else{
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ },
+ // 创建echart图表
+ createCharts(name, data,titleName) {
+ const labelData = data.map(item => item.getDate);
+ const firstData = data.map(item => item.changeStock ? item.changeStock : 0);
+ this.chartsImage = this.$echarts.init(document.getElementById(name));
+ const option = {
+ animationDuration: 1500,
+ tooltip: {
+ trigger: "axis",
+ backgroundColor:'#071F46',
+ textStyle:{
+ color:'#fff',
+ },
+ formatter: function (params) {
+ var relVal = params[0].name;
+ for (var i = 0; i < params.length; i++) {
+ if (params[i].componentIndex === 0) {
+ relVal +=
+ "<br/>" +
+ params[i].marker +
+ `${titleName}` +
+ " : " +
+ params[i].value;
+ }
+ }
+ return relVal;
+ },
+ },
+ grid: {
+ top: "15%",
+ right: "3%",
+ left: "3%",
+ bottom: "11%",
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: labelData,
+ axisLine: {
+ lineStyle: {
+ width: 2,
+ color: "#B7E4F7",
+ },
+ },
+ axisLabel: {
+ color: "#B7E4F7",
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ // max: 100,
+ splitNumber: 10,
+ axisLabel: {
+ formatter: "{value}",
+ textStyle: {
+ color: "#CAD3E0",
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ width: 2,
+ type: "dashed",
+ color: "#28477C",
+ },
+ },
+ },
+ {
+ type: "value",
+ max: 100,
+ splitNumber: 10,
+ axisLabel: {
+ formatter: "{value}%",
+ textStyle: {
+ color: "#B7E4F7",
+ },
+ },
+ splitLine: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ type: "bar",
+ barWidth:40,
+ data: firstData,
+ yAxisIndex: 0,
+ itemStyle: {
+ normal: {
+ color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
+ },
+ ],
+ false
+ ),
+ },
+ },
+ },
+ ],
+ }
+ this.chartsImage.clear();
+ this.chartsImage.setOption(option);
+ window.onresize = () => {
+ this.chartsImage.resize()
+ }
+ },
+ // 判断按钮权限信息
+ showButton(str) {
+ const pinia = buttonPinia();
+ return pinia.$state.buttonInfo.includes(str);
+ }
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/layout-main.scss";
+
+.main_middle{
+ width: 97%;
+ margin: 10px 18px;
+
+ .main_middle_titles{
+ width: 100%;
+ color: #19F6F8;
+ position: relative;
+ padding: 10px 15px;
+ border-bottom:1px solid #1B50AE ;
+ &::before{
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 10px;
+ width: 2px;
+ height: 18px;
+ background-color: #18F6F8;
+ }
+ }
+ .main_middle_matter{
+ padding-top: 15px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .middle_items{
+ width: 150px;
+ height: 80px;
+ background: url('../../../assets/stir_img.png') no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ .middle_items_text{
+ color: #E1E5EB;
+ }
+ .middle_items_datas{
+ color: #18F6F8;
+ font-size: 18px;
+ font-weight: 600;
+ }
+ }
+ }
+}
+
+.echarts_items{
+ height: 332px;
+ padding-top: 10px;
+ padding-bottom: 15px;
+ margin-bottom: 20px;
+ .main_echart_titles{
+ width: 97%;
+ color: #18F6F8;
+ padding-bottom: 15px;
+ padding-left: 15px;
+ border-bottom: 1px solid #1C51B1;
+ position: relative;
+ &::before{
+ width: 2px;
+ height: 15px;
+ content: "";
+ position: absolute;
+ top: 3px;
+ left: 5px;
+ background-color: #18F6F8;
+ }
+ }
+ .main_content_chart {
+ height: 100%;
+ }
+}
+/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner{
+ color: #19F7F9;
+ border-color: #18F6F8;
+ background-color: #0D4573!important;
+}
+/deep/.el-radio-button__inner{
+ background-color: #0D4573;
+ border-color:#18F6F8;
+ border-radius: 0px 0px !important;
+ border-color: #18F6F8;
+ color: #E2E9EE;
+}
+</style>
diff --git a/web/src/views/GoodManage/CostStatistics/EnergyCost.vue b/web/src/views/GoodManage/CostStatistics/EnergyCost.vue
index eb5cab3..c9a094a 100644
--- a/web/src/views/GoodManage/CostStatistics/EnergyCost.vue
+++ b/web/src/views/GoodManage/CostStatistics/EnergyCost.vue
@@ -1,3 +1,59 @@
-<template>
- <div>能源消耗</div>
-</template>
\ No newline at end of file
+<!-- 物资管理=>消耗统计=>能源消耗 -->
+<template>
+ <div class="main">
+ <div class="main_tabs">
+ <el-tabs v-model="activeName">
+ <el-tab-pane label="用电消耗" name="electro"></el-tab-pane>
+ <el-tab-pane label="用水消耗" name="water"></el-tab-pane>
+ <el-tab-pane label="用气消耗" name="gas"></el-tab-pane>
+ </el-tabs>
+ </div>
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">时间范围：</span>
+ <el-date-picker v-model="date" type="daterange"></el-date-picker>
+ </div>
+ <div class="header_item">
+ <el-button icon="el-icon-search" v-permission="'search'" @click="searchDeviceInfoList(true)">查询</el-button>
+ </div>
+ </div>
+ <div class="main_content">
+ <!-- <cpnTable :table-index="true" :table-loading="loading" :table-data="dataList" :table-columns="tableColumns"
+ :page-total="total" :page-num.sync="queryInfo.pageNum" :page-size.sync="queryInfo.pageSize"
+ :page-change="pageChange">
+ </cpnTable> -->
+ </div>
+ </div>
+</template>
+
+<script>
+// import {downFiles, throttle} from '../../../plugins/public'
+export default {
+ data() {
+ return {
+ loading: '',
+ date: [],
+ activeName: 'electro',
+ dataList: [],
+ tableColumns: [],
+ total: '',
+ queryInfo: {
+ pageNum: 1,
+ pageSize: 5
+ }
+ }
+ },
+ created() {
+
+ },
+ methods: {
+ pageChange() {
+
+ }
+ },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../style/layout-main.scss';
+</style>
\ No newline at end of file
diff --git a/web/src/views/GoodManage/CostStatistics/RawCost.vue b/web/src/views/GoodManage/CostStatistics/RawCost.vue
index e53b07f..005def8 100644
--- a/web/src/views/GoodManage/CostStatistics/RawCost.vue
+++ b/web/src/views/GoodManage/CostStatistics/RawCost.vue
@@ -1,452 +1,457 @@
-<template>
- <div class="main">
- <div class="main_header">
- <div class="header_item">
- <span class="header_label">材料类型：</span>
- <el-select v-model="search.materialName" placeholder="全部" clearable>
- <el-option
- v-for="item in optionMaterials"
- :key="item.dictId"
- :label="item.dictName"
- :value="item.dictId">
- </el-option>
- </el-select>
- </div>
- <div class="header_item">
- <el-radio-group v-model="tabPosition" @input="timesChange">
- <el-radio-button label="day">日</el-radio-button>
- <el-radio-button label="month">月</el-radio-button>
- </el-radio-group>
- </div>
- <div class="header_item" v-if="showTimes">
- <span class="header_label">选择时间：</span>
- <el-date-picker
- v-model="search.dayData"
- :picker-options="pickerOptionsDay"
- :clearable="false"
- type="daterange"
- value-format="yyyy-MM-dd"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="header_item" v-if="!showTimes">
- <span class="header_label">选择月份：</span>
- <el-date-picker
- v-model="search.monthData"
- :picker-options="pickerOptionsMonth"
- :clearable="false"
- type="monthrange"
- value-format="yyyy-MM-dd"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="header_item">
- <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
- <el-button v-if="showButton('export')" icon="el-icon-download" @click="exportExcel()">导出Excel</el-button>
- </div>
- </div>
- <div class="main_middle">
- <div class="main_middle_titles">数据统计</div>
- <div class="main_middle_matter">
- <div class="middle_items" v-for="(item,index) in showDatas" :key="index">
- <div class="middle_items_text">{{item.materialName}}</div>
- <div class="middle_items_datas">{{item.materialValue}}</div>
- </div>
- </div>
- </div>
- <div class="main_content" style="overflow:auto;padding-bottom:100px;">
- <div v-for="(echartItem,echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
- <div class="main_echart_titles">{{echartItem.materialCName}}(吨)</div>
- <div :id="echartItem.materialName" class="main_content_chart"></div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import { buttonPinia } from '../../../pinia';
-import { downFiles } from '../../../plugins/public';
-export default {
- name: 'MaterialCost',
- data() {
- return {
- search:{
- dayData:this.getDateTime(),
- monthData:this.getMonthTime()
- },//查询条件
- tabPosition:'day',//默认展示day
- showTimes:true,//是否展示日的日期 true：日 false: 月
- dateType:1,// 1:日 2:月
- optionMaterials:[],//材料类型
- showDatas:[],//展示的数据统计
- echartsList:[],//展示echarts表
- pickerMinDate:'',//日期选择增加限制
- pickerOptionsDay:{ //限制选择日期为15天
- onPick: ({
- maxDate,
- minDate
- }) => {
- this.pickerMinDate = minDate.getTime()
- if (maxDate) {
- this.pickerMinDate = ''
- }
- },
- disabledDate: (time) => {
- if (this.pickerMinDate !== '') {
- const one = 15 * 24 * 3600 * 1000
- const minTime = this.pickerMinDate - one
- const maxTime = this.pickerMinDate + one
- return time.getTime() < minTime || time.getTime() > maxTime
-
- }
- }
- },
- minDates: null,
- maxDates: null,
- pickerOptionsMonth: {
- disabledDate: (time) => {
- if (this.minDates !== null) {
- let minMonth = this.minDates.getMonth(),
- lastYear = new Date(this.minDates).setMonth(minMonth - 6),
- nextYear = new Date(this.minDates).setMonth(minMonth + 6);
- // 只能选 minDate 前后6个月的范围
- return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
- }
- return false;
- },
- onPick: ({minDate, maxDate}) => {
- this.minDates = minDate;
- this.maxDates = maxDate;
- }
- },
- }
- },
- mounted() {
- // this.searchButtonInfo()
- this.getAllTypes()
- },
- methods: {
- // 导出Excel
- exportExcel() {
- let params = {
- materialName:this.search.materialName ===undefined ||this.search.materialName ==='' ?'both':this.search.materialName,
- dateType:this.dateType
- }
- if(this.dateType === 1){
- params.startDay = this.search.dayData&&this.search.dayData[0]
- params.endDay = this.search.dayData&&this.search.dayData[1]
- delete params.dayData
- }else{
- params.startDay = this.search.monthData&&this.search.monthData[0]
- params.endDay = this.search.monthData&&this.search.monthData[1]
- delete params.monthData
- }
- this.$api.Ducts.exportBtns(params).then(res=>{
- downFiles(res, '原材料消耗信息', 'xls')
- })
- },
- //获取时间(默认15天)
- getDateTime(){
- return [new Date(new Date().getTime() - 3600*1000*24*15).toISOString().replace('T',' ').split('.')[0],new Date().toISOString().replace('T',' ').split('.')[0]]
- },
- //获取时间（默认6个月）
- getMonthTime(){
- let date = new Date();
- let year = date.getFullYear();
- let month = date.getMonth() + 1;
- let newYear = 0;
- let newMonth = 0;
- let newDateArr = [];
- for (let i = 0; i < 7; i++) {
- //这里是获取前六个月,所以循环6次,根据需要修改
- if (month - i < 1) {
- //这里的判断是如果当前月份往前推到了去年 需要做的处理
- newYear = year - 1;
- newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
- newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
- } else {
- newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
- newDateArr.push(year + '-' + newMonth);
- }
- }
- //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
- const end = newDateArr[0];
- const start = newDateArr[6];
- return [start+'-'+'01', end+'-'+'01'];
- },
- //获取设备类型
- getAllTypes(){
- let params = {
- pageNum: 1,
- pageSize: 100000000,
- }
- this.$api.Dictionary.searchDictionary(params).then(res=>{
- if(res.statusMsg === 'ok'){
- this.optionMaterials = res.data.list.filter(item=>item.dictType ==='pipe_materials')
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- },
- //展示不同的时间
- timesChange(val){
- if(val === 'month'){
- this.showTimes = false
- // this.search.dayData = ''
- this.dateType = 2
- }else{
- this.showTimes = true
- // this.search.monthData = ''
- this.dateType = 1
- }
- },
- //查询按钮
- searchButtonInfo() {
- let params = {
- materialName:this.search.materialName ===undefined ||this.search.materialName ==='' ?'both':this.search.materialName,
- dateType:this.dateType
- }
- if(this.dateType === 1){
- params.startDay = this.search.dayData&&this.search.dayData[0]
- params.endDay = this.search.dayData&&this.search.dayData[1]
- delete params.dayData
- }else{
- params.startDay = this.search.monthData&&this.search.monthData[0]
- params.endDay = this.search.monthData&&this.search.monthData[1]
- delete params.monthData
- }
- this.$api.Analyse.searchMaterialCost(params).then(res=>{
- if(res.statusMsg === 'ok'){
- this.showDatas = res.data.materialTotal
- this.echartsList = res.data.statResult
- res.data.statResult.forEach(item=>{
- this.$nextTick(() => {
- this.createCharts(item.materialName, item.statVoList,item.materialCName);
- })
- })
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- },
- // 创建echart图表
- createCharts(name, data,titleName) {
- const labelData = data.map(item => item.shuDate);
- const firstData = data.map(item => item.materialValue ? item.materialValue : 0);
- const chartsImage = this.$echarts.init(document.getElementById(name));
- const option = {
- animationDuration: 1500,
- tooltip: {
- trigger: "axis",
- backgroundColor:'#071F46',
- textStyle:{
- color:'#fff',
- },
- formatter: function (params) {
- var relVal = params[0].name;
- for (var i = 0; i < params.length; i++) {
- if (params[i].componentIndex === 0) {
- relVal +=
- "<br/>" +
- params[i].marker +
- `${titleName}` +
- " : " +
- params[i].value;
- }
- }
- return relVal;
- },
- },
- grid: {
- top: "15%",
- right: "3%",
- left: "3%",
- bottom: "11%",
- },
- xAxis: [
- {
- type: "category",
- data: labelData,
- axisLine: {
- lineStyle: {
- width: 2,
- color: "#B7E4F7",
- },
- },
- axisLabel: {
- color: "#B7E4F7",
- },
- axisTick: {
- show: false,
- },
- },
- ],
- yAxis: [
- {
- type: "value",
- // max: 100,
- splitNumber: 10,
- axisLabel: {
- formatter: "{value}",
- textStyle: {
- color: "#CAD3E0",
- },
- },
- splitLine: {
- lineStyle: {
- width: 2,
- type: "dashed",
- color: "#28477C",
- },
- },
- },
- {
- type: "value",
- max: 100,
- splitNumber: 10,
- axisLabel: {
- formatter: "{value}%",
- textStyle: {
- color: "#B7E4F7",
- },
- },
- splitLine: {
- show: false,
- },
- },
- ],
- series: [
- {
- type: "line",
- smooth:true,
- data: firstData,
- barWidth:40,
- yAxisIndex: 0,
- itemStyle: {
- normal: {
- color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
- [
- {
- offset: 0,
- color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
- },
- ],
- false
- ),
- },
- },
- },
- ],
- }
- chartsImage.clear();
- chartsImage.setOption(option);
- window.onresize = () => {
- chartsImage.resize()
- }
- },
- // 判断按钮权限信息
- showButton(str) {
- const pinia = buttonPinia();
- return pinia.$state.buttonInfo.includes(str);
- }
- },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/layout-main.scss";
-
-.main_middle{
- width: 97%;
- margin: 10px 18px;
-
- .main_middle_titles{
- width: 100%;
- color: #19F6F8;
- position: relative;
- padding: 10px 15px;
- border-bottom:1px solid #1B50AE ;
- &::before{
- content: "";
- position: absolute;
- left: 5px;
- top: 10px;
- width: 2px;
- height: 18px;
- background-color: #18F6F8;
- }
- }
- .main_middle_matter{
- padding-top: 15px;
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .middle_items{
- width: 150px;
- height: 80px;
- background: url('../../../assets/stir_img.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- .middle_items_text{
- color: #E1E5EB;
- }
- .middle_items_datas{
- color: #18F6F8;
- font-size: 18px;
- font-weight: 600;
- }
- }
- }
-}
-
-.echarts_items{
- height: 332px;
- padding-top: 10px;
- padding-bottom: 15px;
- margin-bottom: 20px;
- .main_echart_titles{
- width: 97%;
- color: #18F6F8;
- padding-bottom: 15px;
- padding-left: 15px;
- border-bottom: 1px solid #1C51B1;
- position: relative;
- &::before{
- width: 2px;
- height: 15px;
- content: "";
- position: absolute;
- top: 3px;
- left: 5px;
- background-color: #18F6F8;
- }
- }
- .main_content_chart {
- height: 100%;
- }
-}
-/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner{
- color: #19F7F9;
- border-color: #18F6F8;
- background-color: #0D4573!important;
-}
-/deep/.el-radio-button__inner{
- background-color: #0D4573;
- border-color:#18F6F8;
- border-radius: 0px 0px !important;
- border-color: #18F6F8;
- color: #E2E9EE;
-}
-</style>
+<!-- 物资管理=>消耗统计=>原材料消耗 -->
+<template>
+ <div class="main">
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">材料类型：</span>
+ <el-select v-model="search.materialName" placeholder="全部" clearable>
+ <el-option
+ v-for="item in optionMaterials"
+ :key="item.dictId"
+ :label="item.dictName"
+ :value="item.dictId">
+ </el-option>
+ </el-select>
+ </div>
+ <div class="header_item">
+ <el-radio-group v-model="tabPosition" @input="timesChange">
+ <el-radio-button label="day">日</el-radio-button>
+ <el-radio-button label="month">月</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="header_item" v-if="showTimes">
+ <span class="header_label">选择时间：</span>
+ <el-date-picker
+ v-model="search.dayData"
+ :picker-options="pickerOptionsDay"
+ :clearable="false"
+ type="daterange"
+ value-format="yyyy-MM-dd"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <div class="header_item" v-if="!showTimes">
+ <span class="header_label">选择月份：</span>
+ <el-date-picker
+ v-model="search.monthData"
+ :picker-options="pickerOptionsMonth"
+ :clearable="false"
+ type="monthrange"
+ value-format="yyyy-MM-dd"
+ range-separator="至"
+ start-placeholder="开始日期"
+ end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <div class="header_item">
+ <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
+ <el-button v-if="showButton('export')" icon="el-icon-download" @click="exportExcel()">导出Excel</el-button>
+ </div>
+ </div>
+ <div class="main_middle">
+ <div class="main_middle_titles">数据统计</div>
+ <div class="main_middle_matter">
+ <div class="middle_items" v-for="(item,index) in showDatas" :key="index">
+ <div class="middle_items_text">{{item.materialName}}</div>
+ <div class="middle_items_datas">{{item.materialValue | toFloat }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="main_content" style="overflow:auto;padding-bottom:100px;">
+ <div v-for="(echartItem,echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
+ <div class="main_echart_titles">{{echartItem.materialCName}}(吨)</div>
+ <div :id="echartItem.materialName" class="main_content_chart"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import { buttonPinia } from '../../../pinia';
+import { downFiles } from '../../../plugins/public';
+export default {
+ name: 'MaterialCost',
+ data() {
+ return {
+ search:{
+ dayData:this.getDateTime(),
+ monthData:this.getMonthTime()
+ },//查询条件
+ tabPosition:'day',//默认展示day
+ showTimes:true,//是否展示日的日期 true：日 false: 月
+ dateType:1,// 1:日 2:月
+ optionMaterials:[],//材料类型
+ showDatas:[],//展示的数据统计
+ echartsList:[],//展示echarts表
+ pickerMinDate:'',//日期选择增加限制
+ pickerOptionsDay:{ //限制选择日期为15天
+ onPick: ({
+ maxDate,
+ minDate
+ }) => {
+ this.pickerMinDate = minDate.getTime()
+ if (maxDate) {
+ this.pickerMinDate = ''
+ }
+ },
+ disabledDate: (time) => {
+ if (this.pickerMinDate !== '') {
+ const one = 15 * 24 * 3600 * 1000
+ const minTime = this.pickerMinDate - one
+ const maxTime = this.pickerMinDate + one
+ return time.getTime() < minTime || time.getTime() > maxTime
+
+ }
+ }
+ },
+ minDates: null,
+ maxDates: null,
+ pickerOptionsMonth: {
+ disabledDate: (time) => {
+ if (this.minDates !== null) {
+ let minMonth = this.minDates.getMonth(),
+ lastYear = new Date(this.minDates).setMonth(minMonth - 6),
+ nextYear = new Date(this.minDates).setMonth(minMonth + 6);
+ // 只能选 minDate 前后6个月的范围
+ return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
+ }
+ return false;
+ },
+ onPick: ({minDate, maxDate}) => {
+ this.minDates = minDate;
+ this.maxDates = maxDate;
+ }
+ },
+ }
+ },
+ filters: {
+ toFloat(value) {
+ return value && value !== '0' ? value.split('.')[0] + '.00' : 0
+ }
+ },
+ mounted() {
+ this.searchButtonInfo()
+ this.getAllTypes()
+ },
+ methods: {
+ // 导出Excel
+ exportExcel() {
+ let params = {
+ materialName:this.search.materialName ===undefined ||this.search.materialName ==='' ?'both':this.search.materialName,
+ dateType:this.dateType
+ }
+ if(this.dateType === 1){
+ params.startDay = this.search.dayData&&this.search.dayData[0]
+ params.endDay = this.search.dayData&&this.search.dayData[1]
+ delete params.dayData
+ }else{
+ params.startDay = this.search.monthData&&this.search.monthData[0]
+ params.endDay = this.search.monthData&&this.search.monthData[1]
+ delete params.monthData
+ }
+ this.$api.Ducts.exportBtns(params).then(res=>{
+ downFiles(res, '原材料消耗信息', 'xls')
+ })
+ },
+ //获取时间(默认15天)
+ getDateTime(){
+ return [new Date(new Date().getTime() - 3600*1000*24*15).toISOString().replace('T',' ').split('.')[0],new Date().toISOString().replace('T',' ').split('.')[0]]
+ },
+ //获取时间（默认6个月）
+ getMonthTime(){
+ let date = new Date();
+ let year = date.getFullYear();
+ let month = date.getMonth() + 1;
+ let newYear = 0;
+ let newMonth = 0;
+ let newDateArr = [];
+ for (let i = 0; i < 7; i++) {
+ //这里是获取前六个月,所以循环6次,根据需要修改
+ if (month - i < 1) {
+ //这里的判断是如果当前月份往前推到了去年 需要做的处理
+ newYear = year - 1;
+ newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
+ newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
+ } else {
+ newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
+ newDateArr.push(year + '-' + newMonth);
+ }
+ }
+ //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
+ const end = newDateArr[0];
+ const start = newDateArr[6];
+ return [start+'-'+'01', end+'-'+'01'];
+ },
+ //获取设备类型
+ getAllTypes(){
+ let params = {
+ pageNum: 1,
+ pageSize: 100000000,
+ }
+ this.$api.Dictionary.searchDictionary(params).then(res=>{
+ if(res.statusMsg === 'ok'){
+ this.optionMaterials = res.data.list.filter(item=>item.dictType ==='pipe_materials')
+ }else{
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ },
+ //展示不同的时间
+ timesChange(val){
+ if(val === 'month'){
+ this.showTimes = false
+ // this.search.dayData = ''
+ this.dateType = 2
+ }else{
+ this.showTimes = true
+ // this.search.monthData = ''
+ this.dateType = 1
+ }
+ },
+ //查询按钮
+ searchButtonInfo() {
+ let params = {
+ materialName:this.search.materialName ===undefined ||this.search.materialName ==='' ?'both':this.search.materialName,
+ dateType:this.dateType
+ }
+ if(this.dateType === 1){
+ params.startDay = this.search.dayData&&this.search.dayData[0]
+ params.endDay = this.search.dayData&&this.search.dayData[1]
+ delete params.dayData
+ }else{
+ params.startDay = this.search.monthData&&this.search.monthData[0]
+ params.endDay = this.search.monthData&&this.search.monthData[1]
+ delete params.monthData
+ }
+ this.$api.Analyse.searchMaterialCost(params).then(res=>{
+ if(res.statusMsg === 'ok'){
+ this.showDatas = res.data.materialTotal
+ this.echartsList = res.data.statResult
+ res.data.statResult.forEach(item=>{
+ this.$nextTick(() => {
+ this.createCharts(item.materialName, item.statVoList,item.materialCName);
+ })
+ })
+ }else{
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ },
+ // 创建echart图表
+ createCharts(name, data,titleName) {
+ const labelData = data.map(item => item.shuDate);
+ const firstData = data.map(item => item.materialValue ? item.materialValue : 0);
+ const chartsImage = this.$echarts.init(document.getElementById(name));
+ const option = {
+ animationDuration: 1500,
+ tooltip: {
+ trigger: "axis",
+ backgroundColor:'#071F46',
+ textStyle:{
+ color:'#fff',
+ },
+ formatter: function (params) {
+ var relVal = params[0].name;
+ for (var i = 0; i < params.length; i++) {
+ if (params[i].componentIndex === 0) {
+ relVal +=
+ "<br/>" +
+ params[i].marker +
+ `${titleName}` +
+ " : " +
+ params[i].value;
+ }
+ }
+ return relVal;
+ },
+ },
+ grid: {
+ top: "15%",
+ right: "3%",
+ left: "3%",
+ bottom: "11%",
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: labelData,
+ axisLine: {
+ lineStyle: {
+ width: 2,
+ color: "#B7E4F7",
+ },
+ },
+ axisLabel: {
+ color: "#B7E4F7",
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ // max: 100,
+ splitNumber: 10,
+ axisLabel: {
+ formatter: "{value}",
+ textStyle: {
+ color: "#CAD3E0",
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ width: 2,
+ type: "dashed",
+ color: "#28477C",
+ },
+ },
+ },
+ {
+ type: "value",
+ max: 100,
+ splitNumber: 10,
+ axisLabel: {
+ formatter: "{value}%",
+ textStyle: {
+ color: "#B7E4F7",
+ },
+ },
+ splitLine: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ type: "line",
+ smooth:true,
+ data: firstData,
+ barWidth:40,
+ yAxisIndex: 0,
+ itemStyle: {
+ normal: {
+ color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
+ },
+ ],
+ false
+ ),
+ },
+ },
+ },
+ ],
+ }
+ chartsImage.clear();
+ chartsImage.setOption(option);
+ window.onresize = () => {
+ chartsImage.resize()
+ }
+ },
+ // 判断按钮权限信息
+ showButton(str) {
+ const pinia = buttonPinia();
+ return pinia.$state.buttonInfo.includes(str);
+ }
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/layout-main.scss";
+
+.main_middle{
+ width: 97%;
+ margin: 10px 18px;
+
+ .main_middle_titles{
+ width: 100%;
+ color: #19F6F8;
+ position: relative;
+ padding: 10px 15px;
+ border-bottom:1px solid #1B50AE ;
+ &::before{
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 10px;
+ width: 2px;
+ height: 18px;
+ background-color: #18F6F8;
+ }
+ }
+ .main_middle_matter{
+ padding-top: 15px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .middle_items{
+ padding: 0.6% 2.4%;
+ background: url('../../../assets/stir_img.png') no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ .middle_items_text{
+ color: #E1E5EB;
+ }
+ .middle_items_datas{
+ color: #18F6F8;
+ font-size: 18px;
+ font-weight: 600;
+ }
+ }
+ }
+}
+
+.echarts_items{
+ height: 332px;
+ padding-top: 10px;
+ padding-bottom: 15px;
+ margin-bottom: 20px;
+ .main_echart_titles{
+ width: 97%;
+ color: #18F6F8;
+ padding-bottom: 15px;
+ padding-left: 15px;
+ border-bottom: 1px solid #1C51B1;
+ position: relative;
+ &::before{
+ width: 2px;
+ height: 15px;
+ content: "";
+ position: absolute;
+ top: 3px;
+ left: 5px;
+ background-color: #18F6F8;
+ }
+ }
+ .main_content_chart {
+ height: 100%;
+ }
+}
+/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner{
+ color: #19F7F9;
+ border-color: #18F6F8;
+ background-color: #0D4573!important;
+}
+/deep/.el-radio-button__inner{
+ background-color: #0D4573;
+ border-color:#18F6F8;
+ border-radius: 0px 0px !important;
+ border-color: #18F6F8;
+ color: #E2E9EE;
+}
+</style>
diff --git a/web/src/views/GoodManage/CostStatistics/RebarCost.vue b/web/src/views/GoodManage/CostStatistics/RebarCost.vue
index 0e54af7..6c7e432 100644
--- a/web/src/views/GoodManage/CostStatistics/RebarCost.vue
+++ b/web/src/views/GoodManage/CostStatistics/RebarCost.vue
@@ -1,486 +1,480 @@
-<template>
- <div class="main">
- <div class="main_header">
- <div class="header_item">
- <span class="header_label">型号：</span>
- <el-select v-model="search.steelId" placeholder="请选择型号" clearable>
- <el-option
- v-for="item in optionRebar"
- :key="item.steelId"
- :label="item.steelName"
- :value="item.steelId">
- </el-option>
- </el-select>
- </div>
- <div class="header_item">
- <el-radio-group v-model="tabPosition" @input="timesChange">
- <el-radio-button label="day">日</el-radio-button>
- <el-radio-button label="month">月</el-radio-button>
- </el-radio-group>
- </div>
- <div class="header_item" v-if="showTimes">
- <span class="header_label">选择时间：</span>
- <el-date-picker
- v-model="search.dayData"
- :picker-options="pickerOptionsDay"
- :clearable="false"
- type="daterange"
- value-format="yyyy-MM-dd"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="header_item" v-if="!showTimes">
- <span class="header_label">选择月份：</span>
- <el-date-picker
- v-model="search.monthData"
- :picker-options="pickerOptionsMonth"
- :clearable="false"
- type="monthrange"
- value-format="yyyy-MM"
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- <div class="header_item">
- <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
- <el-button v-if="showButton('export')" icon="el-icon-download" @click="exportBearExcel()">导出Excel</el-button>
- </div>
- </div>
- <div class="main_middle">
- <div class="main_middle_titles">数据统计</div>
- <div class="main_middle_matter">
- <div class="middle_items" v-for="(item,index) in showDatas" :key="index">
- <div class="middle_items_text">{{item.steelModel}}</div>
- <div class="middle_items_datas">{{item.changeStock}}</div>
- </div>
- </div>
- </div>
- <div class="main_content" style="overflow:auto;padding-bottom:100px;">
- <div v-for="(echartItem,echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
- <div class="main_echart_titles">{{echartItem.steelModel}}mm</div>
- <div :id="echartItem.steelId" class="main_content_chart"></div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import { buttonPinia } from '../../../pinia';
-import { downFiles } from '../../../plugins/public';
-export default {
- name: 'RebarCost',
- data() {
- return {
- search:{
- dayData:this.getDateTime(),
- monthData:this.getMonthTime()
- },//查询条件
- tabPosition:'day',//默认展示day
- showTimes:true,//是否展示日的日期 true：日 false: 月
- dateType:1,// 1:日 2:月
- optionRebar:[],//材料类型
- showDatas:[],//展示的数据统计
- echartsList:[],//展示echarts表
- chartsImage:null,
- pickerMinDate:'',//日期选择增加限制
- pickerOptionsDay:{ //限制选择日期为15天
- onPick: ({
- maxDate,
- minDate
- }) => {
- this.pickerMinDate = minDate.getTime()
- if (maxDate) {
- this.pickerMinDate = ''
- }
- },
- disabledDate: (time) => {
- if (this.pickerMinDate !== '') {
- const one = 15 * 24 * 3600 * 1000
- const minTime = this.pickerMinDate - one
- const maxTime = this.pickerMinDate + one
- return time.getTime() < minTime || time.getTime() > maxTime
-
- }
- }
- },
- minDates: null,
- maxDates: null,
- pickerOptionsMonth: {
- disabledDate: (time) => {
- if (this.minDates !== null) {
- let minMonth = this.minDates.getMonth(),
- lastYear = new Date(this.minDates).setMonth(minMonth - 6),
- nextYear = new Date(this.minDates).setMonth(minMonth + 6);
- // 只能选 minDate 前后6个月的范围
- return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
- }
- return false;
- },
- onPick: ({minDate, maxDate}) => {
- this.minDates = minDate;
- this.maxDates = maxDate;
- }
- },
- }
- },
- mounted() {
- // this.searchButtonInfo()
- this.getAllTypes()
- },
- methods: {
- // 转圈圈
- functionLoading() {
- this.loadingView = this.$loading({
- lock: true,
- text: '请稍后...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- });
- },
- //导出
- exportBearExcel() {
- let params = {
- steelId:this.search.steelId ===undefined ||this.search.steelId ==='' ?'':this.search.steelId,
- dateType:this.dateType
- }
- if(this.dateType === 1){
- params.strTime = this.search.dayData&&this.search.dayData[0]
- params.endTime = this.search.dayData&&this.search.dayData[1]
- delete params.dayData
- }else{
- params.strTime = this.search.monthData&&this.search.monthData[0]
- params.endTime = this.search.monthData&&this.search.monthData[1]
- delete params.monthData
- }
- this.functionLoading();
- this.$api.Analyse.exportRebarCost(params).then(res => {
- downFiles(res, '钢筋消耗信息', 'xls')
- this.loadingView.close()
- })
- .catch(() => {
- this.loadingView.close();
- })
- },
- //获取时间(默认15天)
- getDateTime(){
- return [new Date(new Date().getTime() - 3600*1000*24*15).toISOString().replace('T',' ').split('.')[0],new Date().toISOString().replace('T',' ').split('.')[0]]
- },
- //获取时间（默认6个月）
- getMonthTime(){
- let date = new Date();
- let year = date.getFullYear();
- let month = date.getMonth() + 1;
- let newYear = 0;
- let newMonth = 0;
- let newDateArr = [];
- for (let i = 0; i < 7; i++) {
- //这里是获取前六个月,所以循环6次,根据需要修改
- if (month - i < 1) {
- //这里的判断是如果当前月份往前推到了去年 需要做的处理
- newYear = year - 1;
- newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
- newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
- } else {
- newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
- newDateArr.push(year + '-' + newMonth);
- }
- }
- //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
- const end = newDateArr[0];
- const start = newDateArr[6];
- return [start, end];
- },
- //获取所有型号
- getAllTypes(){
- this.$api.Production.getTableTitleInfo({}).then(res=>{
- if(res.statusMsg === 'ok'){
- this.optionRebar = res.data
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- },
- //展示不同的时间
- timesChange(val){
- if(val === 'month'){
- this.showTimes = false
- // this.search.dayData = ''
- this.dateType = 2
- }else{
- this.showTimes = true
- // this.search.monthData = ''
- this.dateType = 1
- }
- },
- //查询按钮
- searchButtonInfo() {
- let params = {
- steelId:this.search.steelId ===undefined ||this.search.steelId ==='' ?'':this.search.steelId,
- dateType:this.dateType
- }
- if(this.dateType === 1){
- params.strTime = this.search.dayData&&this.search.dayData[0]
- params.endTime = this.search.dayData&&this.search.dayData[1]
- delete params.dayData
- }else{
- params.strTime = this.search.monthData&&this.search.monthData[0]
- params.endTime = this.search.monthData&&this.search.monthData[1]
- delete params.monthData
- }
- this.$api.Analyse.searchRebarCost(params).then(res=>{
- if(res.statusMsg === 'ok'){
- this.echartsList = res.data
- res.data.forEach(item=>{
- let xtitle = item.betweenDate
- let showStock = []
- item.steelStatisticsDtos.forEach(ite=>{
- xtitle.forEach(iten=>{
- if(iten === ite.getDate){
- showStock.push({
- getDate:iten,
- changeStock:ite.changeStock
- })
- }else{
- showStock.push({
- getDate:iten,
- changeStock:0
- })
- }
- })
- })
- this.$nextTick(() => {
- this.createCharts(item.steelId, showStock,item.steelModel);
- })
- })
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- this.$api.Analyse.searchAnalyse(params).then(res=>{
- if(res.statusMsg === 'ok'){
- this.showDatas = res.data
- }else{
- this.$message.warning(res.statusMsg)
- }
- })
- },
- // 创建echart图表
- createCharts(name, data,titleName) {
- const labelData = data.map(item => item.getDate);
- const firstData = data.map(item => item.changeStock ? item.changeStock : 0);
- this.chartsImage = this.$echarts.init(document.getElementById(name));
- const option = {
- animationDuration: 1500,
- tooltip: {
- trigger: "axis",
- backgroundColor:'#071F46',
- textStyle:{
- color:'#fff',
- },
- formatter: function (params) {
- var relVal = params[0].name;
- for (var i = 0; i < params.length; i++) {
- if (params[i].componentIndex === 0) {
- relVal +=
- "<br/>" +
- params[i].marker +
- `${titleName}` +
- " : " +
- params[i].value;
- }
- }
- return relVal;
- },
- },
- grid: {
- top: "15%",
- right: "3%",
- left: "3%",
- bottom: "11%",
- },
- xAxis: [
- {
- type: "category",
- data: labelData,
- axisLine: {
- lineStyle: {
- width: 2,
- color: "#B7E4F7",
- },
- },
- axisLabel: {
- color: "#B7E4F7",
- },
- axisTick: {
- show: false,
- },
- },
- ],
- yAxis: [
- {
- type: "value",
- // max: 100,
- splitNumber: 10,
- axisLabel: {
- formatter: "{value}",
- textStyle: {
- color: "#CAD3E0",
- },
- },
- splitLine: {
- lineStyle: {
- width: 2,
- type: "dashed",
- color: "#28477C",
- },
- },
- },
- {
- type: "value",
- max: 100,
- splitNumber: 10,
- axisLabel: {
- formatter: "{value}%",
- textStyle: {
- color: "#B7E4F7",
- },
- },
- splitLine: {
- show: false,
- },
- },
- ],
- series: [
- {
- type: "line",
- smooth:true,
- barWidth:40,
- data: firstData,
- yAxisIndex: 0,
- itemStyle: {
- normal: {
- color: new this.$echarts.graphic.LinearGradient( 0, 0, 0, 1,
- [
- {
- offset: 0,
- color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
- },
- {
- offset: 1,
- color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
- },
- ],
- false
- ),
- },
- },
- },
- ],
- }
- this.chartsImage.clear();
- this.chartsImage.setOption(option);
- window.onresize = () => {
- this.chartsImage.resize()
- }
- },
- // 判断按钮权限信息
- showButton(str) {
- const pinia = buttonPinia();
- return pinia.$state.buttonInfo.includes(str);
- }
- },
-};
-</script>
-
-<style lang="scss" scoped>
-@import "@/style/layout-main.scss";
-
-.main_middle{
- width: 97%;
- margin: 10px 18px;
-
- .main_middle_titles{
- width: 100%;
- color: #19F6F8;
- position: relative;
- padding: 10px 15px;
- border-bottom:1px solid #1B50AE ;
- &::before{
- content: "";
- position: absolute;
- left: 5px;
- top: 10px;
- width: 2px;
- height: 18px;
- background-color: #18F6F8;
- }
- }
- .main_middle_matter{
- padding-top: 15px;
- width: 100%;
- display: flex;
- justify-content: space-between;
-
- .middle_items{
- width: 150px;
- height: 80px;
- background: url('../../../assets/stir_img.png') no-repeat;
- background-size: 100% 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- .middle_items_text{
- color: #E1E5EB;
- }
- .middle_items_datas{
- color: #18F6F8;
- font-size: 18px;
- font-weight: 600;
- }
- }
- }
-}
-
-.echarts_items{
- height: 332px;
- padding-top: 10px;
- padding-bottom: 15px;
- margin-bottom: 20px;
- .main_echart_titles{
- width: 97%;
- color: #18F6F8;
- padding-bottom: 15px;
- padding-left: 15px;
- border-bottom: 1px solid #1C51B1;
- position: relative;
- &::before{
- width: 2px;
- height: 15px;
- content: "";
- position: absolute;
- top: 3px;
- left: 5px;
- background-color: #18F6F8;
- }
- }
- .main_content_chart {
- height: 100%;
- }
-}
-/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner{
- color: #19F7F9;
- border-color: #18F6F8;
- background-color: #0D4573!important;
-}
-/deep/.el-radio-button__inner{
- background-color: #0D4573;
- border-color:#18F6F8;
- border-radius: 0px 0px !important;
- border-color: #18F6F8;
- color: #E2E9EE;
-}
-</style>
+<!-- 物资管理=>消耗统计=>钢筋消耗 -->
+<template>
+ <div class="main">
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">型号：</span>
+ <el-select v-model="search.steelId" placeholder="请选择型号" clearable>
+ <el-option v-for="item in optionRebar" :key="item.steelId" :label="item.steelName"
+ :value="item.steelId">
+ </el-option>
+ </el-select>
+ </div>
+ <div class="header_item">
+ <el-radio-group v-model="tabPosition" @input="timesChange">
+ <el-radio-button label="day">日</el-radio-button>
+ <el-radio-button label="month">月</el-radio-button>
+ </el-radio-group>
+ </div>
+ <div class="header_item" v-if="showTimes">
+ <span class="header_label">选择时间：</span>
+ <el-date-picker v-model="search.dayData" :picker-options="pickerOptionsDay" :clearable="false"
+ type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
+ end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <div class="header_item" v-if="!showTimes">
+ <span class="header_label">选择月份：</span>
+ <el-date-picker v-model="search.monthData" :picker-options="pickerOptionsMonth" :clearable="false"
+ type="monthrange" value-format="yyyy-MM" range-separator="至" start-placeholder="开始日期"
+ end-placeholder="结束日期">
+ </el-date-picker>
+ </div>
+ <div class="header_item">
+ <el-button v-if="showButton('search')" icon="el-icon-search" @click="searchButtonInfo()">查询</el-button>
+ <el-button v-if="showButton('export')" icon="el-icon-download"
+ @click="exportBearExcel()">导出Excel</el-button>
+ </div>
+ </div>
+ <div class="main_middle">
+ <div class="main_middle_titles">数据统计</div>
+ <div class="main_middle_matter">
+ <div class="middle_items" v-for="(item, index) in showDatas" :key="index">
+ <div class="middle_items_text">{{ item.steelModel }}</div>
+ <div class="middle_items_datas">{{ item.changeStock }}</div>
+ </div>
+ </div>
+ </div>
+ <div class="main_content" style="overflow:auto;padding-bottom:100px;">
+ <div v-for="(echartItem, echartIndex) in echartsList" :key="echartIndex" class="echarts_items">
+ <div class="main_echart_titles">{{ echartItem.steelModel }}mm</div>
+ <div :id="echartItem.steelId" class="main_content_chart"></div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import {buttonPinia} from '../../../pinia';
+import {downFiles} from '../../../plugins/public';
+export default {
+ name: 'RebarCost',
+ data() {
+ return {
+ search: {
+ dayData: this.getDateTime(),
+ monthData: this.getMonthTime()
+ },//查询条件
+ tabPosition: 'day',//默认展示day
+ showTimes: true,//是否展示日的日期 true：日 false: 月
+ dateType: 1,// 1:日 2:月
+ optionRebar: [],//材料类型
+ showDatas: [],//展示的数据统计
+ echartsList: [],//展示echarts表
+ chartsImage: null,
+ pickerMinDate: '',//日期选择增加限制
+ pickerOptionsDay: { //限制选择日期为15天
+ onPick: ({
+ maxDate,
+ minDate
+ }) => {
+ this.pickerMinDate = minDate.getTime()
+ if (maxDate) {
+ this.pickerMinDate = ''
+ }
+ },
+ disabledDate: (time) => {
+ if (this.pickerMinDate !== '') {
+ const one = 15 * 24 * 3600 * 1000
+ const minTime = this.pickerMinDate - one
+ const maxTime = this.pickerMinDate + one
+ return time.getTime() < minTime || time.getTime() > maxTime
+
+ }
+ }
+ },
+ minDates: null,
+ maxDates: null,
+ pickerOptionsMonth: {
+ disabledDate: (time) => {
+ if (this.minDates !== null) {
+ let minMonth = this.minDates.getMonth(),
+ lastYear = new Date(this.minDates).setMonth(minMonth - 6),
+ nextYear = new Date(this.minDates).setMonth(minMonth + 6);
+ // 只能选 minDate 前后6个月的范围
+ return time.valueOf() < lastYear.valueOf() || time.valueOf() > nextYear.valueOf();
+ }
+ return false;
+ },
+ onPick: ({minDate, maxDate}) => {
+ this.minDates = minDate;
+ this.maxDates = maxDate;
+ }
+ },
+ }
+ },
+ mounted() {
+ this.searchButtonInfo()
+ this.getAllTypes()
+ },
+ methods: {
+ // 转圈圈
+ functionLoading() {
+ this.loadingView = this.$loading({
+ lock: true,
+ text: '请稍后...',
+ spinner: 'el-icon-loading',
+ background: 'rgba(0, 0, 0, 0.7)'
+ });
+ },
+ //导出
+ exportBearExcel() {
+ let params = {
+ steelId: this.search.steelId === undefined || this.search.steelId === '' ? '' : this.search.steelId,
+ dateType: this.dateType
+ }
+ if (this.dateType === 1) {
+ params.strTime = this.search.dayData && this.search.dayData[0]
+ params.endTime = this.search.dayData && this.search.dayData[1]
+ delete params.dayData
+ } else {
+ params.strTime = this.search.monthData && this.search.monthData[0]
+ params.endTime = this.search.monthData && this.search.monthData[1]
+ delete params.monthData
+ }
+ this.functionLoading();
+ this.$api.Analyse.exportRebarCost(params).then(res => {
+ downFiles(res, '钢筋消耗信息', 'xls')
+ this.loadingView.close()
+ })
+ .catch(() => {
+ this.loadingView.close();
+ })
+ },
+ //获取时间(默认15天)
+ getDateTime() {
+ return [new Date(new Date().getTime() - 3600 * 1000 * 24 * 15).toISOString().replace('T', ' ').split('.')[0], new Date().toISOString().replace('T', ' ').split('.')[0]]
+ },
+ //获取时间（默认6个月）
+ getMonthTime() {
+ let date = new Date();
+ let year = date.getFullYear();
+ let month = date.getMonth() + 1;
+ let newYear = 0;
+ let newMonth = 0;
+ let newDateArr = [];
+ for (let i = 0; i < 7; i++) {
+ //这里是获取前六个月,所以循环6次,根据需要修改
+ if (month - i < 1) {
+ //这里的判断是如果当前月份往前推到了去年 需要做的处理
+ newYear = year - 1;
+ newMonth = month - i + 12 >= 10 ? month - i + 12 : '0' + (month - i + 12);
+ newDateArr.push(newYear + '-' + newMonth); //这里拼接格式化,在时间中间加了个-,根据实际需求来
+ } else {
+ newMonth = month - i >= 10 ? month - i : '0' + (month - i); //这里是对月份小于10做加前面加0处理
+ newDateArr.push(year + '-' + newMonth);
+ }
+ }
+ //这里就最后得到当前年月前六个月组成的时间数组,根据需要赋值使用即可
+ const end = newDateArr[0];
+ const start = newDateArr[6];
+ return [start, end];
+ },
+ //获取所有型号
+ getAllTypes() {
+ this.$api.Production.getTableTitleInfo({}).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.optionRebar = res.data
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ },
+ //展示不同的时间
+ timesChange(val) {
+ if (val === 'month') {
+ this.showTimes = false
+ // this.search.dayData = ''
+ this.dateType = 2
+ } else {
+ this.showTimes = true
+ // this.search.monthData = ''
+ this.dateType = 1
+ }
+ },
+ //查询按钮
+ searchButtonInfo() {
+ let params = {
+ steelId: this.search.steelId === undefined || this.search.steelId === '' ? '' : this.search.steelId,
+ dateType: this.dateType
+ }
+ if (this.dateType === 1) {
+ params.strTime = this.search.dayData && this.search.dayData[0]
+ params.endTime = this.search.dayData && this.search.dayData[1]
+ delete params.dayData
+ } else {
+ params.strTime = this.search.monthData && this.search.monthData[0]
+ params.endTime = this.search.monthData && this.search.monthData[1]
+ delete params.monthData
+ }
+ this.$api.Analyse.searchRebarCost(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.echartsList = res.data
+ res.data.forEach(item => {
+ let xtitle = item.betweenDate
+ let showStock = []
+ let _steelStatisticsDtos = {}
+ item.steelStatisticsDtos.forEach(val => {
+ if (!_steelStatisticsDtos[val.getDate]) {
+ _steelStatisticsDtos[val.getDate] = val
+ }
+ })
+ xtitle.forEach(val => {
+ let value = _steelStatisticsDtos[val]
+ showStock.push({
+ getDate: val,
+ changeStock: value ? value.changeStock : 0
+ })
+ })
+ this.$nextTick(() => {
+ this.createCharts(item.steelId, showStock, item.steelModel);
+ })
+ })
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ this.$api.Analyse.searchAnalyse(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.showDatas = res.data
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ },
+ // 创建echart图表
+ createCharts(name, data, titleName) {
+ const labelData = data.map(item => item.getDate);
+ const firstData = data.map(item => item.changeStock ? item.changeStock : 0);
+ this.chartsImage = this.$echarts.init(document.getElementById(name));
+ const option = {
+ animationDuration: 1500,
+ tooltip: {
+ trigger: "axis",
+ backgroundColor: '#071F46',
+ textStyle: {
+ color: '#fff',
+ },
+ formatter: function (params) {
+ var relVal = params[0].name;
+ for (var i = 0; i < params.length; i++) {
+ if (params[i].componentIndex === 0) {
+ relVal +=
+ "<br/>" +
+ params[i].marker +
+ `${titleName}` +
+ " : " +
+ params[i].value;
+ }
+ }
+ return relVal;
+ },
+ },
+ grid: {
+ top: "15%",
+ right: "3%",
+ left: "3%",
+ bottom: "11%",
+ },
+ xAxis: [
+ {
+ type: "category",
+ data: labelData,
+ axisLine: {
+ lineStyle: {
+ width: 2,
+ color: "#B7E4F7",
+ },
+ },
+ axisLabel: {
+ color: "#B7E4F7",
+ },
+ axisTick: {
+ show: false,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ // max: 100,
+ splitNumber: 10,
+ axisLabel: {
+ formatter: "{value}",
+ textStyle: {
+ color: "#CAD3E0",
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ width: 2,
+ type: "dashed",
+ color: "#28477C",
+ },
+ },
+ },
+ {
+ type: "value",
+ max: 100,
+ splitNumber: 10,
+ axisLabel: {
+ formatter: "{value}%",
+ textStyle: {
+ color: "#B7E4F7",
+ },
+ },
+ splitLine: {
+ show: false,
+ },
+ },
+ ],
+ series: [
+ {
+ type: "line",
+ smooth: true,
+ barWidth: 40,
+ data: firstData,
+ yAxisIndex: 0,
+ itemStyle: {
+ normal: {
+ color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(15, 106, 134, 1)", // 0% 处的颜色
+ },
+ {
+ offset: 1,
+ color: "rgba(28, 186, 233, 1)", // 100% 处的颜色
+ },
+ ],
+ false
+ ),
+ },
+ },
+ },
+ ],
+ }
+ this.chartsImage.clear();
+ this.chartsImage.setOption(option);
+ window.onresize = () => {
+ this.chartsImage.resize()
+ }
+ },
+ // 判断按钮权限信息
+ showButton(str) {
+ const pinia = buttonPinia();
+ return pinia.$state.buttonInfo.includes(str);
+ }
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "@/style/layout-main.scss";
+
+.main_middle {
+ width: 97%;
+ margin: 10px 18px;
+
+ .main_middle_titles {
+ width: 100%;
+ color: #19F6F8;
+ position: relative;
+ padding: 10px 15px;
+ border-bottom: 1px solid #1B50AE;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 5px;
+ top: 10px;
+ width: 2px;
+ height: 18px;
+ background-color: #18F6F8;
+ }
+ }
+
+ .main_middle_matter {
+ padding-top: 15px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+
+ .middle_items {
+ width: 150px;
+ height: 80px;
+ background: url('../../../assets/stir_img.png') no-repeat;
+ background-size: 100% 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ .middle_items_text {
+ color: #E1E5EB;
+ }
+
+ .middle_items_datas {
+ color: #18F6F8;
+ font-size: 18px;
+ font-weight: 600;
+ }
+ }
+ }
+}
+
+.echarts_items {
+ height: 332px;
+ padding-top: 10px;
+ padding-bottom: 15px;
+ margin-bottom: 20px;
+
+ .main_echart_titles {
+ width: 97%;
+ color: #18F6F8;
+ padding-bottom: 15px;
+ padding-left: 15px;
+ border-bottom: 1px solid #1C51B1;
+ position: relative;
+
+ &::before {
+ width: 2px;
+ height: 15px;
+ content: "";
+ position: absolute;
+ top: 3px;
+ left: 5px;
+ background-color: #18F6F8;
+ }
+ }
+
+ .main_content_chart {
+ height: 100%;
+ }
+}
+
+/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
+ color: #19F7F9;
+ border-color: #18F6F8;
+ background-color: #0D4573 !important;
+}
+
+/deep/.el-radio-button__inner {
+ background-color: #0D4573;
+ border-color: #18F6F8;
+ border-radius: 0px 0px !important;
+ border-color: #18F6F8;
+ color: #E2E9EE;
+}
+</style>
diff --git a/web/src/views/LayoutIndex/components/LayoutAside.vue b/web/src/views/LayoutIndex/components/LayoutAside.vue
index 04e1cc0..ae8893a 100644
--- a/web/src/views/LayoutIndex/components/LayoutAside.vue
+++ b/web/src/views/LayoutIndex/components/LayoutAside.vue
@@ -1,76 +1,44 @@
<!-- 导航菜单 -->
<template>
<div class="menu_index">
- <el-menu
- unique-opened
- :default-active="$route.path"
- class="el-menu-vertical-demo"
- background-color="transparent"
- text-color="#EAEAEA"
- @select="changeRouter">
- <template v-for="item in routerList">
- <template v-if="item.children && item.children.length > 1">
- <el-submenu :key="item.name" :index="item.path">
- <template slot="title">
- <span>{{item.meta.title}}</span>
- </template>
- <!-- <template v-for="items in item.children">
- <el-menu-item :index="items.path" :key="items.name">{{items.meta.title}}</el-menu-item>
- </template> -->
+ <el-menu unique-opened :default-active="$route.path" class="el-menu-vertical-demo" background-color="transparent"
+ text-color="#EAEAEA" @select="changeRouter">
+ <template v-for="(item, index) in routerList">
-
- <template v-for="three in item.children">
- <template v-if="three.children && three.children.length > 1">
- <el-submenu :key="three.name" :index="three.path" class="titles_two">
- <template slot="title">
- <span>{{three.meta.title}}</span>
- </template>
- <template v-for="items in three.children">
- <el-menu-item
- :index="items.path"
- :key="items.name">
- {{items.meta.title}}
- </el-menu-item>
- </template>
- </el-submenu>
- </template>
- <template v-else-if="three.children && three.children.length === 1">
- <el-submenu :key="three.name" :index="three.path">
- <template slot="title">
- <span>{{three.meta.title}}</span>
- </template>
- <el-menu-item :index="three.children[0].path" :key="three.children[0].name">{{three.children[0].meta.title}}</el-menu-item>
- </el-submenu>
- <!-- <el-menu-item :index="three.children[0].path" :key="three.children[0].name">
- <span slot="title">{{three.children[0].meta.title}}</span>
- </el-menu-item> -->
- </template>
- <template v-else>
- <el-menu-item :index="three.path" :key="three.name">
- <span slot="title">{{three.meta.title}}</span>
+ <template v-if="item.children && item.children.length >= 1">
+ <el-submenu :key="item.name" :index="item.path">
+ <template slot="title">
+ <i class="icon"><img :src="menuIcons[index] ? menuIcons[index] : menuIcons[0]"></i>
+ <span>{{ item.meta.title }}</span>
+ </template>
+ <template v-for=" three in item.children ">
+ <template v-if="three.children && three.children.length >= 1">
+ <el-submenu :key="three.name" :index="three.path" class="titles_two">
+ <template slot="title">
+ <span>{{ three.meta.title }}</span>
+ </template>
+ <el-menu-item class="three-menu-item" v-for=" items in three.children " :index="items.path"
+ :key="items.name">
+ {{ items.meta.title }}
</el-menu-item>
- </template>
+ </el-submenu>
</template>
-
-
- </el-submenu>
- </template>
-
-
-
-
-
- <template v-else-if="item.children && item.children.length === 1">
- <el-menu-item :index="item.children[0].path" :key="item.children[0].name">
- <span slot="title">{{item.children[0].meta.title}}</span>
- </el-menu-item>
- </template>
- <template v-else>
- <el-menu-item :index="item.path" :key="item.name">
- <span slot="title">{{item.meta.title}}</span>
- </el-menu-item>
- </template>
+ <template v-else>
+ <el-menu-item class="two-menu-item" :index="three.path" :key="three.name">
+ <span slot="title">{{ three.meta.title }}</span>
+ </el-menu-item>
+ </template>
+ </template>
+ </el-submenu>
</template>
+
+ <template v-else>
+ <el-menu-item :index="item.path" :key="item.name">
+ <span slot="title">{{ item.meta.title }}</span>
+ </el-menu-item>
+ </template>
+
+ </template>
</el-menu>
</div>
</template>
@@ -81,7 +49,21 @@
data() {
return {
routerList: [], // 导航栏数据
+ menuIcons: []
};
+ },
+ created() {
+ this.menuIcons = [
+ require('@/assets/icon/icon0.png'),
+ require('@/assets/icon/icon1.png'),
+ require('@/assets/icon/icon2.png'),
+ require('@/assets/icon/icon3.png'),
+ require('@/assets/icon/icon4.png'),
+ require('@/assets/icon/icon5.png'),
+ require('@/assets/icon/icon6.png'),
+ require('@/assets/icon/icon7.png'),
+ require('@/assets/icon/icon8.png'),
+ ]
},
mounted() {
this.routerList = this.$router.options.routes
@@ -90,7 +72,7 @@
// 切换路由
changeRouter(path) {
this.$router.push(path).catch(err => {
- console.log(err,"--");
+ console.log(err, "--");
})
}
},
@@ -101,61 +83,67 @@
.menu_index {
height: 100%;
overflow-y: auto;
- border-top: 1px solid rgba(57,181,254,0.16);
-
+ border-top: 1px solid rgba(57, 181, 254, 0.16);
+
+ .icon {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 5px;
+ width: 24px;
+ text-align: center;
+
+ img {
+ width: 65%;
+ }
+ }
&::-webkit-scrollbar {
width: 4px;
}
-
- &::-webkit-scrollbar-thumb {
- border-radius: 10px;
- box-shadow: inset 0 0 5px transparent;
- background: rgba(57, 181, 254, .6);
- }
-
- &::-webkit-scrollbar-track {
- box-shadow: inset 0 0 5px transparent;
- border-radius: 10px;
- background: rgba(57, 181, 254, .5) 5%,;
- }
}
-.titles_two{
- padding-left: 15px;
+.titles_two {
+ text-indent: 30px;
+
+ /deep/ .el-menu {
+ padding: 14px 0;
+ background: rgba(33, 83, 139, .75) !important;
+ }
}
/deep/ .el-menu {
border-right: 0;
}
-/deep/ .el-submenu .el-menu-item {
- height: 40px;
- line-height: 40px;
+/deep/ .three-menu-item {
+ padding-left: 50px !important;
+ height: 45px;
+ line-height: 45px;
+}
+
+/deep/ .two-menu-item {
+ height: 45px;
+ text-indent: 20px;
+ line-height: 45px;
}
/deep/ .el-menu-item.is-active {
- padding-left: 45px!important;
position: relative;
- // margin-left: 10px;
color: #EAEAEA;
border-radius: 3px;
- background: linear-gradient(
- 90deg,
- rgba(57, 181, 254, .5) 5%,
- transparent 95%) !important;
+ background: linear-gradient(90deg, rgba(57, 181, 254, .5) 5%, rgba(57, 181, 254, .1) 100%) !important;
- &::before {
- content: '';
- position: absolute;
- top: 50%;
- left: 0;
- transform: translateY(-50%);
- width: 4px;
- height: 100%;
- background: #3DC8FF;
- border-radius: 3px 0 0 3px;
- }
+ &::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 0;
+ transform: translateY(-50%);
+ width: 4px;
+ height: 100%;
+ background: #3DC8FF;
+ border-radius: 3px 0 0 3px;
+ }
}
.three_item {
@@ -164,7 +152,7 @@
/deep/ .el-submenu .el-submenu__title:hover {
color: #3DC8FF;
- background: rgba(57,181,254,0.7) !important;
+ background: rgba(57, 181, 254, 0.7) !important;
}
/deep/ .el-menu-item:hover {
diff --git a/web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue b/web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue
index 9c46001..f5469f3 100644
--- a/web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue
+++ b/web/src/views/SecureManage/RiskGrad/AreaGuarantee.vue
@@ -12,7 +12,7 @@
</div>
<div class="header_item">
<el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
- <el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
+ <el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
</div>
</div>
@@ -213,8 +213,8 @@
{name: "应对措施", key: "countermeasures", showOverflowTip: true},
{
operation: true, name: "操作", width: 140, value: [
- {name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow},
- {name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow},
+ {name: "修改", permission: "update", handleRow: this.updateRow},
+ {name: "删除", permission: "delete", handleRow: this.deleteRow},
]
},
]
diff --git a/web/src/views/SecureManage/RiskGrad/AreaPolling.vue b/web/src/views/SecureManage/RiskGrad/AreaPolling.vue
index afe80fa..5a9c94f 100644
--- a/web/src/views/SecureManage/RiskGrad/AreaPolling.vue
+++ b/web/src/views/SecureManage/RiskGrad/AreaPolling.vue
@@ -1,3 +1,406 @@
-<template>
- <div>区域巡检</div>
-</template>
\ No newline at end of file
+<!-- 安全管理 ==> 风险分级管控 => 区域巡检-->
+<template>
+ <div class="main">
+ <div class="main_tabs">
+ <el-tabs v-model="activeName">
+ <el-tab-pane label="巡检任务" name="first"></el-tab-pane>
+ <el-tab-pane label="任务打卡" name="second"></el-tab-pane>
+ </el-tabs>
+ </div>
+ <div class="main_header">
+ <div class="header_item">
+ <span class="header_label">巡检任务：</span>
+ <el-input size="mini" v-model="queryInfo.task" placeholder="请输入巡检任务" clearable></el-input>
+ </div>
+ <div class="header_item">
+ <span class="header_label">巡检人员：</span>
+ <el-input size="mini" v-model="queryInfo.realName" placeholder="请输入巡检人员" clearable></el-input>
+ </div>
+ <div class="header_item">
+ <el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
+ <el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
+ </div>
+ </div>
+ <div class="main_content">
+ <cpn-table :table-index="true" :table-loading="tableConfig.loading" :table-data="tableConfig.tableData"
+ :table-columns="tableConfig.tableColumns" :page-total="tableConfig.total" :page-num.sync="queryInfo.pageNum"
+ :page-size.sync="queryInfo.pageSize" :page-change="pageChange">
+ </cpn-table>
+ </div>
+ <!-- dialog -->
+ <el-dialog width="400px" class="prop_dialog" v-if="isRenderDialog" :title="dialogTitle" :visible.sync="asyncVisible"
+ @close="closeForm">
+
+ <!-- <cpn-form :form-config="formConfig" :form-items="formConfig.formItems"></cpn-form> -->
+
+ <el-form class="rule_form" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">
+
+ <el-form-item label="巡检任务:" prop="task">
+ <el-input v-model="ruleForm.task" placeholder="请输入巡检任务" clearable></el-input>
+ </el-form-item>
+
+ <el-form-item label="巡检标准:" prop="standard">
+ <el-input type="textarea" v-model="ruleForm.standard" placeholder="请输入巡检标准" clearable></el-input>
+ </el-form-item>
+
+ <el-form-item label="巡检人员:" prop="realNames">
+ <el-select v-model="ruleForm.realNames" multiple value-key="id" placeholder="请选择巡检人员">
+ <el-option v-for="item in allPersons" :key="item.id" :label="item.label" :value="item"></el-option>
+ </el-select>
+ </el-form-item>
+
+ <div class="divider"><span>巡检路线</span></div>
+
+ <el-form-item label-width="0" v-for="(itemP, index) in ruleForm.paths " :key="index" :prop="'paths.' +
+ index + '.value'" :rules="{ required: true, message: '请选择巡检路线', trigger: 'change' }">
+ <el-select style="margin-right: 10px;width: 323px;" v-model="itemP.value" value-key="id"
+ placeholder="请选择巡检路线">
+ <el-option v-for=" item in allPath" :key="item.id" :label="item.label" :value="item"></el-option>
+ </el-select>
+ <el-button class="delete_btn" @click="delPath(itemP)">删除</el-button>
+ <el-button class="table_btn" v-show="index === ruleForm.paths.length - 1"
+ @click="addPath">添加</el-button>
+ </el-form-item>
+ <!-- <el-form-item label="区域名称:" prop="regionHazardInformId">
+ <el-select v-model="ruleForm.regionHazardInformId" placeholder="请选择区域名称">
+ <el-option v-for="item in areaNames" :key="item.id" :label="item.region" :value="item.id">
+ </el-option>
+ </el-select>
+ </el-form-item> -->
+ </el-form>
+ <div slot="footer">
+ <el-button @click="asyncVisible = false">取 消</el-button>
+ <el-button class="submit_btn" @click="onSubmit('ruleForm')">提 交</el-button>
+ </div>
+ </el-dialog>
+ </div>
+</template>
+<script>
+import {throttle} from '@/plugins/public'
+import cpnTable from '@/components/element/Table'
+// import cpnForm from '@/components/element/Form'
+export default {
+ data() {
+ return {
+ isRenderDialog: false,
+ asyncVisible: false,
+ activeName: 'first', // tabs切换
+ submitMode: '', // 提交方式: add / update
+ allPersons: [], // 巡检人员
+ allPath: [], // 巡检路线
+ queryInfo: {
+ pageNum: 1,
+ pageSize: 10,
+ task: '',
+ realName: '',
+ },
+ ruleForm: {
+ id: '',
+ task: '',
+ standard: '',
+ realNames: [],
+ paths: [
+ {value: ''},
+ ],
+ },
+ rules: {
+ task: [{required: true, message: '请输入巡检任务', trigger: 'blur'}],
+ standard: [{required: true, message: '请输入巡检标准', trigger: 'blur'}],
+ realNames: [{required: true, message: '请选择巡检人员', trigger: 'change'}],
+ },
+ tableConfig: {
+ loading: true,
+ tableData: [],
+ tableColumns: [],
+ total: 0,
+ },
+ formConfig: {}
+ }
+ },
+ components: {
+ cpnTable,
+ // cpnForm,
+ },
+ computed: {
+ isUpdate() {
+ return this.submitMode === 'update'
+ },
+ dialogTitle() {
+ return this.isUpdate ? '修改巡检任务' : '新增巡检任务'
+ },
+ },
+ beforeCreate() {
+ this.$http = this.$api.Safety.RiskGrad.polling
+ },
+ created() {
+ this.setTableColumn()
+ this.setFormColumn()
+ this.getLists()
+ },
+ methods: {
+ // 获取table列表数据
+ getLists() {
+ let params = this.queryInfo
+ let tableConfig = this.tableConfig
+ this.$http.getLists(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ tableConfig.total = res.data.total
+ tableConfig.tableData = res.data.list
+ }
+ tableConfig.loading = false
+ })
+ },
+ // 获取管服人员数据(巡检人员)
+ getPerson() {
+ return new Promise(resolve => {
+ this.$api.Personnerl.SEARCHMORTGAGEELIST({
+ userType: 1,
+ pageNum: 1,
+ pageSize: 9999
+ }).then((res) => {
+ if (res.success) {
+ const list = res.data.list
+ const out = []
+ list.forEach(item => {
+ out.push({
+ id: item.userId,
+ label: item.realName,
+ })
+ })
+ this.allPersons.push(...out)
+ resolve()
+ }
+ })
+ })
+ },
+ // 获取巡检路线
+ getPath() {
+ new Promise(resolve => {
+ this.$api.Safety.RiskGrad.warning.getLists({
+ pageNum: 1,
+ pageSize: 9999
+ }).then((res) => {
+ if (res.success) {
+ const list = res.data.list
+ const out = []
+ list.forEach(item => {
+ out.push({
+ id: item.id,
+ label: item.region
+ })
+ })
+ this.allPath.push(...out)
+ resolve()
+ }
+ })
+ })
+ },
+ // 初始化 table 配置
+ setTableColumn() {
+ this.tableConfig.tableColumns = [
+ {index: true},
+ {name: "巡检任务", key: "task"},
+ {name: "巡检标准", key: "standard"},
+ {name: "巡检人员", key: "regionUsersList", formatter: row => row.realNames},
+ {name: "巡检路线", key: "regionList", formatter: row => row.regions},
+ {
+ operation: true, name: "操作", width: 140, value: [
+ {name: "修改", permission: "update", handleRow: this.updateRow},
+ {name: "删除", permission: "delete", handleRow: this.deleteRow},]
+ },
+ ]
+ },
+ // 初始化 form 配置
+ setFormColumn() {
+ this.formConfig = {
+ formModels: {
+ task: '',
+ standard: '',
+ realNames: [],
+ },
+ formItems: [
+ {type: 'input', label: '巡检任务'},
+ {type: 'textarea', label: '巡检标准'},
+ {
+ type: 'select', label: '用户状态', options: this.allPersons,
+ }
+ // {
+ // type: 'datepicker', label: '创建时间', otherOptions: {
+ // startPlaceholder: '开始时间',
+ // endPlaceholder: '结束时间',
+ // type: 'daterange',
+ // 'unlink-panels': true
+ // }
+ // }
+ ],
+ itemColLayout: {
+ span: 8
+ }
+ }
+ },
+ // 查询按钮列表信息
+ queryReset() {
+ this.queryInfo.pageNum = 1
+ this.queryInfo.pageSize = 10
+ this.getLists()
+ },
+ // 重置表单
+ resetForm(formName) {
+ this.$refs[formName].resetFields()
+ this.ruleForm.paths = [{value: ''}]
+ },
+ // 显示表单
+ async showForm() {
+ !this.allPath.length && this.getPath()
+ !this.allPersons.length && this.getPerson()
+ !this.isRenderDialog && (this.isRenderDialog = true)
+ this.asyncVisible = true
+ },
+ closeForm() {
+ this.resetForm('ruleForm')
+ this.asyncVisible = false
+ },
+ // 添加数据
+ addRow() {
+ this.submitMode = 'add'
+ this.showForm()
+
+
+ console.log(this.allPersons)
+ console.log(this.formConfig)
+ },
+ updateRow(row) {
+ this.submitMode = 'update'
+ this.showForm()
+ this.$nextTick(() => {
+ const {id, task, standard, regionUsersList, regionList} = row
+ const realNames = regionUsersList.map(item => {
+ return {
+ id: item.userId,
+ label: item.realName,
+ }
+ })
+ const paths = regionList.map(item => {
+ return {
+ value: {
+ id: item.regionHazardInformId,
+ label: item.region,
+ },
+ }
+ })
+ this.ruleForm = {
+ id,
+ task,
+ standard,
+ realNames,
+ paths,
+ }
+ })
+ },
+ deleteRow(row) {
+ const params = {id: row.id}
+ this.$confirm("该操作将删除该信息，是否继续删除?", "提示", {
+ confirmButtonText: "确定",
+ cancelButtonText: "取消",
+ type: "warning"
+ }).then(() => {
+ this.$http.delete(params).then(res => {
+ if (res.statusMsg === 'ok') {
+ this.queryReset()
+ this.$message.success("删除成功！")
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ }).catch(() => {
+ this.$message.warning("您已取消")
+ })
+
+ },
+ // 提交表单
+ onSubmit: throttle(function (formName) {
+ this.$refs[formName].validate(valid => {
+ if (!valid) return
+ const {id, task, standard, realNames, paths} = this.ruleForm
+ const regionList = paths.map((item, index) => {
+ return {
+ sort: index + 1,
+ regionHazardInformId: item.value.id,
+ }
+ })
+ const regionUsersList = realNames.map(item => {
+ return {
+ userId: item.id,
+ }
+ })
+ const params = {
+ task,
+ standard,
+ regionList,
+ regionUsersList,
+ }
+ if (this.isUpdate) {
+ // 更新
+ params.id = id
+ this.$http.update(params).then((res) => {
+ if (res.statusMsg === 'ok') {
+ this.closeForm()
+ this.getLists()
+ this.$message.success('更新成功！')
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ } else {
+ // 添加
+ this.$http.insert(params).then((res) => {
+ if (res.statusMsg === 'ok') {
+ this.closeForm()
+ this.getLists()
+ this.$message.success('添加成功！')
+ } else {
+ this.$message.warning(res.statusMsg)
+ }
+ })
+ }
+ })
+ }, 1000),
+ addPath() {
+ this.ruleForm.paths.push({
+ value: ''
+ })
+ },
+ delPath(item) {
+ var index = this.ruleForm.paths.indexOf(item)
+ if (index !== -1) {
+ this.ruleForm.paths.splice(index, 1)
+ }
+ },
+ pageChange() {
+ this.getLists()
+ },
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/style/layout-main.scss';
+
+.divider {
+ position: relative;
+ margin-bottom: 30px;
+ text-indent: 10px;
+ color: #fff;
+ border-left: 3px solid #18F6F8;
+
+ &::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: -8px;
+ width: 100%;
+ padding: 20px 0;
+ border-bottom: 1px solid #0C4D6F;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/views/SecureManage/RiskGrad/DangerInform.vue b/web/src/views/SecureManage/RiskGrad/DangerInform.vue
index c1499b0..6f6c271 100644
--- a/web/src/views/SecureManage/RiskGrad/DangerInform.vue
+++ b/web/src/views/SecureManage/RiskGrad/DangerInform.vue
@@ -13,7 +13,7 @@
</div>
<div class="header_item">
<el-button icon="el-icon-search" v-permission="'search'" @click="queryReset">查询</el-button>
- <el-button class="search_btn" icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
+ <el-button icon="el-icon-plus" v-permission="'insert'" @click="addRow">新增</el-button>
</div>
</div>
@@ -138,8 +138,8 @@
{name: "区域颜色", key: "regionColor"},
{
operation: true, name: "操作", width: 140, value: [
- {name: "修改", class: "table_btn", permission: "update", handleRow: this.updateRow},
- {name: "删除", class: "delete_btn", permission: "delete", handleRow: this.deleteRow},
+ {name: "修改", permission: "update", handleRow: this.updateRow},
+ {name: "删除", permission: "delete", handleRow: this.deleteRow},
]
},
]
--
Gitblit v1.9.3