Browse Source

首页CSS修改

master
z_yu 3 years ago
parent
commit
6efe7860ca
  1. 10
      src/components/Echarts/PieChart.vue
  2. 2
      src/views/archivesManage/outInStorage/inStorage/index.vue
  3. 100
      src/views/data1.json
  4. 115
      src/views/home.vue

10
src/components/Echarts/PieChart.vue

@ -67,11 +67,11 @@ export default {
radius: [15, 95],
center: ['50%', '38%'],
data: [
{ value: 320, name: 'Industries' },
{ value: 240, name: 'Technology' },
{ value: 149, name: 'Forex' },
{ value: 100, name: 'Gold' },
{ value: 59, name: 'Forecasts' }
{ value: 730, name: '案卷' },
// { value: 240, name: 'Technology' },
// { value: 149, name: 'Forex' },
// { value: 100, name: 'Gold' },
{ value: 900, name: '文件' }
],
animationEasing: 'cubicInOut',
animationDuration: 2600

2
src/views/archivesManage/outInStorage/inStorage/index.vue

@ -52,7 +52,7 @@
<el-table-column prop="caseName" align="center" label="盒名称" min-width="150" />
<el-table-column prop="tid" align="center" label="TID" min-width="250" />
<el-table-column prop="barcode" align="center" label="条形码" width="200" />
<el-table-column prop="folderLocation" align="center" label="存放位置" width="250">
<el-table-column prop="folderLocationDetails" align="center" label="存放位置" width="250">
<!-- <template slot-scope="scope">
<div>{{ scope.row.update_time | parseTime }}</div>
</template> -->

100
src/views/data1.json

@ -0,0 +1,100 @@
{
"rows":[
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
},
{
"time":"2022-6-30 13:00",
"warehouse":"文书档案库房",
"warning":"温度温度温度温度温度温度"
}
]
}

115
src/views/home.vue

@ -6,7 +6,7 @@
<!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row> -->
<el-row :gutter="20">
<el-row :gutter="20" style="margin-bottom:20px;height: 158px;">
<el-col :xs="24" :sm="24" :lg="16">
<div class="container-left search-area">
<span class="right-top-line" />
@ -28,7 +28,7 @@
<!-- <div class="chart-wrapper">
<pie-chart />
</div> -->
<div class="container-left" style="height: 158px;margin: 0">
<div class="container-left" style="height: 100%;margin: 0">
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class=" table-title">
@ -57,37 +57,84 @@
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-row :gutter="20" style="margin-bottom:20px;height:276px;">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<radar-chart />
<!-- 待办事项 -->
<div class="container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow"><svg-icon icon-class="tongzhigonggao" class-name="warehouse-svg" />待办事项</p>
</h3>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
<!-- 门禁记录 -->
<div class="container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow"><svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录</p>
</h3>
<el-table
ref="table2"
style="min-width: 100%;"
height="100%"
:data="tableData"
class="warehose-el-table"
:row-class-name="rowBgColor"
>
<el-table-column prop="time" label="时间" align="center" min-width="60" />
<el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
<el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
</el-table>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
<!-- 报警记录 -->
<div class="container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow"><svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录</p>
</h3>
<el-table
ref="table"
style="min-width: 100%;"
height="100%"
:data="tableData"
class="warehose-el-table"
:row-class-name="rowBgColor"
>
<el-table-column prop="time" label="时间" align="center" min-width="60" />
<el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
<el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
</el-table>
</div>
</el-col>
</el-row>
<el-row :gutter="20">
<el-row :gutter="20" style="height:276px;">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<radar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
<!-- 档案类别 -->
<div class="container-wrap">
<span class="right-top-line" />
<span class="left-bottom-line" />
<h3 class="table-title">
<p class="title-arrow">档案类别</p>
</h3>
<div class="chart-wrapper">
<pie-chart :width="'100%'" :height="'100%'" />
</div>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
<pie-chart />
</div>
</el-col>
</el-row>
@ -101,7 +148,8 @@ import PanelGroup from './dashboard/PanelGroup'
// import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
// import BarChart from '@/components/Echarts/BarChart'
import data1 from './data1.json'
const lineChartData = {
newVisitis: {
@ -129,17 +177,24 @@ export default {
PanelGroup,
// LineChart,
RadarChart,
PieChart,
BarChart
PieChart
// ,
// BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
created() {
this.getData()
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
},
getData() {
this.tableData = data1.rows
}
}
}
@ -190,8 +245,8 @@ export default {
z-index: 11;
// width: calc(100vw - 545px);
width: 100%;
height: 90px;
min-height: 90px;
// height: 90px;
// min-height: 90px;
padding: 0;
li{
display: flex;
@ -247,7 +302,7 @@ export default {
}
}
.search-area {
height: 158px;
height: 100%;
margin: 0;
display: flex;
align-items: center;
@ -255,12 +310,20 @@ export default {
& .search-input{
width: 796px;
}
// & .el-select .el-input {
// width: 130px;
// }
// & .input-with-select .el-input-group__prepend {
// background-color: #fff;
// }
}
.el-col {
height: 100%;
}
.container-left, .container-right, .container-wrap, .el-card, .header-container-wrap{
min-height: 100%;
}
.warehose-el-table ::v-deep.el-table__header-wrapper{
box-shadow: inset 0px 0px 6px 1px #339CFF;
background: none !important;
}
.container-wrap{
min-height: auto;
height: 100%;
overflow: hidden;
}
</style>
Loading…
Cancel
Save