首页样式完善

zpzgiser

2021-07-18 cf74339d2db65309c54a83acaa1216b1d8dd1838

首页样式完善

 public/img/bajgxt/bottomimg.png

Binary files differ

 public/img/bajgxt/leftbottom.png

 public/img/bajgxt/lefttop.png

 public/img/bajgxt/rightImg11.png

 public/img/bajgxt/rightImg12.png

 public/img/bajgxt/rightbottom.png

 public/img/bajgxt/righttop.png

 public/img/bajgxt/table.png

 public/img/bajgxt/tabletitle.png

 src/api/index/index.js

@@ -2,20 +2,20 @@
// http://2h3f861221.wicp.vip:58646/information/SelectCount
export const securityTotal = () => {
  return request({
    url: "http://2h3f861221.wicp.vip:58646/information/SelectCount",
    url: "/api/information/SelectCount",
    method: "post"
  });
};
export const holderNum = () => {
  return request({
    url: "http://2h3f861221.wicp.vip:58646/information/SelectCounthold",
    url: "/api/information/SelectCounthold",
    method: "post"
  });
};

export const securityPer = () => {
    return request({
      url: "http://2h3f861221.wicp.vip:58646/performance/queryYearPer",
      url: "/api/performance/queryYearPer",
      method: "get"
    });
  };

 src/views/home/index.scss

@@ -12,7 +12,7 @@
    width: 100%;
    height: 77px;
    text-align: center;
    position: relative;
    // position: relative;
    span {
      font-family: "Arial Normal", "Arial", sans-serif;
      font-size: 36px;
@@ -20,20 +20,31 @@
      text-align: center;
      line-height: 77px;
    }
    span:nth-child(2) {
      position: absolute;
      margin-top: 22px;
      margin-left: 26%;
      font-size: 22px;
      cursor: pointer;
      &:hover {
        color: #90cef0;
      }
    }
    // span:nth-child(2) {
    //   position: absolute;
    //   margin-top: 22px;
    //   margin-left: 26%;
    //   font-size: 22px;
    //   cursor: pointer;
    //   &:hover {
    //     color: #90cef0;
    //   }
    // }
    img {
      position: absolute;
      margin-top: 22px;
      margin-left: 29%;
    }
  }
  .sub-title {
    float: right;
    color: #fff;
    margin-right: 52px;
    font-size: 17px;
    margin-top: -35px;
    cursor: pointer;
    &:hover {
      color: #90cef0;
    }
  }
  .side {
@@ -80,7 +91,7 @@
      }
    }
    .left2 {
      background: url("../../../public/img/bajgxt/left1.png") no-repeat;
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
@@ -113,7 +124,7 @@
      }
    }
    .right3 {
      background: url("../../../public/img/bajgxt/left1.png") no-repeat;
      background: url("../../../public/img/bajgxt/rightImg.png") no-repeat;
      height: calc(40% - 25px);
      width: 100%;
      background-size: 100% 100%;
@@ -139,14 +150,28 @@
  }
  .title-pane1 {
    display: inline-flex;
    height: 44px;
    height: 41px;
    img {
      width: 30px;
      height: 30px;
      margin: 10px 10px 0px 10px;
      margin: 5.5px 10px 0px 10px;
    }
    span {
      line-height: 55px;
      line-height: 46px;
      color: #fff;
      font-size: 20px;
    }
  }
  .title-pane2 {
    display: inline-flex;
    height: 53px;
    img {
      width: 30px;
      height: 30px;
      margin: 11.5px 10px 0px 10px;
    }
    span {
      line-height: 53px;
      color: #fff;
      font-size: 20px;
    }
@@ -193,8 +218,8 @@
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: -6px;
        margin-top: -7px;
        margin-left: -7px;
        margin-top: -9px;
      }
      .leftbottom {
        background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
@@ -202,8 +227,8 @@
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: -6px;
        margin-top: calc(40% - 88px);
        margin-left: -7px;
        margin-top: calc(40% - 66px);
      }
      .righttop {
        background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
@@ -211,8 +236,8 @@
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: calc(100% - 39px);
        margin-top: -7px;
        margin-left: calc(100% - 37px);
        margin-top: -9px;
      }
      .rightbottom {
        background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
@@ -220,8 +245,8 @@
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: calc(100% - 39px);
        margin-top: calc(40% - 88px);
        margin-left: calc(100% - 37px);
        margin-top: calc(40% - 66px);
      }
    }
  }
