重庆项目页面布局

yangfeng

2023-12-21 90020572d7922536f94df74bcee1ccc3393dd097

重庆项目页面布局

 public/chongqingPublicSecurity/chongqing_bg.png

 public/chongqingPublicSecurity/left-top-bg.png

 src/components/ChongqingPublicSecurity/BackgroundLayout.vue

New file
@@ -0,0 +1,179 @@
<template>
  <div class="chongqing-layout">
    <div class="top">
      <div class="top-left">
        <slot name="topBlock1"></slot>
      </div>
      <div class="top-middle">
        <div class="chongqing-title">全景数据展示</div>
      </div>
      <div class="top-right">
        <slot name="topBlock2"></slot>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <div class="left-top-Block">
          <slot name="leftBlock1"></slot>
        </div>
        <div class="left-bottom-Block">
          <slot name="leftBlock2"></slot>
        </div>
      </div>
      <div class="bottom-middle">
        <slot name="middleBlock1"></slot>
      </div>
      <div class="bottom-right">
        <div class="right-top-Block">
          <slot name="rightBlock1"></slot>
        </div>
        <div class="right-bottom-Block">
          <slot name="rightBlock2"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script></script>

<style scoped lang="scss">
/** 上 */
// 上边固定高
$topBlockHeight: 60px;
// 上左区域宽
$topLeftWidth: 24%;
// 上中区域宽
$topMiddleWidth: 29%;
// 上右区域宽
$topRightWidth: 47%;
// 上 左右上边距
$topLeftMarginTop: 15px;
// 上 左右高度
$topLeftHeight: calc(100% - $topLeftMarginTop);
// 左右边距
$leftRightMargin: 40px;
// 左右内边距
$leftRightPadding: 30px;
// 下边距
$bottomMargin: 40px;
// 上下内边距
$topBottomPadding: 40px;

/** 下 */
// 下边固定高度
$bottomBlockHeight: calc(100vh - $topBlockHeight - $bottomMargin);
// 下左侧区域宽
$bottomLeftWidth: 29%;
// 中间区域宽
$bottomMiddleWidth: 42%;
// 右侧区域宽
$bottomRightWidth: 29%;
// 公共边距
$commonMargin: 40px;
// 下 左上高度
$leftTopBlockHeight: 30%;
// 下 左下高度
$leftBottomBlockHeight: calc(70% - $commonMargin);
// 下 中高度
$leftMiddleBlockHeight: calc(100% - $commonMargin);
// 下 右上高度
$rightTopBlockHeight: 48%;
// 下 右下高度
$rightBottomBlockHeight: calc(52% - $commonMargin);

$borderColor: #194871;
$borderWidth: 2px;

.chongqing-layout {
  background-image: url("/chongqingPublicSecurity/chongqing_bg.png");
  background-position-x: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  &.debug {
    & > div {
      border: 1px solid red;
      & > div {
        border: 1px solid red;
      }
    }
  }
}

.top {
  height: $topBlockHeight;
  margin: 0 $leftRightMargin;
  display: flex;
  align-items: center;
  background: rgba(3, 10, 14, 0.7);
  .top-left {
    width: $topLeftWidth;
    height: $topLeftHeight;
    margin-top: $topLeftMarginTop;
    padding-left: $leftRightPadding;
    border-top: $borderWidth solid $borderColor;
    border-right: $borderWidth solid $borderColor;
  }
  .top-middle {
    width: $topMiddleWidth;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: $borderWidth solid $borderColor;
    .chongqing-title {
      text-align: center;
      font-size: 36px;
      color: #e49d19;
      font-weight: bold;
      font-family: "Arial Negreta", "Arial Normal", "Arial";
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      background-image: linear-gradient(to top, #4ca0ee, #b5e7f3 70%);
    }
  }

  .top-right {
    width: $topRightWidth;
    height: $topLeftHeight;
    margin-top: $topLeftMarginTop;
    border-top: $borderWidth solid $borderColor;
    border-left: $borderWidth solid $borderColor;
    padding-right: $leftRightPadding;
  }
}
.bottom {
  height: $bottomBlockHeight;
  margin: 0 $leftRightMargin;
  padding: $topBottomPadding $leftRightPadding;
  display: flex;
  .bottom-left {
    width: $bottomLeftWidth;
  }
  .bottom-middle {
    width: $bottomMiddleWidth;
    height: $leftMiddleBlockHeight;
    margin-right: $commonMargin;
  }
  .bottom-right {
    width: $bottomRightWidth;
  }
}

.left-top-Block {
  height: $leftTopBlockHeight;
}
.left-bottom-Block {
  height: $leftBottomBlockHeight;
}

.right-top-Block {
  height: $rightTopBlockHeight;
}
.right-bottom-Block {
  height: $rightBottomBlockHeight;
}
</style>

 src/router/index.js

@@ -1,6 +1,6 @@
import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/cockpitPage/index.vue";
import HomeView from "../views/ChongqingPublicSecurity/index.vue";

Vue.use(VueRouter);


 src/views/ChongqingPublicSecurity/components/KeyPersonnelManage.vue

New file
@@ -0,0 +1,43 @@
<template>
  <div class="keyPersonnelManage">
    <div class="label-box">重点人员管理</div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dataObj: {
        total: 256,
        disposeOf: 254,
        noDisposeOf: 2,
      },
      src: "/chongqingPublicSecurity/left-top-bg.png",
    };
  },
  mounted() {},
  watch: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.keyPersonnelManage {
  width: 100%;
  height: calc(100% - 30px);
  margin-top: 35px;
  background: rgba(3, 10, 14, 0.7);
  border: 1px solid #194871;
  .label-box {
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    font-size: 20px;
    color: #01c2ff;
    background: #20426a;
  }
}
</style>

 src/views/ChongqingPublicSecurity/components/NuclearMiningCount.vue

