更改颜色、文字、表格

zpzgiser

2021-07-19 d7fab6b5d91a5c49d84f7d21025cb6bc16b43bdf

更改颜色、文字、表格

 src/router/views/index.js

@@ -242,7 +242,7 @@
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/management/idinformation')
        }]
    }, {
    },{
        path: '/securityCompany',
        redirect: '/securityCompany/index',
        component: Layout,
@@ -272,5 +272,31 @@
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/regulatoryInformation/index')
        }]
    }, {
        path: '/securityUnitOperation/operationTable',
        redirect: '/securityUnitOperation/operationTable/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '公司运营情况智能分析详情表',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/operationTable')
        }]
    }, {
        path: '/securityUnitOperation/economicTable',
        redirect: '/securityUnitOperation/economicTable/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '公司经济情况智能分析详情表',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import ( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable')
        }]
    }
]

 src/views/home/indexEchart.js

@@ -19,15 +19,18 @@
      }
    },
    color: [
      "#516b91",
      "#59c4e6",
      "#93b7e3",
      "#a5e7f0",
      "#cbb0e3",
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
    ],
    legend: {
      data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
@@ -122,15 +125,18 @@
      }
    },
    color: [
      "#516b91",
      "#59c4e6",
      "#93b7e3",
      "#a5e7f0",
      "#cbb0e3",
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
    ],
    legend: {
      data: ["持证人数", "未持证人数"],
@@ -220,15 +226,18 @@
      trigger: "axis"
    },
    color: [
      "#516b91",
      "#59c4e6",
      "#93b7e3",
      "#a5e7f0",
      "#cbb0e3",
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
    ],

    legend: {
@@ -282,15 +291,18 @@
      trigger: "axis"
    },
    color: [
      "#516b91",
      "#59c4e6",
      "#93b7e3",
      "#a5e7f0",
      "#cbb0e3",
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
    ],

    legend: {
@@ -465,15 +477,18 @@
      formatter: "{a}<br>{b}:{c}({d}%)"
    },
    color: [
      "#516b91",
      "#59c4e6",
      "#93b7e3",
      "#a5e7f0",
      "#cbb0e3",
      "#91cc75",
      "#fac858",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
    ],

    legend: {

 src/views/securityUnitOperation/economicAnalysis.vue

@@ -6,7 +6,15 @@
          <div class="rowTitle">
            <img src="../../../public/img/bajgxt/u1618.png" />
            <span>数据概览</span>
            <el-button @click="toEconomicTable">进入数据统计表</el-button>
            <el-select class="select0" v-model="value0" placeholder="请选择">
              <el-option
                v-for="item in options0"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select class="select1" v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in options1"
@@ -25,6 +33,7 @@
              >
              </el-option>
            </el-select>
            <el-button @click="toEconomicTable">进入数据统计表</el-button>
          </div>

          <div class="col-content">
@@ -85,6 +94,33 @@
    return {
      value1: "1",
      value2: "1",
       value0: "2012",
      options0: [
        {
          value: "2012",
          label: "2012年"
        },
        {
          value: "2011",
          label: "2011年"
        },
        {
          value: "2010",
          label: "2010年"
        },
        {
          value: "2009",
          label: "2009年"
        },
        {
          value: "2008",
          label: "2008年"
        },
        {
          value: "2007",
          label: "2007年"
        }
      ],
      options1: [
        {
          value: "1",
@@ -138,7 +174,7 @@
      middleEchart2.setOption(echartJs.economicPieOption(data));
    },
    toEconomicTable() {
       this.$router.push({ path: "/securityUnitOperation/economicTable" });
      this.$router.push({ path: "/securityUnitOperation/economicTable" });
    }
  },
  mounted() {
@@ -217,17 +253,21 @@
    font-weight: 600;
    margin-left: 11px;
  }
  .select0 {
    position: absolute;
    right: 443px;
  }
  .select1 {
    position: absolute;
    right: 140px;
    right: 302px;
  }
  .select2 {
    position: absolute;
    right: 0px;
    right: 159px;
  }
  .el-button {
    position: absolute;
    right: 300px;
    right: 0px;
  }
  /deep/ .el-input__inner {
    width: 120px;

 src/views/securityUnitOperation/economicTable.vue

@@ -1,50 +1,59 @@
<template>
  <div class="operation-table">
    <el-row>
      <el-col>
        <span>时间范围：</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <span>类别：</span>
        <el-select v-model="typeValue" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
  <basic-container>
    <div class="operation-table">
      <el-row>
        <el-col>
          <span>时间范围：</span>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-option>
        </el-select>
        <span>分局：</span>
        <el-select v-model="subofficeValue" placeholder="请选择">
          <el-option
            v-for="item in subofficeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>公司名称：</span>
        <el-input v-model="companyName"></el-input>
        <el-button>查询</el-button>
        <el-button>重置</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="table">
          <el-button @click="downExcel">下载</el-button>
          <el-table id="table" :data="tableData" style="width: 100%">
          </el-date-picker>
          <span>类别：</span>
          <el-select v-model="typeValue" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>所属辖区：</span>
          <el-select v-model="subofficeValue" placeholder="请选择">
            <el-option
              v-for="item in subofficeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span>公司名称：</span>
          <el-input v-model="companyName"></el-input>
          <el-button>查询</el-button>
          <el-button>重置</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div class="table">
            <el-button @click="downExcel">下载</el-button>
            <avue-crud
              :option="tableOption"
              :data="tableData"
              :page.sync="tablePage"
              :permission="permissionList"
              :before-open="beforeOpen"
            >
            </avue-crud>
            <!-- <el-table id="table" :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="company" label="公司名称" width="180">
@@ -61,18 +70,24 @@
            <el-table-column prop="sbjnrszb" label="社保缴纳人数占比（%）">
            </el-table-column>
            <el-table-column prop="bz" label="备注"> </el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" :total="tableData.length">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
          </el-table> -->
            <el-pagination
              background
              layout="prev, pager, next"
              :total="tableData.length"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
  </basic-container>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "公司经济情况智能分析详情表",
  data() {
    return {
      pickerOptions: {
@@ -140,6 +155,63 @@
          bz: ""
        }
      ],
      tablePage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      tableOption: {
        lazy: true,
        tip: false,
        simplePage: true,
        searchShow: true,
        searchMenuSpan: 6,
        dialogWidth: "60%",
        tree: true,
        border: true,
        index: true,
        selection: true,
        viewBtn: false,
        editBtn: false,
        addBtn: false,
        delBtn: false,
        menuWidth: 150,
        dialogClickModal: false,
        column: [
          {
            label: "公司名称",
            prop: "company"
          },
          {
            label: "所属分局",
            prop: "subOffice"
          },
          {
            label: "时间",
            prop: "time"
          },
          {
            label: "社保缴纳人数",
            prop: "sbjnrs"
          },
          {
            label: "社保缴纳总额（万）",
            prop: "sbjnze"
          },
          {
            label: "公司派遣人数",
            prop: "gspqrs"
          },
          {
            label: "社保缴纳人数占比（%）",
            prop: "sbjnrszb"
          },
          {
            label: "备注",
            prop: "bz"
          }
        ]
      },
      typeValue: "0",
      typeOptions: [
        {
@@ -220,8 +292,8 @@
  .el-row:first-child {
    height: 100px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 1px #fff;
    // background: rgba(255, 255, 255, 0.1);
    // box-shadow: 0px 0px 1px #fff;
    .el-col {
      padding: 20px;
      .el-date-editor {
@@ -242,8 +314,8 @@
  }
  .el-row:nth-child(2) {
    height: calc(100% - 120px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 1px #fff;
    // background: rgba(255, 255, 255, 0.1);
    // box-shadow: 0px 0px 1px #fff;
  }
  .el-col {
    height: 100%;

 src/views/securityUnitOperation/operationAnalysis.vue

@@ -6,7 +6,16 @@
          <div class="rowTitle">
            <img src="../../../public/img/bajgxt/u1618.png" />
            <span>数据概览</span>
            <el-button @click="toOperationTable">进入数据统计表</el-button>

            <el-select class="select0" v-model="value0" placeholder="请选择">
              <el-option
                v-for="item in options0"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select class="select1" v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in options1"
@@ -25,6 +34,7 @@
              >
              </el-option>
            </el-select>
            <el-button @click="toOperationTable">进入数据统计表</el-button>
          </div>

          <div class="col-content">
@@ -51,7 +61,7 @@
            <div class="box-card">
              <span>服务客户</span>
              <span>56</span>
              <span>较上月增加34人</span>
              <span>较上月增加34家</span>
            </div>
            <div class="box-card">
              <span>缴纳社保</span>
@@ -70,7 +80,7 @@
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="rowContent">
          <span class="span-title">公司保安类数据对比</span>
          <span class="span-title">保安类数据统计</span>
          <div id="middleEchart1"></div>
        </div>
      </el-col>
@@ -100,6 +110,33 @@
    return {
      value1: "1",
      value2: "1",
      value0: "2012",
      options0: [
        {
          value: "2012",
          label: "2012年"
        },
        {
          value: "2011",
          label: "2011年"
        },
        {
          value: "2010",
          label: "2010年"
        },
        {
          value: "2009",
          label: "2009年"
        },
        {
          value: "2008",
          label: "2008年"
        },
        {
          value: "2007",
          label: "2007年"
        }
      ],
      options1: [
        {
          value: "1",
@@ -232,17 +269,21 @@
    font-weight: 600;
    margin-left: 11px;
  }
  .select0 {
    position: absolute;
    right: 443px;
  }
  .select1 {
    position: absolute;
    right: 140px;
    right: 302px;
  }
  .select2 {
    position: absolute;
    right: 0px;
    right: 159px;
  }
  .el-button {
    position: absolute;
    right: 300px;
    right: 0px;
  }
  /deep/ .el-input__inner {
    width: 120px;

 src/views/securityUnitOperation/operationTable.vue

@@ -24,7 +24,7 @@
          >
          </el-option>
        </el-select>
        <span>分局：</span>
        <span>所属辖区：</span>
        <el-select v-model="subofficeValue" placeholder="请选择">
          <el-option
            v-for="item in subofficeOptions"
@@ -82,6 +82,7 @@
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  name: "公司运营情况智能分析详情表",
  data() {
    return {
      pickerOptions: {

 src/views/securityUnitOperation/securityEchart.js

@@ -6,6 +6,21 @@
    //     color: "#fff"
    //   }
    // },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "3%",
@@ -45,6 +60,7 @@
      ]
    },
    yAxis: {
      name: "（%）",
      type: "value",
      axisLabel: {
        color: "#fff"
@@ -53,7 +69,7 @@
    series: [
      {
        name: "趋势",
        data: [0.1, 0.3, 0.2, 0.5, 0.1,0.4, 0.32, 0.13, 0.21, 0.12, 0.25, 0.11],
        data: [10, 30, 20, 50, 10, 40, 32, 13, 21, 12, 25, 11],
        type: "line",
        smooth: true,
        areaStyle: {}
@@ -80,23 +96,38 @@
        "持证保安数",
        "过考保安数",
        "缴纳社保保安数",
        "缴纳社保数"
        "保安派遣"
      ],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "5%",
      right: "4%",
      left: "3%",
      right: "2%",
      bottom: "15%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      boundaryGap: true,
      axisLabel: {
        color: "#fff"
      },
@@ -124,38 +155,38 @@
    series: [
      {
        name: "总保安数",
        type: "line",
        stack: "总量",
        type: "bar",
        barWidth: 9,
        data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
      },
      {
        name: "正常保安数",
        type: "line",
        stack: "总量",
        type: "bar",
        barWidth: 9,
        data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
      },
      {
        name: "持证保安数",
        type: "line",
        stack: "总量",
        type: "bar",
        barWidth: 9,
        data: [150, 232, 201, 154, 190, 330, 410, 132, 111, 222, 132, 43]
      },
      {
        name: "过考保安数",
        type: "line",
        stack: "总量",
        type: "bar",
        barWidth: 9,
        data: [320, 332, 301, 334, 390, 330, 320, 233, 123, 432, 122, 11]
      },
      {
        name: "缴纳社保保安数",
        type: "line",
        stack: "总量",
        type: "bar",
        barWidth: 9,
        data: [120, 132, 101, 134, 120, 130, 132, 222, 111, 123, 341, 123]
      },
      {
        name: "缴纳社保数",
        type: "line",
        stack: "总量",
        name: "保安派遣",
        type: "bar",
        barWidth: 9,
        data: [120, 132, 101, 134, 1210, 130, 120, 22, 123, 33, 21, 13]
      }
    ]
@@ -183,24 +214,34 @@
        color: "#fff"
      }
    },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "12%",
      right: "4%",
      bottom: "15%",
      containLabel: true
      left: "10%",
      right: "2%",
      bottom: "22%",
      containLabel: false
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLabel: {
        color: "#fff"
      }
    },
    yAxis: {
      type: "category",
      boundaryGap: true,
      axisLabel: {
        color: "#fff"
        color: "#fff",
        interval: 0
      },
      data: [
        "一月",
@@ -217,6 +258,13 @@
        "十二月"
      ]
    },
    yAxis: {
      type: "value",

      axisLabel: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "客户数",
@@ -230,25 +278,31 @@

function economicMiddle(data) {
  let option = {
    // title: {
    //   text: "公司保安类数据对比",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: [
        "缴纳社保人数",
        '公司派遣人数'
      ],
      data: ["缴纳社保人数", "公司派遣人数"],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "5%",
@@ -295,7 +349,7 @@
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
      },
      }
    ]
  };
  return option;
@@ -336,6 +390,21 @@
        color: "#fff"
      }
    },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    series: [
      {
        name: "人员分布",