Merge branch 'dev-xiaomi' into shenzhen-dev

2022-09-02 15:22:51 +08:00 · 2022-09-02 15:22:51 +08:00 · 4154bb74ce
commit 4154bb74ce
parent 37d97b846f d354583edd
14 changed files with 1629 additions and 35 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -8,6 +8,7 @@
    "build": "vue-cli-service build"
  },
  "dependencies": {
+    "a-vue-steps": "^1.0.0",
    "axios": "^0.19.2",
    "better-scroll": "^2.4.1",
    "core-js": "^3.6.5",
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@ -24,6 +24,9 @@ import { autoLogin } from '@/assets/js/api/autoLogin-xingXuan'
 import { decode, encode } from 'js-base64'
 import { loginApi, companyLoginApi, projectLoginApi } from '@/assets/js/api/loginSign'

+import VueSteps from 'a-vue-steps'
+import 'a-vue-steps/dist/vue-steps.min.css'
+
 // 全局组件挂载
 Vue.component('Pagination', Pagination)

@ -211,6 +214,8 @@ Vue.use(vuescroll, {
    }
  }
 });
+Vue.use(VueSteps)
+

 //  加载缩略图
 Vue.prototype.downloadImgMin = function (row) {
--- a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-barometricPressure.png
+++ b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-barometricPressure.png
--- a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-humidity.png
+++ b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-humidity.png
--- a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-temperature.png
+++ b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-temperature.png
--- a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-windDirection.png
+++ b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-windDirection.png
--- a/src/views/projectAdmin/zjsj/assets/images/command-center/icon-windSpeed.png
+++ b/src/views/projectAdmin/zjsj/assets/images/command-center/icon-windSpeed.png
--- a/src/views/projectAdmin/zjsj/command/index.vue
+++ b/src/views/projectAdmin/zjsj/command/index.vue
@ -98,11 +98,15 @@ export default {
  }
  .rightBox {
    width: 25%;
+    height: 100%;
    .rightOne {
-      width: 100%;
-      height: 30%;
+      height: 28%;
    }
-    .rightTwo,
+
+    .rightTwo {
+       height: 22%;
+    }
+
    .rightThree,
    .rightFour {
      height: 25%;
--- a/src/views/projectAdmin/zjsj/command/leftThree.vue
+++ b/src/views/projectAdmin/zjsj/command/leftThree.vue
@ -1,11 +1,9 @@
 <template>
-  <div>
  <Card title="进度管理">
-      <div class="contentBox">
-        123
+    <div class="container">
+      <VueSteps :items="items" :activeIndex="index" />
    </div>
  </Card>
-  </div>
 </template>

 <script>
@ -13,9 +11,48 @@ import Card from '../components/Card'
 export default {
  components: { Card },
  data() {
-    return {}
+    return {
+      items: [
+        {
+          num: '一',
+          text: '测试阶段1'
+        },
+        {
+          num: '二',
+          text: '测试阶段2'
+        },
+        {
+          num: '三',
+          text: '测试阶段3'
+        },
+        {
+          num: '三',
+          text: '测试阶段3'
+        },
+        {
+          num: '三',
+          text: '测试阶段3'
+        },
+      ],
+      index: 0
+    }
  }
 }
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+// ::v-deep .steps-item {
+//   width: 150px;
+//   height: 34px;
+//   padding-top: 15px;
+//   position: relative;
+// }
+</style>
--- a/src/views/projectAdmin/zjsj/command/rightFour.vue
+++ b/src/views/projectAdmin/zjsj/command/rightFour.vue
@ -1,11 +1,22 @@
 <template>
-  <div>
  <Card title="亮点展示">
-      <div class="contentBox">
-        123
+    <div class="container">
+      <div class="top">
+        <div
+          :class="['top-item', { active: activeIndex == index }]"
+          v-for="(item, index) in headerList"
+          :key="index"
+          @click="handelItemClick(index)"
+        >{{ item }}</div>
+      </div>
+      <div class="bottom list">
+        <div class="list-item" v-for="(item, index) in list" :key="index">
+          <span class="label">{{ item.name }}</span>
+          <span class="value">{{ item.content }}</span>
+        </div>
+      </div>
    </div>
  </Card>
-  </div>
 </template>

 <script>
@ -13,9 +24,120 @@ import Card from '../components/Card'
 export default {
  components: { Card },
  data() {
-    return {}
+    return {
+      // 头部行
+      headerList: ['质量', '安全', '技术'],
+      // 激活的item
+      activeIndex: 0,
+      // 列表
+      list: [
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '测试测试测试测试' },
+        { name: '项目位置', content: '11111111111测试测试测试测试' }
+      ]
+    }
+  },
+  methods: {
+    /** item单击事件 */
+    handelItemClick(index) {
+      this.activeIndex = index
+    }
  }
 }
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  padding-top: 10px;
+  width: 100%;
+  height: 100%;
+
+  .top {
+    display: flex;
+
+    margin-bottom: 10px;
+    width: 100%;
+    height: 27px;
+
+    .top-item {
+      display: grid;
+      place-items: center;
+
+      width: 64px;
+      height: 100%;
+      margin-right: 5px;
+      background-image: url('../assets/images/command-center/block4.png');
+      cursor: pointer;
+      &.active {
+        background-image: url('../assets/images/command-center/block4-active.png');
+      }
+    }
+  }
+
+  .bottom.list {
+    width: 100%;
+    height: calc(100% - 27px);
+   
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #fff;
+    overflow-y: scroll;
+
+    .list-item {
+      display: flex;
+      box-sizing: border-box;
+      border-left: 4px solid #66d3d8;
+      margin-bottom: 5px;
+      padding: 6px 0;
+      width: 100%;
+      background-image: linear-gradient(to right, #3b7589, #212c3e);
+      font-size: 12px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 0.3s;
+      white-space: nowrap;
+
+      &:hover {
+        padding: 20px 0;
+      }
+
+      &:hover .value {
+        color: #c2805f;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .label,
+      .value {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .label {
+        box-sizing: border-box;
+        width: 40%;
+        padding-left: 20px;
+      }
+
+      .value {
+        width: 60%;
+      }
+    }
+  }
+}
+</style>
--- a/src/views/projectAdmin/zjsj/command/rightThree.vue
+++ b/src/views/projectAdmin/zjsj/command/rightThree.vue
@ -1,11 +1,42 @@
 <template>
-  <div>
  <Card title="环境监测">
-      <div class="contentBox">
-        123
+    <div class="container">
+      <div class="left list">
+        <div class="list-item" v-for="(item, key) in leftList" :key="key">
+          <div
+            class="label"
+            :style="{ backgroundColor: item.labelColor, color: item.color, transform: 'rotate(-90deg) translateX(-16px) translateY(-18px)' }"
+          >{{ item.label }}</div>
+          <div class="value">
+            <div class="number">{{ item.value }}</div>
+            <span class="unit">{{ item.unit }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="right list">
+        <el-row class="list-item" type="flex" justify="space-between" align="middle" v-for="(item, key) in rightList" :key="key">
+          <el-col :span="6">
+            <img style="width: 16px; height: auto" :src="item.image" />
+          </el-col>
+          <el-col :span="8">
+            <div class="label">{{ item.label }}</div>
+          </el-col>
+          <el-col :span="10">
+            <el-row
+              class="value"
+              type="flex"
+              justify="center"
+              align="middle"
+              :style="{ color: item.color, backgroundImage: `url('${item.valueBackgroundImage}')` }"
+            >
+              <span class="number">{{ item.value }}</span>
+              <span class="unit">{{ item.unit }}</span>
+            </el-row>
+          </el-col>
+        </el-row>
+      </div>
    </div>
  </Card>
-  </div>
 </template>

 <script>
@ -13,9 +44,118 @@ import Card from '../components/Card'
 export default {
  components: { Card },
  data() {
-    return {}
+    return {
+      // 左边的列表
+      leftList: {
+        'PM2.5': { label: 'PM2.5', value: 68, unit: 'μg/m³', labelColor: '#434337', color: '#ffc300' },
+        PM10: { label: 'PM10', value: 36, unit: 'μg/m³', labelColor: '#3f353d', color: '#f46927' },
+        噪音: { label: '噪音', value: 13, unit: '%dB', labelColor: '#434c5d', color: '#c6c9ce' }
+      },
+      // 右边的列表
+      rightList: {
+        temperature: { label: '温度', value: 22, unit: '℃', image: require('../assets/images/command-center/icon-temperature.png') },
+        humidity: { label: '湿度', value: 16, unit: 'RH', image: require('../assets/images/command-center/icon-humidity.png') },
+        windSpeed: {
+          label: '风速',
+          value: 60,
+          unit: 'km/h',
+          image: require('../assets/images/command-center/icon-windSpeed.png'),
+          color: '#f66629',
+          valueBackgroundImage: require('../assets/images/command-center/block3.png')
+        },
+        windDirection: { label: '风向', value: '东南', unit: '风', image: require('../assets/images/command-center/icon-windDirection.png') },
+        barometricPressure: { label: '大气压', value: 101, unit: 'KPa', image: require('../assets/images/command-center/icon-barometricPressure.png') }
      }
+    }
+  },
+  methods: {}
 }
 </script>

-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.container {
+  box-sizing: border-box;
+
+  display: flex;
+
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+
+  .left,
+  .right {
+    width: 50%;
+    height: 100%;
+  }
+
+  .left.list {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .list-item {
+      display: flex;
+      justify-content: space-between;
+
+      height: calc(100% / 3.5);
+
+      .label {
+        box-sizing: border-box;
+
+        display: grid;
+        place-items: center;
+        padding: 0 5px;
+        width: 55px;
+        height: 20px;
+        box-sizing: border-box;
+        letter-spacing: 1px;
+      }
+
+      .value {
+        box-sizing: border-box;
+        padding-right: 20px;
+
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .number {
+          display: grid;
+          place-items: center;
+
+          width: 77px;
+          height: 44px;
+          font-size: 30px;
+          background-image: url('../assets/images/command-center/block2.png');
+        }
+
+        .unit {
+          font-size: 18px;
+          color: #b2b4be;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+
+  .right.list {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .el-row.value {
+      width: 65px;
+      height: 21px;
+      .number {
+        margin-right: 5px;
+      }
+    }
+  }
+}
+
+::v-deep .el-col {
+  display: grid;
+  place-items: center;
+}
+</style>
--- a/src/views/projectAdmin/zjsj/command/rightTwo.vue
+++ b/src/views/projectAdmin/zjsj/command/rightTwo.vue
@ -160,7 +160,7 @@ export default {
    width: 50%;
    .top {
      display: flex;
-      padding: 10px 0;
+      padding: 5px 0;
      color: #fff;
      font-size: 12px;
      white-space: nowrap;
@ -185,7 +185,7 @@ export default {
        box-sizing: border-box;
        border-left: 4px solid #66d3d8;
        margin-bottom: 5px;
-        padding: 10px 0;
+        padding: 6px 0;
        width: 100%;
        background-image: linear-gradient(to right, #3b7589, #212c3e);
        font-size: 12px;
--- a/yarn.lock
+++ b/yarn.lock
@ -1348,6 +1348,15 @@
  "resolved" "https://registry.npmmirror.com/@xtuc/long/-/long-4.2.2.tgz"
  "version" "4.2.2"

+"a-vue-steps@^1.0.0":
+  "integrity" "sha512-NJYNEBAT8TBzTvE2P/FT2fSlyZ4RUYDYB7cx5gkGlwA6w8x7D92HvvOHzsvgIWywbQHuU+PMxIhZsrbfd0vHnQ=="
+  "resolved" "https://registry.npmjs.org/a-vue-steps/-/a-vue-steps-1.0.0.tgz"
+  "version" "1.0.0"
+  dependencies:
+    "css-loader" "^0.28.10"
+    "vue" "^2.5.2"
+    "vue-style-loader" "^3.1.2"
+
 "abbrev@1":
  "integrity" "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
  "resolved" "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz"
@ -2902,7 +2911,7 @@

 "chalk@^1.1.3":
  "integrity" "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A=="
-  "resolved" "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz"
+  "resolved" "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz"
  "version" "1.1.3"
  dependencies:
    "ansi-styles" "^2.2.1"
@ -3648,6 +3657,26 @@
    "schema-utils" "^2.7.0"
    "semver" "^6.3.0"

+"css-loader@^0.28.10":
+  "integrity" "sha512-wovHgjAx8ZIMGSL8pTys7edA1ClmzxHeY6n/d97gg5odgsxEgKjULPR0viqyC+FWMCL9sfqoC/QCUBo62tLvPg=="
+  "resolved" "https://registry.npmjs.org/css-loader/-/css-loader-0.28.11.tgz"
+  "version" "0.28.11"
+  dependencies:
+    "babel-code-frame" "^6.26.0"
+    "css-selector-tokenizer" "^0.7.0"
+    "cssnano" "^3.10.0"
+    "icss-utils" "^2.1.0"
+    "loader-utils" "^1.0.2"
+    "lodash.camelcase" "^4.3.0"
+    "object-assign" "^4.1.1"
+    "postcss" "^5.0.6"
+    "postcss-modules-extract-imports" "^1.2.0"
+    "postcss-modules-local-by-default" "^1.2.0"
+    "postcss-modules-scope" "^1.1.0"
+    "postcss-modules-values" "^1.3.0"
+    "postcss-value-parser" "^3.3.0"
+    "source-list-map" "^2.0.0"
+
 "css-loader@^0.28.7":
  "integrity" "sha512-wovHgjAx8ZIMGSL8pTys7edA1ClmzxHeY6n/d97gg5odgsxEgKjULPR0viqyC+FWMCL9sfqoC/QCUBo62tLvPg=="
  "resolved" "https://registry.npmmirror.com/css-loader/-/css-loader-0.28.11.tgz"
@ -10307,12 +10336,12 @@

 "supports-color@^2.0.0":
  "integrity" "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
-  "resolved" "https://registry.npmmirror.com/supports-color/-/supports-color-2.0.0.tgz"
+  "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
  "version" "2.0.0"

 "supports-color@^3.2.3":
  "integrity" "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A=="
-  "resolved" "https://registry.npmmirror.com/supports-color/-/supports-color-3.2.3.tgz"
+  "resolved" "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz"
  "version" "3.2.3"
  dependencies:
    "has-flag" "^1.0.0"
@ -11080,6 +11109,14 @@
    "hash-sum" "^1.0.2"
    "loader-utils" "^1.0.2"

+"vue-style-loader@^3.1.2":
+  "integrity" "sha512-ICtVdK/p+qXWpdSs2alWtsXt9YnDoYjQe0w5616j9+/EhjoxZkbun34uWgsMFnC1MhrMMwaWiImz3K2jK1Yp2Q=="
+  "resolved" "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-3.1.2.tgz"
+  "version" "3.1.2"
+  dependencies:
+    "hash-sum" "^1.0.2"
+    "loader-utils" "^1.0.2"
+
 "vue-style-loader@^4.1.0", "vue-style-loader@^4.1.2":
  "integrity" "sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ=="
  "version" "4.1.2"
@ -11099,7 +11136,7 @@
  "resolved" "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz"
  "version" "1.9.1"

-"vue@^2.0.0", "vue@^2.4.4", "vue@^2.5.17", "vue@^2.6.10", "vue@^2.6.11", "vue@>=2.2":
+"vue@^2.0.0", "vue@^2.4.4", "vue@^2.5.17", "vue@^2.5.2", "vue@^2.6.10", "vue@^2.6.11", "vue@>=2.2":
  "integrity" "sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ=="
  "version" "2.6.11"