storage/src/view/store-manage/store-manage/store-manage-2.vue

<!-- 库存管理 -->
<template>
	<div class="container">
		<div class="total-warp">
			<div class="h2">今日剩余</div>
			<div class="total-box">
				<div
					class="active"
					style="width: 7%; text-align: center"
					@click="getAll"
					:style="
						params.technologyType == null && params.purpose == null
							? 'border:2px solid #0077ff'
							: ''
					"
				>
					全部
				</div>
				<div
					class="mianliao"
					:style="
						params.technologyType == 5
							? 'border:2px solid #0077ff'
							: ''
					"
					style="width: 50%"
					@click="mianliaoTbleLineCk({ name: '面料' }, 5)"
				>
					<div class="label" style="border-right: 2px solid #dcdcdc">
						<Icon
							type="md-add"
							v-if="!tableModalType"
							style="margin-right: 15px"
							@click.native="tableModalType = true"
						/>
						<Icon
							type="md-remove"
							v-else
							@click="tableModalType = false"
							style="margin-right: 15px"
						/>
						<span>面料库存</span>
					</div>
					<ul>
						<li>
							卷数
							<span>{{ totalData.fabric.count }}</span>
						</li>
						<li>
							米数
							<span>{{ totalData.fabric.sum }}</span>
						</li>
						<li>
							面积
							<span>{{ totalData.fabric.measureArea }}</span> 
						</li>
						<li>
							金额
							<span>{{ totalData.fabric.money }}</span>
						</li>
					</ul>
				</div>
				<div
					class="moshui"
					style="width: 40%"
					@click="moshuiCk"
					:style="
						params.technologyType == 3
							? 'border:2px solid #0077ff'
							: ''
					"
				>
					<div class="label" style="border-right: 1px solid #dcdcdc">
						<span>墨水库存</span>
					</div>
					<ul>
						<li>
							件数
							<span>{{ totalData.ink.count }}</span>
						</li>
						<li>
							千克
							<span>{{ totalData.ink.sum }}</span>
						</li>
						<li>
							金额
							<span>{{ totalData.ink.money }}</span>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="table-modal" v-if="tableModalType">
			<div style="width: 49%">
				<Table
					:columns="columns1"
					@on-row-click="mianliaoTbleLineCk"
					:row-class-name="rowClassName2"
					height="195"
					:data="totalData.typeStatistics"
					size="small"
				></Table>
			</div>
			<div style="width: 49%">
				<Table
					@on-row-click="yongtuTbleLineCk"
					:row-class-name="rowClassName"
					:columns="columns2"
					height="195"
					:data="totalData.purposeStatistics"
					size="small"
				></Table>
			</div>
		</div>
		<div class="table-filter">
			<div class="filter-item"></div>

			<div style="float: right">
				<div class="filter-item">
					<Button
						type="error"
						style="width: 90px"
						@click="toInventory"
						>发起盘点</Button
					>
				</div>
			</div>
			<div class="filter-item" style="float: right">
				滞留：在库时间超过{{ delayPeriod || 0 }}天
			</div>
			<div class="filter-item">
				<Checkbox
					v-model="params.inventoryResults"
					true-value="0"
					false-value=""
					@on-change="errChange"
					>筛选异常</Checkbox
				>
			</div>
			<div class="filter-item" @keyup.enter="getList">
				<Poptip trigger="focus" width="250" placement="bottom">
					<div slot="content">
						<ul style="" class="commons-select-search">
							<li
								:key="i.id"
								v-for="i in materialList"
								@click="params.keyword = i.name"
							>
								{{ i.name }}
							</li>
						</ul>
					</div>
					
					<Input
						v-model="params.keyword"
						@on-change="getMaterialSelectList"
						placeholder="请输入物料名称"
					></Input>
				</Poptip>
			</div>
			<div class="filter-item" style="width: 160px">
				<my-tree-select
					v-model="params.categoryCode"
					:treeData="materialTreeData"
					placeholder="请选择物料类型"
				></my-tree-select>
			</div>
			<div class="filter-item" style="width: 160px">
				<Select v-model="params.houseId" clearable>
					<Option
						v-for="item in stockList"
						:value="item.value"
						:key="item.value"
						>{{ item.label }}</Option
					>
				</Select>
			</div>
			<div class="filter-item">
				<Button type="primary" style="width: 90px" @click="search"
					>查询</Button
				>
			</div>
			<div class="filter-item">
				<Button
					type="primary"
					style="width: 90px"
					@click="$router.push('store_warning')"
					>库存预警</Button
				>
			</div>
			<div class="filter-item">
				<Button type="primary" style="width: 90px" @click="exportExcel"
					>导出Excel</Button
				>
			</div>
			<div class="filter-item">
				<Button type="primary" style="width: 90px" @click="exportExcel2"
					>导出详情</Button
				>
			</div>
		</div>
		<div class="line" style="margin-bottom: 10px"></div>
		<!--用途（原来代码）-->
		<!--<div class="table-filter" style="height: auto;padding-bottom: 0">
    <div class="filter-item">
      <Button
        :type="itemIndex === '' ? 'primary' : 'default'"
        style="width: 90px;margin-bottom: 10px"
        @click="itemClick()">
        全部
      </Button>
    </div>
    <div class="filter-item" v-for="(item, index) in itemData" :key="index">
      <Button
        v-if="item"
        :type="itemIndex === index ? 'primary' : 'default'"
        style="min-width: 90px;margin-bottom: 10px"
        @click="itemClick(index, item)">
        {{ item }}
      </Button>
    </div>
  </div>-->
		<!-- 表格 -->
		<div class="table-content-wrap">
			<div class="table-content">
				<div
					v-if="data.length === 0"
					style="
						font-size: 16px;
						font-weight: bold;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
					"
				>
					暂无数据
				</div>
				<Collapse
					:value="item.storageDetails ? '1' : '0'"
					v-for="(item, index) in data"
					:key="index"
					@on-change="open(item)"
				>
					<Panel name="1">
						<div class="table-item">
							<div class="row">
								<div class="col">
									物料类型：{{ item.categoryName }}
								</div>
								<div class="col">
									物料编码：{{ item.materialCode }}
								</div>
								<div class="col">
									物料名称：{{ item.materialName }}
								</div>
								<div class="col"></div>
								<div class="col" style="flex: 0.2"></div>
								<div
									class="col blue"
									style="
										padding-right: 15px;
										display: flex;
										justify-content: space-between;
										flex: none;
										width: 140px;
									"
								>
									<!--                <span @click="toHistory(0)">入库记录</span>-->
									<!--                <span @click="toHistory(1)">出库记录</span>-->
								</div>
							</div>
							<div class="row">
								<div class="col">库存数量：{{ item.sum }}</div>
								<div class="col">
									库存件数：{{ item.count }}
								</div>
								<div class="col orange">
									滞留数量：{{ item.retentionQuantity }}
								</div>
								<div class="col">
									安全库存：{{ item.materialSafetyStock }}
								</div>
								<div class="col" style="flex: 0.2"></div>
								<div
									class="col"
									style="flex: none; width: 140px"
								>
									<Button
										style="height: 30px; line-height: 1"
										@click.stop="showInventory(item)"
										>盘点记录</Button
									>
								</div>
							</div>
							<div class="row">
								<div class="col">
									{{
										`一楼：${item.yilouSum}，四楼：${
											item.silouSum || 0
										}`
									}}
								</div>
								<div class="col">
									{{
										`一楼：${item.yilouCount}，四楼：${
											item.silouCount || 0
										}`
									}}
								</div>
								<div class="col"></div>
								<div class="col"></div>
								<div class="col" style="flex: 0.2"></div>
								<div
									class="col"
									style="flex: none; width: 140px"
								></div>
							</div>
							<div class="row">
								<div class="col red">
									盘点结果：{{ item.inventoryResults === 1 ? '正常' : '异常' }}
								</div>
								<div
									class="col red"
									style="
										text-decoration: underline;
										cursor: pointer;
									"
									@click.stop="openTag(item)"
								>
									库存修正量：{{ item.correctionQuantity }}
								</div>
								<div class="col">
									盘点人：{{ item.operusername }}
								</div>
								<div class="col">
									盘点时间：{{ item.checkTime }}
								</div>
								<div class="col" style="flex: 0.2"></div>
								<div
									class="col"
									style="flex: none; width: 140px"
								></div>
							</div>
						</div>
						<div slot="content" class="content">
							<Table
								:columns="columns"
								:data="item.storageDetails"
								max-height="250"
							></Table>
						</div>
					</Panel>
				</Collapse>
				<!--查看人工盘点记录-->
				<artificial-inventory-record
					v-model="inventoryRecordShow"
				></artificial-inventory-record>
			</div>
		</div>
		<!-- 分页 -->
		<div class="table-page">
			<Page
				:current="params.pageNum"
				:total="params.total"
				:show-total="true"
				:page-size="20"
				show-elevator
				@on-change="changePage"
			/>
		</div>
		<inventory-form
			v-model="inventoryShow"
			:formData="formData"
		></inventory-form>
		<tag-form v-model="tagShow" :form-data="formData"></tag-form>
	</div>
