|
|
<template > <div class="mod-config" ref="getHeight"> <div> <span @click="favoriteFunction()"> <icon-svg :name="favorite?'xiangqufill':'xiangqu'" class="sl-svg" ></icon-svg> </span> </div> <el-form :inline="true" :model="querySysLanguagePack" @keyup.enter.native="getDataList()"> <el-form-item :label="inputLabel.headerInput.label1"> <el-input style="width: 100px;" v-model="queryDetailData.toolId" ></el-input> </el-form-item> <el-form-item :label="inputLabel.headerInput.label2"> <el-input style="width: 100px;" v-model="queryDetailData.toolInstanceId" ></el-input> </el-form-item> <el-form-item :label="inputLabel.headerInput.label3"> <el-input style="width: 100px;" v-model="queryDetailData.toolDescription" ></el-input> </el-form-item> <el-form-item> <el-button @click="getDataList()" type="primary">{{buttons.search}}</el-button> <el-button @click="saveColumnList()" type="primary" v-show="showDefault">{{buttons.defaultTable}} </el-button> <el-button @click="userSetting" type="primary">{{ buttons.settingTable}}</el-button> <download-excel :fields="fields()" :data="exportData" type="xls" :name="exportName" :header="exportHeader" :footer="exportFooter" :defaultValue="exportDefaultValue" :fetch="createExportData" :before-generate="startDownload" :before-finish="finishDownload" worksheet="导出信息" class="el-button el-button--primary el-button--medium"> {{buttons.download}} </download-excel>
<el-button v-if="isAuth(':prd:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">{{ buttons.deleteList}} </el-button> </el-form-item> </el-form> <el-table id="commmon" :height="height" :data="dataList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" @cell-click = "toolDetailChange" style="width: 100%;"> <el-table-column v-for="(item,index) in columnList" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed" :width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> </el-table> <el-table id="commmon1" :height="detailHeight" :data="detailTransList" border v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;"> <el-table-column v-for="(item,index) in columnList1" :key="index" :sortable="item.columnSortable" :prop="item.columnProp" :header-align="item.headerAlign" :show-overflow-tooltip="item.showOverflowTooltip" :align="item.align" :fixed="item.fixed" :width="item.columnWidth" :label="item.columnLabel"> <template slot-scope="scope"> <span v-if="!item.columnHidden"> {{scope.row[item.columnProp]}}</span> <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span> </template> </el-table-column> </el-table> <column v-if="visible" ref="column" @refreshData="getTableUserColumn"></column>
</div></template>
<script>
import column from "../common/column"; import { searchSysLanguagePackList, searchSysLanguageParam, searchFunctionButtonList, saveButtonList, searchSysLanguage, searchLanguageListByLanguageCode, saveSysLanguageOne } from "@/api/sysLanguage.js" import getLodop from '@/utils/LodopFuncs.js' import { saveTableDefaultList, saveTableUser, getTableDefaultListLanguage, getTableUserListLanguage } from "@/api/table.js" import { userFavoriteList, saveUserFavorite, removeUserFavorite } from '@/api/userFavorite.js'import { getToolDetailResumeList, getToolDetailTrans,} from '@/api/toolMan/toolResume.js' export default { components: { column }, data() { return { detailTransList : [], currentDetailData : { site : this.$store.state.user.site, toolInstanceId : '', }, queryDetailData : { site : this.$store.state.user.site, toolId : '', toolInstanceId : '', toolDescription : '', status : '', }, inputLabel :{ headerInput : { label1 : '工具编码', label2 : '工具实例编码', label3 : '工具名称', }, }, // table高度
height:450, detailHeight : 300, // 是否收藏
favorite: false, addLanguage: false, functionId: 1101, tableId: "toolDetail1101", value1: true, visible: false, showDefault: false, // 默认table 查询参数
queryTable: { functionId: 1101, tableId: "toolDetail1101", languageCode: this.$i18n.locale }, // 用户table 查询参数
queryTableUser: { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolDetail1101", status: true, languageCode: this.$i18n.locale }, // 语言词典查询参数
querySysLanguageParam: { languageCode: this.$i18n.locale }, // 语言词典集合
sysLanguageParams: [], // 用户table 配置集合
userColumnList: [], // 展示列集
columnList: [ { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101ToolId', tableId: "toolDetail1101", tableName: "common", columnProp: "toolId", headerAlign: "center", align: "center", columnLabel: "工具编码", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 80, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101ToolInstanceId', tableId: "toolDetail1101", tableName: "common", columnProp: "toolInstanceId", headerAlign: "center", align: "center", columnLabel: "工具实例编码", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 95, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101type', tableId: "toolDetail1101", tableName: "common", columnProp: "toolDescription", headerAlign: "center", align: "center", columnLabel: "工具名称", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 80, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101CreateDate', tableId: "toolDetail1101", tableName: "common", columnProp: "createDate", headerAlign: "center", align: "center", columnLabel: "接收日期", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 135, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101Status', tableId: "toolDetail1101", tableName: "common", columnProp: "status", headerAlign: "center", align: "center", columnLabel: "状态", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 60, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101CurrLocationId', tableId: "toolDetail1101", tableName: "common", columnProp: "currLocationId", headerAlign: "center", align: "center", columnLabel: "库位编码", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 75, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101CurrLocationId', tableId: "toolDetail1101", tableName: "common", columnProp: "locationName", headerAlign: "center", align: "center", columnLabel: "库位名称", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 95, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101DeliveryDate', tableId: "toolDetail1101", tableName: "common", columnProp: "deliveryDate", headerAlign: "center", align: "center", columnLabel: "送修日期", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 135, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101TransNo', tableId: "toolDetail1101", tableName: "common", columnProp: "transNo", headerAlign: "center", align: "center", columnLabel: "送修单号", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101SupplierName', tableId: "toolDetail1101", tableName: "common", columnProp: "supplierName", headerAlign: "center", align: "center", columnLabel: "维修供应商", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 190, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101ActualuseQty', tableId: "toolDetail1101", tableName: "common", columnProp: "actualuseQty", headerAlign: "center", align: "center", columnLabel: "已使用次数", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 90, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101EstuseQty', tableId: "toolDetail1101", tableName: "common", columnProp: "estuseQty", headerAlign: "center", align: "right", columnLabel: "预计使用次数", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 100, }, { userId: this.$store.state.user.name, functionId: 1101, serialNumber: 'toolDetail1101Prop', tableId: "toolDetail1101", tableName: "common", columnProp: "prop", headerAlign: "center", align: "center", columnLabel: "占比", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 60, }, ], // 展示列集
columnList1: [ { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "transNo", headerAlign: "center", align: "center", columnLabel: "单号", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 135, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "toolInstanceId", headerAlign: "center", align: "center", columnLabel: "工具实例编码", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 100, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "locationId", headerAlign: "center", align: "center", columnLabel: "库位编码", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 80, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "locationName", headerAlign: "center", align: "center", columnLabel: "库位名称", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 80, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "supplierName", headerAlign: "center", align: "center", columnLabel: "供应商", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 135, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "oper", headerAlign: "center", align: "center", columnLabel: "操作名称", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 80, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "orderNo", headerAlign: "center", align: "center", columnLabel: "工单号", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 90, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "createdBy", headerAlign: "center", align: "center", columnLabel: "操作人", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 80, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "createDate", headerAlign: "center", align: "center", columnLabel: "操作时间", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 135, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "passFlag", headerAlign: "center", align: "center", columnLabel: "检验状态", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101", tableName: "toolTransTable", columnProp: "actCheckBy", headerAlign: "center", align: "center", columnLabel: "检验人", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101ActCheckDate", tableName: "toolTransTable", columnProp: "actCheckDate", headerAlign: "center", align: "center", columnLabel: "检验时间", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 135, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101DefectCode", tableName: "toolTransTable", columnProp: "defectCode", headerAlign: "center", align: "center", columnLabel: "责任类型", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 90, }, { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolTrans1101Remark2", tableName: "toolTransTable", columnProp: "remark2", headerAlign: "center", align: "center", columnLabel: "原因", columnHidden: false, columnImage: false, columnSortable: false, sortLv: 0, status: true, fixed: false, columnWidth : 135, }, ], // 数据集
dataList: [], queryButton: { functionId: 1101, table_id: 'toolDetail1101', languageCode: this.$i18n.locale, objectType: 'button' }, buttons: { add: '添加', edit: '编辑', delete: '删除', deleteList: '批量删除', cz: '操作', search: '查询', download: '导出', settingTable: '设置列表', defaultTable: '设置默认配置' }, // 导出 start
exportData: [], exportName: "页面功能语言", exportHeader: ["页面功能语言"], exportFooter: [], exportDefaultValue: "这一行这一列没有数据", // 导出 end
buttonList: [ // {
// functionId: "1101",
// languageValue: '添加',
// objectId: 'add',
// objectType: "button",
// tableId: "toolDetail1101"
// },
// {
// functionId: "1101",
// languageValue: '编辑',
// objectId: 'edit',
// objectType: "button",
// tableId: "toolDetail1101"
// },
// {
// functionId: "1101",
// languageValue: '删除',
// objectId: 'delete',
// objectType: "button",
// tableId: "toolDetail1101"
// },
// {
// functionId: "1101",
// languageValue: '批量删除',
// objectId: 'deleteList',
// objectType: "button",
// tableId: "toolDetail1101"
// },
// {
// functionId: "1101",
// languageValue: '操作',
// objectId: 'cz',
// objectType: "button",
// tableId: "toolDetail1101"
// },
// {
// functionId: "1101",
// languageValue: '查询',
// objectId: 'search',
// objectType: "button",
// tableId: "toolDetail1101"
// },
// {
// functionId: "1101",
// languageValue: '导出',
// objectId: 'download',
// objectType: "button",
// tableId: "toolDetail1101"
// },
// {
// functionId: "1101",
// languageValue: '设置列表',
// objectId: 'settingTable',
// objectType: "button",
// tableId: "toolDetail1101"
// },
// {
// functionId: "1101",
// languageValue: '设置默认配置',
// objectId: 'defaultTable',
// objectType: "button",
// tableId: "toolDetail1101"
// }
], languageList: [], languageColumnList: [], languageDataList: [], queryLanguage: {}, // 数据集条件
querySysLanguagePack: { functionId: '', page: 1, limit: 1, languageValue: '', objectType: '', objectId: '' }, // 分页
pageIndex: 1, pageSize: 20, totalPage: 0, dataListLoading: false, dataListSelections: [], addOrUpdateVisible: false } }, mounted() { this.$nextTick(()=>{ console.log("window.innerHeight =" + window.innerHeight) this.detailHeight = (window.innerHeight - 200) * 0.6; console.log(this.detailHeight) }) this.$nextTick(()=>{ this.height = (window.innerHeight - 200) * 0.4 ; console.log(this.height) }) }, activated() { //this.getDataList()
this.getLanguageList() }, methods: { toolDetailChange(row, column, event){ this.currentDetailData.toolInstanceId = row.toolInstanceId this.getDetailTransList() }, //获取工具实例使用记录
getDetailTransList(){ this.detailTransList = [] getToolDetailTrans(this.currentDetailData).then(({data}) =>{ let list = data.rows if(list.length > 0){ this.detailTransList = list } }) }, // 打印方式
printReport(){ alert( this.$store.state.user.site) //
// const LODOP = getLodop()
// if (LODOP) {
// var strBodyStyle = '<style>'
// strBodyStyle += 'table { border-top: 1 solid #000000; border-left: 1 solid #000000; border-collapse:collapse; border-spacing:0;}'
// strBodyStyle += 'caption { line-height:2em; }'
// strBodyStyle += 'td { border-right: 1 solid #000000; border-bottom: 1 solid #000000; text-align:center; padding:2px 3px; font-size:11px;}'
// strBodyStyle += '</style>' //设置打印样式
// var strFormHtml = strBodyStyle + '<body>' + document.getElementById('commmon').innerHTML + '</body>' //获取打印内容
//
// LODOP.PRINT_INIT('') //初始化
// LODOP.PRINT_DESIGN();
// //LODOP.PREVIEW();
// //LODOP.PRINT();
//
// LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') //设置横向
// LODOP.ADD_PRINT_HTM('1%', '1%', '98%', '98%', strFormHtml) //设置打印内容
// LODOP.SET_PREVIEW_WINDOW(2, 0, 0, 800, 600, '') //设置预览窗口模式和大小
// LODOP.PREVIEW()
// }
}, // 校验用户是否收藏
favoriteIsOk(){ let userFavorite ={ userId:this.$store.state.user.id, languageCode:this.$i18n.locale } userFavoriteList(userFavorite).then(({data}) =>{ let size = data.list.filter(item => item.userId==userFavorite.menuId).length; if (size>0){ this.favorite = true }else { this.favorite = false } }) }, // 收藏 OR 取消收藏
favoriteFunction(){ let userFavorite ={ userId: this.$store.state.user.id, functionId: this.$route.meta.menuId, } if (this.favorite){ // 取消收藏
this.$confirm(`确定取消收藏`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { removeUserFavorite(userFavorite).then(({data})=>{ this.$message.success(data.msg) this.favorite = false }) }) }else { // 收藏
saveUserFavorite(userFavorite).then(({data})=>{ this.$message.success(data.msg) this.favorite = true }) }
}, // 保存语言编辑
saveLanguageList(val) { saveSysLanguageOne(val).then(({data}) => { if (data.code == 0) { this.$message.success(data.msg) } else { this.$message.error(data.msg) } }) }, // 编辑语言
addLanguageFun() { if (this.querySysLanguagePack.languageCode) { this.addLanguage = true this.languageColumnList = [] let query = { functionId: 1101, tableId: "common1002", languageCode: this.$i18n.locale } getTableDefaultListLanguage(query).then(({data}) => { if (data.rows.length > 0) { this.languageColumnList = data.rows } }) this.languageColumnList = this.columnList searchLanguageListByLanguageCode(this.querySysLanguagePack).then(({data}) => { this.languageDataList = data.rows }) } else { this.$message("请选中一种语言") } }, // 获取多语言列表
getLanguageList() { searchSysLanguage(this.queryLanguage).then(({data}) => { this.languageList = data.rows }) }, // 获取button的词典
getFunctionButtonList() { searchFunctionButtonList(this.queryButton).then(({data}) => { if (JSON.stringify(data.data) != '{}' ) { this.buttons = data.data } else { // saveButtonList(this.buttonList).then(({data}) => {
// })
} }) }, // 获取语言词典
getSysLanguageParamList() { searchSysLanguageParam(this.querySysLanguageParam).then(({data}) => { this.sysLanguageParams = data.rows }) }, // 打开页面设置
userSetting() { this.visible = true; let queryTable = { userId: this.$store.state.user.name, functionId: 1101, tableId: "toolDetail1101", languageCode: this.$i18n.locale } this.$nextTick(() => { this.$refs.column.init(queryTable); }); }, // 获取 用户保存的 格式列
getTableUserColumn() { getTableUserListLanguage(this.queryTableUser).then(({data}) => { if (data.rows.length > 0) { //this.columnList = []
this.columnList = data.rows } else { this.getColumnList() }
}) }, // 保存 默认配置 列
saveColumnList() {
saveTableDefaultList(this.columnList).then(({data}) => { if (data.code == 0) { this.$message.success(data.msg) this.showDefault = false } else { this.$message.error(data.msg) } }) saveTableDefaultList(this.columnList1).then(({data}) => { if (data.code == 0) { this.$message.success(data.msg) this.showDefault = false } else { this.$message.error(data.msg) } }) saveButtonList(this.buttonList).then(({data}) => { }) this.getFunctionButtonList() this.getFunctionButtonList(); this.getColumnList() }, // 获取 tableDefault 列
getColumnList() { getTableDefaultListLanguage(this.queryTable).then(({data}) => { if (!data.rows.length == 0) { this.showDefault = false this.columnList = data.rows } else { this.showDefault = true } }) }, // 获取数据列表
getDataList() { this.dataListLoading = true getToolDetailResumeList(this.queryDetailData).then(({data}) => { if (data && data.code === 0) { this.dataList = data.rows if(this.dataList.length > 0){ this.currentDetailData.toolInstanceId = this.dataList[0].toolInstanceId this.getDetailTransList() } } else { this.dataList = [] } this.dataListLoading = false }) }, // 每页数
sizeChangeHandle(val) { this.pageSize = val this.pageIndex = 1 this.getDataList() }, // 当前页
currentChangeHandle(val) { this.pageIndex = val this.getDataList() }, // 多选
selectionChangeHandle(val) { this.dataListSelections = val }, // 删除
deleteHandle(id) { var ids = id ? [id] : this.dataListSelections.map(item => { return item.id }) this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$http({ url: this.$http.adornUrl('//prd/delete'), method: 'post', data: this.$http.adornData(ids, false) }).then(({data}) => { if (data && data.code === 0) { this.$message({ message: '操作成功', type: 'success', duration: 1500, onClose: () => { this.getDataList() } }) } else { this.$message.error(data.msg) } }) }) }, // 导出
fields(){ let json = "{" this.columnList.forEach((item,index) =>{ if (index == this.columnList.length-1 ){ json +="\""+item.columnLabel+"\"" +":"+"\""+item.columnProp+"\"" }else { json += "\""+item.columnLabel+"\"" +":"+"\""+item.columnProp+"\""+ "," } }) json +="}" let s = eval("(" + json + ")") return s }, createExportData() { // 点击导出按钮之后,开始导出数据之前的执行函数,返回值为需要下载的数据
// TODO:构造需要下载的数据返回
if(this.dataListSelections.length>0){ return this.dataListSelections; } return this.dataList; }, startDownload() { // this.exportData = this.dataList
}, finishDownload() {
} }, created() { this.getTableUserColumn() this.getSysLanguageParamList() this.getFunctionButtonList() this.favoriteIsOk() } }</script><style scoped >.wrapper { height: calc(100% - 40px);} .sl-input { background-color: transparent; border: 0 !important; font-size: 12px !important; height: 12px !important; line-height: 14px !important; background-color: transparent !important; width: 140px; }
.sl-input:focus, textarea:focus {
outline: none;
} .sl-svg{ overflow: hidden; float: right; }
</style>
|