New file
@@ -0,0 +1,168 @@
<template>
  <div class="nuclearMiningCount">
    <div class="label-box">一标三实核采</div>
    <div class="total-box">
      <div class="data-total">
        <div class="common-title commonColor">数据总量:</div>
        <div class="common-value totalColor">{{ dataObj.total }}</div>
      </div>
      <div class="disposeOf disposeOfColor">
        <div class="common-title">已处置:</div>
        <div class="common-value">{{ dataObj.disposeOf }}</div>
      </div>
      <div class="no-disposeOf no-disposeOfColor">
        <div class="common-title">未处置:</div>
        <div class="common-value">{{ dataObj.noDisposeOf }}</div>
      </div>
    </div>
    <div class="count-box">
      <div class="count-view">
        <div class="common-left">
          <div class="left">
            <div class="top-label commonColor">疑似迁入数</div>
            <div class="bottom-value commonVlueColor">256</div>
          </div>
          <div class="right">
            <el-image :src="src"></el-image>
          </div>
        </div>
        <div class="common-right">
          <div class="left">
            <div class="top-label commonColor">疑似迁出数</div>
            <div class="bottom-value commonVlueColor">3</div>
          </div>
          <div class="right">
            <el-image :src="src"></el-image>
          </div>
        </div>
      </div>
      <div class="count-view">
        <div class="common-left">
          <div class="left">
            <div class="top-label commonColor">频繁夜归数</div>
            <div class="bottom-value commonVlueColor">92</div>
          </div>
          <div class="right">
            <el-image :src="src"></el-image>
          </div>
        </div>
        <div class="common-right">
          <div class="left">
            <div class="top-label commonColor">昼伏夜出数</div>
            <div class="bottom-value commonVlueColor">56</div>
          </div>
          <div class="right">
            <el-image :src="src"></el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dataObj: {
        total: 256,
        disposeOf: 254,
        noDisposeOf: 2,
      },
      src: "/chongqingPublicSecurity/left-top-bg.png",
    };
  },
  mounted() {},
  watch: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.nuclearMiningCount {
  width: 100%;
  height: 100%;
  background: rgba(3, 10, 14, 0.7);
  border: 1px solid #194871;
  .label-box {
    height: 40px;
    line-height: 40px;
    padding: 0 30px;
    font-size: 20px;
    color: #01c2ff;
    background: #20426a;
  }
  .total-box {
    height: 50px;
    display: flex;
    align-items: center;
    .data-total,
    .disposeOf,
    .no-disposeOf {
      width: 33.3%;
      margin-left: 30px;
      display: flex;
      align-items: center;
      .common-title {
        height: 50px;
        line-height: 50px;
      }
      .common-value {
        font-size: 22px;
        margin-left: 10px;
        font-weight: 700;
      }
    }
  }
  .count-box {
    margin-left: 30px;
    height: calc(100% - 140px);
    .count-view {
      margin-top: 15px;
      margin-right: 30px;
      height: 50%;
      display: flex;
      .common-left,
      .common-right {
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, #00344b, #001d2f 30%);
        border: 1px solid #0e9cff;
        margin-right: 20px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        overflow: hidden;
        .left {
          .top-label {
            margin-top: 10px;
            font-size: 13px;
          }
          .bottom-value {
            font-size: 30px;
            font-weight: 700;
          }
        }
      }
    }
  }
}
.commonColor {
  color: #a8d6ff;
}
.totalColor {
  color: #f0a205;
}
.disposeOfColor {
  color: #1dd4ff;
}
.no-disposeOfColor {
  color: #fa2808;
}
.commonVlueColor {
  color: #21e8e1;
}
</style>

 src/views/ChongqingPublicSecurity/components/PopulationDistributionChart.vue

