| | |
| | | <div class="border_corner border_corner_left_bottom"></div> |
| | | <div class="border_corner border_corner_right_bottom"></div> |
| | | <div class="main"> |
| | | <div class="main-video"> |
| | | <el-table |
| | | tooltip-effect="dark" |
| | | :data="data" |
| | | > |
| | | <el-table-column prop="name" label="序号"></el-table-column> |
| | | <el-table-column prop="name" label="类别"></el-table-column> |
| | | <el-table-column prop="date" label="固废名称"></el-table-column> |
| | | <el-table-column prop="address" label="代码"></el-table-column> |
| | | <el-table-column prop="address" label="产生量"></el-table-column> |
| | | <el-table-column prop="name" label="储存量"></el-table-column> |
| | | <el-table-column prop="date" label="产生装置"></el-table-column> |
| | | <div class="main-table"> |
| | | <el-table :data="listData" style="width: 100%" stripe='stripe' |
| | | tooltip-effect="dark" :row-class-name="tableRowClassName"> |
| | | <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" |
| | | :label="item.label"></el-table-column> |
| | | </el-table> |
| | | </div> |
| | | </div> |
| | |
| | | <script> |
| | | export default { |
| | | name: 'PublicTable', |
| | | props: ['requestSolidWasteData'], |
| | | props: ['displayContentTable'], |
| | | data () { |
| | | return { |
| | | data: [{ |
| | | date: '2016-05-03', |
| | | name: '王小虎', |
| | | address: '上海市普陀区' |
| | | }, { |
| | | date: '2016-05-02', |
| | | name: '王小虎', |
| | | address: '上海市普陀区' |
| | | }] |
| | | listData: [], |
| | | listLabel: [ |
| | | { |
| | | label: '序号', |
| | | prop: 'StoragePlaceId' |
| | | }, |
| | | { |
| | | label: '类别', |
| | | prop: 'StoragePlaceTypeName' |
| | | }, |
| | | { |
| | | label: '固废名称', |
| | | prop: 'StoragePlaceName' |
| | | }, |
| | | { |
| | | label: '代码', |
| | | prop: 'StorageZDMJ' |
| | | }, |
| | | { |
| | | label: '产生量(t)', |
| | | prop: 'StorageZCL' |
| | | }, |
| | | { |
| | | label: '贮存量(t)', |
| | | prop: 'StorageZCNL' |
| | | }, |
| | | { |
| | | label: '产生装置', |
| | | prop: 'StorageType' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | mounted () { |
| | | this.$nextTick(() => { |
| | | this.getSolidWasteData() |
| | | this.displayContentTable.forEach(item => { |
| | | this.listData = item |
| | | }) |
| | | }) |
| | | }, |
| | | methods: { |
| | | getSolidWasteData () { |
| | | // const data = requestSolidWasteData |
| | | // console.log(data) |
| | | tableRowClassName ({ |
| | | row, |
| | | rowIndex |
| | | }) { |
| | | if (rowIndex % 2 === 0) { |
| | | return 'warning-row' |
| | | } else if (rowIndex % 2 === 1) { |
| | | return 'success-row' |
| | | } |
| | | return '' |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | |
| | | .win { |
| | | position: relative; |
| | | background-color: rgba(33, 41, 69, 0.9); |
| | | //width: 6rem; |
| | | height: 1.5rem; |
| | | } |
| | | |
| | | .main { |
| | | width: 100%; |
| | | height: 100%; |
| | | //padding: 10px 6px; |
| | | //border: 1px solid #396d83; |
| | | .main-video { |
| | | //border: 1px solid #396d83; |
| | | .main-table { |
| | | width: 100%; |
| | | min-height: 165px; |
| | | |
| | | video { |
| | | width: 100%; |
| | | height: 100%; |
| | | outline: none; |
| | | } |
| | | } |
| | | } |
| | | |
| | |
| | | width: 14px; |
| | | height: 14px; |
| | | background: rgba(0, 0, 0, 0); |
| | | border: 1.5px solid #47d5ea; |
| | | border: 1px solid #47d5ea; |
| | | } |
| | | |
| | | .border_corner_left_top { |