@@ -302,11 +327,11 @@
    }
  }
  .right-content {
    height: calc(100% - 44px);
    height: calc(100% - 41px);
    width: 100%;
  }
  .card-list {
    margin: 20px 60px 20px 90px;
    margin: 25px 60px 20px 90px;
    display: flex;
    height: 55px;
    line-height: 55px;

 src/views/home/index.vue

@@ -2,23 +2,20 @@
  <div class="bajgxt-home">
    <div class="head-title">
      <span>智慧保安监管模块</span>
      <!-- <img src="../../../public/img/bajgxt/linkimg.png"
                 @click.stop="goSystemHome"
                 title="进入系统" /> -->
      <span @click.stop="goSystemHome">进入系统</span>
    </div>
    <span class='sub-title' @click.stop="goSystemHome">进入系统</span>
    <div class="content">
      <div class="left">
        <div class="left1">
          <!-- <img src="../../../public/img/bajgxt/line.jpg" /> -->
          <div class="title-pane">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>各辖区单位情况统计</span>
            <span>各辖区单位统计情况</span>
          </div>
          <div id="left1Echart"></div>
        </div>
        <div class="left2">
          <div class="title-pane1">
          <div class="title-pane2">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>保安员持证情况</span>
          </div>
@@ -59,40 +56,40 @@
          <div class="rightbottom"></div>
          <el-table :data="tableData" stripe ref="indexTable">
            <template v-if="curTableType === 'car'">
              <el-table-column type="index" label="序号" width="50">
              <el-table-column :key="curTableType" type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="carNum" label="押运车辆车牌号" width="180">
              <el-table-column :key="curTableType" prop="carNum" label="押运车辆车牌号" width="180">
              </el-table-column>
              <el-table-column prop="location" label="实时位置">
              <el-table-column :key="curTableType" prop="location" label="实时位置">
              </el-table-column>
              <el-table-column prop="company" label="所属公司">
              <el-table-column :key="curTableType" prop="company" label="所属公司">
              </el-table-column>
              <el-table-column prop="linkman" label="联系人"> </el-table-column>
              <el-table-column prop="tel" label="联系电话"> </el-table-column>
              <el-table-column :key="curTableType" prop="linkman" label="联系人"> </el-table-column>
              <el-table-column :key="curTableType" prop="tel" label="联系电话"> </el-table-column>
            </template>
            <template v-if="curTableType === 'peo'">
              <el-table-column type="index" label="序号" width="50">
              <el-table-column :key="curTableType" type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="name" label="押运人员名称" width="180">
              <el-table-column :key="curTableType" prop="name" label="押运人员名称" width="180">
              </el-table-column>
              <el-table-column prop="location" label="实时位置">
              <el-table-column :key="curTableType" prop="location" label="实时位置">
              </el-table-column>
              <el-table-column prop="company" label="所属公司">
              <el-table-column :key="curTableType" prop="company" label="所属公司">
              </el-table-column>
              <el-table-column prop="tel" label="联系电话"> </el-table-column>
              <el-table-column prop="bz" label="备注"> </el-table-column>
              <el-table-column :key="curTableType" prop="tel" label="联系电话"> </el-table-column>
              <el-table-column :key="curTableType" prop="bz" label="备注"> </el-table-column>
            </template>
            <template v-if="curTableType === 'gun'">
              <el-table-column type="index" label="序号" width="50">
              <el-table-column :key="curTableType" type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="number" label="枪支编号" width="180">
              <el-table-column :key="curTableType" prop="number" label="枪支编号" width="180">
              </el-table-column>
              <el-table-column prop="location" label="实时位置">
              <el-table-column :key="curTableType" prop="location" label="实时位置">
              </el-table-column>
              <el-table-column prop="company" label="所属公司">
              <el-table-column :key="curTableType" prop="company" label="所属公司">
              </el-table-column>
              <el-table-column prop="linkman" label="负责人"> </el-table-column>
              <el-table-column prop="tel" label="联系电话"> </el-table-column>
              <el-table-column :key="curTableType" prop="linkman" label="负责人"> </el-table-column>
              <el-table-column :key="curTableType" prop="tel" label="联系电话"> </el-table-column>
            </template>
          </el-table>
        </div>
@@ -171,7 +168,7 @@
          <!-- <div id="right2Echart"></div> -->
        </div>
        <div class="right3">
          <div class="title-pane1">
          <div class="title-pane2">
            <img src="../../../public/img/bajgxt/icon3.png" />
            <span>分局预警占比情况</span>
          </div>
@@ -328,39 +325,39 @@
        ];
        this.tableData = [
          {
            carNum: "111111111111",
            carNum: "赣A2A232",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            company: "保安公司",
            linkman: "李琳",
            tel: "18928374611"
          },
          {
            carNum: "111111111111",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            carNum: "赣A3A232",
            location: "青云谱区",
            company: "保安公司",
            linkman: "王琦",
            tel: "13932743923"
          },
          {
            carNum: "111111111111",
            carNum: "赣A2B232",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            company: "保安公司",
            linkman: "李梦",
            tel: "13214561324"
          },
          {
            carNum: "111111111111",
            carNum: "赣B2E232",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            company: "保安公司",
            linkman: "张强",
            tel: "13372889288"
          },
          {
            carNum: "111111111111",
            carNum: "赣B2E252",
            location: "红谷滩",
            company: "公司",
            linkman: "小李",
            tel: "13999999999"
            company: "保安公司",
            linkman: "赵青",
            tel: "18937281746"
          }
        ];
      } else if (type === "peo") {
@@ -380,46 +377,46 @@
        ];
        this.tableData = [
          {
            name: "小张",
            name: "张青",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            company: "保安公司",
            tel: "19876223615",
            bz: ""
          },
          {
            name: "小张",
            name: "王桂林",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            company: "保安公司",
            tel: "18723982376",
            bz: ""
          },
          {
            name: "小张",
            name: "王蒙",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            company: "保安公司",
            tel: "18909872345",
            bz: ""
          },
          {
            name: "小张",
            name: "李嘉",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            company: "保安公司",
            tel: "13315276390",
            bz: ""
          },
          {
            name: "小张",
            name: "李林",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            company: "保安公司",
            tel: "19108372654",
            bz: ""
          },
          {
            name: "小张",
            name: "张国庆",
            location: "红谷滩",
            company: "公司",
            tel: "13999999999",
            bz: "zzz"
            company: "保安公司",
            tel: "13187234523",
            bz: ""
          }
        ];
      } else if (type === "gun") {
@@ -440,46 +437,46 @@
        ];
        this.tableData = [
          {
            number: "Q1111",
            number: "Q1311",
            location: "红谷滩",
            company: "公司",
            company: "保安公司",
            linkman: "张强",
            tel: "13782143412"
          },
          {
            number: "Q2111",
            location: "红谷滩",
            company: "保安公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q2141",
            location: "红谷滩",
            company: "保安公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1321",
            location: "红谷滩",
            company: "保安公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            company: "保安公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            number: "Q1331",
            location: "红谷滩",
            company: "公司",
            company: "保安公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
          },
          {
            number: "Q1111",
            location: "红谷滩",
            company: "公司",
            linkman: "张强",
            tel: "13999999999"
            tel: "13789233124"
          }
        ];
      }

 src/views/home/indexEchart.js

