|
|
@@ -0,0 +1,672 @@
|
|
|
+<template>
|
|
|
+ <div class="peoplerecord">
|
|
|
+ <!-- 头部区域 -->
|
|
|
+ <div class="head">
|
|
|
+ <div class="head-msg">
|
|
|
+ <img src="@/assets/people.png" />
|
|
|
+ </div>
|
|
|
+ <div class="head-info">门禁记录</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 左侧区域 -->
|
|
|
+ <div class="left">
|
|
|
+ <!-- 实时监测区域 -->
|
|
|
+ <div class="left-watch">
|
|
|
+ <!-- 实时监测标题区域 -->
|
|
|
+ <div class="watch-title">
|
|
|
+ <div class="watch-img">
|
|
|
+ <img src="@/assets/jiantou.png" />
|
|
|
+ </div>
|
|
|
+ <div class="watch-info">实时监测</div>
|
|
|
+ </div>
|
|
|
+ <!-- 实时监测表格区域 -->
|
|
|
+ <div class="watch-form">
|
|
|
+ <el-table :data="tableData1.slice(0, 5)" border style="width: 100%">
|
|
|
+ <el-table-column label="捕获" header-align="center" width="100">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <img :src="row.url" style="width: 82px; height: 60px" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="识别" header-align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div class="watch-form-list">
|
|
|
+ <div>
|
|
|
+ <img :src="row.msg.url" style="width: 82px; height: 60px" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>姓名:{{ row.msg.name }}</div>
|
|
|
+ <div>识别ID:{{ row.msg.id }}</div>
|
|
|
+ <div>车牌:{{ row.msg.number }}</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div>身份:{{ row.msg.type }}</div>
|
|
|
+ <div>位置:{{ row.msg.place }}</div>
|
|
|
+ <div>时间:{{ row.msg.time }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 历史记录区域 -->
|
|
|
+ <div class="left-record">
|
|
|
+ <!-- 历史记录标题区域 -->
|
|
|
+ <div class="record-title">
|
|
|
+ <div class="record-img">
|
|
|
+ <img src="@/assets/jiantou.png" />
|
|
|
+ </div>
|
|
|
+ <div class="record-info">历史记录</div>
|
|
|
+ </div>
|
|
|
+ <!-- 历史记录表格区域 -->
|
|
|
+ <div class="record-form">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="record-form-title">
|
|
|
+ <div class="info">历史记录</div>
|
|
|
+ </div>
|
|
|
+ <!-- 时间选择器 -->
|
|
|
+ <div class="record-form-time">
|
|
|
+ <div class="time">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="value"
|
|
|
+ type="date"
|
|
|
+ size="mini"
|
|
|
+ :editable="false"
|
|
|
+ placeholder="选择日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表格数据 -->
|
|
|
+ <div class="record-form-list">
|
|
|
+ <el-table :data="tableData1" style="width: 100%" height="428">
|
|
|
+ <el-table-column
|
|
|
+ prop="msg.name"
|
|
|
+ label="姓名"
|
|
|
+ align="center"
|
|
|
+ width="76"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="msg.number"
|
|
|
+ label="车牌号"
|
|
|
+ align="center"
|
|
|
+ width="89"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="时间" align="center" width="76">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ {{ row.msg.time.split(" ")[1] }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧区域 -->
|
|
|
+ <div class="right">
|
|
|
+ <!-- 折线图区域 -->
|
|
|
+ <div class="right-line">
|
|
|
+ <!-- 折线图标题 -->
|
|
|
+ <div class="right-line-title">
|
|
|
+ <div class="line-img">
|
|
|
+ <img src="@/assets/jiantou.png" />
|
|
|
+ </div>
|
|
|
+ <div class="line-info">24小时人流量</div>
|
|
|
+ </div>
|
|
|
+ <!-- 折线图 -->
|
|
|
+ <div class="right-line-body" id="line"></div>
|
|
|
+ </div>
|
|
|
+ <!-- 饼形图区域 -->
|
|
|
+ <div class="right-pie">
|
|
|
+ <!-- 饼形图标题 -->
|
|
|
+ <div class="right-pie-title">
|
|
|
+ <div class="pie-img">
|
|
|
+ <img src="@/assets/jiantou.png" />
|
|
|
+ </div>
|
|
|
+ <div class="pie-info">人员比例</div>
|
|
|
+ </div>
|
|
|
+ <!-- 饼形图 -->
|
|
|
+ <div class="right-pie-body" id="pie"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// 引入echarts
|
|
|
+import * as echarts from "echarts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "HelloWorld",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 时间选择器绑定的值
|
|
|
+ value: "",
|
|
|
+ // 人员数据
|
|
|
+ tableData1: [
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=402105144,1124774539&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img0.baidu.com/it/u=3538708005,999399332&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "王力宏啊",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "教师",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "教师",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "家长",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "临时人员",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "学生",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "教师",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "家长",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "临时人员",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "学生",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "教师",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "家长",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "临时人员",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "学生",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url: "https://img1.baidu.com/it/u=3499031637,1598196688&fm=26&fmt=auto",
|
|
|
+ msg: {
|
|
|
+ url: "https://img2.baidu.com/it/u=3434449357,84195486&fm=26&fmt=auto",
|
|
|
+ id: "42938",
|
|
|
+ time: "2018-12-23 14:32:26",
|
|
|
+ name: "吴亦凡",
|
|
|
+ place: "1号机动车出口",
|
|
|
+ number: "赣BU2569",
|
|
|
+ type: "教师",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ // 折线图表配置
|
|
|
+ lineOption: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: ["教师", "学生", "其他"],
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: [0, 4, 8, 12, 16, 20, 24],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#0febff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: "#0febff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: "#0febff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "教师",
|
|
|
+ type: "line",
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ //设定为实心点
|
|
|
+ symbol: "circle",
|
|
|
+ //设定实心点的大小
|
|
|
+ symbolSize: 10,
|
|
|
+ //是否显示数值
|
|
|
+ // label: { show: true },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "学生",
|
|
|
+ type: "line",
|
|
|
+ data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 10,
|
|
|
+ // label: { show: true },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "其他",
|
|
|
+ type: "line",
|
|
|
+ symbol: "circle",
|
|
|
+ symbolSize: 10,
|
|
|
+ data: [150, 232, 201, 154, 190, 330, 410],
|
|
|
+ // label: { show: true },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ // 饼形图表配置
|
|
|
+ pieOption: {
|
|
|
+ legend: {
|
|
|
+ orient: "vertical",
|
|
|
+ align: "left",
|
|
|
+ x: "right", //可设定图例在左、右、居中
|
|
|
+ y: "top", //可设定图例在上、下、居中
|
|
|
+ padding: [20, 10, 0, 0],
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "数量",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["10%", "55%"],
|
|
|
+ center: ["40%", "50%"],
|
|
|
+ roseType: "radius",
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: 5,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ { value: 80, name: "教师" },
|
|
|
+ { value: 60, name: "学生" },
|
|
|
+ { value: 40, name: "物业" },
|
|
|
+ { value: 50, name: "其他" },
|
|
|
+ ],
|
|
|
+ label: {
|
|
|
+ formatter: "{d}%",
|
|
|
+ fontWeight: "bold",
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ length: 10,
|
|
|
+ length2: 0,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 初始化图表
|
|
|
+ this.initChart();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 创建图表
|
|
|
+ initChart() {
|
|
|
+ var chartLineDom = document.getElementById("line");
|
|
|
+ var chartPieDom = document.getElementById("pie");
|
|
|
+ var myLineChart = echarts.init(chartLineDom);
|
|
|
+ var myPieChart = echarts.init(chartPieDom);
|
|
|
+ myLineChart.setOption(this.lineOption);
|
|
|
+ myPieChart.setOption(this.pieOption);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.peoplerecord {
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: auto;
|
|
|
+ width: 1161px;
|
|
|
+ height: 642px;
|
|
|
+ background-color: #24578c;
|
|
|
+ .head {
|
|
|
+ display: flex;
|
|
|
+ width: 1161px;
|
|
|
+ height: 55px;
|
|
|
+ border-bottom: 1px solid #58beff;
|
|
|
+ .head-msg {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 58px;
|
|
|
+ height: 55px;
|
|
|
+ img {
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .head-info {
|
|
|
+ line-height: 55px;
|
|
|
+ font-size: 25px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ float: left;
|
|
|
+ width: 811px;
|
|
|
+ height: 586px;
|
|
|
+ .left-watch {
|
|
|
+ margin: 0 11px 0 17px;
|
|
|
+ width: 487px;
|
|
|
+ height: 571px;
|
|
|
+ .watch-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 487px;
|
|
|
+ height: 54px;
|
|
|
+ .watch-img {
|
|
|
+ width: 26px;
|
|
|
+ height: 16px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .watch-info {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 79px;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0febff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .watch-form {
|
|
|
+ width: 487px;
|
|
|
+ height: 517px;
|
|
|
+ border: 1px solid #58beff;
|
|
|
+ .watch-form-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .left-record {
|
|
|
+ width: 254px;
|
|
|
+ height: 571px;
|
|
|
+ .record-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 254px;
|
|
|
+ height: 54px;
|
|
|
+ // border-bottom: 1px solid #58beff;
|
|
|
+ .record-img {
|
|
|
+ width: 26px;
|
|
|
+ height: 16px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .record-info {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 79px;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0febff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .record-form {
|
|
|
+ width: 254px;
|
|
|
+ height: 517px;
|
|
|
+ border: 1px solid #58beff;
|
|
|
+ .record-form-title {
|
|
|
+ width: 254px;
|
|
|
+ height: 48px;
|
|
|
+ border-bottom: 1px solid #0febff;
|
|
|
+ .info {
|
|
|
+ padding-left: 76px;
|
|
|
+ padding-top: 12px;
|
|
|
+ width: 77px;
|
|
|
+ height: 19px;
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .record-form-time {
|
|
|
+ width: 254px;
|
|
|
+ height: 40px;
|
|
|
+ .time {
|
|
|
+ margin: auto;
|
|
|
+ width: 160px;
|
|
|
+ line-height: 40px;
|
|
|
+ .el-date-editor.el-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .record-form-list {
|
|
|
+ width: 254px;
|
|
|
+ height: 429px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ float: left;
|
|
|
+ width: 350px;
|
|
|
+ height: 586px;
|
|
|
+ .right-line {
|
|
|
+ width: 350px;
|
|
|
+ height: 50%;
|
|
|
+ .right-line-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 350px;
|
|
|
+ height: 56px;
|
|
|
+ .line-img {
|
|
|
+ width: 26px;
|
|
|
+ height: 16px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line-info {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 126px;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0febff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-line-body {
|
|
|
+ width: 350px;
|
|
|
+ height: 237px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-pie {
|
|
|
+ width: 350px;
|
|
|
+ height: 50%;
|
|
|
+ .right-pie-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ width: 350px;
|
|
|
+ height: 56px;
|
|
|
+ .pie-img {
|
|
|
+ width: 26px;
|
|
|
+ height: 16px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pie-info {
|
|
|
+ margin-left: 10px;
|
|
|
+ width: 126px;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 19px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #0febff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-pie-body {
|
|
|
+ width: 350px;
|
|
|
+ height: 237px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .el-table,
|
|
|
+ ::v-deep .el-table__expanded-cell {
|
|
|
+ background-color: transparent;
|
|
|
+ background-color: #24578c;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-table th,
|
|
|
+ ::v-deep .el-table tr,
|
|
|
+ ::v-deep .el-table td {
|
|
|
+ color: #fff;
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::v-deep .el-table tbody tr:hover > td {
|
|
|
+ background-color: skyblue;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
