web苏州:1.3级导航样式修改 2.区域巡检提测 3.消耗统计提测

unknown

2023-11-14 9c331d555ce7e82b4226556770a81c444442bb37

web苏州:1.3级导航样式修改 2.区域巡检提测 3.消耗统计提测

 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 }),

    }

  },






 web/src/assets/icon/icon0.png

 web/src/assets/icon/icon1.png

 web/src/assets/icon/icon2.png

 web/src/assets/icon/icon3.png

 web/src/assets/icon/icon4.png

 web/src/assets/icon/icon5.png

 web/src/assets/icon/icon6.png

 web/src/assets/icon/icon7.png

 web/src/assets/icon/icon8.png

 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>


 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)

    }

  }

})


 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">


 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">

 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>


 web/src/views/GoodManage/CostStatistics/EnergyCost.vue

@@ -1,3 +1,59 @@
<template>
    <div>能源消耗</div>
</template>
<!-- 物资管理=>消耗统计=>能源消耗 -->

<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>

 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>


 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>


 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 {

 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},

                    ]

                },

            ]


 web/src/views/SecureManage/RiskGrad/AreaPolling.vue

@@ -1,3 +1,406 @@
<template>
    <div>区域巡检</div>
</template>
<!-- 安全管理 ==> 风险分级管控 => 区域巡检-->

<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>

 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},

                    ]

                },

            ]