</template>

<script>
import { exportExcel } from '@/libs/util'
import {
	GetStockPageList,
	GetStockDetailSum,
	GetStockMaterialPurpose,
	GetStockTagDetailList,
} from '@/api/stock'
import MyTable from '_c/my-table/my-table'
import artificialInventoryRecord from './artificial-inventory-record'
import InventoryForm from './inventory-form'
import TagForm from './tag-form'
import MyTreeSelect from '_c/my-tree-select/my-tree-select'
import axios from 'axios'
import {
	GetMaterialCategoryZTree,
	GetMaterialSet,
	GetTechnologyTypList,
	GetStockHouse,
} from '@/api/baseData'
export default {
	name: 'store',
	components: {
		MyTable,
		MyTreeSelect,
		artificialInventoryRecord,
		InventoryForm,
		TagForm,
	},
	data() {
		return {
			tableModalType: false,
			delayPeriod: 0,
			typeName: '属性',
			useName: '用途',
			tabName: 'open',
			tabIndex: 0,
			itemIndex: '',
			tabs: [],
			materialTreeData: [],
			stockList: [],
			materialCategoryCode: '',
			key: '',
			filterData: {},
			formData: {},
			show: false,
			inventoryRecordShow: false,
			inventoryShow: false,
			tagShow: false,
			itemData: [],
			titleData: {
				directSum: {
					stockSum: {
						sumName: '直喷',
						totalAmount: 0,
						tagCount: 0,
						quantity: 0,
					},
					stockSumItems: [],
				},
				heatSum: {
					stockSum: {
						sumName: '热转',
						totalAmount: 0,
						tagCount: 0,
						quantity: 0,
					},
					stockSumItems: [],
				},
				paperSum: {
					stockSum: {
						sumName: '打纸',
						totalAmount: 0,
						tagCount: 0,
						quantity: 0,
					},
					stockSumItems: [],
				},
			},
			data: [],
			columns1: [
				{
					title: '按工艺查看',
					key: 'name',
				},
				{
					title: '卷数',
					key: 'count',
				},
				{
					title: '米数',
					key: 'sum',
				},
				{
					title: '面积',
					key: 'measureArea',
				},
				{
					title: '金额',
					key: 'money',
				},
			],
			columns2: [
				{
					title: '按用途查看',
					key: 'materialPurpose',
				},
				{
					title: '卷数',
					key: 'count',
				},
				{
					title: '米数',
					key: 'sum',
				},
				{
					title: '面积',
					key: 'measureArea',
				},
				{
					title: '金额',
					key: 'money',
				},
			],
			columns: [
				{
					title: '序号',
					type: 'index',
					width: 60,
					align: 'center',
				},
				{
					title: '物料标签值',
					key: 'rfidCode',
					tooltip: true,
					minWidth: 150,
				},
				{
					title: '物料数量',
					key: 'quantity',
					minWidth: 150,
				},
				{
					title: '入库时间',
					key: 'createTime',
					minWidth: 150,
				},
				{
					title: '在库时间',
					key: 'inStockTime',
					minWidth: 150,
					render: (h, params) => {
						return h(
							'span',
							{
								style:{
									color:params.row.inStockTime > 30 ? 'orange' : ''
								},
							},
							params.row.inStockTime
						)
					},
				},
				{
					title: '所在仓库',
					key: 'houseName',
					minWidth: 150,
				},
				{
					title: '库位',
					key: 'areaName',
					minWidth: 150,
				},
				{
					title: '质检状态',
					key: 'quantityCheckState',
					minWidth: 150,
					render: (h, params) => {
						return h(
							'span',
							params.row.quantityCheckState === 0
								? '未质检'
								: params.row.quantityCheckState === 1
								? '已质检'
								: params.row.quantityCheckState === 2
								? '无需质检'
								: ''
						)
					},
				},
			],
			params: {
				pageNum: 1,
				pageSize: 20,
				total: 0,
				inventoryResults: '1',
				keyword: null,
				categoryCode: null,
				houseId: null,
				technologyType: null,
				purpose: null,
			},
			totalData: {
				fabric: {},
				ink: {},
				purposeStatistics: [],
				typeStatistics: [],
			},
			technologyTypeName: null,
			materialList: [],
		}
	},
	methods: {
		getMaterialSelectList() {
			const v = this
			v.loading = true
			axios
				.post('/cloudApi/material/selectList', {
					pageNum:1,
					pageSize:10,
					search: v.params.keyword,
				})
				.then((res) => {
					v.materialList = res.data.data
					v.loading = false
				})
			
		},
		rowClassName(row, index) {
			if (row.materialPurpose == this.technologyTypeName) {
				return 'table-info-row'
			}
		},
		rowClassName2(row, index) {
			if (this.params.technologyType == 4) {
				if (index == 3) return 'table-info-row'
			} else {
				if (
					index == this.params.technologyType &&
					this.params.technologyType != 3
				) {
					return 'table-info-row'
				}
			}
		},
		getAll() {
			this.params.technologyType = null
			this.params.purpose = null
			this.params.pageNum = 1
			this.technologyTypeName = null
			this.getList()
		},
		yongtuTbleLineCk(row, index) {
			this.technologyTypeName = row.materialPurpose
			this.params.purpose = row.materialPurpose
			this.params.technologyType = null
			this.params.pageNum = 1
			this.getList()
		},
		moshuiCk() {
			this.params.purpose = null
			this.params.technologyType = 3
			this.params.pageNum = 1
			this.getList()
		},
		mianliaoTbleLineCk(row, index) {
			this.technologyTypeName = null
			this.params.purpose = null
			if (index == 3) {
				this.params.technologyType = 4
			} else {
				this.params.technologyType = index
			}
			this.getList()
		},
		getList() {
			axios
				.post('/cloudApi/stockWater/remainingTodayPage', this.params)
				.then((res) => {
					console.log(res)
					if (res.data.code == 200) {
						for (let i = 0; i < res.data.data.records.length; i++) {
							const element = res.data.data.records[i]
							element.yilouSum = 0
							element.yilouCount = 0
							element.silouSum = 0
							element.silouCount = 0
							for (let j = 0; j < element.houseInfo.length; j++) {
								const jelement = element.houseInfo[j]
								if (jelement.houseName == '一楼面料仓库') {
									element.yilouSum = jelement.sum || 0
									element.yilouCount = jelement.count || 0
								}
								if (jelement.houseName == '四楼面料仓') {
									element.silouSum = jelement.sum || 0
									element.silouCount = jelement.count || 0
								}
							}
						}
						this.data = res.data.data.records
						this.params.total = res.data.data.total
						console.log(this.data)
						this.resize()
					}
				})
			// GetStockPageList(this.params).then(res => {
			//   if (res.code === 0) {
			//     this.data = res.result.list
			//     this.params.total = res.result.totalCount
			//     this.resize()
			//   }
			// })
		},
		getRemainingToday() {
			const v = this
			axios
				.post('/cloudApi/stockWater/remainingToday', {})
				.then((res) => {
					console.log(res)
					for (
						let i = 0;
						i < res.data.data.purposeStatistics.length;
						i++
					) {
						const element = res.data.data.purposeStatistics[i]
						if (element.materialPurpose == '')
							element.materialPurpose = '其他'
					}
					this.totalData.fabric = res.data.data.fabric
					this.totalData.ink = res.data.data.ink
					this.totalData.purposeStatistics =
						res.data.data.purposeStatistics
					this.totalData.typeStatistics = [
						{ ...res.data.data.typeStatistics[0], name: '直喷' },
						{ ...res.data.data.typeStatistics[1], name: '热转' },
						{ ...res.data.data.typeStatistics[2], name: '打纸' },
						{ ...res.data.data.typeStatistics[4], name: '其他' },
					]
				})
		},

		resize() {
			let scrollEl = document.getElementsByClassName('content-wrapper')[0]
			if (scrollEl) {
				scrollEl.scrollTop = 0
			} else {
				setTimeout(() => {
					this.resize()
				}, 500)
			}
		},
		errChange() {
			this.params.pageIndex = 1
			this.getList()
		},
		open(item) {
			if (!item.storageDetails) {
				axios
					.post('/cloudApi/stockWater/inStockList', {
						materialCode:item.materialCode,
					})
					.then((res) => {
						this.$set(item, 'storageDetails', res.data.data)
					})
				// GetStockTagDetailList({
				// 	materialCode: item.materialCode,
				// }).then((res) => {
				// 	if (res.code === 0) {
				// 		this.$set(item, 'storageDetails', res.result)
				// 	}
				// })
			}
		},
		openTag(item) {
			if (item.detailId) {
				this.formData = { ...item, detialId: item.detailId }
				this.tagShow = true
			}
		},
		/* 查看盘点记录 */
		toDetail(type) {
			this.$router.push({
				name: 'inventory_record_new',
				query: {
					technologyType: type,
				},
			})
		},
		/* 显示盘点记录 */
		showInventory(item) {
			this.inventoryShow = true
			this.formData = { ...item }
		},
		showArtificialInventoryRecord() {
			this.inventoryRecordShow = true
			// this.$router.push('artificial-inventory-record')
		},
		toInventory() {
			this.$router.push('inventory')
		},
		tabClick(index = '', value, text) {
			if (text) {
				this.useName = '全部'
				this.typeName = text
				this.tabIndex = index
				this.itemIndex = ''
				this.params.technologyType = value
				this.getItemData()
				this.getList()
			} else {
				this.typeName = text
				this.tabIndex = index
				this.itemIndex = ''
				this.params.technologyType = value
				this.getItemData()
				this.getList()
			}
		},
		itemClick(index = '', item = '') {
			if (item) {
				this.typeName = '全部'
				this.useName = item
				this.itemIndex = index
				this.params.purpose = item
				this.getList()
			} else {
				this.useName = item
				this.itemIndex = index
				this.params.purpose = item
				this.getList()
			}
		},
		// 跳转对应记录列表 0入库记录 1出库记录
		toHistory(type) {
			if (type === 0) {
				this.$router.push({
					name: 'store_in_record',
				})
			} else if (type === 1) {
				this.$router.push({
					name: 'store_out_record',
				})
			}
		},
		// 获取控件宽度
		getComWidth(item) {
			if (item.name === 'Button') {
				return '80px'
			} else if (item.name === 'Input') {
				return '200px'
			}
		},
		cfm(type, formData) {
			if (type === 'add') {
				FacPriceAdd({
					...formData,
					materialCode: formData.code,
				}).then((res) => {
					if (res.code === 0) {
						this.$Message.info(res.msg)
						this.getList()
					}
				})
			} else if (type === 'edit') {
				FacPriceChange({
					...formData,
					factoryPriceId: formData.id,
				}).then((res) => {
					if (res.code === 0) {
						this.$Message.info(res.msg)
						this.getList()
					}
				})
			}
		},
		exportExcel2(){
			const v = this
			let columns = [
				{ title: '物料编码', key: 'materialCode' },
				{ title: '物料名称', key: 'materialName' },
				{ title: 'RFID', key: 'rfidCode' },
				{ title: '物料数量', key: 'quantity' },
				{ title: '入库时间', key: 'createTime' },
				{ title: '在库时间', key: 'inStockTime' },
				{ title: '所在仓库', key: 'houseName' },
				{ title: '库位', key: 'areaName' },
				{ title: '质检状态', key: 'quantityCheckState' },
			]
			axios
				.post('/cloudApi/stockWater/remainingTodayList', v.params)
				.then((res) => {
					for (let i = 0; i < res.data.data.length; i++) {
						const element = res.data.data[i];
						element.quantityCheckState = element.quantityCheckState === 0 ? '未质检' : element.quantityCheckState === 1 ? '已质检' : '无需质检'
					}
					let data = res.data.data
					exportExcel(columns, data, '库存详情')
				})
		},
		exportExcel() {
			if (this.data.length < 1) return this.$Message.error('数据为空！')
			let columns = [
				{ title: '物料类型', key: 'categoryName' },
				{ title: '物料编码', key: 'materialCode' },
				{ title: '物料名称', key: 'materialName' },
				{ title: '安全库存', key: 'saveQuantity' },
				{ title: '库存数量', key: 'quantity' },
				{ title: '库存件数', key: 'tagCount' },
				{ title: '滞留数量', key: 'retentionCount' },
			]
			GetStockPageList({
				...this.params,
				pageIndex: 1,
				pageSize: 999999,
			}).then((res) => {
				if (res.code === 0) {
					let data = res.result.list
					exportExcel(columns, data, '库存管理')
				}
			})
		},
		// 检索条件事件处理
		eventHandle(option) {
			switch (option._evnet) {
				case 'search':
					this.params.pageIndex = 1
					this.params.key = option.key
					this.params.purContractState = option.purContractState
					this.getList()
					break
				case 'add':
					this.formType = 'add'
					this.show = true
					break
				case 'back':
					this.$router.go(-1)
					break
			}
		},
		changePage(pageNum) {
			this.params.pageNum = pageNum
			this.getList()
		},
		search() {
			this.params.pageNum = 1
			// this.params.key = this.key
			// this.params.materialCategoryCode = this.materialCategoryCode
			this.getList()
		},

		handleData(data) {
			data.forEach((item) => {
				item.title = item.name
				// item.expand = true
				if (item.children) {
					this.handleData(item.children)
				}
			})
		},
		getTree() {
			GetMaterialCategoryZTree().then((res) => {
				if (res.code === 0) {
					this.materialTreeData = res.result
					this.handleData(this.materialTreeData)
				}
			})
		},
		getTitleData() {
			GetStockDetailSum().then((res) => {
				console.log(res)
				if (res.code === 0) {
					this.titleData = res.result
				}
			})
		},
		getItemData() {
			GetStockMaterialPurpose({
				technologyType: this.tabIndex,
			}).then((res) => {
				if (res.code === 0) {
					this.itemData = res.result
					this.itemData.unshift('全部')
				}
			})
		},
		getTechnologyTypList() {
			GetTechnologyTypList().then((res) => {
				if (res.code === 0) {
					this.tabs = res.result
					this.tabs.unshift({
						text: '全部',
						value: '',
					})
				}
			})
		},
		getMaterialSet() {
			GetMaterialSet().then((res) => {
				if (res.code === 0) {
					this.delayPeriod = res.result.delayPeriod
				}
			})
		},
		getStockHouse() {
			GetStockHouse().then((res) => {
				if (res.code === 0) {
					this.stockList = res.result.map((item) => {
						return {
							label: item.name,
							value: item.id,
						}
					})
				}
			})
		},
	},
	mounted() {
		this.getList()
		this.getTree()
		this.getTitleData()
		this.getItemData()
		this.getTechnologyTypList()
		this.getMaterialSet()
		this.getStockHouse()
		this.getRemainingToday()
		this.getMaterialSelectList()
	},
}
</script>
<style>
.ivu-table .table-info-row td {
	background-color: #2db7f5;
	color: #fff;
}
</style>
<style lang="less" scoped>
.container {
	display: flex;
	flex-direction: column;
	.table-modal {
		background: #fff;
		border: 1px solid #dcdcdc;
		margin-top: 20px;
		position: relative;
		justify-content: space-between;
		display: flex;
		padding: 20px;
	}
	.table-modal:before {
		position: absolute;
		width: 20px;
		height: 20px;
		border-top: 1px solid #dcdcdc;
		border-left: 1px solid #dcdcdc;
		background: #fff;
		content: ' ';
		top: -11px;
		transform: rotate(45deg);
		left: 13%;
	}
	.total-warp {
		.h2 {
			font-size: 18px;
			font-weight: bold;
			color: #333;
			height: 40px;
			line-height: 30px;
		}
		.total-box {
			display: flex;
			justify-content: space-between;
		}
		.total-box > div {
			background: #ffffff;
			border: 1px solid #dddcdc;
			font-size: 18px;
			height: 60px;
			line-height: 60px;
			color: #3f3f3f;
			ul {
				display: flex;
				li {
					list-style: none;
					font-size: 12px;
					color: #838383;
					line-height: 24px;
					padding: 6px 0;
					span {
						color: #3f3f3f;
						font-weight: bold;
						font-size: 18px;
						display: block;
					}
				}
			}
		}
		.mianliao {
			display: flex;
			.label {
				width: 20%;
				text-align: center;
			}
			ul {
				width: 80%;
				li {
					width: 25%;
					text-align: center;
					line-height: 24px;
				}
			}
		}
		.moshui {
			display: flex;
			.label {
				width: 25%;
				text-align: center;
			}
			ul {
				width: 75%;
				li {
					width: 33.3%;
					text-align: center;
				}
			}
		}
	}
	.bar {
		display: flex;
		justify-content: space-between;
		.item {
			flex: 1;
			margin-right: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 70px;
			border-radius: 3px 3px 0 0;
			background-color: #ffffff;
			border: 1px solid #e6e6e6;
			&:last-child {
				margin-right: 0;
			}
			.left,
			.center,
			.right {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
				border-right: 1px solid #e6e6e6;
				.number {
					margin-top: 5px;
					font-size: 16px;
					font-weight: bold;
					color: #3f92f9;
					&.red {
						color: #db0020;
					}
				}
			}
			.left {
				width: 100px;
				font-size: 16px;
				font-weight: bold;
				.detail {
					font-size: 12px;
					font-weight: normal;
					cursor: pointer;
				}
			}
			.center {
				flex: 5;
			}
			.right {
				flex: 5;
				&:last-child {
					border-right: none;
				}
			}
			&.more {
				flex: none;
				margin-right: 0;
				padding: 0 20px;
				justify-content: center;
				width: 140px;
				background-color: #333333;
				color: #ffffff;
				cursor: pointer;
			}
		}
	}
	.info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
		.info-item {
			margin-right: 20px;
			flex: 1;
			overflow: hidden;
			border: 1px solid #e6e6e6;
			background-color: #ffffff;
			&:last-child {
				margin-right: 0;
			}
			.ivu-collapse {
				border: none;
			}
			/deep/ .ivu-collapse-header {
				padding: 0;
				height: auto;
				line-height: 1.2;
				vertical-align: middle;
				.ivu-icon-ios-arrow-forward {
					display: none;
				}
			}
			.row {
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				border-bottom: 1px solid #e6e6e6;
				.col {
					flex: 1;
					overflow: hidden;
					text-align: center;
					padding: 5px 3px;
					border-right: 1px solid #e6e6e6;
					display: flex;
					align-items: center;
					justify-content: center;
					&:first-child {
						flex: 2;
					}
					&:last-child {
						border-right: none;
					}
				}
			}
		}
		.info-content {
			height: 200px;
			overflow: overlay;
		}
		/deep/ .ivu-collapse-content {
			padding: 0;
		}
		/deep/ .ivu-collapse-content-box {
			padding: 0;
		}
		/deep/ .ivu-collapse {
			border-top: none;
			border-radius: 0 0 3px 3px;
		}
		/deep/ .ivu-collapse-header {
			height: 30px;
			line-height: 30px;
			background: #d7d7d7;
			color: #000000;
			font-weight: bold;
		}
	}
	.table-filter {
		padding-bottom: 10px;
		line-height: 42px;
		overflow: hidden;
		.filter-item {
			margin-right: 10px;
			float: left;
			//&:last-child {
			//  margin-right: 0;
			//}
		}
	}
	.line {
		height: 1px;
		border-bottom: 1px solid #d7d7d7;
	}
	.table-content-wrap {
		flex: 1;
		overflow: hidden;
		.table-content {
			overflow: auto;
			height: 100%;
			.table-item {
				width: 100%;
				.row {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.col {
						padding: 0 5px;
						flex: 1;
						display: flex;
						align-items: center;
						height: 30px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						&.red {
							color: red;
						}
						&.orange {
							color: orange;
						}
						&.blue {
							color: #169bd5;
						}
					}
				}
			}
			.content {
				padding-left: 30px;
			}
		}
	}
	.table-page {
		padding-top: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 43px;
		overflow: hidden;
	}
}
.table-content-wrap {
	/deep/ .ivu-collapse-header {
		min-width: 750px;
		display: flex;
		height: 120px !important;
		background-color: #ffffff;
		border-bottom: none !important;
	}
	/deep/ .ivu-icon-ios-arrow-forward {
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/deep/ .ivu-collapse-content-box {
		padding: 0;
		padding-bottom: 10px;
	}
	/deep/ .ivu-collapse {
		margin-bottom: 5px;
	}
}
::-webkit-scrollbar {
	//width: 0px; /*对垂直流动条有效*/
	//height: 0px; /*对水平流动条有效*/
	width: 5px; /*对垂直流动条有效*/
	height: 10px;
	background-color: #ffffff;
}
</style>