New file
@@ -0,0 +1,368 @@
<template>
  <div class="population-distribution">
    <div class="title">
      <div class="left-box">人口分布</div>
    </div>
    <!-- 饼图 -->
    <div class="container">
      <div class="chartsGl" ref="charts"></div>
      <!-- 饼图下面的底座 -->
      <div class="buttomCharts"></div>
    </div>
  </div>
</template>

<script>
//引入echart
import * as echarts from "echarts";
import "echarts-gl";

import { getPie3D, getParametricEquation } from "./chart"; //工具类js，页面路径自己修改

export default {
  name: "Zysjg",
  data() {
    return {
      optionData: [
        {
          name: "常驻人口", //名称
          value: 23, //值
          itemStyle: {
            //颜色
            color: "rgba(44, 247, 18, 0.8)",
          },
        },
        {
          name: "陌生人",
          value: 46.2,
          itemStyle: {
            color: "rgba(67, 190, 252, 0.7)",
          },
        },
        {
          name: "搬离住户",
          value: 10,
          itemStyle: {
            color: "rgba(253, 223, 52,0.6)",
          },
        },
        {
          name: "新入住户",
          value: 20.8,
          itemStyle: {
            color: "rgba(3, 40, 250,0.4)",
          },
        },
      ],
      statusChart: null,
      option: {},
      selectPeriod: 1,
    };
  },
  created() {
    // this.setLabel();
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
      //根据窗口变化自动调节图表大小
      const that = this;
      window.onresize = function () {
        that.changeSize();
      };
    });
  },
  methods: {
    // 初始化label样式
    setLabel() {
      this.optionData.forEach((item, index) => {
        item.label = {
          show: true,
          position: "center",
          formatter: ["{b|{b}}", "{d|{d}%}"].join("\n"), // 用\n来换行
          rich: {
            b: {
              fontSize: 22,
              color: "#fff",
              textShadowColor: "#1c90a6",
              textShadowOffsetX: 0,
              textShadowOffsetY: 2,
              textShadowBlur: 5,
            },
            d: {
              // color: color[index],
              align: "left",
            },
          },
        };
      });
    },
    //初始化构建
    init() {
      //构建3d饼状图
      let chartDom = this.$refs["charts"];
      this.statusChart = echarts.init(chartDom);
      // let myChart = this.$echarts.init(document.getElementById("charts"));
      // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
      this.option = getPie3D(this.optionData, 0.85, 160, 25, 15);

      //将配置项设置进去
      this.statusChart.setOption(this.option);
      //鼠标移动上去特效效果
      // this.bindListen(myChart);
      this.option.series.push({
        name: "电梯状态", //自己根据场景修改
        backgroundColor: "transparent",
        type: "pie",
        label: {
          opacity: 1,
          show: true,
          position: "center",
          formatter: ["{d|{d}%}", "{b|{b}}"].join("\n"), // 用\n来换行
          rich: {
            d: {
              fontSize: 22,
              color: "#fff",
              textShadowColor: "#1c90a6",
              textShadowOffsetX: 0,
              textShadowOffsetY: 2,
              textShadowBlur: 5,
            },
            b: {
              color: "#fff",
              align: "center",
            },
          },
        },
        startAngle: -40, // 起始角度，支持范围[0, 360]。
        clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["20%", "50%"],
        // center: ["50%", "50%"],
        data: this.optionData,
        itemStyle: {
          opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
        },
      });
      this.statusChart.setOption(this.option);
    },
    // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
    bindListen(myChart) {
      let that = this;
      let selectedIndex = "";
      let hoveredIndex = "";
      // 监听点击事件，实现选中效果（单选）
      myChart.on("click", function (params) {
        // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
        let isSelected =
          !that.option.series[params.seriesIndex].pieStatus.selected;
        let isHovered =
          that.option.series[params.seriesIndex].pieStatus.hovered;
        let k = that.option.series[params.seriesIndex].pieStatus.k;
        let startRatio =
          that.option.series[params.seriesIndex].pieData.startRatio;
        let endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
        // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
        if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
          that.option.series[selectedIndex].parametricEquation =
            getParametricEquation(
              that.option.series[selectedIndex].pieData.startRatio,
              that.option.series[selectedIndex].pieData.endRatio,
              false,
              false,
              k,
              that.option.series[selectedIndex].pieData.value
            );
          that.option.series[selectedIndex].pieStatus.selected = false;
        }
        // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
        that.option.series[params.seriesIndex].parametricEquation =
          getParametricEquation(
            startRatio,
            endRatio,
            isSelected,
            isHovered,
            k,
            that.option.series[params.seriesIndex].pieData.value
          );
        that.option.series[params.seriesIndex].pieStatus.selected = isSelected;
        // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
        isSelected ? (selectedIndex = params.seriesIndex) : null;
        // 使用更新后的 option，渲染图表
        myChart.setOption(that.option);
      });
      // 监听 mouseover，近似实现高亮（放大）效果
      myChart.on("mouseover", function (params) {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        if (hoveredIndex === params.seriesIndex) {
          return;
          // 否则进行高亮及必要的取消高亮操作
        } else {
          // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
          if (hoveredIndex !== "") {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
            isSelected = that.option.series[hoveredIndex].pieStatus.selected;
            isHovered = false;
            startRatio = that.option.series[hoveredIndex].pieData.startRatio;
            endRatio = that.option.series[hoveredIndex].pieData.endRatio;
            k = that.option.series[hoveredIndex].pieStatus.k;
            // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
            that.option.series[hoveredIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                that.option.series[hoveredIndex].pieData.value
              );
            that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
            // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
            hoveredIndex = "";
          }
          // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
          if (
            params.seriesName !== "mouseoutSeries" &&
            params.seriesName !== "pie2d"
          ) {
            // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
            isSelected =
              that.option.series[params.seriesIndex].pieStatus.selected;
            isHovered = true;
            startRatio =
              that.option.series[params.seriesIndex].pieData.startRatio;
            endRatio = that.option.series[params.seriesIndex].pieData.endRatio;
            k = that.option.series[params.seriesIndex].pieStatus.k;
            // 对当前点击的扇形，执行高亮操作（对 option 更新）
            that.option.series[params.seriesIndex].parametricEquation =
              getParametricEquation(
                startRatio,
                endRatio,
                isSelected,
                isHovered,
                k,
                that.option.series[params.seriesIndex].pieData.value + 5
              );
            that.option.series[params.seriesIndex].pieStatus.hovered =
              isHovered;
            // 记录上次高亮的扇形对应的系列号 seriesIndex
            hoveredIndex = params.seriesIndex;
          }
          // 使用更新后的 option，渲染图表
          myChart.setOption(that.option);
        }
      });
      // 修正取消高亮失败的 bug
      myChart.on("globalout", function () {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = that.option.series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          k = that.option.series[hoveredIndex].pieStatus.k;
          startRatio = that.option.series[hoveredIndex].pieData.startRatio;
          endRatio = that.option.series[hoveredIndex].pieData.endRatio;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          that.option.series[hoveredIndex].parametricEquation =
            that.getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              that.option.series[hoveredIndex].pieData.value
            );
          that.option.series[hoveredIndex].pieStatus.hovered = isHovered;
          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }
        // 使用更新后的 option，渲染图表
        myChart.setOption(that.option);
      });
    },
    // 自适应宽高
    changeSize() {
      this.statusChart.resize();
    },
    // 周期点击回调
    selectPeriodClick(val) {
      this.selectPeriod = val;
    },
  },
};
</script>
<style lang="scss" scoped>
//饼图(外面的容器)
.container {
  width: 90%;
  height: calc(100% - 20px);
  padding-top: 15px;
}
//饼图的大小
.chartsGl {
  height: 100%;
  width: 100%;
  // background: rgba(3, 40, 250, 0.3);
}
//饼图底座（我也想给你们底座图片 可是我不知道咋给）
.buttomCharts {
  // background: center top url("../imgs/u111.png") no-repeat;
  background-size: 100% 100%;
  height: 95px;
  width: 204px;
  margin-top: -141px;
  margin-left: 21%;
}