@@ -349,7 +349,7 @@
  let data = [
    {
      name: "新建县",
      value: 754
      value: 154
    },
    {
      name: "安义县",
@@ -424,13 +424,13 @@
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        name: "学历",
        name: "分局预警占比",
        type: "pie",
        clockWise: true,
        z: 2,
        hoverAnimation: false,
        radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
        center: ["50%", "55%"],
        radius: [90 - i * 8 + "%", 85 - i * 8 + "%"],
        center: ["30%", "50%"],
        labelLine: {
          show: false
        },
@@ -447,7 +447,7 @@
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0
              borderWidth: 0,
            },
            tooltip: {
              show: false
@@ -483,20 +483,22 @@
    ],

    legend: {
      bottom: "0%",
      right: "2%",
      top:'3%',
      //   icon: "circle",
      itemHeight: 10,
      show: true,
      data: ["新建县", "安义县", "红谷滩新区", "西湖区"],
      data: ["新建县", "安义县", "红谷滩新区", "西湖区",'东湖区','经开区','青云谱区','高新区','湾里区','进贤县','青山湖区'],
      selectedMode: false,
      textStyle: {
        color: "#fff"
      }
      },
      orient:'vertical'
    },
    grid: {
      top: "16%",
      bottom: "55%",
      left: "50%",
      top: "5%",
      bottom: "50%",
      left: "30%",
      containLabel: false
    },
    yAxis: [
@@ -515,7 +517,7 @@
          inside: false,
          textStyle: {
            color: "#fff",
            fontSize: 15
            fontSize: 8
          },
          show: true
        },