静态页面

董国庆

2026-01-19 cbba6f8649c98d39004cb45ee1d94f931c7d9c72

 screen/src/view/projectHome/index.vue

@@ -85,18 +85,14 @@
          <template #title> 设备信息 </template>
          <template #content>
            <div class="equipment-info">
              <img
                src="../../assets//img/project/chartBg.png"
                class="chart-bg"
                alt=""
              />
              <img src="../../assets//img/project/chartBg.png" class="chart-bg" alt="" />
              <div class="pie-canvas" ref="pieChart"></div>
              <div class="legend">
                <div class="legend-item" v-for="(it, idx) in legendData" :key="idx">
                  <div class="dot" :style="{ backgroundColor: it.itemStyle.color }"></div>
                  <div class="legend-info">
                    <div class="legend-name" :title="it.name">{{it.name}}</div>
                    <div class="legend-number">{{it.value}}</div>
                    <div class="legend-name" :title="it.name">{{ it.name }}</div>
                    <div class="legend-number">{{ it.value }}</div>
                  </div>
                </div>
              </div>
@@ -200,15 +196,8 @@
              <div class="people-card">
                <div class="people-item">
                  <div class="people-chart">
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -218,15 +207,8 @@
                </div>
                <div class="people-item">
                  <div class="people-chart">
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -236,15 +218,8 @@
                </div>
                <div class="people-item">
                  <div class="people-chart">
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -256,15 +231,8 @@
              <div class="people-card2">
                <div class="people-item mr--67">
                  <div class="people-chart">
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -274,15 +242,8 @@
                </div>
                <div class="people-item">
                  <div class="people-chart">
                    <el-progress
                      width="74"
                      type="circle"
                      :show-text="false"
                      :percentage="25"
                      define-back-color="#000"
                      color="#32C5FF"
                      :stroke-linecap="square"
                    ></el-progress>
                    <el-progress width="74" type="circle" :show-text="false" :percentage="25" define-back-color="#000"
                      color="#32C5FF" :stroke-linecap="square"></el-progress>
                    <div class="progress-card">
                      <div class="progress-num">25.4</div>
                      <div class="progress-unit">%</div>
@@ -315,21 +276,14 @@
              <div class="risk-body">
                <div class="risk-item" v-for="(item, index) in riskSourceList" :key="index">
                  <div class="label card1">{{ index + 1 }}</div>
                  <div
                    class="label card2"
                    :class="{
                      'merged-cell': item.showRiskScale && item.rowspan > 1,
                      'hidden-cell': !item.showRiskScale
                    }"
                  >
                    <div
                      v-if="item.showRiskScale"
                      class="merged-content"
                      :style="{
                        height: `${item.rowspan * 36}px`,
                        lineHeight: `${item.rowspan * 36}px`
                      }"
                    >
                  <div class="label card2" :class="{
                    'merged-cell': item.showRiskScale && item.rowspan > 1,
                    'hidden-cell': !item.showRiskScale
                  }">
                    <div v-if="item.showRiskScale" class="merged-content" :style="{
                      height: `${item.rowspan * 36}px`,
                      lineHeight: `${item.rowspan * 36}px`
                    }">
                      {{ item.riskScale }}
                    </div>
                  </div>
@@ -344,7 +298,7 @@
          </template>
        </TitleBox>
      </div>
      <div class="mt--30">
      <div class="mt--30" @click="toRiskTrend()">
        <TitleBox>
          <template #title>项目风险趋势 </template>
          <template #right>
@@ -465,13 +419,13 @@
      immediate: true,
    },
  },
  created() {},
  created() { },
  mounted() {
    this.setMapload()
    this.initPie3D()
    this.initRiskChart()
  },
  beforeDestroy() {},
  beforeDestroy() { },
  methods: {
    toPersonnelOnDuty() {
      this.$router.push({
@@ -1075,6 +1029,9 @@
        ]
      }
      riskChart.setOption(option)
    },
    toRiskTrend() {
      this.$router.push({ path: '/subentry', query: { projectId: '212222', projectName: '新项目' } })
    }
  }
}
@@ -1459,12 +1416,10 @@
          font-size: 24px;
          // color: linear-gradient(90deg, #66FFFF 0%, #F7B500 100%, #F7B500 100%);
          line-height: 28px;
          background: linear-gradient(
            90deg,
            #66ffff 0%,
            #f7b500 100%,
            #f7b500 100%
          );
          background: linear-gradient(90deg,
              #66ffff 0%,
              #f7b500 100%,
              #f7b500 100%);
          /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
          -webkit-background-clip: text;
          /*将设置的背景颜色限制在文字中*/
@@ -1514,23 +1469,18 @@
    width: 42px;
    height: 150px;
    box-sizing: border-box;
    background: linear-gradient(
      90deg,
      #040622 0%,
      #0952cf 22.29%,
      #155edf 53.43%,
      #0952cf 81.31%,
      #011845 100%
    );
    background: linear-gradient(90deg,
        #040622 0%,
        #0952cf 22.29%,
        #155edf 53.43%,
        #0952cf 81.31%,
        #011845 100%);
    border-radius: 96px;
    border: 2px solid;
    border-image: linear-gradient(
        90deg,
    border-image: linear-gradient(90deg,
        rgba(159, 255, 255, 0),
        rgba(133, 255, 255, 1),
        rgba(102, 255, 255, 0)
      )
      3 1;
        rgba(102, 255, 255, 0)) 3 1;
    padding: 24px 12px;
    font-weight: bold;
    font-size: 17px;