.title {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background: #20426a;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #01c2ff;
  .left-box {
    margin-left: 20px;
  }
  .right-box {
    margin-right: 20px;
    display: flex;
    .common {
      margin-left: 10px;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
    }
  }
}
.fontsize20 {
  font-size: 20px;
}
.fontsize16 {
  font-size: 16px;
}
.population-distribution {
  overflow-y: auto;
  padding: 10px;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #40a1f7;
  position: relative;
  background: rgba(3, 10, 14, 0.7);
}
</style>

 src/views/ChongqingPublicSecurity/components/SnapFrame.vue

New file
@@ -0,0 +1,69 @@
<template>
  <div class="snapFrame">
    <div class="top-title-box">
      <div class="common-view">人脸抓拍</div>
      <div class="common-view">车辆抓拍</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      dataObj: {
        total: 256,
        disposeOf: 254,
        noDisposeOf: 2,
      },
    };
  },
  mounted() {},
  watch: {},
  methods: {},
};
</script>

<style scoped lang="scss">
.snapFrame {
  width: 100%;
  height: calc(100% - 40px);
  background: rgba(3, 10, 14, 0.7);
  border: 1px solid #194871;
  margin-top: 50px;
  position: relative;
  .top-title-box {
    height: 40px;
    width: calc(100% - 40px);
    position: absolute;
    top: -20px;
    left: 40px;
    display: flex;
    .common-view {
      width: 40%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      margin-right: 45px;
      border: 1px solid #0e9cff;
      background: linear-gradient(to top, #00344b, #001d2f 60%);
      color: #01c2ff;
      font-size: 22px;
    }
  }
}
.commonColor {
  color: #fff;
}
.totalColor {
  color: #f0a205;
}
.carTotalfColor {
  color: #1dd4ff;
}
.commonVlueColor {
  color: #01c2ff;
}
</style>

 src/views/ChongqingPublicSecurity/components/TimeWeather.vue

New file
@@ -0,0 +1,144 @@
<template>
  <div class="time-weather">
    <div class="weather">
      <div class="left">5℃</div>
      <div class="icon-view">
        <i class="el-icon-sunny"></i>
      </div>
      <div class="text-view">
        <div>晴转多云</div>
        <div>Beijing</div>
      </div>
    </div>
    <div class="divider-view">
      <el-divider direction="vertical"></el-divider>
    </div>
    <div class="timer">
      <div>{{ nowTime }}</div>
    </div>
    <div class="date">
      <div>{{ nowWeek }}</div>
      <div>{{ nowDate }}</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    totalObject: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      nowTime: "", // 时间
      nowDate: "", // 日期
      nowWeek: "", // 星期
      timer: null,
    };
  },
  mounted() {
    this.getNowTime();
  },
  watch: {},
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    // 获取当前日期时间
    getNowTime() {
      let speed = 1000;
      let that = this;
      let theNowTime = function () {
        that.timeNumber();
      };
      this.timer = setInterval(theNowTime, speed);
    },
    timeNumber() {
      let today = new Date();
      this.nowDate =
        today.getFullYear() +
        "-" +
        this.twoDigits(today.getMonth() + 1) +
        "-" +
        this.twoDigits(today.getDate());
      this.nowTime =
        this.twoDigits(today.getHours()) +
        ":" +
        this.twoDigits(today.getMinutes()) +
        ":" +
        this.twoDigits(today.getSeconds());
      let week = new Date().getDay();
      let weeks = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
      ];

      this.nowWeek = weeks[week];
    },
    twoDigits(val) {
      if (val < 10) return "0" + val;
      return val;
    },
  },
};
</script>

