<!-- * @Author: zhp * @Date: 2023-12-12 13:45:25 * @LastEditTime: 2024-04-24 15:29:21 * @LastEditors: DY * @Description: --> <template> <div class="app-container"> <div v-if="product"> <el-form :inline="true" :model="dataForm" class="blueTip"> <el-form-item> <el-date-picker v-model="reportTime" type="week" size="small" @change="changeTime" :picker-options="{firstDayOfWeek: 4}" :format="'yyyy 第 WW 周' + '\u3000' + startTimeStamp + '-' + endTimeStamp" style="width: 350px" placeholder="选择周"> </el-date-picker> </el-form-item> <el-button v-if="this.$auth.hasPermi('base:report-auto-production:query')" type="primary" @click="getDataList()"> 查询 </el-button> <el-button v-if="this.$auth.hasPermi('base:report-auto-production:export')" type="primary" size="small" plain @click="handleExport">导出</el-button> </el-form> <el-row style="float: right; margin-bottom: 5px"> <el-button v-if="!isSave && this.$auth.hasPermi('base:report-auto-production:update')" :disabled="noData" size="small" @click="editDataList()">编辑</el-button> <el-button v-if="isSave" size="small" @click="handleReturn()">返回</el-button> <el-button size="small" v-if="isSave" @click="saveDataList()">保存</el-button> </el-row> </div> <el-table id="exportproductionTable" :data="list" style="width: 100%" :header-cell-style="{ background: '#F2F4F9', color: '#606266' }"> <el-table-column :label="'许昌安彩周成品生产汇总' + '(' + timeTips + ')'" align="center"> <el-table-column prop="lineId" label="生产线" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.lineName" :disabled="disabled"></el-input> <span v-else>{{ scope.row.lineName }} </span> </template> </el-table-column> <el-table-column label="投入数㎡" align="center"> <el-table-column prop="inputNow" label="本周" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.inputNow" :disabled="disabled"></el-input> <span v-else>{{ scope.row.inputNow }} </span> </template> </el-table-column> <el-table-column prop="inputHis" label="上周" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.inputHis" :disabled="disabled"></el-input> <span v-else>{{ scope.row.inputHis }} </span> </template> </el-table-column> <el-table-column prop="inputTrend" label="增减" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.inputTrend" :disabled="!disabled"></el-input> <span v-else>{{ scope.row.inputTrend && scope.row.inputTrend != 0 ? parseFloat((scope.row.inputTrend * 100).toFixed(2)) + '%' : scope.row.inputTrend == 0 ? 0 : null }} </span> </template> </el-table-column> </el-table-column> <el-table-column label="完成良品产量" align="center"> <el-table-column prop="goodProductNow" label="本周" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.goodProductNow" :disabled="disabled"> </el-input> <span v-else>{{ scope.row.goodProductNow }} </span> </template> </el-table-column> <el-table-column prop="goodProductHis" label="上周" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.goodProductHis" :disabled="disabled"> </el-input> <span v-else>{{ scope.row.goodProductHis }} </span> </template> </el-table-column> <el-table-column prop="goodProductTrend" label="增减" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.goodProductTrend" :disabled="!disabled"> </el-input> <span v-else>{{ scope.row.goodProductTrend && scope.row.goodProductTrend != 0 ? parseFloat((scope.row.goodProductTrend * 100).toFixed(2)) + '%' : scope.row.goodProductTrend == 0 ? 0 : null }} </span> </template> </el-table-column> </el-table-column> <el-table-column label="原片漏检率" align="center"> <el-table-column prop="missCheckNow" label="本周" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.missCheckNow" :disabled="disabled"></el-input> <span v-else>{{ scope.row.missCheckNow ? parseFloat((scope.row.missCheckNow * 100).toFixed(2)) + '%' : null }} </span> </template> </el-table-column> <el-table-column prop="missCheckHis" label="上周" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.missCheckHis" :disabled="disabled"></el-input> <span v-else>{{ scope.row.missCheckHis ? parseFloat((scope.row.missCheckHis * 100).toFixed(2)) + '%' : null }} </span> </template> </el-table-column> <el-table-column prop="missCheckTrend" label="增减" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.missCheckTrend" :disabled="!disabled"> </el-input> <span v-else>{{ scope.row.missCheckTrend && scope.row.missCheckTrend != 0 ? parseFloat((scope.row.missCheckTrend * 100).toFixed(2)) + '%' : scope.row.missCheckTrend == 0 ? 0 : null }} </span> </template> </el-table-column> </el-table-column> <el-table-column label="综合良品率" align="center"> <el-table-column prop="goodProductPassNow" label="本周" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.goodProductPassNow" :disabled="!disabled"> </el-input> <span v-else>{{ scope.row.goodProductPassNow ? parseFloat((scope.row.goodProductPassNow * 100).toFixed(2)) + '%' : null }} </span> </template> </el-table-column> <el-table-column prop="goodProductPassHis" label="上周" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.goodProductPassHis" :disabled="!disabled"> </el-input> <span v-else>{{ scope.row.goodProductPassHis ? parseFloat((scope.row.goodProductPassHis * 100).toFixed(2)) + '%' : null }} </span> </template> </el-table-column> <el-table-column prop="goodProductPassTrend" label="增减" align="center"> <template slot-scope="scope"> <el-input v-if="!disabled" type="number" v-model="scope.row.goodProductPassTrend" :disabled="!disabled"> </el-input> <span v-else>{{ scope.row.goodProductPassTrend && scope.row.goodProductPassTrend != 0 ? parseFloat((scope.row.goodProductPassTrend * 100).toFixed(2)) + '%' : scope.row.goodProductPassTrend == 0 ? 0 : null }} </span> </template> </el-table-column> </el-table-column> </el-table-column> <!-- <div style="height: 50px;" class="remark" slot="append"> <el-input placeholder="备注" v-if="!disabled" v-model="remark" :disabled="disabled"> </el-input> <span v-else>{{ remark }} </span> </div> --> </el-table> <div style="height: 50px;" class="remark"> <el-input placeholder="备注" v-model="remark" :disabled="disabled"> </el-input> </div> <!-- 搜索工作栏 --> <!-- <SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" @headBtnClick="handleSearchBarBtnClick" /> --> <!-- 列表 --> <!-- <base-table :table-props="tableProps" :page="1" :limit="10" :summary-method="getSummaries" show-summary :table-data="list"> </base-table> --> <!-- 分页组件 --> <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getList" /> --> </div> </template> <script> import { getProductionDataList, updateProductionDataList, updateSumProductionDataList, exportProductExcel } from '@/api/report/production'; // import Editor from '@/components/Editor'; import moment from 'moment'; // import DialogForm from './dialogForm.vue'; import { getCorePLList } from '@/api/base/coreProductionLine' import { parseTime } from '../../core/mixins/code-filter'; import FileSaver from 'file-saver' import * as XLSX from 'xlsx' // import basicPageMixin from '@/mixins/lb/basicPageMixin'; const tableProps = [ { // width: 128, prop: 'lineId', label: '生产线', }, { // width: 128, prop: '', label: '投入数㎡', align: 'center', children: [ { prop: 'inputNow', label: '本周' }, { prop: 'inputHis', label: '上周' }, { prop: 'inputTrend', label: '增减' } ] }, { // width: 128, prop: '', label: '完成良品产量', align: 'center', children: [ { prop: 'goodProductNow', label: '本周' }, { prop: 'goodProductHis', label: '上周' }, { prop: 'goodProductTrend', label: '增减' } ] }, { // width: 128, prop: '', label: '原片漏检率', align: 'center', children: [ { prop: 'missCheckNow', label: '本周' }, { prop: 'missCheckHis', label: '上周' }, { prop: 'missCheckTrend', label: '增减' } ] }, { // width: 128, prop: '', label: '综合良品率', align: 'center', children: [ { prop: 'goodProductPassNow', label: '本周' }, { prop: 'goodProductPassHis', label: '上周' }, { prop: 'goodProductPassTrend', label: '增减' } ] }, ]; export default { name: 'statisticalData', // components: { // DialogForm, // }, // mixins: [basicPageMixin], props: { product: { type: Boolean, default: true }, params: { type: Object, default: () => {} } }, data() { return { list: [], remark:'', // dynamicProps: [], tableProps, urlOptions: { exportURL: exportProductExcel }, timeTips: '', startTimeStamp: '', endTimeStamp: '', // dataForm: { // reportTime:undefined // }, isSave:false, disabled: true, sumArr: [], noData:false, weekValue1: null,//最多24周 weekValue2: null, searchBarFormConfig: [ // { // type: 'select', // label: '工单名称', // placeholder: '请选择工单名称', // param: 'workOrderIdList', // selectOptions: [], // multiple: true, // labelField: 'name', // valueField: 'id', // defaultSelect: [] // }, // { // type: 'select', // label: '产品', // placeholder: '请选择产品', // param: 'productionId', // selectOptions: [], // }, // { // type: 'input', // label: '检测内容', // placeholder: '请输入检测内容', // param: 'inspectionDetContent', // }, { type: 'datePicker', label: '时间段', dateType: 'daterange', // datetimerange // format: 'yyyy-MM-dd HH:mm:ss', format: 'yyyy-MM-dd HH:mm:ss', valueFormat: 'yyyy-MM-dd HH:mm:ss', rangeSeparator: '-', startPlaceholder: '开始日期', endPlaceholder: '结束日期', defaultTime: ['00:00:00', '23:59:59'], param: 'checkTime', // width: 350, }, { type: 'button', btnName: '查询', name: 'search', color: 'primary', }, // { // type: this.$auth.hasPermi( // 'base:quality-inspection-record:create' // ) // ? 'button' // : '', // btnName: '新增', // name: 'add', // plain: true, // color: 'success', // }, ], reportTime:'', pickerOptionsWeek: { disabledDate(time) { let day = Date.now() let limitTime = moment(day).day(-1) return time.getTime() > new Date(limitTime).getTime() } }, dataForm: { // workOrderIdList:undefined, // productionId: undefined, // startTime: undefined, // endTime: undefined, reportTime: [], reportType:3 // productionLineId: null, }, }; }, created() { // this.getProductLineList(); }, mounted() { // if (this.$route.params.startTime && this.$route.params.endTime) { // this.searchBarFormConfig[0].defaultSelect = [ // this.$route.params.startTime, // this.$route.params.endTime, // ]; // this.queryParams.param = {}; // this.$set( // this.queryParams.param, // 'startTime', // this.$route.params.startTime // ); // this.$set(this.queryParams.param, 'endTime', this.$route.params.endTime); // } else { // this.searchBarFormConfig[0].defaultSelect = []; // } this.getCurrentWeekStartTimeAndEndTime() this.getDataList() this.getDict() }, methods: { handleReturn() { this.disabled = true this.isSave = false this.getDataList() }, async getDict() { // 产线列表 const res = await getCorePLList() this.proLineList = res.data; }, getCurrentWeekStartTimeAndEndTime() { this.reportTime = new Date() var weekday = new Array(7); weekday[0] = "Sunday"; weekday[1] = "Monday"; weekday[2] = "Tuesday"; weekday[3] = "Wednesday"; weekday[4] = "Thursday"; weekday[5] = "Friday"; weekday[6] = "Saturday"; // console.log(weekday[this.reportTime.getDay()]); if (weekday[this.reportTime.getDay()] === 'Monday') { this.startTimeStamp = this.timeFun(new Date().getTime() - 4 * 24 * 60 * 60 * 1000) this.endTimeStamp = this.timeFun(new Date().getTime() + 3 * 24 * 60 * 60 * 1000) this.dataForm.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 07:00:01').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 this.dataForm.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 07:00:00').getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 // this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间 this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] // this.changeTime(reportTime) } else if (weekday[this.reportTime.getDay()] === 'Tuesday') { this.startTimeStamp = this.timeFun(new Date().getTime() - 5 * 24 * 60 * 60 * 1000) this.endTimeStamp = this.timeFun(new Date().getTime() + 2 * 24 * 60 * 60 * 1000) this.dataForm.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 07:00:01').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 this.dataForm.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 07:00:00').getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 // this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间 this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] // this.changeTime(reportTime) } else if (weekday[this.reportTime.getDay()] === 'Wednesday') { this.startTimeStamp = this.timeFun(new Date().getTime() - 6 * 24 * 60 * 60 * 1000) this.endTimeStamp = this.timeFun(new Date().getTime() + 1 * 24 * 60 * 60 * 1000) this.dataForm.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 07:00:01').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 this.dataForm.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 07:00:00').getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 // this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间 this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] // this.changeTime(reportTime) } else if (weekday[this.reportTime.getDay()] === 'Thursday') { this.startTimeStamp = this.timeFun(new Date().getTime() - 7 * 24 * 60 * 60 * 1000) this.endTimeStamp = this.timeFun(new Date().getTime()) this.dataForm.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 07:00:01').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 this.dataForm.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 07:00:00').getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 // this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间 this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] // this.changeTime(reportTime) } else if (weekday[this.reportTime.getDay()] === 'Friday') { this.startTimeStamp = this.timeFun(new Date().getTime() - 8 * 24 * 60 * 60 * 1000) this.endTimeStamp = this.timeFun(new Date().getTime() - 1 * 24 * 60 * 60 * 1000) this.dataForm.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 07:00:01').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 this.dataForm.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 07:00:00').getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 // this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间 this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] // this.changeTime(reportTime) } else if (weekday[this.reportTime.getDay()] === 'Saturday') { this.startTimeStamp = this.timeFun(new Date().getTime() - 9 * 24 * 60 * 60 * 1000) this.endTimeStamp = this.timeFun(new Date().getTime() - 2 * 24 * 60 * 60 * 1000) this.dataForm.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 07:00:01').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 this.dataForm.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 07:00:00').getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 // this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间 this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] // this.changeTime(reportTime) } else if (weekday[this.reportTime.getDay()] === 'Sunday') { this.startTimeStamp = this.timeFun(new Date().getTime() - 10 * 24 * 60 * 60 * 1000) this.endTimeStamp = this.timeFun(new Date().getTime() + 3 * 24 * 60 * 60 * 1000) this.dataForm.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 07:00:01').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 this.dataForm.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 07:00:00').getTime()) //+ ' 23:59:59' //new Date(this.endTimeStamp + ' 23:59:59').getTime() / 1000 // this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 5); //结束时间 this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] // this.changeTime(reportTime) } }, handleExport() { // 处理查询参数 var xlsxParam = { raw: true }; /* 从表生成工作簿对象 */ import('xlsx').then(excel => { var wb = excel.utils.table_to_book( document.querySelector("#exportproductionTable"), xlsxParam ); /* 获取二进制字符串作为输出 */ var wbout = excel.write(wb, { bookType: "xlsx", bookSST: true, type: "array", }); try { FileSaver.saveAs( //Blob 对象表示一个不可变、原始数据的类文件对象。 //Blob 表示的不一定是JavaScript原生格式的数据。 //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。 //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。 new Blob([wbout], { type: "application/octet-stream" }), //设置导出文件名称 "许昌安彩周成品生产汇总.xlsx" ); } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); } return wbout; //do something...... }) }, startWeek() { // console.log(this.weekValue1); if (this.weekValue1 && this.weekValue2) { let a = new Date(this.weekValue1).getTime() let b = new Date(this.weekValue2).getTime() if (a > b) { this.$modal.msgError('开始时间不能晚于结束时间,请重新选择') this.weekValue1 = null return false } if (b - a > 167 * 24 * 3600000) { this.$modal.msgError('最大时间范围为24周,请重新选择') this.weekValue1 = null return false } } }, endWeek() { if (this.weekValue1 && this.weekValue2) { let a = new Date(this.weekValue1).getTime() let b = new Date(this.weekValue2).getTime() if (a > b) { this.$modal.msgError('结束时间不能早于开始时间,请重新选择') this.weekValue2 = null return false } if (b - a > 167 * 24 * 3600000) { this.$modal.msgError('最大时间范围为24周,请重新选择') this.weekValue2 = null return false } } }, editDataList() { this.disabled = false this.isSave = true }, async saveDataList() { let obj = {} this.list.forEach((ele, index) => { if (ele.det === false) { this.list[index].lineId = '' this.list[index].remark = this.remark obj = ele this.list.splice(index,1) } }) let updateArr = this.list updateArr.forEach((ele, index) => { delete ele.inputTrend delete ele.goodProductTrend delete ele.missCheckTrend delete ele.goodProductPassTrend }); // console.log(JSON.stringify(updateArr[1])) const result = await Promise.all([ await updateSumProductionDataList(obj), await updateProductionDataList(updateArr), ]) console.log(result); if (result[0].data == true && result[1].data == true) { // console.log(res) this.disabled = true this.isSave = false this.getDataList() } }, changeTime(val) { console.log(val); if (val) { let timeStamp = val.getTime(); //标准时间转为时间戳,毫秒级别 this.startTimeStamp = this.timeFun(timeStamp - 24 * 60 * 60 * 1000); //开始时间 this.endTimeStamp = this.timeFun(timeStamp + (24 * 60 * 60 * 1000) * 6); //结束时间 console.log(this.startTimeStamp, this.endTimeStamp) this.dataForm.reportTime[0] = parseTime(new Date(this.startTimeStamp + ' 07:00:01').getTime()) //+ ' 00:00:00' //new Date(this.startTimeStamp + ' 00:00:00').getTime() / 1000 this.dataForm.reportTime[1] = parseTime(new Date(this.endTimeStamp + ' 07:00:00').getTime()) this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] } else { this.dataForm.reportTime = [] } }, //时间戳转为yy-mm-dd hh:mm:ss timeFun(unixtimestamp) { var unixtimestamp = new Date(unixtimestamp); var year = 1900 + unixtimestamp.getYear(); var month = "0" + (unixtimestamp.getMonth() + 1); var date = "0" + unixtimestamp.getDate(); return year + "-" + month.substring(month.length - 2, month.length) + "-" + date.substring(date.length - 2, date.length) }, async getDataList() { if (this?.params) { this.dataForm = {...this.params} this.timeTips = this.dataForm.reportTime[0] + ' - ' + this.dataForm.reportTime[1] } else { if (this.weekValue1 && this.weekValue2) { this.dataForm.reportTime[0] = moment(this.weekValue1).day(0).format('YYYY-MM-DD') + ' 07:00:01' // this.queryParams.startTime = this.monthValue[0] this.dataForm.reportTime[1] = moment(this.weekValue2).day(6).format('YYYY-MM-DD') + ' 07:00:00' } else { } } if (this.dataForm.reportTime.length == 0) { this.$message({ message: '请选择时间', type: 'warning' }) return false } this.loading = true; // 执行查询 const res = await this.$axios({ url: '/base/report-auto-production/page', method: 'get', params: this.dataForm }) // console.log(this.queryParams); console.log(res) if (res.data.list.length == 0) { this.noData = true } else { this.noData = false } // let sum = undefined // res.data.list.forEach((ele, index) => { // if (ele.det === false) { // sum = res.data.list.splice(index, 1) // } // }) res.data.list.forEach((ele,index) => { if (ele.det === false) { res.data.list[index].lineName = '合计' this.remark = res.data.list[index].remark } }) res.data.list.forEach(item => { this.proLineList.forEach(it => { if (item.lineId === it.id) { console.log(item) item.lineName = it.name } }) }) this.list = res.data.list }, }, }; </script> <style scoped> /* .blueTip { */ /* padding-bottom: 10px; */ /* } */ .blueTip::before{ display: inline-block; content: ''; width: 4px; height: 18px; background: #0B58FF; border-radius: 1px; margin-right: 8PX; margin-top: 8px; } </style>