工具太

src/store/modules/app.ts

@@ -7,7 +7,7 @@ const state = {
 	},
 	userInfo: <any>{},
 	userRoleList: [],
-	zby: true,
+	zby: false,
 	timestamp: new Date().getTime()
 }
 

src/views/staging/common/base-block.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="base-block">
+    <div class="base-block-title">
+      <img class="triangle" src="./title-triangle.png"/>
+      <div class="title">{{title}}</div>
+      <div class="title-slot">
+        <slot name="title"/>
+      </div>
+    </div>
+    <div class="base-block-content">
+      <slot/>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    title: {}
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    return {
+      ...toRefs(state)
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+  .base-block {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .base-block-title {
+      height: 48px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      position: relative;
+      .triangle {
+        position: absolute;
+        left: 7px;
+      }
+      &:before, &:after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        left: 0;
+        background-image: url("./title-row.png");
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        width: 100%;
+        height: 3px;
+      }
+      &:before {
+        top: 0;
+      }
+      &:after {
+        bottom: 0;
+      }
+      .title {
+        padding: 0 20px 0 34px;
+        font-size: 18px;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+        color: #FFFFFF;
+      }
+      .title-slot {
+        flex: 1;
+        height: 100%;
+        position: relative;
+        display: flex;
+        align-items: center;
+        &:after {
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 20px;
+          background-color: rgba(0,133,247,0.2);
+        }
+      }
+    }
+  }
+</style>

src/views/staging/common/base.scss

@@ -1,12 +1,20 @@
 .staging-layout {
   display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: 0 24px;
+  box-sizing: border-box;
   .staging-left {
-
+    width: 438px;
+    height: 100%;
   }
   .staging-center {
-
+    width: 925px;
+    margin-bottom: 76px;
   }
   .staging-right {
-
+    width: 438px;
+    height: 100%;
   }
 }

src/views/staging/common/button-switch.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="button-switch">
+    <template v-for="item in options">
+      <div class="button-switch-item" :class="{[`button-switch-item-${type}`]: true, active: item.value === activeV}" @click="$emit('update:activeV', item.value)">
+        {{item.label}}
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    type: {
+      default: 'type1'
+    },
+    padding: {
+      default: '0'
+    },
+    options: {
+      default: () => []
+    },
+    activeV: {
+      default: ''
+    }
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+    })
+    return {
+      ...toRefs(state)
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/staging/index.vue

@@ -43,5 +43,6 @@ export default defineComponent({
 })
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+@import "./common/base";
 </style>

src/views/staging/zbgly/index.vue

@@ -1,5 +1,12 @@
 <template>
-  值班管理员
+  <div class="staging-layout">
+    <div class="staging-left">
+      <CalendarCom class="calendar-main"/>
+      <AnalysisCom class="analysis-main"/>
+    </div>
+    <div class="staging-center">2</div>
+    <div class="staging-right">3</div>
+  </div>
 </template>
 
 <script lang="ts">
@@ -17,10 +24,15 @@ import {
 } from 'vue'
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
+import AnalysisCom from "./left/analysis-com.vue";
+import CalendarCom from "./left/calendar-com.vue";
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    AnalysisCom,
+    CalendarCom
+  },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
@@ -35,4 +47,8 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+.charts {
+  width: 100%;
+  height: 400px;
+}
 </style>

src/views/staging/zbgly/left/analysis-com.vue

@@ -0,0 +1,42 @@
+<template>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import BaseBlockCom from '../../common/base-block.vue'
+import ButtonSwitchCom from '../../common/button-switch.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    BaseBlockCom,
+    ButtonSwitchCom
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    return {
+      ...toRefs(state)
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/staging/zbgly/left/calendar-com.vue

@@ -0,0 +1,45 @@
+<template>
+  <BaseBlockCom title="日历提醒">
+
+  </BaseBlockCom>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import BaseBlockCom from '../../common/base-block.vue'
+import ButtonSwitchCom from '../../common/button-switch.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    BaseBlockCom,
+    ButtonSwitchCom
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    return {
+      ...toRefs(state)
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/staging/zbgly/left/trend-analysis-chart.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="chart-main">
+    <div class="chart" ref="ref_chart"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import * as echarts from 'echarts';
+
+export default defineComponent({
+  name: '',
+  components: {},
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    const ref_chart = ref();
+    const initChart = () => {
+      const chart = echarts.init(ref_chart.value);
+      const option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            crossStyle: {
+              color: '#999'
+            }
+          }
+        },
+        toolbox: {
+          feature: {
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar'] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        legend: {
+          data: ['Evaporation', 'Precipitation', 'Temperature']
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+            axisPointer: {
+              type: 'shadow'
+            }
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            name: 'Precipitation',
+            min: 0,
+            max: 250,
+            interval: 50,
+            axisLabel: {
+              formatter: '{value} ml'
+            }
+          },
+          {
+            type: 'value',
+            name: 'Temperature',
+            min: 0,
+            max: 25,
+            interval: 5,
+            axisLabel: {
+              formatter: '{value} °C'
+            }
+          }
+        ],
+        series: [
+          {
+            name: 'Evaporation',
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            data: [
+              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
+            ]
+          },
+          {
+            name: 'Precipitation',
+            type: 'bar',
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' ml';
+              }
+            },
+            data: [
+              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
+            ]
+          },
+          {
+            name: 'Temperature',
+            type: 'line',
+            yAxisIndex: 1,
+            tooltip: {
+              valueFormatter: function (value) {
+                return value + ' °C';
+              }
+            },
+            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+          }
+        ]
+      };
+      chart.setOption(option);
+    }
+    onMounted(() => {
+      initChart()
+    })
+    return {
+      ...toRefs(state),
+      ref_chart
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+  .chart-main {
+    width: 100%;
+    height: 100%;
+    .chart {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>

src/views/staging/zby/index.vue

@@ -1,5 +1,9 @@
 <template>
-  值班员
+  <div class="staging-layout">
+    <div class="staging-left">1</div>
+    <div class="staging-center">2</div>
+    <div class="staging-right">3</div>
+  </div>
 </template>
 
 <script lang="ts">