<style scoped lang="scss">
.time-weather {
  width: 100%;
  height: 100%;
  color: #1dd4ff;
  background: rgba(3, 10, 14, 0.9);
  display: flex;
  align-items: center;
  .weather {
    width: 33%;
    display: flex;
    align-items: center;
    .left {
      font-size: 28px;
    }
    .icon-view {
      font-size: 26px;
      margin-left: 6px;
    }
    .text-view {
      font-size: 12px;
      margin-left: 6px;
      color: #127c97;
    }
  }
  .timer {
    width: 33%;
    font-size: 28px;
    display: flex;
    justify-content: center;
  }
  .date {
    font-size: 12px;
    margin-left: 6px;
    color: #127c97;
  }
}
.divider-view {
  height: 100%;
  display: flex;
  align-items: center;
  .el-divider {
    background-color: #1dd4ff;
    height: calc(100% - 20px);
  }
}
</style>

 src/views/ChongqingPublicSecurity/components/TopRightBlock.vue

New file
@@ -0,0 +1,100 @@
<template>
  <div class="topRightBlock">
    <div class="menu-list">
      <div
        v-for="item in menuList"
        class="menu-label"
        :class="selectMenu === item.id ? 'colorSel' : 'colorWhite'"
        @click="selectPeriodClick(item.id)"
      >
        {{ item.value }}
      </div>
    </div>
    <div class="info-view">
      <el-badge is-dot class="item">
        <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
      </el-badge>
      <div class="info-title">高新分局</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      menuList: [
        { id: 1, value: "全景数据" },
        { id: 2, value: "布控业务" },
        { id: 3, value: "治安业务" },
        { id: 4, value: "侦查业务" },
        { id: 5, value: "设备管理" },
      ],
      selectMenu: 1,
      size: "medium",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
    };
  },
  mounted() {},
  watch: {},
  methods: {
    selectPeriodClick(val) {
      this.selectMenu = val;
    },
  },
};
</script>

