|
|
@@ -0,0 +1,660 @@
|
|
|
+<template>
|
|
|
+ <div style="padding:10px" @click.stop="void(0)">
|
|
|
+ <div class="" v-if="false" style="text-align: left;top:2%;width: 100%;letter-spacing: 5px;font-size: 18px;">
|
|
|
+ <span style="position: relative;">日期</span>
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 180px;"
|
|
|
+ v-model="daterangeTime"
|
|
|
+ value-format="YYYY-MM-DD"
|
|
|
+ date-format="YYYY-MM-DD"
|
|
|
+ format="YYYY-MM-DD"
|
|
|
+ :value-format="'YYYY-MM-DD'"
|
|
|
+ type="date"
|
|
|
+ placeholder="请选择日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div style="display: flex; height:820px;width:100%;background-color:#fff;margin-top:10px;box-shadow: 2px 5px 8px 2px rgb(160 129 129 / 32%);border-radius: 5px;padding: 25px;">
|
|
|
+ <div class="left" style="height: 100%;width: 45%;">
|
|
|
+ <div style="height: 60%;width: 100%;position: relative;padding: 20px;">
|
|
|
+ <div class="table_caption" style="position: absolute;left:0px;top:0px;font-size: 20px;">成本控制</div>
|
|
|
+ <div class="masterimg">
|
|
|
+ <img src="@/assets/images/a_001.png">
|
|
|
+ <span><b>{{datalist.curr.total||'-'}}</b> 元/公斤</span>
|
|
|
+ </div>
|
|
|
+ <div :class="'masterblock block'+ind" v-for="(item,ind) in cogslist">
|
|
|
+ <div style="height: 36px;"><span style="font-size: 20px;"><b>{{ item['keyp'] }}</b> %</span><span style="color:#e16762;font-size: 12px;float: right;">约为 {{ item['keyv'] }}元</span></div>
|
|
|
+ <div style="font-size: 12px;color:#2b2b2b">{{ item['keyn'] }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="block_line" style="width: 2px;height: 59%;left: 50%;margin-left: -1px;top: 105px;">
|
|
|
+ <div class="cirle" style="margin-left: -4px;top: 0px;left: 50%;"></div><div class="cirle" style="margin-left: -4px;bottom: 0px;left: 50%;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="block_line" style="width: 53%;height: 2px;top:38%;left:173px;">
|
|
|
+ <div class="cirle" style="left: 0;top: 50%;margin-top: -4px;"></div><div class="cirle" style="right: 0;top: 50%;margin-top: -4px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="block_line" style="width: 53%;height: 2px;top:62%;left:173px;">
|
|
|
+ <div class="cirle" style="left: 0;top: 50%;margin-top: -4px;"></div><div class="cirle" style="right: 0;top: 50%;margin-top: -4px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 33%;width: 100%;margin-top: 2%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>成本曲线</div>
|
|
|
+ <div style="height: 100%;width: 100%;" ref="leftbottom_echarts"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="right" style="height: 100%;width: 53%;margin-left: 2%;">
|
|
|
+ <div class="righttop" style="display: flex;height: 60%;">
|
|
|
+ <div style="height: 100%;width: 50%;margin-bottom: 2%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>单位成本</div>
|
|
|
+ <div style="height: 50%;width: 100%;" ref="righttop_echarts1"></div>
|
|
|
+ <div style="padding-left: 10px;font-size: 14px;font-weight: bold;text-align: center;">{{ cogsName }}</div>
|
|
|
+ <div style="height: 30%;width: 100%;" ref="righttop_echarts11"></div>
|
|
|
+ </div>
|
|
|
+ <div style="height: 100%;width: 50%;margin-bottom: 2%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>人均单位产出</div>
|
|
|
+ <div style="height: 90%;width: 100%;" ref="righttop_echarts2"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rightbouttom" style="height: 40%;width: 100%;">
|
|
|
+ <div class="table_caption" style="height: 30px;line-height: 30px;"><div class="line"></div>成本明细</div>
|
|
|
+ <div style="height: 90%;width: 100%;">
|
|
|
+ <el-table :data="cogsdetaillist" style="height: 100%;width: 100%;">
|
|
|
+ <el-table-column label="" prop="item"></el-table-column>
|
|
|
+ <el-table-column label="加弹" prop="value0"></el-table-column>
|
|
|
+ <el-table-column label="经编" prop="value1"></el-table-column>
|
|
|
+ <el-table-column label="前整" prop="value2"></el-table-column>
|
|
|
+ <el-table-column label="印染" prop="value3"></el-table-column>
|
|
|
+ <el-table-column label="后整" prop="value4"></el-table-column>
|
|
|
+ <el-table-column label="成品" prop="value5"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import { ref,onMounted,watch } from 'vue';
|
|
|
+ import {d_global_cogs} from "@/api/house/api";
|
|
|
+ import { ElDatePicker,ElMessage } from 'element-plus';
|
|
|
+ import 'element-plus/dist/index.css'; // 确保导入样式文件
|
|
|
+ import * as echarts from 'echarts';
|
|
|
+ export default {
|
|
|
+ props:{
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+
|
|
|
+ },
|
|
|
+ setup(props,{emit}){
|
|
|
+ const { proxy } = getCurrentInstance();
|
|
|
+ let datalist=ref({curr:{}});
|
|
|
+ const daterangeTime=ref("");
|
|
|
+ const cogslist=ref([]);
|
|
|
+ daterangeTime.value = new Date().Format('yyyy-MM-dd')
|
|
|
+ const leftbottom_echarts=ref(null);
|
|
|
+ const righttop_echarts1 = ref(null);
|
|
|
+ const righttop_echarts11 = ref(null);
|
|
|
+ const righttop_echarts2 = ref(null);
|
|
|
+ const loading=ref(true);
|
|
|
+ const cogsName=ref('');
|
|
|
+ const cogsdetaillist = ref([]);
|
|
|
+ function impquery(){
|
|
|
+ const msg = ElMessage({
|
|
|
+ message:"正在加载数据",
|
|
|
+ type:"info",
|
|
|
+ duration:0, //一直显示
|
|
|
+ });
|
|
|
+ loading.value = true;
|
|
|
+ d_global_cogs({"date":daterangeTime.value}).then((res)=>{
|
|
|
+ loading.value = false;
|
|
|
+ msg.close();
|
|
|
+ if(res.code!=200){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ datalist.value = res.data;
|
|
|
+ showLeftTop(res.data);
|
|
|
+ showLeftBottom(res.data.trend);
|
|
|
+ showRightTop(res.data);
|
|
|
+ showRightTop2(res.data.prod);
|
|
|
+ showRightBottom(res.data.detail);
|
|
|
+ }).catch(res=>{
|
|
|
+ console.log(res)
|
|
|
+ ElMessage({
|
|
|
+ message:"数据获取失败！",
|
|
|
+ type:"error",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ function showLeftTop(data){
|
|
|
+ var tmp = [];
|
|
|
+ for (let index = 1; index <= 6; index++) {
|
|
|
+ const keyp = 'p'+index,keyv='v'+index,keyn='n'+index;
|
|
|
+ tmp.push({keyp:data.curr[keyp],keyv:data.curr[keyv],keyn:data.curr[keyn]})
|
|
|
+ }
|
|
|
+ cogslist.value = tmp;
|
|
|
+ }
|
|
|
+ function showLeftBottom(trenddata){
|
|
|
+ let months = [];
|
|
|
+ let values = [];
|
|
|
+ trenddata.forEach(element => {
|
|
|
+ months.push(element.month);
|
|
|
+ values.push(element.value);
|
|
|
+ });
|
|
|
+ let option = {
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '3%',
|
|
|
+ bottom: "5%",
|
|
|
+ top: "5%",
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show:false,
|
|
|
+ bottom: 0,
|
|
|
+ itemWidth: 20,
|
|
|
+ itemHeight: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#242424',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: months,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 320,//坐标轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: '#242424',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#242424'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: { //y轴刻度线
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: { //网格
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ boundaryGap: false
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: { //坐标轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: '#3E3E3E',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#242424'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: { //y轴刻度线
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: { //网格
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ color:'#dadde4',
|
|
|
+ type:"dashed"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ name: '成本',
|
|
|
+ type: 'line',
|
|
|
+ smooth: true,
|
|
|
+ symbol: 'none',
|
|
|
+ symbolSize: 8,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#2F5FFE',
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#2F5FFE52'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(52,99,254,0.52)'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(255,255,255,0.3)'
|
|
|
+ }])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: values
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ var mychat = echarts.init(leftbottom_echarts.value);
|
|
|
+ mychat.setOption(option)
|
|
|
+ }
|
|
|
+ function showRightTop2(proddata){
|
|
|
+ const data = {
|
|
|
+ total: {
|
|
|
+ title: '总计',
|
|
|
+ figure: '0'
|
|
|
+ },
|
|
|
+ data: []
|
|
|
+ }
|
|
|
+ data.data = proddata;
|
|
|
+ let option = {
|
|
|
+ //你的代码
|
|
|
+ color: ['#53bee7', '#ee6666', '#fc8452', '#9a60b4', '#ea7ccc',"#5470c6",'#3ba272'],
|
|
|
+ grid:{
|
|
|
+ top:'15%'
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ padding: 0,
|
|
|
+ borderWidth: 0,
|
|
|
+ formatter: (params) => {
|
|
|
+ return `<div style="background-color: rgba($color: #FFFFFF, $alpha: 0.95);
|
|
|
+ box-shadow: 0 4px 9px 0 rgba($color: #000000, $alpha: 0.1);
|
|
|
+ padding:0 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;" class="tooltip-area"><p>${params.marker}${params.name}</p><h4 style="margin-left: 30px;">${params.value}</h4></div>`
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ top:'5%'
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ show:false,
|
|
|
+ text: data.total.title,
|
|
|
+ textStyle: {
|
|
|
+ color: 'rgba(28, 31, 35, 0.80)',
|
|
|
+ fontSize: '12px',
|
|
|
+ fontWeight: 'normal'
|
|
|
+ },
|
|
|
+ subtext: data.total.figure,
|
|
|
+ subtextStyle: {
|
|
|
+ color: '#1C1F23',
|
|
|
+ fontSize: '20px',
|
|
|
+ fontWeight: '600'
|
|
|
+ },
|
|
|
+ top: "center",
|
|
|
+ left: 'center'
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '',
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['30%', '45%'],
|
|
|
+ avoidLabelOverlap: false,
|
|
|
+ label: {
|
|
|
+ formatter: `{a|{b}}: {b|{c}}`,
|
|
|
+ alignTo: 'labelLine',
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ color: 'rgba(28, 31, 35, 0.80)',
|
|
|
+ fontSize: '12px',
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ color: '#1C1F23',
|
|
|
+ fontSize: '14px',
|
|
|
+ fontWeight: '600'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ lineStyle: {
|
|
|
+ cap: 'round'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: data.data
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ let mychat = echarts.init(righttop_echarts2.value);
|
|
|
+ mychat.setOption(option);
|
|
|
+ }
|
|
|
+ function showRightTop(data){
|
|
|
+ const color = ['#84b8e8', '#62a2de', '#467dce', '#2e4ca152', '#2e4ca1','#84b8e853'];
|
|
|
+ const datas = [];
|
|
|
+ for (let index = 1; index <= 6; index++) {
|
|
|
+ datas.push({value:data.curr['v'+index],name:data.curr['n'+index],"ind":index})
|
|
|
+ }
|
|
|
+ let option = {
|
|
|
+ color,
|
|
|
+ tooltip: {
|
|
|
+ trigger: "item",
|
|
|
+ extraCssText: "width: 150px; box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);",
|
|
|
+ formatter: function (params) {
|
|
|
+ let str =
|
|
|
+ (params.data &&
|
|
|
+ `<div style="font-weight: bold;width:100%;">${params.name}</div>
|
|
|
+ <div style="justify-content: space-between; align-items: center;">
|
|
|
+ <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>占比</span>
|
|
|
+ <span>${params.percent}%</span>
|
|
|
+ </div>`) ||
|
|
|
+ "";
|
|
|
+ return str;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: "pie",
|
|
|
+ radius: "65%",
|
|
|
+ center: ["50%", "50%"],
|
|
|
+ label: {
|
|
|
+ normal: {
|
|
|
+ formatter: "{xx|{b} }{yy|{d} %}",
|
|
|
+ rich: {
|
|
|
+ xx: {
|
|
|
+ fontSize: 12,
|
|
|
+ lineHeight: 32,
|
|
|
+ color: '#4E5969'
|
|
|
+ },
|
|
|
+ yy: {
|
|
|
+ fontSize: 16,
|
|
|
+ fontWeight: 600,
|
|
|
+ lineHeight: 32,
|
|
|
+ color: '#1D2129'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: datas,
|
|
|
+ itemStyle: {
|
|
|
+ emphasis: { // 鼠标经过扇形区域时的阴影效果
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ length: 5,
|
|
|
+ length2: 20,
|
|
|
+ smooth: true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ let mychat = echarts.init(righttop_echarts1.value);
|
|
|
+ mychat.setOption(option);
|
|
|
+ mychat.on('click',function(params){
|
|
|
+ let dataInd = params.data.ind;
|
|
|
+ showRightTop3(params.data.name,dataInd);
|
|
|
+ });
|
|
|
+ showRightTop3(datas[0].name,datas[0].ind);
|
|
|
+ }
|
|
|
+ function showRightTop3(name,ind){
|
|
|
+ cogsName.value = name;
|
|
|
+ let months = [];
|
|
|
+ let values = [];
|
|
|
+ datalist.value.his['n'+ind].forEach(element => {
|
|
|
+ months.push(element.month);
|
|
|
+ values.push(element.value);
|
|
|
+ });
|
|
|
+ let option = {
|
|
|
+ backgroundColor: '#fff',
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '5%',
|
|
|
+ bottom: "5%",
|
|
|
+ top: "5%",
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ show:false,
|
|
|
+ bottom: 0,
|
|
|
+ itemWidth: 20,
|
|
|
+ itemHeight: 10,
|
|
|
+ textStyle: {
|
|
|
+ color: '#242424',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ data: months,
|
|
|
+ axisLabel: {
|
|
|
+ rotate: 320,//坐标轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: '#242424',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#242424'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: { //y轴刻度线
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: { //网格
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ boundaryGap: false
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: { //坐标轴字体颜色
|
|
|
+ textStyle: {
|
|
|
+ color: '#3E3E3E',
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#242424'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisTick: { //y轴刻度线
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ splitLine: { //网格
|
|
|
+ show: true,
|
|
|
+ lineStyle:{
|
|
|
+ color:'#dadde4',
|
|
|
+ type:"dashed"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ series: [{
|
|
|
+ name: name,
|
|
|
+ type: 'line',
|
|
|
+ smooth: false,
|
|
|
+ symbol: 'circle',
|
|
|
+ symbolSize: 8,
|
|
|
+ itemStyle: {
|
|
|
+ color: '#fbc16b',
|
|
|
+ borderColor: '#fff',
|
|
|
+ borderWidth: 2
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '##fbc16b'
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ areaStyle: {
|
|
|
+ normal: {
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ offset: 0,
|
|
|
+ color: '#feebd0'
|
|
|
+ }, {
|
|
|
+ offset: 1,
|
|
|
+ color: '#feebd010'
|
|
|
+ }])
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: values
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ var mychat = echarts.init(righttop_echarts11.value);
|
|
|
+ mychat.setOption(option)
|
|
|
+ }
|
|
|
+ function showRightBottom(data){
|
|
|
+ var tmp=[];
|
|
|
+ data.forEach(item=>{
|
|
|
+ tmp.push({
|
|
|
+ item:item.item,
|
|
|
+ value0:item.values[0],
|
|
|
+ value1:item.values[1],
|
|
|
+ value2:item.values[2],
|
|
|
+ value3:item.values[3],
|
|
|
+ value4:item.values[4],
|
|
|
+ value5:item.values[5],
|
|
|
+ })
|
|
|
+ });
|
|
|
+ cogsdetaillist.value = tmp;
|
|
|
+ }
|
|
|
+ onMounted(()=>{
|
|
|
+ impquery();
|
|
|
+ })
|
|
|
+
|
|
|
+ return{
|
|
|
+ datalist,
|
|
|
+ cogslist,
|
|
|
+ cogsName,
|
|
|
+ cogsdetaillist,
|
|
|
+ impquery,
|
|
|
+ loading,
|
|
|
+ daterangeTime,
|
|
|
+ leftbottom_echarts,
|
|
|
+ righttop_echarts1,
|
|
|
+ righttop_echarts11,
|
|
|
+ righttop_echarts2,
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+.el-table__body tr.current-row>td.el-table__cell
|
|
|
+{
|
|
|
+ background-color: #aacbec;
|
|
|
+}
|
|
|
+.table_caption{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.line{
|
|
|
+ height: 60%;
|
|
|
+ width: 5px;
|
|
|
+ background-color: #000;
|
|
|
+ border-radius: 5px;
|
|
|
+ float: left;
|
|
|
+ margin-right: 8px;
|
|
|
+ margin-top: 6px;
|
|
|
+}
|
|
|
+.spanBtn{
|
|
|
+ font-weight: normal;
|
|
|
+ margin: 3px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.active{
|
|
|
+ background-color: cornflowerblue;
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px;
|
|
|
+
|
|
|
+}
|
|
|
+.masterblock{
|
|
|
+ position: absolute;
|
|
|
+ width: 174px;
|
|
|
+ height: 86px;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 1px solid #dadada;
|
|
|
+ padding: 15px;
|
|
|
+ border-left: 3px solid #2c94ff;
|
|
|
+ z-index: 0;
|
|
|
+}
|
|
|
+.block0{
|
|
|
+ margin-left: -87px;
|
|
|
+ top:20px;
|
|
|
+ left: 50%;
|
|
|
+}
|
|
|
+.block1{
|
|
|
+ right: 0px;
|
|
|
+ top:25%;
|
|
|
+}
|
|
|
+.block5{
|
|
|
+ left: 0px;
|
|
|
+ top:25%;
|
|
|
+}
|
|
|
+.block2{
|
|
|
+ left: 0px;
|
|
|
+ top:55%;
|
|
|
+}
|
|
|
+.block3{
|
|
|
+ bottom: 0px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -87px;
|
|
|
+}
|
|
|
+.block4{
|
|
|
+ right: 0px;
|
|
|
+ top:55%;
|
|
|
+}
|
|
|
+.block_line{
|
|
|
+ position:absolute;
|
|
|
+ z-index:1;
|
|
|
+ left:0;
|
|
|
+ top:0;
|
|
|
+ background-color: #2c94ff;
|
|
|
+}
|
|
|
+.block_line .cirle{
|
|
|
+ position:absolute;
|
|
|
+ height: 8px;
|
|
|
+ width: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #2c94ff;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+.masterimg{
|
|
|
+ position: absolute;
|
|
|
+ width: 174px;
|
|
|
+ height: 86px;
|
|
|
+ border-radius: 5px;
|
|
|
+ left: 50%;
|
|
|
+ top:50%;
|
|
|
+ margin-top: -42px;
|
|
|
+ margin-left: -87px;
|
|
|
+ z-index: 10;
|
|
|
+}
|
|
|
+.masterimg img{
|
|
|
+ width: 174px;
|
|
|
+ height: 86px;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.masterimg span{
|
|
|
+ position: absolute;
|
|
|
+ top: 36%;
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
liling