<style scoped lang="scss">
$marginTop: 15px;
.topRightBlock {
  width: 100%;
  height: 100%;
  color: #cdcfd0;
  background: rgba(3, 10, 14, 0.9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  .menu-list {
    margin-top: $marginTop;
    display: flex;
    align-items: center;
    font-size: 18px;
    .menu-label {
      margin-left: 55px;
      cursor: pointer;
    }
  }
  .info-view {
    margin-top: $marginTop;
    display: flex;
    align-items: center;
    .info-title {
      margin-left: 20px;
      font-size: 18px;
    }
  }
}
.colorSel {
  color: #64c9e3;
  font-weight: 550;
}
.colorWhite {
  color: #cdcfd0;
}

::v-deep {
  .el-badge__content,
  .el-progress {
    background-color: #4caf50;
    border: 2px solid #1f2935;
  }
  .el-badge__content.is-dot {
    height: 10px;
    width: 10px;
  }
}
</style>

 src/views/ChongqingPublicSecurity/components/chart.js

New file
@@ -0,0 +1,320 @@
/**
 * 绘制3d图 配置构建 pieData 饼图数据 internalDiameterRatio:透明的空心占比
 * @param pieData 总数据
 * @param internalDiameterRatio:透明的空心占比
 * @param distance 视角到主体的距离
 * @param alpha 旋转角度
 * @param pieHeight 立体的高度
 * @param opacity 饼或者环的透明度
 */
const getPie3D = (
  pieData,
  internalDiameterRatio,
  distance,
  alpha,
  pieHeight,
  opacity = 1
) => {
  let that = this;
  let series = [];
  let sumValue = 0;
  let startValue = 0;
  let endValue = 0;
  let legendData = [];
  let legendBfb = [];
  let k = 1 - internalDiameterRatio;

  pieData.sort((a, b) => {
    return b.value - a.value;
  });
  // 为每一个饼图数据，生成一个 series-surface(参数曲面) 配置
  for (let i = 0; i < pieData.length; i++) {
    sumValue += pieData[i].value;
    let seriesItem = {
      //系统名称
      name:
        typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
      type: "surface",
      //是否为参数曲面（是）
      parametric: true,
      //曲面图网格线（否）上面一根一根的
      wireframe: {
        show: false,
      },
      pieData: pieData[i],
      pieStatus: {
        selected: false,
        hovered: false,
        k: k,
      },
      //设置饼图在容器中的位置(目前没发现啥用)
      center: ["80%", "100%"],
      radius: "60%",
      // label: label,
    };

    //曲面的颜色、不透明度等样式。
    if (typeof pieData[i].itemStyle !== "undefined") {
      const itemStyle = {};
      itemStyle.color =
        typeof pieData[i].itemStyle.color !== "undefined"
          ? pieData[i].itemStyle.color
          : opacity;
      itemStyle.opacity =
        typeof pieData[i].itemStyle.opacity !== "undefined"
          ? pieData[i].itemStyle.opacity
          : opacity;
      seriesItem.itemStyle = itemStyle;
    }
    series.push(seriesItem);
  }

  // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
  // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
  legendData = [];
  legendBfb = [];
  for (let i = 0; i < series.length; i++) {
    endValue = startValue + series[i].pieData.value;
    series[i].pieData.startRatio = startValue / sumValue;
    series[i].pieData.endRatio = endValue / sumValue;
    series[i].parametricEquation = getParametricEquation(
      series[i].pieData.startRatio,
      series[i].pieData.endRatio,
      false,
      false,
      k,
      series[i].pieData.value
    );
    startValue = endValue;
    let bfb = fomatFloat(series[i].pieData.value / sumValue, 4);
    legendData.push({
      name: series[i].name,
      value: bfb,
    });
    legendBfb.push({
      name: series[i].name,
      value: bfb,
    });
  }
  //(第二个参数可以设置你这个环形的高低程度)
  let boxHeight = getHeight3D(series, pieHeight); //通过传参设定3d饼/环的高度
  // 准备待返回的配置项，把准备好的 legendData、series 传入。
  let option = {
    //图例组件
    legend: {
      // data: legendData,
      //图例列表的布局朝向。
      orient: "horizontal",
      center: 0,
      bottom: 0,
      //图例文字每项之间的间隔
      itemGap: 15,
      textStyle: {
        color: "#A1E2FF",
        fontSize: "12px",
      },
      itemHeight: 10, // 修改icon图形大小
      itemWidth: 10, // 修改icon图形大小
      show: true,
      // icon: "circle",
      //格式化图例文本（我是数值什么显示什么）
      // formatter: function (name) {
      //   var target;
      //   for (var i = 0, l = pieData.length; i < l; i++) {
      //     if (pieData[i].name == name) {
      //       target = pieData[i].value;
      //     }
      //   }
      //   return `${name}: ${target}`;
      // },
      // // 这个可以显示百分比那种（可以根据你想要的来配置）
      formatter: function (param) {
        let item = legendBfb.filter((item) => item.name == param)[0];
        // let bfs = that.fomatFloat(item.value * 100, 1) + "%";
        console.log(item.name);
        // return `${item.name} :${bfs}`;
        return `${item.name}`;
      },
    },
    labelLine: {
      show: true,
      lineStyle: {
        color: "#7BC0CB",
      },
    },
    label: {
      show: true,
      position: "outside",
      formatter: "{b} \n{c} {d}%",
    },
    //移动上去提示的文本内容(我没来得及改 你们可以根据需求改)
    tooltip: {
      backgroundColor: "#033b77",
      borderColor: "#21f2c4",
      textStyle: {
        color: "#fff",
        fontSize: 13,
      },
      formatter: (params) => {
        if (
          params.seriesName !== "mouseoutSeries" &&
          params.seriesName !== "pie2d"
        ) {
          let bfb = (
            (option.series[params.seriesIndex].pieData.endRatio -
              option.series[params.seriesIndex].pieData.startRatio) *
            100
          ).toFixed(1);
          return (
            `${params.seriesName}<br/>` +
            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
            `${bfb}`
          );
        }
      },
    },
    //这个可以变形
    xAxis3D: {
      min: -1,
      max: 1,
    },
    yAxis3D: {
      min: -1,
      max: 1,
    },
    zAxis3D: {
      min: -1,
      max: 1,
    },
    //此处是修改样式的重点
    grid3D: {
      show: false,
      boxHeight: boxHeight, //圆环的高度
      //这是饼图的位置
      // top: "-20.5%",
      // left: "-4%",
      viewControl: {
        //3d效果可以放大、旋转等，请自己去查看官方配置
        alpha, //角度(这个很重要 调节角度的)
        distance, //调整视角到主体的距离，类似调整zoom(这是整体大小)
        rotateSensitivity: 0, //设置为0无法旋转
        zoomSensitivity: 0, //设置为0无法缩放
        panSensitivity: 0, //设置为0无法平移
        autoRotate: false, //自动旋转
      },
    },
    series: series,
  };
  return option;
};

/**
 * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
 */
const getParametricEquation = (
  startRatio,
  endRatio,
  isSelected,
  isHovered,
  k,
  h
) => {
  // 计算
  const midRatio = (startRatio + endRatio) / 2;
  const startRadian = startRatio * Math.PI * 2;
  const endRadian = endRatio * Math.PI * 2;
  const midRadian = midRatio * Math.PI * 2;
  // 如果只有一个扇形，则不实现选中效果。
  if (startRatio === 0 && endRatio === 1) {
    isSelected = false;
  }
  // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
  k = typeof k !== "undefined" ? k : 1 / 3;
  // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
  const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
  const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
  // 计算高亮效果的放大比例（未高亮，则比例为 1）
  const hoverRate = isHovered ? 1.05 : 1;
  // 返回曲面参数方程
  return {
    u: {
      min: -Math.PI,
      max: Math.PI * 3,
      step: Math.PI / 32,
    },
    v: {
      min: 0,
      max: Math.PI * 2,
      step: Math.PI / 20,
    },
    x: function (u, v) {
      if (u < startRadian) {
        return (
          offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      if (u > endRadian) {
        return (
          offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    },
    y: function (u, v) {
      if (u < startRadian) {
        return (
          offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      if (u > endRadian) {
        return (
          offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
        );
      }
      return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    },
    z: function (u, v) {
      if (u < -Math.PI * 0.5) {
        return Math.sin(u);
      }
      if (u > Math.PI * 2.5) {
        return Math.sin(u) * h * 0.1;
      }
      return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
    },
  };
};

/**
 * 获取3d饼图的最高扇区的高度
 */
const getHeight3D = (series, height) => {
  series.sort((a, b) => {
    return b.pieData.value - a.pieData.value;
  });
  return (height * 25) / series[0].pieData.value;
};

/**
 * 自定义计算的方法: 格式化浮点数
 */
const fomatFloat = (num, n) => {
  let f = parseFloat(num);
  if (isNaN(f)) {
    return false;
  }
  f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂
  let s = f.toString();
  let rs = s.indexOf(".");
  // 判定如果是整数，增加小数点再补0
  if (rs < 0) {
    rs = s.length;
    s += ".";
  }
  while (s.length <= rs + n) {
    s += "0";
  }
  return s;
};

export { getPie3D, getParametricEquation };

 src/views/ChongqingPublicSecurity/index.vue

New file
@@ -0,0 +1,84 @@
<template>
  <BackgroundLayout>
    <template #topBlock1>
      <TimeWeather />
    </template>
    <template #topBlock2>
      <TopRightBlock />
    </template>
    <template #leftBlock1>
      <NuclearMiningCount />
    </template>
    <template #leftBlock2>
      <KeyPersonnelManage />
    </template>
    <template #rightBlock1>
      <PopulationDistributionChart />
    </template>
    <template #rightBlock2>
      <SnapFrame />
    </template>
  </BackgroundLayout>
</template>

<script>
import BackgroundLayout from "@/components/ChongqingPublicSecurity/BackgroundLayout";
import TimeWeather from "@/views/ChongqingPublicSecurity/components/TimeWeather";
import TopRightBlock from "@/views/ChongqingPublicSecurity/components/TopRightBlock";
import NuclearMiningCount from "@/views/ChongqingPublicSecurity/components/NuclearMiningCount";
import KeyPersonnelManage from "@/views/ChongqingPublicSecurity/components/KeyPersonnelManage";
import PopulationDistributionChart from "@/views/ChongqingPublicSecurity/components/PopulationDistributionChart";
import SnapFrame from "@/views/ChongqingPublicSecurity/components/SnapFrame";
export default {
  components: {
    BackgroundLayout,
    TimeWeather,
    TopRightBlock,
    NuclearMiningCount,
    KeyPersonnelManage,
    PopulationDistributionChart,
    SnapFrame,
  },
  props: {},
  data() {
    return {};
  },
  mounted() {
    this.getDashboard();
  },
  watch: {},
  methods: {
    async getDashboard() {
      // await getDashboard()
      //   .then((res) => {
      //     console.log(res);
      //     // 左上数值统计数据
      //     this.setLeftBlock1(res.data);
      //     // 机器开机率数据
      //     this.setleftBlock2(res.data);
      //     //  左中数据统计值
      //     this.setLeftBlock3(res.data);
      //     // 订单完成比率
      //     this.setLeftBlock4(res.data);
      //     // 工单进度统计
      //     this.setLeftBlock5(res.data);
      //     // 人员生效效率比 人员技能
      //     this.setLeftBlock6(res.data);
      //     // 设备负荷对比
      //     this.setRightBlock1(res.data);
      //     // 物料需求统计
      //     this.setRightBlock2(res.data);
      //     // 车间正品率
      //     this.setRightBlock3(res.data);
      //   })
      //   .finally(() => {
      //     setTimeout(() => {
      //       this.getDashboard();
      //     }, 300000);
      //   });
    },
  },
};
</script>

<style scoped lang="scss"></style>